PlayCanvasエディターのフロントエンドがオープンソースになったので試してみた
2025年7月24日、PlayCanvasの公式ブログにて、PlayCanvasエディターのフロントエンドがオープンソースとして公開されたことが発表されました。
PlayCanvasエディターは、WebGL、WebGPU、そしてWebXRの開発ができる環境で、エンジン部分はオープンソースでしたが、開発を行うエディター部分はクローズドソースでした。
なぜエディターフロントエンドをオープンソース化するのか？
公式ブログによると、オープンソース化による多くのメリットが挙げられています。
- 機能開発の加速 コミュニティからのコントリビュート（貢献）により、新機能の開発や改善が加速します。
- 安定性の向上 多くの開発者の目に触れることで、バグがより迅速に発見・修正され、エディターの安定性と堅牢性が向上します。
- カスタマイズと特定のユースケースへの対応 開発者はエディターのフロントエンドを自由にカスタマイズし、PlayCanvasのバックエンドに接続することで、高度に専門化されたワークフローや統合を実現できます。
- エディターへの理解の深化 コードベースが透明になることで、開発者はエディターがどのように機能するかをより深く理解でき、コントリビュートやデバッグが容易になります。
ローカル開発環境を構築する
今回のアップデートで追加されたコードは、「playcanvas/editor」にて公開されています。
前提条件
- Node.js v18以上がインストールされていること
1. リポジトリをクローンする
まず、ターミナルでリポジトリをクローンし、ディレクトリに移動します。
git clone https://github.com/playcanvas/editor.git
cd editor
2. 依存関係をインストールする
次に、プロジェクトに必要なパッケージをインストールします。
npm install
3. エディターをビルドし、ローカルサーバーを起動する
以下のコマンドを実行して、エディターをビルドし、開発用のローカルWebサーバーを起動します。
npm run develop
これでローカルサーバーが起動します。
4. 開発ビルドを読み込む
プロジェクトURLの末尾に ?use_local_frontend というクエリパラメータを追加してアクセスします。
例:
https://playcanvas.com/editor/project/YOUR_PROJECT_ID?use_local_frontend
これで、ブラウザはローカルで実行されている開発版のエディターフロントエンドを読み込むようになります。
実際に試してみました
OSSのPlayCanvas Editorのビルドと、プロジェクトへの読み込みを実際に試してみました。今回は簡単な日本語化を実装してみました。
このような改良は、オープンソースの利点を活かしてプルリクエストとして送信することで、PlayCanvas本体に反映される可能性があります。これまでPlayCanvasに欲しかった機能を、自分で拡張できるようになったのは非常に価値のあることだと思います。
過去にPlayCanvasのEditor APIを利用して作成していた部分は、すべて置き換えることができると考えています。
Discussion