Pixi’VNアセット
Pixi’VN におけるアセットの種類と保存オプション（ローカルまたはオンライン）の概要と使用例。
アセットはプロジェクト内にローカル保存するか、オンラインでホストすることができます。 キャラクタースプライト、背景画像、BGM などの頻繁に使用するアセットはローカルに保存するのが最適です。 一度しか使用しないアセットやサイズの大きなオプションファイルはオンラインホスティングの方が適しています。 それぞれのアプローチにはトレードオフがあります：
ローカルアセット
アセットをローカルに保存して使用するには、任意のフォルダーを使用できます——制限はありません。 ただし、src/assets フォルダーの使用を推奨します。 このフォルダー内にサブフォルダーを作成して、アセットをより整理された状態に保つことができます。
PixiJS AssetPack は、Vite.js インテグレーションを通じて Pixi’VN プロジェクトテンプレートにあらかじめ設定されており、アセットの処理と最適化を自動化することで、プロジェクトの構築に集中できます。
開発中（vite dev）は src/assets フォルダーの変更を監視し、その場で処理します。 本番ビルド（vite build）では、バンドル前に完全な最適化パスを実行します。
適用される最適化には以下が含まれます：
- 圧縮 — ファイルサイズを削減し、読み込みを高速化します。
- フォーマット変換 — サポートされている場合、画像を最新のフォーマット（WebP、AVIF など）に変換します。
- テクスチャアトラス — 複数の小さな画像を1枚のスプライトシートにまとめ、描画呼び出しを削減します。
処理が完了すると、public/assets に最適化されたファイルが生成され、すべてのアセットバンドルとそのパスの一覧を含む src/assets/manifest.gen.json ファイルが生成されます。 これらの出力は、PixiJS がアセットを効率的に読み込むために使用されます。
{
"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",
},
],
},
],
};