EaselJS for Ticker的最佳实践是什么？

Question

目前我遇到的问题是,当我在本地运行(在ubuntuVM中),使用WebStorm作为网络服务器时,我运行我的游戏并且它运行良好且响应迅速,但当我将其上传到我的虚拟主机和游戏时从那里它是滞后的,点击事件没有响应.

我认为这是因为我错误地使用了Ticker(你如何调用阶段的更新？):

canvas = document.getElementById('myCanvas');
canvas = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", canvas);

所有容器,精灵等都是这个阶段的孩子

http://thegamingproject.org/webgames/ludumdare28/ < - lagginess

Answer 1

为了解决滞后问题,我建议你先考虑调整你的FPS Ticker.在这里查看文档.您可能还想尝试使用enableMouseOver频率.注意动画,并在进行alpha淡化之前利用缓存等.我发现easeljs库会因为大量详细的矢量内容而滞后(例如从Flash IDE导出时).使用Bitmaps的时候可以限制绘图指令.

至于Ticker监听器,我看到你有以下2个选项:

1.将舞台添加为Ticker的侦听器

这是最容易管理的,但它可以让您对渲染的控制最少.根据这个createjs教程,这仅建议用于快速测试.

例

createjs.Ticker.addEventListener("tick", stage);

好处

• 在stage.update()为每个刻度自动调用
• 需要低维护或逻辑

缺点

• 对阶段反映变化的最低控制量
• 可能不是"实时"游戏的最佳解决方案

2.在自定义函数中调用stage.update()

该解决方案允许手动控制以更新阶段.如果您需要"暂停"更新内容(例如游戏),这可能很有用.

例

createjs.Ticker.addEventListener("tick", tick);

function tick(){
     var isDirty = false;
     //some custom logic

     if(isDirty) {
          stage.update();

     }
}

好处

• 完全控制绘图更改的时间反映在舞台上.
• 可以通过不更新每个滴答来提高性能

缺点

• 通过向每个tick添加过多的自定义逻辑来引入性能问题的可能性
• 需要更多管理开销