Pixi’VN资源文件
Pixi’VN 中资源类型和存储选项（本地或在线）概览及使用示例。
资源可以本地存储在项目中，也可以在线托管。 频繁使用的资源——例如角色立绘、背景图和背景音乐——最好保存在本地。 仅使用一次或体积较大的可选文件更适合在线托管。 两种方式各有取舍：
本地资源
要在本地保存和使用资源，你可以使用任何文件夹——没有限制。 但建议使用 src/assets 文件夹。 在此文件夹中，您可以创建子文件夹以更好地组织资源。
PixiJS AssetPack 已通过 Vite.js 集成预配置在 Pixi’VN 项目模板中——自动处理和优化您的资源，让您专注于构建项目。
在开发阶段（vite dev），它会监视 src/assets 文件夹的变化并即时处理。 在生产构建阶段（vite build），它会在打包前执行完整的优化流程。
它应用的优化包括：
- 压缩 — 减小文件大小以加快加载速度。
- 格式转换 — 在支持的情况下将图像转换为现代格式（如 WebP、AVIF）。
- 纹理图集 — 将多张小图像合并为一张精灵表，以减少绘制调用。
处理完成后，它会在 public/assets 中生成优化后的文件，并生成 src/assets/manifest.gen.json 文件，其中包含所有资源包及其路径的列表。 这些输出随后会被 PixiJS 用来高效地加载资源。
bgm_cheerful.wav
sfx_whoosh.wav
background_main_menu.png
bg01-hallway.webp
mc-neutral.png
manifest.gen.json
index.ts
.assetpack.ts
vite.config.ts
{
"bundles": [
{
"name": "audio",
"assets": [
{
"alias": "bgm_cheerful",
"src": "./assets/audio/bgm_cheerful.wav"
},
{
"alias": "sfx_whoosh",
"src": "./assets/audio/sfx_whoosh.wav"
}
]
},
{
"name": "mainmenu",
"assets": [
{
"alias": "background_main_menu",
"src": "./assets/mainmenu/background_main_menu.png"
}
]
},
{
"name": "start",
"assets": [
{
"alias": "bg01-hallway",
"src": "./assets/start/bg01-hallway.webp"
}
]
},
{
"name": "mc",
"assets": [
{
"alias": "mc-neutral",
"src": "./assets/mc/mc-neutral.png"
}
]
}
]
}资源托管
您可以将资源保存到线上。 如果您想节省项目空间，或者想创建一款无需提前下载即可在线游玩的游戏，这是一个不错的选择。 您可以使用任何允许上传文件并生成公开 URL 的云服务（需确保所使用的云服务允许 CORS 请求）。
以下是一些流行的在线资源托管选项：
准备好资源后，您需要手动定义游戏可以使用哪些资源，以及它们如何分组到包中。
强烈建议遵循 资源加载最佳实践，以最大程度减少加载时间并避免不必要地阻塞游戏。
所有 Pixi’VN 模板都包含一个 src/assets/index.ts 文件，您可以编辑该文件来注册您的资源：
import generatedManifestJson from "@/assets/manifest.gen.json";
import { AUDIO_BUNDLE_NAME } from "@/constants";
import { startLabel } from "@/content/labels/start.label";
import type { FileRouteTypes } from "@/routeTree.gen";
import type { AssetsManifest } from "@drincs/pixi-vn";
export const manifest: AssetsManifest = {
bundles: [
...generatedManifestJson.bundles,
{
name: AUDIO_BUNDLE_NAME,
assets: [
{
alias: "bgm_cheerful",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/bgm_cheerful.wav",
},
{
alias: "sfx_whoosh",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/sfx_whoosh.wav",
},
],
},
// screens
{
// main menu
name: "/" as FileRouteTypes["fullPaths"],
assets: [
{
alias: "background_main_menu",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/main-menu.png",
},
],
},
// labels
{
name: startLabel.id,
assets: [
{
alias: "bg01-hallway",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/breakdown/bg01-hallway.webp",
},
],
},
// characters
{
name: "mc",
assets: [
{
alias: "mc-neutral",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/characters/mc-neutral.png",
},
],
},
],
};