Skip to main content

解析器

🌐 Resolver

在 PixiJS 中，资源管理围绕 UnresolvedAsset 和 ResolvedAsset 的概念展开。该系统旨在支持多格式资源、条件加载以及基于平台能力（例如 WebP 支持、设备分辨率或性能限制）的运行时优化。

🌐 In PixiJS, asset management centers around the concept of UnresolvedAsset and ResolvedAsset. This system is designed to support multi-format assets, conditional loading, and runtime optimization based on platform capabilities (e.g., WebP support, device resolution, or performance constraints).

开发者不是指定一个固定的 URL，而是描述可能被加载的资源——PixiJS 会动态选择最佳选项。

🌐 Rather than specifying a fixed URL, developers describe what assets could be loaded — and PixiJS selects the best option dynamically.

解析器生命周期​

🌐 Resolver Lifecycle

分辨率过程包含四个关键步骤：

🌐 The resolution process involves four key steps:

  1. 未解析资源创建 使用字符串或对象定义的资源会在内部规范化为 UnresolvedAsset 实例。这些实例包括别名、通配路径、解析器提示和自定义数据等元数据。
  2. 源扩展 UnresolvedAsset 的 src 字段可以是一个字符串或字符串数组。PixiJS 会将任何通配符模式（例如 myAsset@{1,2}x.{png,webp}）扩展为具体的候选 URL 列表。
  3. 最佳匹配选择 PixiJS 会评估所有候选 URL，并使用平台感知的启发式方法来选择最合适的资源。影响因素包括支持的格式（例如 WebP 与 PNG）、设备像素比以及自定义配置，如首选格式。
  4. 已解析资源输出 结果是一个 ResolvedAsset，其中包含特定的 URL 和所有所需的元数据，已准备好传递给相关解析器并加载到内存中。

使用未解析的资源​

🌐 Using Unresolved Assets

UnresolvedAsset 是在 PixiJS 中用来定义资源的主要结构。它允许你指定源 URL、别名以及加载所需的任何附加数据。它们更复杂，但也更强大。

🌐 An UnresolvedAsset is the primary structure used to define assets in PixiJS. It allows you to specify the source URL(s), alias(es), and any additional data needed for loading. They are more complex, but are also more powerful.

字段类型描述
aliasstring | string[]一个或多个用于在以后引用此资源的别名。
srcstring | string[]一个或多个资源候选的路径。支持通配符。
loadParser（可选）string用于处理该资源的特定解析器（例如 'loadTextures'、'loadJson'）。
data（可选）any要传递给加载器的额外数据。此项取决于解析器类型。

示例​

🌐 Examples

加载单个资源​

🌐 Loading a Single Asset

import { Assets } from 'pixi.js';

await Assets.load({
  alias: 'bunny',
  src: 'images/bunny.png',
});

使用显式解析器和加载器选项加载​

🌐 Loading with Explicit Parser and Loader Options

await Assets.load({
  alias: 'bunny',
  src: 'images/bunny.png',
  loadParser: 'loadTextures',
  data: {
    alphaMode: 'no-premultiply-alpha',
  },
});

使用通配符实现响应式和格式感知加载​

🌐 Using Wildcards for Responsive and Format-Aware Loading

await Assets.load({
  alias: 'bunny',
  src: 'images/bunny@{0.5,1,2}x.{png,webp}',
});

此模式内部扩展为：

🌐 This pattern expands internally to:

[
  'images/bunny@0.5x.png',
  'images/bunny@0.5x.webp',
  'images/bunny@1x.png',
  'images/bunny@1x.webp',
  'images/bunny@2x.png',
  'images/bunny@2x.webp',
];

PixiJS 将根据运行时功能选择最佳匹配（例如，如果支持，则选择 WebP；如果在高分辨率显示器上，则选择 2x）。

🌐 PixiJS will select the best match depending on runtime capabilities (e.g. chooses WebP if supported, 2x if on a high-res display).

🌐 Related Tools and Features

  • AssetPack：如果你正在管理大型资源集，AssetPack 可以使用通配符模式生成优化的清单，并自动输出 UnresolvedAsset 结构。
  • 资源清单与包：使用 清单和包 来预定义未解析资源的组，并通过 Assets.loadBundle 加载它们。