跳到主要内容
版本:v8.x

渲染循环

现在你已经了解了系统的主要部分,接下来我们看看这些部分如何协同工作才能将你的项目呈现到屏幕上。与网页不同,PixiJS 会持续不断地更新和重新绘制自身。你更新对象,然后 PixiJS 将它们渲染到屏幕上,然后此流程重复进行。我们称此周期为渲染循环。

任何 PixiJS 项目的主要部分都包含在此更新 + 渲染周期中。你编写更新代码,PixiJS 负责处理渲染。

我们来看看渲染循环中每帧的情况。其有三个主要步骤。

运行计时器回调

第一步是计算自上一帧以来经过了多少时间,然后使用此时间增量调用应用程序对象的计时器回调。这允许项目代码为舞台上的精灵等执行动画和更新,以准备进行渲染。

更新场景图

我们将在下一指南中详细讨论什么是场景图以及它由什么组成,但是现在,你只需要了解它包含了你要绘制的内容(精灵、文本等),并且这些对象以树状结构组织在一起。在通过移动、旋转等方式更新游戏对象后,PixiJS 需要计算场景中每个对象的新位置和状态,然后才能开始绘制。

渲染场景图

现在游戏状态已更新,此时应将其绘制到屏幕上了。渲染系统从场景图的根(app.stage)开始,并开始渲染各个对象及其子级,直至所有对象均已绘制完毕。该过程中没有内置裁剪或其他诀窍。如果您在舞台的可视部分之外有很多对象,那么您需要考虑禁用它们作为一种优化措施。

帧速率

关于帧速率的说明。渲染循环无法无限快地运行 - 在屏幕上绘制内容需要时间。此外,帧更新一般不会超过每次屏幕更新一次(通常为 60fps,但较新的显示器可以支持 144fps 及以上)。最后,PixiJS 在 Chrome 或 Firefox 等网络浏览器的上下文中运行。浏览器本身必须平衡各种内部操作与为所有打开的选项卡提供服务之间的需求。所有这些都表明,确定何时绘制帧是一个复杂的问题。

如果您想要调整该行为,则可以设置 Ticker 上的 minFPSmaxFPS 属性,以向 PixiJS 提供您希望支持的节拍速度范围方面的提示。但请注意,由于环境复杂,您的项目不能保证给定的 FPS。在您的节拍回调中使用传递的 ticker.deltaTime 值来缩放所有动画,以确保平滑回放。

自定义渲染循环

我们刚刚介绍的是 Application 辅助程序类开箱即用的默认渲染循环。还有许多其他创建渲染循环的方式,这可能对试图解决给定问题的高级用户有所帮助。在对 PixiJS 进行原型设计和学习时,建议坚持使用 Application 提供的系统。