Open1

PlayCanvas Editor周りでこの1年で変わったことについて

はがはが

「PlayCanvas Editorの1年での変化についてまとめてみた」2022年 PlayCanvas アドベントカレンダー

この記事は「GW Advent Calendar PlayCanvasアドベントカレンダー 1日目」の記事になります。この1年間のPlayCanvas Editorの変更点についてまとめていきます。

PlayCanvasについて

シーンの構築は、PlayCanvasを利用します。PlayCanvasは、デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。PlayCanvas社は2017年よりSnap.Incに買収されましたが、現在も開発は継続されています

公式サイト
https://playcanvas.jp/

エンジン
https://github.com/playcanvas/engine

1. モデルのヒエラルキーが維持されてインポートされるように

ヒエラルキー 2

3Dモデルのインポート時に今まではModelコンポーネント / JSONに変換されておりました。
インポートしたモデルのメッシュの情報を操作するにはスクリプトから変更をする必要がありましたがこちらがエディターでヒエラルキーが維持された状態で確認できるようになりました。

ヒエラルキー 1

それぞれtypeがrenderのコンポーネントとなり、スケールやポジションなどはエディタの操作によって編集可能です。

2. AnimationコンポーネントがLegacyにAnimコンポーネントへの移行

Animationコンポーネント

ModelコンポーネントがLegacyになること合わせてAnimationコンポーネントがLegacyとなりました。これによりアニメーションの遷移をビジュアルエディタで構築することができるようになりました。

モデルを動かすためにはAnimコンポーネントと、Anim State Graphを追加することでアニメーションを行わすことができるようになりました。

コンポーネント

3. コードエディタがMonacoベースに

コードエディタが刷新されました。以前のエディタとは全く別のMonacoがベースのエディタとなりました。そのため、VS Codeなどと似たような機能が多く追加されました。

Code Editor

※個人的に嬉しいのはJSONファイルがテキストとして扱われていたのでとても扱いにくかったのですが、コードエディタが利用できるようになりました。
Code Editor 2

4. Editor APIの登場

Editor API

Editor APIです。はPlayCanvasのエディタの操作をスクリプト経由でカスタマイズ事ができる仕組みになります。

例としては

このような用途で利用ができます。手動で行っていた部分を自動化できるようになりました。

今後のアップデートについて

今後のアップデートについてはこちらにロードマップが存在してります。Node-based shader editor (open beta)などがリリースされる予定となっております。

PlayCanvas Product Roadmap
https://github.com/playcanvas/editor/blob/main/ROADMAP.md

また、PlayCanvasの振り返りについてはこちらの記事がございますのでこちらもご覧ください。PlayCanvas 2021年のふりかえり