性能技巧

🌐 Performance Tips

一般的

🌐 General

• 只有在需要时才进行优化！PixiJS 一开始就可以处理相当多的内容
• 注意你场景的复杂性。你添加的对象越多，事情最终会变得越慢
• 顺序可以提供帮助，例如 sprite/graphic/sprite/graphic 比 sprite/sprite/graphic/graphic 慢
• 一些较旧的移动设备运行速度会稍慢。将选项 useContextAlpha: false 和 antialias: false 传递给渲染器或应用可以帮助提高性能
• 默认情况下，剔除是禁用的，因为通常在应用层面执行此操作更好，或者将对象设置为 cullable = true。如果你的瓶颈在 GPU 上，它将提高性能；如果你的瓶颈在 CPU 上，它将降低性能。

精灵

🌐 Sprites

• 尽可能使用 Spritesheets 来最小化总纹理
• 精灵可以使用最多 16 种不同的纹理进行批处理（取决于硬件）
• 这是渲染内容的最快方式
• 在较旧的设备上使用较小的低分辨率纹理
• 将扩展名 @0.5x.png 添加到 50% 缩放的精灵图，这样 PixiJS 会自动在视觉上将它们加倍
• 抽奖顺序很重要

图形

🌐 Graphics

• 图形对象在不经常修改时速度最快（不包括变换、alpha 或色调！）
• 图形对象在低于一定大小（100 点或更小）时进行批处理
• 小型图形对象与精灵（矩形、三角形）一样快
• 使用数百个图形复杂对象可能会很慢，在这种情况下使用精灵（你可以创建纹理）

质地

🌐 Texture

• 纹理由纹理垃圾收集器自动管理
• 你也可以通过使用 texture.destroy() 自行管理它们
• 如果你计划一次摧毁多个，请在摧毁时添加随机延迟以消除冻结
• 如果你打算自己删除大量纹理，请延迟纹理销毁

文本

🌐 Text

• 避免在每一帧上更改它，因为这可能会很昂贵（每次绘制到画布然后上传到 GPU 时）
• 位图文本为动态更改文本提供了更好的性能
• 文本分辨率与渲染器分辨率匹配，可以通过设置 resolution 属性自行降低分辨率，这样可以消耗更少的内存

面具

🌐 Masks

• 如果使用太多口罩，成本可能会很高：例如，几百个口罩会真的让事情变慢
• 轴对齐矩形蒙版速度最快（因为它们使用剪刀矩形）
• 图形蒙版是第二快的（因为它们使用模板缓冲区）
• 精灵遮罩是第三快的（它们使用滤镜）。它们非常耗费资源。不要在场景中使用太多！

过滤器

🌐 Filters

• 释放内存：container.filters = null
• 如果你知道它们的尺寸：container.filterArea = new Rectangle(x,y,w,h)。这可以加快速度，因为这意味着不需要测量该对象
• 过滤器很昂贵，使用太多会开始减慢速度！

BlendModes

• 不同的混合模式会导致批次中断（去优化）
• ScreenSprite / NormalSprite / ScreenSprite / NormalSprite 将是 4 次绘制调用
• ScreenSprite / ScreenSprite / NormalSprite / NormalSprite 将是 2 次绘制调用

事件

🌐 Events

• 如果一个对象没有可交互的子对象，请使用 interactiveChildren = false。事件系统将能够避免遍历该对象
• 如上所示设置 hitArea = new Rectangle(x,y,w,h) 应该可以阻止事件系统爬行通过对象