pixijs-create

create pixi.js は新規 PixiJS v8 プロジェクトをスカフォールディングするための公式 CLI です。任意のパッケージマネージャー（npm、yarn、pnpm、bun）で実行し、インタラクティブメニューからテンプレートを選択するか、--template を渡してプロンプトをスキップできます。自己完結型のプロジェクトフォルダを作成し、その中に移動して依存関係をインストールし、dev スクリプトを実行します。

クイックスタート

インタラクティブプロンプト付きで新規プロジェクトをスカフォールディングする：

npm create pixi.js@latest

またはプロジェクト名とテンプレートを渡してプロンプトをスキップ：

npm create pixi.js@latest my-game -- --template bundler-vite

その後：

cd my-game
npm install
npm run dev

Node.js 18+ または 20+ が必須です。一部のテンプレート（特に creation-web と framework-react）はより新しい Node バージョンが必要な場合があります。その場合、パッケージマネージャーが警告を表示します。

既存プロジェクトへの PixiJS の追加

既にバンドラー、フレームワーク、またはプロジェクトがセットアップされている場合、CLI をスキップしてパッケージを直接インストール：

npm install pixi.js

その後 pixi.js からインポートして、pixijs-application で示されているように Application を構築してください。CLI テンプレートは新規プロジェクトの利便性のためのものであり、npm install pixi.js では得られないライブラリへの追加はありません。

関連スキル： pixijs-application（スカフォールディングされた new Application() + app.init() エントリーポイントの動作）、pixijs-core-concepts（レンダラーとレンダーループ）、pixijs-scene-core-concepts（ステージに追加する最初のものの scene graph の基礎）、pixijs-assets（テンプレートが public/ または src/assets/ にドロップすることを期待するテクスチャ、フォント、バンドルの読み込み）。

コアパターン

パッケージマネージャーを選択

コマンド形式はすべてのパッケージマネージャーで同じ：

npm create pixi.js@latest
yarn create pixi.js
pnpm create pixi.js
bun create pixi.js

npm 7 以上では CLI フラグの前に -- を渡す必要があります。そうしないと npm がそれらを消費します：

npm create pixi.js@latest my-game -- --template bundler-vite

Yarn、pnpm、bun はこの余分なセパレータは必要ありません：

yarn create pixi.js my-game --template bundler-vite
pnpm create pixi.js my-game --template bundler-vite
bun create pixi.js my-game --template bundler-vite

プロジェクト名として . を使用すると、現在のディレクトリにスカフォールディング：

インタラクティブフロー

引数なしで実行するとプロンプトウォークスルー：

1. プロジェクト名（デフォルトは pixi-project）。
2. フレームワーク / テンプレートカテゴリ。
3. バリアント（該当する場合、TypeScript 対 JavaScript）。
4. 依存関係を直ちにインストールするかどうか（一部のランナー）。

最後に、CLI は呼び出したマネージャーの cd + install + dev コマンドを出力します。

非インタラクティブフロー

プロジェクト名と --template を渡すと、すべてのプロンプトをスキップ。スクリプト、CI、クイックスタートドキュメント向け：

npm create pixi.js@latest my-game -- --template bundler-vite

利用可能なテンプレートプリセット

テンプレートは 2 つのカテゴリーに分かれます：

• バンドラーテンプレート (bundler-*)：選択したバンドラーに接続された汎用 PixiJS セットアップ。独自の構造を選びたい場合に使用。
• クリエーションテンプレート (creation-*)：既に接続されている追加機能（AssetPack、サウンド、UI、シーンルーティング）を含むプラットフォーム専用スターター。すべて含まれたものを望む場合に使用。
• フレームワークテンプレート (framework-*)：React などのホストフレームワーク内に埋め込まれた PixiJS。
• 拡張テンプレート (extension-*)：再利用可能な PixiJS パッケージを構築するためのスカフォールディング。

ほとんどの新規プロジェクトでは、bundler-vite が推奨される出発点です。

テンプレート	内容
bundler-vite	Vite + TypeScript PixiJS プロジェクト。デフォルトの最初のテンプレート。
bundler-vite-js	Vite + プレーン JavaScript。
bundler-webpack	Webpack + TypeScript。
bundler-webpack-js	Webpack + プレーン JavaScript。
bundler-esbuild	esbuild + TypeScript。
bundler-esbuild-js	esbuild + プレーン JavaScript。
bundler-import-map	ブラウザインポートマップを使用したノーバンドラーセットアップ（学習 / デモに最適）。
creation-web	PixiJS Creation Engine web テンプレート、シーンベースのゲームスカフォールディング、AssetPack、サウンド、UI 統合を含む。
framework-react	React + TypeScript + @pixi/react パッケージ経由の PixiJS。
framework-react-js	React + プレーン JavaScript + PixiJS。
extension-default	再利用可能な PixiJS 拡張 / パッケージ構築用スターター。

ライブリストは create-pixi リポジトリで管理されます。確認する必要がある場合は、npm create pixi.js@latest を引数なしで実行して現在のメニューを確認してください。

スカフォールディング後のフロー

すべてのテンプレートは同じ 3 ステップのオンボーディングを含んでいます：

cd my-game
npm install
npm run dev

npm run dev はデフォルトポートでローカルdev サーバーを開始します（Vite 5173、webpack 8080 など、テンプレートの README に正確な番号があります）。src/ への変更は、ページ全体をリロードせずにホットリロード。

すべてのテンプレートが公開する他のスクリプト（名前はプリセットにより若干異なる場合あり）：

• npm run build：dist/ に本番ビルドを生成。
• npm run preview / npm run serve：本番ビルドをローカルで提供。
• npm run lint：テンプレートが出荷する場合、そのリンターを実行。

既存ディレクトリへのスカフォールディング

プロジェクト名として . を使用して現在のワーキングディレクトリに書き込み。CLI は空でなく競合するファイルが存在する場合、プロンプトを確認しない限り実行を拒否：

mkdir my-game
cd my-game
npm create pixi.js@latest . -- --template bundler-vite

次のステップ

npm run dev が開始した後、テンプレートは空またはバニー sprite のシーンで開きます。通常の進行は：

1. pixijs-application を読んで、テンプレートのエントリーポイントが new Application() を構築し await app.init(...) を呼び出す方法、app.stage / app.renderer / app.canvas の関係、ResizePlugin と TickerPlugin のデフォルト動作を理解。
2. pixijs-core-concepts を読んでレンダラーとレンダーループのメンタルモデル。
3. 最初の非自明なシーンを追加する前に pixijs-scene-core-concepts を読んで、container-vs-leaf ルールを最初から知る。
4. 本物のアートを読み込む準備ができたら pixijs-assets 経由でテクスチャをドロップ。

よくある間違い

[高] npm 7+ で -- セパレータが欠けている

間違い：

npm create pixi.js@latest my-game --template bundler-vite

正しい：

npm create pixi.js@latest my-game -- --template bundler-vite

npm 7+ はパッケージ仕様後のフラグを消費します。-- を渡さないと CLI は --template を無視し、インタラクティブプロンプトに戻ります。Yarn、pnpm、bun はセパレータは必要ありません。

[中] 古い Node バージョンで実行

PixiJS には Node 18+ または 20+ が必須です。一部のテンプレート（framework-react、creation-web）はそのツーリング向けに新しい Node を期待します。パッケージマネージャーから "engines" 警告が表示された場合、CLI を再実行する前に Node をアップグレード。

[中] Vite 本番ビルドでトップレベル await app.init() が破損

Vite バージョン <=6.0.6 では、トップレベル await は dev では機能しますが本番ビルドで破損するため、モジュールスコープでこれを行う bundler-vite プロジェクトは npm run build 後に失敗：

const app = new Application();
await app.init({ resizeTo: window }); // prod でモジュールトップレベルで破損

代わりに init を async IIFE でラップ：

(async () => {
  const app = new Application();
  await app.init({ resizeTo: window });
  document.body.appendChild(app.canvas);
})();

Vite を 6.0.6 より先にアップグレードすることでも解決しますが、IIFE パターンはすべてのバージョンで安全で PixiJS クイックスタートガイドと一致します。

API リファレンス

• create-pixi on GitHub
• create-pixi documentation site
• Application：生成されたエントリーポイントがインスタンス化するクラス。