清单和打包

🌐 Manifests & Bundles

PixiJS 通过 Manifests 和 Bundles 提供了一种结构化且可扩展的资源管理方法。这是管理 PixiJS 应用中资源的推荐方式，尤其适用于较大型的项目或那些需要根据上下文或用户交互动态加载资源的项目。本指南将解释它们是什么、如何使用它们，以及如何使用 AssetPack 高效生成它们 —— 这是一个用于自动创建 manifest 和 bundle 的工具。

🌐 PixiJS has a structured and scalable approach to asset management through Manifests and Bundles. This is the recommended way to manage assets in your PixiJS applications, especially for larger projects or those that require dynamic loading of assets based on context or user interaction. This guide explains what they are, how to use them, and how to generate them efficiently using AssetPack — a tool designed to automate manifest and bundle creation.

什么是清单？

🌐 What Is a Manifest?

一个清单是一个描述对象，用于定义你的资源加载策略。它列出了所有的资源包，每个资源包都按名称和别名分组包含资源。这种结构允许根据应用的上下文懒加载资源（例如加载屏幕资源、特定关卡内容等）。

🌐 A Manifest is a descriptor object that defines your asset loading strategy. It lists all bundles, each of which contains grouped assets by name and alias. This structure allows for lazy-loading assets based on application context (e.g. load screen assets, level-specific content, etc.).

const manifest = {
  bundles: [
    {
      name: 'load-screen',
      assets: [
        { alias: 'background', src: 'sunset.png' },
        { alias: 'bar', src: 'load-bar.{png,webp}' },
      ],
    },
    {
      name: 'game-screen',
      assets: [
        { alias: 'character', src: 'robot.png' },
        { alias: 'enemy', src: 'bad-guy.png' },
      ],
    },
  ],
};

使用清单文件初始化

🌐 Initializing With a Manifest

要使用清单初始化 PixiJS 资源处理：

🌐 To initialize PixiJS asset handling with a manifest:

import { Assets } from 'pixi.js';

await Assets.init({ manifest });

初始化完成后，你可以按名称加载资源包：

🌐 Once initialized, you can load bundles by name:

const loadScreenAssets = await Assets.loadBundle('load-screen');
const gameScreenAssets = await Assets.loadBundle('game-screen');

需要注意的是，你仍然可以通过资源别名直接加载资源，而无需加载整个资源包：

🌐 It should be noted that you can still load assets directly without loading an entire bundle via their alias:

await Assets.init({ manifest });
const background = await Assets.load('background');
const bar = await Assets.load('bar');

什么是 Bundle？

🌐 What Is a Bundle?

打包包是一组通过共享名称识别的资源。虽然打包包可以在清单中预定义，但它们也可以在运行时动态注册。

🌐 A Bundle is a group of assets that are identified by a shared name. While bundles can be pre-defined in a manifest, they can also be dynamically registered at runtime.

动态添加 Bundle

🌐 Adding a Bundle Dynamically

此方法对于需要动态定义 bundle 的场景非常有用：

🌐 This approach is helpful for scenarios where you want to define bundles on the fly:

import { Assets } from 'pixi.js';

Assets.addBundle('animals', [
  { alias: 'bunny', src: 'bunny.png' },
  { alias: 'chicken', src: 'chicken.png' },
  { alias: 'thumper', src: 'thumper.png' },
]);

const assets = await Assets.loadBundle('animals');

// or load a specific asset from the bundle
const bunny = await Assets.load('bunny');

推荐工具：AssetPack

🌐 Recommended Tool: AssetPack

手动管理清单和包可能容易出错。AssetPack 是一个命令行工具，可以扫描你的资源文件夹并自动生成优化的清单和包。

🌐 Managing manifests and bundles manually can be error-prone. AssetPack is a CLI tool that scans your assets folder and generates optimized manifests and bundles automatically.

主要优势

🌐 Key Benefits

按目录或模式组织资源
支持 PixiJS 清单格式的输出
减少样板代码和手动错误的风险

你可以将 AssetPack 集成到你的构建管道中，以生成清单文件并使用 Assets.init({ manifest }) 加载它。

🌐 You can integrate AssetPack into your build pipeline to generate the manifest file and load it using Assets.init({ manifest }).

什么是清单？​

使用清单文件初始化​

什么是 Bundle？​

动态添加 Bundle​

推荐工具：AssetPack​