ユーザーインターフェース（UI）
React、Vue、PixiJSなどの外部JavaScriptフレームワークを使用して、Pixi’VNでUI画面を構築・統合する方法。
Pixi’VNは、ゲームUIを作成するための組み込みコンポーネントを提供しておらず、JavaScriptエコシステムにすでに存在するものを再発明することもありません。特定のフレームワークに縛り付けるのではなく、UIを構築するために好きな外部JavaScriptフレームワークを自由に使用できるため、React、Vueなどのシステムを活用して、複雑でハイパフォーマンスなUI画面を作成できます。
この柔軟性により、Pixi’VNはAI支援開発にも最適です。UIは独自システムではなく標準的で広く使われているフレームワークで構築されるため、AIコーディングアシスタントはこれらのツールをすでによく理解しており、UIコードを非常に効果的に生成、理解、修正できます。
React
セットアップ、テンプレート、最適なUIライブラリを含め、Pixi’VNをReactと統合します。
Vue
セットアップ、テンプレート、UIの例を含め、Pixi’VNをVueと統合します。
PixiJS
PixiJSのレイヤーとコンポーネントを使用してカスタムUI画面を構築し、HTML UIと組み合わせます。
Pixi’VNは、他のJavaScriptフレームワークとの互換性を向上させるための機能を提供します:
UIとキャンバスの違い
Pixi’VNの設計思想として、UIとキャンバスは2つの独立した別々の要素です。 UIはキャンバスの上にあり、ボタンやフォームなどを作成するために使用されます。キャンバスは画像や動画などを表示するために使用されます。
キャンバスの現在の状態に関するすべての情報はセーブデータに含まれており、以前のステップの状態を復元することができます。 UIの現在の状態はセーブデータに含まれません。そのため、必要な情報は自分で保存して管理する必要があり、ゲームストレージまたはブラウザストレージに保存します。
キャンバスでは、各ステップでコンポーネントを追加できます。 UIではそれができません。代わりに、複数の「画面」を作成し、それらの間を移動することができます。
キャンバスでは、Pixi’VNのコンポーネントのみを追加できます。 UIでは、任意のHTML/PixiJSコンポーネントを追加したり、任意のUIコンポーネントライブラリを使用したりできるため、はるかに複雑なインターフェースを作成できます。