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

Posted

技术标签:

【中文标题】无延迟地连续播放 3 个精灵【英文标题】:Play 3 sprites sequentially without delays 【发布时间】:2015-11-12 13:01:16 【问题描述】:

我有一个很大的精灵表,它不适合一个 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 次和所有后续循环中消失。

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

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

感谢您的宝贵回复,gskinner!我注意到一件有趣的事情。即使我使用可见设置为真/假来隐藏/显示每个精灵表,它也不会延迟第二个周期。但是我将可见属性设置为 false 并调用 stop() 方法。它仅在第一个周期延迟。但是,如果我再次调用 playSprite() 方法(在单击按钮时链接)并且它确实会再次延迟,即使它已经在播放了......奇怪,我还无法确定原因。

以上是关于无延迟地连续播放 3 个精灵的主要内容,如果未能解决你的问题,请参考以下文章

连续播放声音 onTouch()

播放多个连续音频文件后延迟

Web:如何无延迟地一个接一个地播放音频文件?

HTML 如何让几个视频连续并循环播放,给段代码

按键精灵:如果某个字连续出现10次,则执行…… 公式应该怎么写

iOS AUSampler 连续播放 MIDI 音符