使用SpriteSheet在SpriteStage上渲染的动画不能正确显示

Animations rendered using SpriteSheet on a SpriteStage are not displayed properly

本文关键字：不能 动画 显示 SpriteSheet SpriteStage 使用      更新时间：2023-09-26

我正在使用精灵表生成器从通用的MovieClip生成SpriteSheet类型对象。之后，我使用SpriteSheet创建一个精灵类型的对象，包含一个时间轴，我将其添加到SpriteStage中，如下所示:

 var spriteStage = new createjs.SpriteStage(canvas);
 var sprite = new createjs.Sprite(spriteSheet);
 spriteStage.addChild(sprite);
 sprite.play();
 createjs.Ticker.addEventListener("tick", spriteStage);

的问题是:由此产生的是一个破碎的动画。看起来好像只有几帧被显示，动画要么快速循环这几帧，要么什么都不做。

使用console.log(sprite.currentFrame)上的滴答更新功能，我可以看到所有帧以每秒30的速率递增，但实际显示的并不与此相对应。

请注意，使用正常的Stage来添加和播放Sprite动画效果很好。此外，根据Chrome://gpu, WebGL是启用的，所以这也不是问题。

SpriteStage需要SpriteContainers，它引用精灵可以使用的单个图像。http://www.createjs.com/docs/easeljs/classes/SpriteContainer.html

这是一种较老的WebGL方法——所以你可能对StageGL感兴趣，StageGL是一种新的EaselJS方法，我们正在进行beta测试，应该很快就会发布。基本上，它的工作原理与Stage相同，但可以接受更多内容(并且速度更快!)请注意，您上面的方法与StageGL的工作方式更内联。

在GitHub有一个分支:https://github.com/CreateJS/EaselJS/tree/StageGL-beta

我们仍在完善文档和演示(由于其他优先事项而延迟)，但希望能尽快标记。

相关文章：