架构

🌐 Architecture

这是构成 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 渲染器。
容器	创建场景图的主要场景对象：可显示对象的树形结构，例如精灵、图形和文本。更多详情请参见 场景图。
资源	资源系统提供用于异步加载资源（如图片和音频文件）的工具。
Ticker	Ticker 根据时钟提供周期性回调。你的游戏更新逻辑通常会在每帧响应一次跳动时运行。你可以同时使用多个 Ticker。
应用	该应用是一个简单的助手，将 Loader、Ticker 和 Renderer 封装成一个单一的、方便易用的对象。非常适合快速入门、原型设计以及构建简单项目。
事件	PixiJS 支持基于指针的交互——使对象可点击、触发悬停事件等。
可访问性	我们的显示系统中贯穿了一整套工具，用于实现键盘和屏幕阅读器的可访问性。
滤镜	PixiJS 支持各种滤镜，包括自定义着色器，用于对可渲染对象应用效果。

扩展

🌐 Extensions

PixiJS v8 完全围绕扩展的概念构建。PixiJS 中的每个系统都作为模块化扩展实现。这使得 PixiJS 保持轻量、灵活且易于扩展。

🌐 PixiJS v8 is built entirely around the concept of extensions. Every system in PixiJS is implemented as a modular extension. This allows PixiJS to remain lightweight, flexible, and easy to extend.

info

在大多数情况下，除非你正在开发第三方库或为 PixiJS 生态系统本身做出贡献，否则你无需直接与扩展系统交互。

扩展类型

🌐 Extension Types

PixiJS 支持多种扩展类型，每种扩展类型在架构中都发挥着独特的作用：

🌐 PixiJS supports a wide range of extension types, each serving a unique role in the architecture:

资源

🌐 Assets

• ExtensionType.Asset：将加载器、解析器、缓存和检测扩展组合成一个方便的对象，无需单独注册每个对象。
• ExtensionType.LoadParser：加载图片、JSON、视频等资源。
• ExtensionType.ResolveParser：将资源 URL 转换为加载器可以使用的格式。
• ExtensionType.CacheParser：确定特定资源的缓存行为。
• ExtensionType.DetectionParser：标识当前平台上的资源格式支持。

渲染器 (WebGL、WebGPU、Canvas)

🌐 Renderer (WebGL, WebGPU, Canvas)

• ExtensionType.WebGLSystem、ExtensionType.WebGPUSystem、ExtensionType.CanvasSystem：将系统添加到它们各自的渲染器中。这些系统的功能可以差异很大，从管理纹理到辅助功能。
• ExtensionType.WebGLPipes、ExtensionType.WebGPUPipes、ExtensionType.CanvasPipes：添加一个新的渲染管道。RenderPipes 专门用于渲染像网格这样的可渲染对象
• ExtensionType.WebGLPipesAdaptor、ExtensionType.WebGPUPipesAdaptor、ExtensionType.CanvasPipesAdaptor：为各自的渲染器调整渲染管道。

应用

🌐 Application

• ExtensionType.Application：用于扩展 Application 生命周期的插件。例如，TickerPlugin 和 ResizePlugin 都是应用扩展。

环境

🌐 Environment

• ExtensionType.Environment：用于检测和配置特定平台的行为。这对于配置 PixiJS 在 Node.js、Web Workers 或浏览器等环境中工作非常有用。

其他（主要内部使用）

🌐 Other (Primarily Internal Use)

这些扩展类型主要在内部使用，在大多数面向用户的应用中通常不需要：

🌐 These extension types are mainly used internally and are typically not required in most user-facing applications:

• ExtensionType.MaskEffect：由 MaskEffectManager 用于自定义遮罩行为。
• ExtensionType.BlendMode：一种用于创建新的高级混合模式的扩展。
• ExtensionType.TextureSource：一种将用于自动检测资源类型的扩展类型，例如 VideoSource
• ExtensionType.ShapeBuilder：一种用于构建和三角剖分图形中使用的自定义形状的扩展。
• ExtensionType.Batcher：一种用于创建渲染中使用的自定义批处理器的扩展。

创建扩展

🌐 Creating Extensions

PixiJS 中的 extensions 对象是用于管理扩展的全局注册表。扩展必须声明一个包含元数据的 extension 字段，并通过 extensions.add(...) 进行注册。

🌐 The extensions object in PixiJS is a global registry for managing extensions. Extensions must declare an extension field with metadata, and are registered via extensions.add(...).

import { extensions, ExtensionType } from 'pixi.js';

const myLoader = {
  extension: {
    type: ExtensionType.LoadParser,
    name: 'my-loader',
  },
  test(url) {
    /* logic */
  },
  load(url) {
    /* logic */
  },
};

extensions.add(myLoader);