Keolot Phaser Editor 2D APP
インタラクティブエディターでは、デザインをビジュアル的に作成し、オブジェクトを移動したり、新しいオブジェクトを追加したりできます。マウスとインターフェース要素の両方を使ってデザイン内を移動でき、ズームの変更も可能です。座標付きのルーラーも便利なナビゲーションに役立ちます。 Phaser の以下のゲームオブジェクトを視覚的に追加、コピー、編集、削除できます。
- 画像
- テキスト
- スプライト
- パーティクル
- ビデオ
- 長方形
- タイルスプライト
インタラクティブエディターモードに加えて、2つのゲームプレビューモードがあります。
1) 現在のシーンのプレビュー。このモードでは、ゲームの一時停止と再生の再開、オブジェクトへのインタラクション、インスペクターでのパラメータ変更をリアルタイムで行うことができます。特定のシーンのプレビューモードでは、ゲーム内でシーンを切り替えることはできません。これは、特定のシーンの表示に過ぎません。また、シーンプレビューモードはデバッグ物理モードで起動されます。
2) ゲームのプレビュー。オブジェクトの確認や再生の一時停止はできず、ゲームをそのまま起動します。
デバッグとエラー表示用のコンソールがあります。
オブジェクトインスペクターでは、ゲームオブジェクトのパラメータ(X、Y座標、角度、不透明度、テクスチャ、深度など)の設定、物理パラメータ、パーティクルパラメータとその外観(寿命、頻度、速度、アルファなど)の調整、アニメーションの種類やオーディオ設定の選択など、パネル内のその他のプロパティの調整が可能です。
オブジェクトインスペクターでは、画像オブジェクトとスプライトオブジェクトをワンクリックで直接物理Matterオブジェクトに変換し、物理パラメータ(密度、衝突形状、衝突カテゴリ、反発、重力無視など)を指定できます。スクリプトエディターでは、Phaserで直接作業しているかのように、その他のプロパティやゲームオブジェクトを作成・調整できますが、ビジュアルエディターには必要なものがすべて揃っています。
開発環境では、以下のプリロード済みアセットのビジュアル作成をサポートしています。
- 画像(ビットマップ画像 JPG、PNG、WEBP、AVIF、GIF、SVG)
- SVG(ベクター画像)
- オーディオ(MP3、WAV、OGG、M4A)
- フォント(TTF、OTF)
- ビデオ(MP4、WEBM)
- スプライトシート
- アトラス
- アニメーション
- ビットマップフォント
- JSON
- TXT
- XML
- GLSL
- TilemapTiledJSON
シーンインスペクターでは、シーンを上下に移動したり、シーンのローカル背景色を変更したり、標準的な物理境界をワンクリックで設定したりできます。また、Phaser ゲームシーンの主な機能のシーンスクリプトも設定できます。
- Init()
- Preload()
- Create()
- Update(time, delta)
シーンにカスタムスクリプトを追加することもできます。たとえば、独自の関数を記述すると、ゲームコードの Init の前に追加されます。 Custom に Init、Preload、Create、Update のいずれかの関数を記述した場合、専用のセクションが用意されているため無視されます。
構文ハイライト機能付きのテキストエディターでは、スクリプト (JS、TS) とテキストファイル (JSON、TXT) の両方を編集できます。テキストエディターは基本的な機能をサポートしており、十分な機能を備えていますが、コードをより便利に操作するには、お好みのサードパーティ製コードエディターを使用してスクリプトファイルを作成および編集することをお勧めします。スクリプトを作成する際は、Phaser 3.90 ライブラリの公式ドキュメントを参照してください。
コードエディターには、オブジェクトへのイベントの追加、トゥイーンアニメーション、カスタム物理オブジェクトの作成、キーイベント、衝突処理など、一般的な状況に対応するコードテンプレートも含まれています。
作成したプロジェクトは保存して ZIP にエクスポートでき、完成したゲームも ZIP にエクスポートしてブラウザで起動できます。