架构概述
¥Architecture Overview
好的,既然你已经了解了构建 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.
代码
¥The Code
在我们讨论代码的布局之前,让我们先讨论一下它所在的位置。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.
组件
¥The Components
以下是构成 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.
主要组件
¥Major Components
组件 | 描述 |
---|---|
渲染器 | PixiJS 系统的核心是渲染器,它显示场景图并将其绘制到屏幕上。PixiJS 会自动决定是否在后台为你提供 WebGPU 或 WebGL 渲染器。 |
容器 | 创建场景图的主场景对象:要显示的可渲染对象树,例如精灵、图形和文本。详细信息请参见 场景图。 |
资源 | Asset 系统提供了异步加载图片、音频文件等资源的工具。 |
股票行情指示器 | 代码提供基于时钟的定期回调。你的游戏更新逻辑通常会响应每帧一次的勾选而运行。你可以同时使用多个代码。 |
应用 | 该应用是一个简单的辅助程序,它将加载器、Ticker 和 Renderer 封装到一个方便易用的对象中。非常适合快速入门、原型设计和构建简单的项目。 |
事件 | PixiJS 支持基于指针的交互 - 使对象可点击、触发悬停事件等。 |
无障碍 | 我们的显示系统中包含了一组丰富的工具,用于实现键盘和屏幕阅读器的可访问性。 |