Skip to main content

架构概述


好的,既然你已经了解了构建 PixiJS 应用是多么容易,那么让我们深入了解细节。 对于基础知识部分的其余部分,我们将从高层次开始深入到细节。 我们将首先概述 PixiJS 是如何组合在一起的。

英:OK, now that you've gotten a feel for how easy it is to build a PixiJS application, let's get into the specifics. For the rest of the Basics section, we're going to work from the high level down to the details. We'll start with an overview of how PixiJS is put together.

代码

在我们讨论代码的布局之前,让我们先讨论一下它所在的位置。 PixiJS 是托管在 GitHub 上的开源产品。 与任何 GitHub 存储库一样,你可以浏览和下载每个 PixiJS 类的原始源文件,以及搜索现有问题和错误,甚至提交你自己的问题和错误。 PixiJS 是用名为 TypeScript 的 JavaScript 变体编写的,它可以通过预编译步骤在 JavaScript 中进行类型检查。

英:Before we get into how the code is layed out, let's talk about where it lives. PixiJS is an open source product hosted on GitHub. Like any GitHub repo, you can browse and download the raw source files for each PixiJS class, as well as search existing issues & bugs, and even submit your own. PixiJS is written in a JavaScript variant called TypeScript, which enables type-checking in JavaScript via a pre-compile step.

组件

PixiJS 是一个模块化渲染引擎。 生成、更新和显示内容所需的每个任务都被分解为自己的组件。 这不仅使代码更清晰,而且还提供了更大的可扩展性。 此外,通过使用 PixiJS 定制工具,可以构建仅包含项目所需功能子集的自定义 PixiJS 文件,从而节省下载大小。

英:PixiJS is a modular rendering engine. Each task required for generating, updating and displaying content is broken out into its own component. Not only does this make the code cleaner, it allows for greater extensibility. Additionally, with the use of the PixiJS Customize tool, it's possible to build a custom PixiJS file containing only the subset of features your project needs, saving download size.

以下是构成 PixiJS 的主要组件的列表。 请注意,此列表并不详尽。 此外,不必太担心每个组件的工作原理。 这里的目标是让你在我们开始探索引擎时了解引擎盖下的内容。

英:Here's a list of the major components that make up PixiJS. Note that this list isn't exhaustive. Additionally, don't worry too much about how each component works. The goal here is to give you a feel for what's under the hood as we start exploring the engine.

主要组件

组件描述
渲染器 @pixi/corePixiJS 系统的核心是渲染器,它显示场景图并将其绘制到屏幕上。 PixiJS 的默认渲染器底层基于 WebGL。
容器 @pixi/display创建场景图的主显示对象: 要显示的可渲染对象树,例如精灵、图形和文本。 详细信息请参见 场景图
加载器 @pixi/loader加载器系统提供了异步加载图片和音频文件等资源的工具。
股票行情指示器 @pixi/ticker代码提供基于时钟的定期回调。 你的游戏更新逻辑通常会响应每帧一次的勾选而运行。 你可以同时使用多个代码。
应用 @pixi/app该应用是一个简单的辅助程序,它将加载器、Ticker 和 Renderer 封装到一个方便易用的对象中。 非常适合快速入门、原型设计和构建简单的项目。
互动 @pixi/interactionPixiJS 支持触摸和基于鼠标的交互 - 使对象可点击、触发悬停事件等。
无障碍 @pixi/accessibility我们的显示系统中包含了一组丰富的工具,用于实现键盘和屏幕阅读器的可访问性。