Flash 到 Html5 Canvas : slow vector graphics

标签 flash html5-canvas vector-graphics frame-rate createjs

我是一名 Flash 开发人员,过去开发过许多游戏。现在我将把它们(如果可能的话)转换为 HTML5/CreateJS。

我使用 Flash CC 中内置的 CreateJS 工具包来转换我的游戏。转换后的游戏在我的桌面上表现良好,但在我尝试过的任何移动设备上速度慢得令人无法接受。

如何使其在移动设备上运行?这是我迁移到 html5 的主要目标。

我知道可以在 cjs 中使用 SpriteSheetBuilder 并将矢量图形预渲染到位图 Sprite 表。但这里的问题是,我在该矢量对象中有很多时间线,并且无法使用 Sprite 表控制它。我想控制 createjs 的每个 Tick 上的每个时间线。你会怎么做?

目前,经过长时间的谷歌搜索,我发现大多数问题都是通过将Flash资源导出到SpriteSheet来解决的。

我的游戏有更多的角色细节,而 Sprite 表不太适合我的情况。有人遇到和我一样的问题吗?请指教。

最佳答案

在 Flash 中您可以尝试避免一些事情来提高性能

  1. 渐变非常昂贵。谨慎使用它们。
  2. 口罩可能很贵。谨慎使用它们,尤其是在内容中有渐变的情况下。
  3. 动画蒙版会导出为单独的帧,并且会使导出的 JavaScript 变得臃肿。这也可能导致内存问题,因为导出的代码必须预先实例化所有内容。
  4. 您可以在静态资源上使用cacheAsBitmap(带有时间线的剪辑将仅限于缓存第一帧)。对此要非常小心,因为大项目会占用大量内存。资源按照创建时的大小进行缓存,因此创建大的内容并在时间轴上缩小它意味着您拥有大的缓存。此技术非常适合不会更改的小剪辑。

重要的是要知道舞台上的所有内容都是预先实例化的 - 因此极长的时间线和大量资源可能无法很好地转换为 HTML。

希望有帮助。提高性能没有 Elixir - 但记住这些事情会有所帮助。

关于Flash 到 Html5 Canvas : slow vector graphics,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29006063/

相关文章:

html - cu3er背景问题

javascript - 围绕曲线弯曲 SVG `<g>`

javascript - 如何制作不透明的形状,而不是 konvajs 中的边框

ios - iOS 中基于实时矢量的 OSM 渲染器(使用 OpenGL ES)

c++ - 用于游戏开发的二维 vector 建模

actionscript-3 - 八哥 Sprite 内部空白空间的触摸事件

javascript - javascript "ended"事件监听器的 Flash 回退?

flash - 如何使计时器准确? (闪光灯/ ActionScript 3.0)

javascript - 你如何在 html5 Canvas 中使用 alpha = 0 绘制到 'erase'

html - 在 Canvas 中绘制光线