🪟
PixiJS v8 におけるシーン切替（Container切替）を実装してみる

2025/10/05に公開
Phaser でゲーム開発をしていて、「そういえば PixiJS におけるシーン切替ってどうするのだろうか？」と、何気なく思いまして…。

少し調査 & サンプルコードを作成してみました。

 PixiJS v8 のシーンとは？公式サイトを確認しましたが、PixiJS v8 には、いわゆるシーンは存在しない様子。

一応、ドキュメントには Scene のページが存在しますが、あくまでドキュメントのカテゴリータイトルとして Scene と命名しているだけのようでした。
試しに GPT-5 mini にも聞いてみました。

以下が解答になります。
PixiJS v8 では「シーン」は単に PIXI.Container を使ったレイヤー/状態として扱い、シーン切り替えはそのコンテナの追加/削除・アルファやフィルターでのトランジション・シーン管理クラスによる状態遷移で実装するのが一般的です。
…ということで、本記事の一次調査結果としては、

「PixiJS v8 では Container を使って、シーン切替を実現する」がファイナルアンサーになります。

 成果物リポジトリ URL: https://github.com/t-tonyo-maru/pub_web_pixijs-scene-change
デモ URL: https://t-tonyo-maru.github.io/pub_web_pixijs-scene-change/
デモ URL を表示すると、青背景に「Container2」とウサギちゃんが表示されます。

5 秒待機すると、赤背景に「Container1」の表示に切り替わります。

この挙動は gsap.timeline を利用して PIXI.Container を切り替えています。

 ソースコード解説主要な処理は src/main.ts に記述しています。
ソースコードの大半は Container のセットアップになります。

シーン切替（Container 切替）のサンプルコードは、後半に登場します。

window.setTimeout のところですね。
src/main.ts
/**
 * ココまでに PIXI.Container を 2 つ用意して、レイヤーのように重ねておく。
 * そのうえで、ページ表示から 5 秒後に、シーン切替(Container 切替)を実行する。
 * 今回は gsap.timeline を利用しています。
 */
window.setTimeout(() => {
  gsap
    .timeline({ defaults: { duration: 2 } })
    .to(container2, { alpha: 0.0 }) // 不透明度 0 にするアニメーションを実行する。これで上層の container2 が非表示となる。
    .eventCallback('onComplete', () => {
      container2.destroy(); // アニメーションが完了後に container2 が不要になるので、destroy() で破棄する。
    });
}, 5 * 1000);

 まとめ以上、「PixiJS v8 におけるシーン切替（Container切替）を実装してみる」でした。
今回のサンプルコードでは gsap.timeline を使って、簡易的なアニメーションもつけて、シーン切替を実現しました。

小さいアプリであれば、今回の方法でも構いませんが、PixiJS で本格的なアプリを開発するなら、ゲーム開発でよくある SceneManager のようなクラスを定義して管理すると良さそうですね！
それでは、また！
PixiJS v8 のシーンとは？

成果物

ソースコード解説

まとめ

Discussion
