渲染循环
现在您已经了解了系统的主要部分,让我们来看看这些部分是如何协同工作,将您的项目呈现在屏幕上的。 与网页不同的是,PixiJS 会不断更新和重新绘制,一遍又一遍。 你更新对象,然后 PixiJS 将它们渲染到屏幕上,然后重复这个过程。 我们称这个循环为渲染循环。
任何 PixiJS 项目最主要的部分包含更新 + 渲染循环,编写更新,PixiJS 会处理整个渲染。
发生在渲染循环中的每一帧主要包含三个部分。
运行 Ticker 回调
第一步是计算从上一帧开始已经过去了多长时间,然后根据时间差调用应用程序对象的 ticker 回调。 这样,项目代码就可以制作动画并更新舞台上的精灵等,为渲染做好准备。
更新场景图像
场景图包含您正在绘制的事物(精灵、文本等),并且这些对象处于树状层次结构中。这些对象处于树状层次结构中。 通过移动、旋转等方式更新游戏对象后,PixiJS 需要计算场景中每个对象的新位置和状态,然后才能开始绘制。
渲染场景图像
现在我们的游戏状态已经更新,是时候将其绘制到屏幕上了。渲染系统会从场景图的根节点(app.stage)开始,渲染每个对象及其子节点,直到绘制完所有对象。 在此过程中不会进行剔除或其他巧妙的处理。如果在舞台的可见部分之外有大量对象,则需要将其禁用作为一种优化方法(视椎体剔除)。
帧频
渲染循环不可能无限快地运行--在屏幕上绘制图像需要时间。此外,每次屏幕更新(通常为 60fps,但较新的显示器可支持 144fps 或更高)时,帧的更新次数一般不会超过一次。最后,PixiJS 是在 Chrome 或 Firefox 等网络浏览器的环境中运行的。浏览器本身必须平衡各种内部操作的需要和为任何打开的标签页提供服务的需要。综上所述,确定何时绘制帧是一个复杂的问题。
如果您想调整该行为,可以在 Ticker 上设置 minFPS
和 maxFPS
属性。请注意,由于环境复杂,项目无法保证给定的 FPS。 在 ticker 回调中使用传递的 ticker.deltaTime
值来缩放任何动画,以确保流畅播放。
自定义渲染循环
以上介绍的是应用程序辅助类开箱即用的默认呈现循环。对于希望解决特定问题的高级用户来说,创建呈现循环还有许多其他方法。在制作原型和学习 PixiJS 的过程中,建议使用应用程序提供的系统。