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

Question

目前我遇到的问题是，当我在本地（在ubuntuVM中）运行时，使用WebStorm作为网络服务器，我运行我的游戏并且它运行良好且响应迅速，但当我将其上传到我的webhosting并从那里播放它是滞后的，点击事件没有响应。

我认为这是因为我错误地使用了Ticker（你如何调用阶段的更新？）：

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

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

http://thegamingproject.org/webgames/ludumdare28/＆lt; - lagginess

Answer 1

为了解决滞后问题，我建议你先考虑在Ticker上调整你的FPS。查看文档here。您可能还想试用enableMouseOver frequency。注意动画，并在进行alpha淡化等之前利用caching。我发现easeljs库会滞后一些带有大量详细的矢量内容（例如从Flash IDE导出时） ）。如果可以限制绘图说明，请使用Bitmaps。

至于Ticker听众，我看到你有以下2个选项：

1。将舞台作为侦听器添加到Ticker

这是最容易管理的，但它可以让您对渲染的控制程度最低。根据{{​​3}}，这仅建议用于快速测试。

示例

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();

     }
}

<强>优点

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

<强>缺点

• 通过为每个刻度添加过多的自定义逻辑来引入性能问题的可能性
• 需要更多管理费用