无延迟地连续播放 3 个精灵
Play 3 sprites sequentially without delays
我有一张很大的 spritesheet,一张 2048 spritesheet 放不下。因此我将它分成 3 个 spritesheet(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 个不同精灵组合而成的精灵,并且精灵 1、2、3 播放(在移动设备上)之间存在明显的延迟。延迟在第 2 个和所有其他周期消失。
但是第一个周期的延迟是不可接受的并且非常烦人。
对于如何从一开始就顺利 运行 有什么想法吗?谢谢!
首先,值得注意的是 EaselJS 直接支持多图像精灵表。查看 SpriteSheet 文档了解更多信息。
您看到的延迟是将新的大纹理(图像)从内存加载到移动 GPU 的成本。您可以尝试通过显示列表中的三个位图(或精灵)强制图像进入图形内存,每个图像一个,但不可查看。您可能需要尝试最好的方法来做到这一点。例如,设置 visible=false
或 alpha=0
将不起作用,因为元素将被跳过。将它们移出边界可能会起作用,或者按比例缩放它们
我有一张很大的 spritesheet,一张 2048 spritesheet 放不下。因此我将它分成 3 个 spritesheet(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 个不同精灵组合而成的精灵,并且精灵 1、2、3 播放(在移动设备上)之间存在明显的延迟。延迟在第 2 个和所有其他周期消失。
但是第一个周期的延迟是不可接受的并且非常烦人。
对于如何从一开始就顺利 运行 有什么想法吗?谢谢!
首先,值得注意的是 EaselJS 直接支持多图像精灵表。查看 SpriteSheet 文档了解更多信息。
您看到的延迟是将新的大纹理(图像)从内存加载到移动 GPU 的成本。您可以尝试通过显示列表中的三个位图(或精灵)强制图像进入图形内存,每个图像一个,但不可查看。您可能需要尝试最好的方法来做到这一点。例如,设置 visible=false
或 alpha=0
将不起作用,因为元素将被跳过。将它们移出边界可能会起作用,或者按比例缩放它们