Skip to main content

渲染循环

¥Render Loop

现在你已经了解了系统的主要部分,让我们看看这些部分如何协同工作以将你的项目显示在屏幕上。与网页不同,PixiJS 会一遍又一遍地不断更新和重新绘制自身。你更新对象,然后 PixiJS 将它们渲染到屏幕上,然后重复该过程。我们将此循环称为渲染循环。

¥Now that you understand the major parts of the system, let's look at how these parts work together to get your project onto the screen. Unlike a web page, PixiJS is constantly updating and re-drawing itself, over and over. You update your objects, then PixiJS renders them to the screen, then the process repeats. We call this cycle the render loop.

任何 PixiJS 项目的大部分都包含在这个更新 + 渲染周期中。你编写更新代码,PixiJS 处理渲染。

¥The majority of any PixiJS project is contained in this update + render cycle. You code the updates, PixiJS handles the rendering.

让我们来看看渲染循环的每一帧发生了什么。主要分为三个步骤。

¥Let's walk through what happens each frame of the render loop. There are three main steps.

运行股票代码回调

¥Running Ticker Callbacks

第一步是计算自上一帧以来已经过去了多少时间,然后使用该时间增量调用应用对象的代码回调。这允许你的项目代码在舞台上制作动画并更新精灵等,以准备渲染。

¥The first step is to calculate how much time has elapsed since the last frame, and then call the Application object's ticker callbacks with that time delta. This allows your project's code to animate and update the sprites, etc. on the stage in preparation for rendering.

更新场景图

¥Updating the Scene Graph

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

¥We'll talk a lot more about what a scene graph is and what it's made of in the next guide, but for now, all you need to know is that it contains the things you're drawing - sprites, text, etc. - and that these objects are in a tree-like hierarchy. After you've updated your game objects by moving, rotating and so forth, PixiJS needs to calculate the new positions and state of every object in the scene, before it can start drawing.

渲染场景图

¥Rendering the Scene Graph

现在我们的游戏状态已经更新,是时候将其绘制到屏幕上了。渲染系统从场景图的根(app.stage)开始,开始渲染每个对象及其子对象,直到绘制完所有对象。这个过程中没有内置任何剔除或其他聪明才智。如果舞台可见部分之外有很多对象,你需要研究禁用它们作为优化。

¥Now that our game's state has been updated, it's time to draw it to the screen. The rendering system starts with the root of the scene graph (app.stage), and starts rendering each object and its children, until all objects have been drawn. No culling or other cleverness is built into this process. If you have lots of objects outside of the visible portion of the stage, you'll want to investigate disabling them as an optimization.

帧率

¥Frame Rates

关于帧速率的注释。渲染循环不能无限快地运行 - 将东西绘制到屏幕上需要时间。此外,每次屏幕更新时帧更新一次以上通常没有什么用处(通常为 60 fps,但较新的显示器可以支持 144 fps 及以上)。最后,PixiJS 在 Chrome 或 Firefox 等网络浏览器的上下文中运行。浏览器本身必须平衡各种内部操作的需求与服务任何打开的选项卡。综上所述,确定何时绘制框架是一个复杂的问题。

¥A note about frame rates. The render loop can't be run infinitely fast - drawing things to the screen takes time. In addition, it's not generally useful to have a frame updated more than once per screen update (commonly 60fps, but newer monitors can support 144fps and up). Finally, PixiJS runs in the context of a web browser like Chrome or Firefox. The browser itself has to balance the needs of various internal operations with servicing any open tabs. All this to say, determining when to draw a frame is a complex issue.

如果你想要调整该行为,你可以在 Ticker 上设置 minFPSmaxFPS 属性,以向 PixiJS 提供有关你想要支持的刻度速度范围的提示。请注意,由于环境复杂,你的项目无法保证给定的 FPS。在股票回调中使用传递的 ticker.deltaTime 值来缩放任何动画以确保流畅播放。

¥In cases where you want to adjust that behavior, you can set the minFPS and maxFPS attributes on a Ticker to give PixiJS hints as to the range of tick speeds you want to support. Just be aware that due to the complex environment, your project cannot guarantee a given FPS. Use the passed ticker.deltaTime value in your ticker callbacks to scale any animations to ensure smooth playback.

自定义渲染循环

¥Custom Render Loops

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

¥What we've just covered is the default render loop provided out of the box by the Application helper class. There are many other ways of creating a render loop that may be helpful for advanced users looking to solve a given problem. While you're prototyping and learning PixiJS, sticking with the Application's provided system is the recommended approach.