PixiJS v8で画像を読み込むには？非同期初期化とAssetsの設計

1. Applicationを作る処理と、初期化を待つ処理を分ける

PixiJSのApplicationガイドでは、インスタンスを作った後に非同期のinit()を呼ぶ手順が説明されています。レンダラーのpreferenceはwebglまたはwebgpuを指定でき、掲載されている既定値はwebglです。WebGPUを選べることだけを理由に、すべての作品で指定を変える必要はありません。

次は開始順序を示す小さな例です。canvasを置く親要素はあらかじめHTMLに用意します。入力開始やルールの進行は、画像が取得できて画面を構成した後に行います。起動中にも押せる開始ボタンを置くなら、準備完了までは無効にし、待っている理由を説明すると、連打で開始処理が重複する問題を避けやすくなります。

import { Application, Assets, Sprite } from 'pixi.js';
const app = new Application();
await app.init({ width: 800, height: 600, preference: 'webgl' });
document.querySelector('#game').appendChild(app.canvas);
const texture = await Assets.load('/assets/hero.png');
app.stage.addChild(new Sprite(texture));
// 実用版では、起動処理全体にエラー表示と再試行を加える。

2. 最初の画面に必要な素材を一つの集合にする

Assetsガイドでは、Promiseによる読み込みとURLや別名によるキャッシュの利用が案内されています。マニフェストとバンドルを使う機能もあり、タイトル画面、最初のステージ、後半のステージのように素材をまとめることができます。具体的な分け方は作品側で決める設計です。

この記事では、最初の操作に必要な背景、主人公、ボタンだけを必須素材にする方法を提案します。ゲーム開始前に最終ステージの大きな背景まで待つと、最初の体験に必要な準備が見えにくくなります。次のステージの素材は、移動が確定したときや余裕のある場面に準備します。未取得の状態で表示に進まないよう、ステージの準備完了を明示します。

素材名はゲームの役割で管理すると差し替えやすくなります。主人公の画像URLを各場面に直接書くのではなく、一つの素材表にまとめます。同じ画像でも別URLや別の検索パラメーターで参照していると、意図した共有ができているか見直しが必要です。素材表と書き出されたファイルが一致しているかも、ビルド後に確認しましょう。

3. 読込失敗を、ゲームの負けと同じ画面にしない

通信が途切れた、画像が配置されていない、取得した形式を読めない。読込失敗には複数の原因があります。ゲームの失敗画面へ流してしまうと、利用者には操作を間違えたように見えます。必須素材の取得が終わらなかった場合は、再試行やホームに戻る選択を表示し、まだプレイは始まっていないことを伝えます。

進捗を数字で出す場合も、ファイル数と取得バイト数を混同しないようにします。小さな画像九枚と大きな画像一枚を同じ一単位で数える表示は、転送量を示していません。正確な残り時間を計算していないなら、「画像を準備しています」のような段階表示でも十分です。開発者向けの記録には、取得対象と失敗した処理を残します。

• 遅い通信で最初の画面を開く
• 必須画像の一つを取得できない状態にする
• 準備中に戻って再び開始する
• 再試行して処理が二重に走らないか確かめる

4. ステージを離れるときの素材の所有者を決める

Assetsのunload()はキャッシュから素材を外すためのAPIとして紹介されています。共通ボタンの画像を複数ステージで使っているなら、一つのステージを終了しただけでその共有素材まで解放しない設計が必要です。画面のオブジェクトを片付ける作業と、素材をキャッシュから外す作業を分けて考えます。

共通素材はアプリ全体、ステージ専用素材は各ステージ、と責任を決める方法があります。これは当ブログの設計案です。三つのステージを往復する短い操作を用意し、戻ったときに画像が再び必要になるか、同じ素材が不要に増えていないかを見ます。パズルの盤面が小さくても背景や音声は大きいことがあるため、表示数だけで素材の重さを判断しないようにしましょう。

たとえばステージ選択画面で全ステージの背景を縮小表示する構成なら、プレイ用の大きな背景をそのまま全部取得する必要があるか考えます。選択画面専用の小さな画像を用意し、選んだステージの素材だけを準備する案もあります。読込を後回しにする代わりに切り替え時の案内が必要になるので、素材量と画面の説明をセットで設計します。