html - EaselJS for Ticker 的最佳实践是什么

Question

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

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

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

所有容器、 Sprite 等都是这个阶段的 child

http://thegamingproject.org/webgames/ludumdare28/ <- 滞后

Answer 1

为了解决延迟问题，我建议您首先考虑调整 Ticker 上的 FPS。查看文档 here .您可能还想尝试使用 enableMouseOver frequency .小心动画，并利用caching在做 alpha 淡入淡出等之前我找到了 easeljs库会因包含大量详细的矢量内容(例如从 Flash IDE 导出时)而有点滞后。尽可能使用位图来限制绘图指令。

至于 Ticker 监听器，在我看来，您有以下 2 个选项:

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

这是最容易管理的，尽管它使您对渲染的控制最少。根据this createjs tutorial , 这只推荐用于快速测试。

示例

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

优势

• stage.update() 会在每次报价时自动调用
• 维护或逻辑要求低

缺点

• 对更改何时反射(reflect)在舞台上的控制程度最低
• 可能不是“实时”游戏的最佳解决方案

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

此解决方案允许手动控制更新舞台。如果您需要“暂停”更新内容(例如游戏)，这可能很有用。

示例

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

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

     if(isDirty) {
          stage.update();

     }
}

优势

• 完全控制绘图更改何时反射(reflect)在舞台上。
• 或许可以通过不更新每个 tick 来提高性能

缺点

• 可能会因为在每个 tick 中添加过多的自定义逻辑而引入性能问题
• 需要更多开销来管理