Skip to main content

架构

¥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 渲染器。
容器创建场景图的主场景对象：要显示的可渲染对象树，例如精灵、图形和文本。详细信息请参见 场景图。
资源Asset 系统提供了异步加载图片、音频文件等资源的工具。
股票行情指示器代码提供基于时钟的定期回调。你的游戏更新逻辑通常会响应每帧一次的勾选而运行。你可以同时使用多个代码。
应用该应用是一个简单的辅助程序，它将加载器、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.

信息

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

¥In most cases, you won’t need to interact with the extension system directly unless you are developing a third-party library or contributing to the PixiJS ecosystem itself.

扩展类型​

¥Extension Types

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

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

资源​

¥Assets

  • ExtensionType.Asset：将加载器、解析器、缓存和检测扩展组合成一个方便的对象，无需单独注册每个对象。

    ¥ExtensionType.Asset: Groups together loaders, resolvers, cache and detection extensions into one convenient object instead of having to register each one separately.

  • ExtensionType.LoadParser：加载图片、JSON、视频等资源。

    ¥ExtensionType.LoadParser: Loads resources like images, JSON, videos.

  • ExtensionType.ResolveParser：将资源 URL 转换为加载器可以使用的格式。

    ¥ExtensionType.ResolveParser: Converts asset URLs into a format that can be used by the loader.

  • ExtensionType.CacheParser：确定特定资源的缓存行为。

    ¥ExtensionType.CacheParser: Determines caching behavior for a particular asset.

  • ExtensionType.DetectionParser：标识当前平台上的资源格式支持。

    ¥ExtensionType.DetectionParser: Identifies asset format support on the current platform.

渲染器 (WebGL、WebGPU、Canvas)​

¥Renderer (WebGL, WebGPU, Canvas)

  • ExtensionType.WebGLSystem, ExtensionType.WebGPUSystem, ExtensionType.CanvasSystem:将系统添加到相应的渲染器。这些系统的功能差异很大，从管理纹理到辅助功能。

    ¥ExtensionType.WebGLSystem, ExtensionType.WebGPUSystem, ExtensionType.CanvasSystem: Add systems to their respective renderers. These systems can vary widely in functionality, from managing textures to accessibility features.

  • ExtensionType.WebGLPipes, ExtensionType.WebGPUPipes, ExtensionType.CanvasPipes:添加新的渲染管道。RenderPipes 专门用于渲染网格等可渲染对象。

    ¥ExtensionType.WebGLPipes, ExtensionType.WebGPUPipes, ExtensionType.CanvasPipes: Add a new rendering pipe. RenderPipes are specifically used to render Renderables like a Mesh

  • ExtensionType.WebGLPipesAdaptor, ExtensionType.WebGPUPipesAdaptor, ExtensionType.CanvasPipesAdaptor:根据相应的渲染器调整渲染管道。

    ¥ExtensionType.WebGLPipesAdaptor, ExtensionType.WebGPUPipesAdaptor, ExtensionType.CanvasPipesAdaptor: Adapt rendering pipes for the respective renderers.

应用​

¥Application

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

    ¥ExtensionType.Application: Used for plugins that extend the Application lifecycle. For example the TickerPlugin and ResizePlugin are both application extensions.

环境​

¥Environment

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

    ¥ExtensionType.Environment: Used to detect and configure platform-specific behavior. This can be useful for configuring PixiJS to work in environments like Node.js, Web Workers, or the browser.

其他（主要内部使用）​

¥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.MaskEffect: Used by MaskEffectManager for custom masking behaviors.

  • ExtensionType.BlendMode：一种用于创建新的高级混合模式的扩展。

    ¥ExtensionType.BlendMode: A type of extension for creating a new advanced blend mode.

  • ExtensionType.TextureSource：一种用于自动检测资源类型的扩展，例如 VideoSource

    ¥ExtensionType.TextureSource: A type of extension that will be used to auto detect a resource type E.g VideoSource

  • ExtensionType.ShapeBuilder：一种用于构建和三角剖分图形中使用的自定义形状的扩展。

    ¥ExtensionType.ShapeBuilder: A type of extension for building and triangulating custom shapes used in graphics.

  • ExtensionType.Batcher：一种用于创建渲染中使用的自定义批处理器的扩展。

    ¥ExtensionType.Batcher: A type of extension for creating custom batchers used in rendering.

创建扩展​

¥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);