Question

我有一张大的spritesheet，它不适合一个2048 spritesheet。因此我把它分成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播放之间有一个明显的DELAY（在移动设备上）。在第二次和所有进一步的周期中延迟消失。

但第一个周期的延迟是不可接受的，而且很烦人。

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

Answer 1

首先，值得注意的是EaselJS直接支持多图像精灵表。有关详细信息，请查看SpriteSheet文档。

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

顺序播放3个精灵，没有延迟

1 个答案: