Ticker 的 EaselJS 的最佳实践是啥

Posted 2023-03-05

【中文标题】Ticker 的 EaselJS 的最佳实践是啥

【英文标题】：What is the Best Practice in EaselJS for TickerTicker 的 EaselJS 的最佳实践是什么

【发布时间】：2014-01-15 07:38:14

【问题描述】：

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

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

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

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

http://thegamingproject.org/webgames/ludumdare28/

【参考方案1】：

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

至于 Ticker 监听器，我认为您有以下 2 个选项：

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

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

示例

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

     

优势

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

缺点

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

【讨论】：

关于 1) 不可能做基于时间的动画吧？我需要活动的时间信息。是这样吗？

@MatthiasMax 您确实可以制作基于时间的动画。事实上，他们推荐它，因为它确保动画将运行相同的时间，而不管帧速率如何。 source

感谢您的回答，但我想知道当您没有刻度功能时（如 1 中的情况）将 delta 的逻辑放在哪里。

没有什么说你不能向代码中添加多个刻度监听器，但我认为你应该了解 TweenJS 库，它是 CreateJS 的一部分。它应该可以减少一些编写自定义动画的开销。