无延迟地连续播放 3 个精灵

Question

我有一个很大的精灵表，它不适合一个 2048 精灵表。因此，我将其拆分为 3 个精灵表（3 个 PNG，2048x2048）

但在我的游戏中，它仍然必须作为一个完整的精灵来玩。这是我的做法：

var sprite1 = new createjs.Sprite(ssheet1);
var sprite2 = new createjs.Sprite(ssheet2);
var sprite3 = new createjs.Sprite(ssheet3);

sprite1.on("animationend", sprite1_played);
sprite2.on("animationend", sprite2_played);
sprite3.on("animationend", sprite3_played);

stage.addChild(sprite1, sprite2, sprite3);

... cut here ...

function playSprite()
{
   sprite1.visible = true;
   sprite2.visible = false;
   sprite3.visible = false;

   sprite1.gotoAndPlay("ssh");
}

function sprite1_played()
{
   sprite1.visible = false;
   sprite2.visible = true;
   sprite3.visible = false;

   sprite2.gotoAndPlay("ssh");
}
function sprite2_played()
{
   sprite1.visible = false;
   sprite2.visible = false;
   sprite3.visible = true;

   sprite3.gotoAndPlay("ssh");
}
function sprite3_played()
{
   sprite1.visible = true;
   sprite2.visible = false;
   sprite3.visible = false;

   sprite1.gotoAndPlay("ssh");
}

问题是当我调用 playSprite() 时，它开始播放由 3 个不同精灵组合而成的精灵，并且在 sprite1、2、3 播放之间存在明显的延迟（在移动设备上）。延迟在第 2 次和所有后续循环中消失。

但是第一个周期的延迟是不可接受的并且非常烦人。

您对如何让它从一开始就顺利运行有什么想法吗？谢谢！

Answer 1

首先，值得注意的是 EaselJS 直接支持多图像精灵表。查看 SpriteSheet 文档了解更多信息。

您看到的延迟是将新的大型纹理（图像）从内存加载到移动 GPU 的成本。您可以尝试通过在显示列表中设置三个位图（或 Sprite）（每个图像一个）来强制图像进入图形内存，但不可见。你可能不得不尝试最好的方法来做到这一点。例如，设置visible=false 或alpha=0 将不起作用，因为这些元素将被跳过。将它们移出边界可能会起作用，或者按比例缩放它们