Pixi’VNアセットの読み込み
エイリアス、バンドル、さまざまな読み込み戦略を使用して、Pixi’VN でアセットを読み込み・管理する方法を学び、ゲームをスムーズに保ちましょう。
特にオンラインアセットを使用するゲームでは、適切な読み込み方法を実践することが、長い待機時間を避けてプレイヤーの体験をスムーズに保つために不可欠です。
アセット（画像、GIF、動画など） を読み込んで操作するには、Assets を使用する必要があります。 Assets は多くの機能を持つクラスで、PixiJS ライブラリから提供されています。 詳細については、こちらをご覧ください。
エイリアスを使ってアセットを読み込む
アセットを読み込む際は、常にそのエイリアス（マニフェストまたはアセット登録時に定義した一意の識別子）を使用してください。 src パスを直接使用することは強く推奨されません。パスやホスティングが変更された際にコードが壊れやすくなるためです。
import { Assets } from "@drincs/pixi-vn";
const texture = await Assets.load("eggHead");{
"bundles": [
{
"name": "default",
"assets": [
{
"alias": "eggHead",
"src": "./assets/eggHead.png"
}
]
}
]
}アセットをバンドルにまとめる
アセットを個別に登録するのではなく、バンドルにグループ化することがベストプラクティスです。 バンドルを使うことで、1 回の呼び出しでアセットのセット全体を読み込んだり、実際に必要になるまで読み込みを遅延させたりすることができます。
ローカルアセットの場合、バンドルを使用場所に基づいて命名することの重要性は低くなります — ローカルファイルは即座に読み込まれるため、スクリーンやナラティブノード（label）ごとに分割しても実質的なメリットはありません。 この規則は、ターゲットを絞った読み込みが待機時間を直接削減するオンラインアセットで最も有効です。
各バンドルには使用される場所に基づいた名前を付けることが推奨されます。 例：
- 特定のナラティブノード（
label）で使用するアセットのバンドル名には、そのナラティブノード（label）の id（例：startLabel.id）を使用する - 対応するスクリーン（メインメニューなど）で使用するアセットのバンドル名には、ルートパス（例：
"/"）を使用する
こうすることで、必要以上に読み込むことなく、適切なタイミングで適切なアセットだけを読み込むことができます。
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: [
// 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",
},
],
},
],
};アセットを読み込むタイミング
デフォルトでは、アセットはオンデマンドで読み込まれます — 実際に必要になったときにのみ読み込まれます。 しかし、最後の瞬間に読み込むと、ゲームプレイ中に目立つ一時停止が生じる可能性があります。
事前にアセットを読み込む最も一般的で推奨されるタイミングを以下に示します：