Pixi’VNテンプレート
Pixi’VNプロジェクトをテンプレートから生成し、IDEでセットアップし、実行・カスタマイズし、プロジェクト構造を理解する方法を学びます。
テンプレートから新しいプロジェクトを生成するには、以下を実行します。
npm create pixi-vn@latestインタラクティブデモ
テンプレートの使い方
このページを読んでいるということは、すでにテンプレートから生成されたプロジェクトをお持ちでしょう。 以下のセクションでは、プロジェクトを起動して実行するための最初のステップを説明します。
初期セットアップ
IDEでプロジェクトフォルダを開きます。 以下の例ではVisual Studio Codeを使用します。
プロジェクトを開くと、VS Codeが自動的にいくつかの提案を行います。
- 推奨拡張機能のインストール — ワークスペースで推奨されている拡張機能をインストールするよう求める通知が表示されます。 これを受け入れることを強くお勧めします。 通知が表示されない場合は、拡張機能パネルから推奨される拡張機能でフィルタリングして手動でインストールできます。
-
- 起動タスクの実行 — VS Codeは設定済みの起動タスクを実行するよう促す場合があります。これにより、すべてのプロジェクトの依存関係がインストールされます。 手動で行いたい場合は、以下を実行してください。
npm installマルチプラットフォーム
デスクトップまたはモバイルプラットフォームを対象とするテンプレートを選択した場合、Tauriが必要とする追加の依存関係（Rustツールチェーンおよびプラットフォーム固有のビルドツール）をインストールする必要があります。 Tauriはシステム環境と深く統合されているため、プロジェクトをデスクトップアプリケーションとして起動できるようになるまでに、VS Codeを1回以上再起動する必要があるでしょう。
プロジェクトの実行
テンプレートには、VS Code用に事前設定された起動設定（launch configurations）が一式含まれています。 もし馴染みがない場合のために説明すると、起動設定とは、VS Codeにプロジェクトの開始方法を指示するショートカット（オプションでデバッガーをアタッチすることも可能）であり、毎回ターミナルでコマンドを入力する必要がなくなります。 これらはRun and Debugパネル（左サイドバーの再生ボタンアイコン、またはF5キー）からアクセスできます。 パネル上部のドロップダウンから使用したい設定を選択し、緑色の再生ボタンを押してください。
以下の設定が利用可能です。
- Debug Game: 開発中に最も頻繁に使用する設定です — ファイルを保存するたびに、ブラウザが自動的にリフレッシュされます。 このモードでは、アニメーションが完全に滑らかでない場合や、アセットの読み込みが最終的な公開ビルドより遅くなる場合があることに注意してください。
- Debug Game Preview: 公開後のゲームの動作を忠実にシミュレートします。アニメーションは滑らかで、読み込み時間は現実的であり、最適化が有効になっています。 公開前にすべてが正しく見え、正しく感じられることを確認したい場合にこの設定を使用してください。
- Run as Desktop App (Dev): Rust/Tauriバックエンドをコンパイルし、ゲームをネイティブのデスクトップウィンドウとして起動します。 テンプレートがデスクトップまたはモバイルプラットフォームを対象としていない場合、この設定は存在しません。
スタイルのカスタマイズ
テンプレートのユーザーインターフェース（UI）は完全にshadcn/uiで構築されているため、コンポーネントのコードに触れることなくカラーテーマをカスタマイズできます。
shadcn/ui theme builderを開き、好みの色に調整したら、ページのCopyセクションに移動して生成されたCSSコマンドをコピーします。 そのコマンドをプロジェクトのルートから実行してください。
npx shadcn@latest add <paste-the-generated-command-here>適用後は、ソースファイルを再フォーマットすることをお勧めします。
npm run formatさらなるカスタマイズ（フォント、グローバルスタイルなど）については、スタイルとフォントを参照してください。
プロジェクト構造
テンプレートの画面
テンプレートには、ビジュアルノベルの基本的な部分をカバーする、あらかじめ構築された画面が一式付属しています。 各画面は、TanStack Routerによって管理されるルートに接続されたReactコンポーネントです。
- メインメニュー（
/） — プレイヤーがゲームを起動したときに最初に見る画面です。 新しいゲームを開始したり、保存されたゲームを続けたり、設定を開いたりするためのエントリーポイントを提供します。 - ナレーション画面（
/game/narration） — 物語が表示される中心的なゲームプレイ画面です。 ダイアログ、キャラクタースプライト、背景、選択肢を描画します。 - 設定 — 設定パネルには専用のルートがありません。 代わりに、Search Paramsを使用して、現在アクティブな画面の上にオーバーレイ表示されます。 このアプローチにより、URLをクリーンに保ちながら、プレイヤーがゲーム内のどこからでも設定を開けるようにし、また自分がどこにいたかを見失うことなく設定のセクション（オーディオ、表示、言語など） 間を移動できるようにします。
- ナビゲーション画面（
/game/navigation） — _Point & Click_専用です。 プレイヤーが部屋間を移動し、現在の場所で利用可能なさまざまなアクションを実行できるようにします。 - マップ画面（
/game/map） — _Point & Click_専用です。 マップを表示し、プレイヤーがある場所から別の場所へ移動できるようにします。 また、複数のマップの管理にも対応しています。