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

6 min read読了の目安(約5600字

PlayCanvas アドベントカレンダー

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

PlayCanvasとは

PlayCanvasは、デスクトップとモバイルブラウザ向けに作られた
WebGL/HTML5ゲームエンジンです。豊富な機能を揃えた3Dエンジンと
クラウドホスティングされた開発環境およびツールセットを備えています。

公式サイト

https://playcanvas.jp/

エンジン

https://github.com/playcanvas/engine

✍️ Posted by はが(@yushimatenjin) on 2020/11/30

個人的に一番嬉しい機能です。

プロジェクト間のアセットのコピーペーストができるようになった

プロジェクト間でのアセットの共有ができるようになりました!(超便利)

使い方
プロジェクトでコピー・ペーストをするだけです。
https://blog.playcanvas.com/wp-content/uploads/2020/10/Kapture-2020-10-14-at-16.39.37-1.gif

Copy and Paste Assets between Projects
https://blog.playcanvas.com/copy-and-paste-assets-between-projects/


✍️ Posted by はが(@yushimatenjin) on 2020/11/30

フリープランと有料プランの差がかなり埋まった

プランをアップグレード:価格はそのままでストレージ増加、機能拡充を実現

容量

PlayCanvasはクラウド型のエディタですが、その際に使用できる容量が、全てのプランで5倍〜10倍にアップデートされました。

  • フリー 200MB → 1GB
  • パーソナル 1GB → 10GB
  • オーガニゼーション 10GB → 50GB

機能

フリープランと、有料プランの間にあった各種制限がほぼなくなりました。
現在、差があるのはプライベートプロジェクトの作成、
オーガニゼーションでのユーザー・プロジェクト管理機能のみです。

フリープランに開放されたもの

  • ローディングスクリーンの削除
  • プロジェクトのダウンロード
  • プロジェクトのオフラインバックアップ機能

✍️ Posted by はが(@yushimatenjin) on 2020/11/30

テンプレート機能の追加された

今まではエンティティは HIERARCHY内で管理をする必要がありましたが、テンプレート機能ができたことにより、エンティティをアセットとして管理をすることができるようになりました。

概要

テンプレートアセットでワークフローを加速!

これにより大きく変わったのはこの部分なきがします。

  • シーンプロジェクトを跨いだエンティティ管理
  • HIERARCHY内でエンティティをenabledで管理しなくて良くなった(とても嬉しい)

使い方(YouTube)


✍️ Posted by はが(@yushimatenjin) on 2020/11/30

FBXのインポートをするとGLBに変換されるようになった

概要

使い方

Convert to GLBのチェックを入れることで機能を使うことが出来ます。

FBX → GLB
FBXをPlayCanvasにimportするとモデルを読み込むと今までは、.json形式に変換がされていましたが、.glb形式に変換されます。

読み込まれたモデルについて

Convert to GLBを使用したモデルと、使用していないモデルを2つ並べてみました。
インポート前の、元のモデルについて、Size:263KB

Convert to GLB 未利用

今までと同じように.json形式に変換をされます。
サイズ: 96.3KB

Convert to GLB 利用時

FBXがGLBの形式になってインポートされます。
サイズ: 59.6KB

以前のモデルのインポート形式と比べて大幅に容量が減っている事がわかります。

※ FBXのConvertは可能ですが、エディターでのGLBの直接のインポートは現在まだ対応しておりません。GLB(GLTF)形式のモデルを使用する場合には、読み込むスクリプトを利用することで表示・操作することが出来ます。

GLBを直接インポートする方法はこちらのプロジェクトのload-glb.jsのような形で読み込むことができます。
Loading glTF GLBs


✍️ Posted by はが(@yushimatenjin) on 2020/11/30

アセットの同期にはplaycanvas-syncが意外と便利

ローカルのファイルとPlayCanvas エディターをつなぐためのコマンドpcsyncですが、こちらを使うと、アセットをGitHubやローカルで管理できるようになります。

インストール

  1. リポジトリをクローンします。
    git clone git@github.com:playcanvas/playcanvas-sync.git

  2. npm install

cd playcanvas-sync
npm install
  1. パスを通す
    npm インストールをしたフォルダにパスを通します。
    .zshの場合はこのような形でパスを通します。

パスの確認をします

pwd  

.zshrcを編集してパスを通します

export PATH="$PATH:パス"

これでpcsync | pcsync.jsコマンドが使えるようになりました。

次に作業フォルダを作成します。

プロジェクト管理用のフォルダを作成

PlayCavas Editorと同期するフォルダを作成します。

mkdir project
cd project

空フォルダを作成

PlayCavas Editorと同期するフォルダを作成します。

mkdir playcanvas

pcconfig.jsonを作成

{
  "PLAYCANVAS_BRANCH_ID": "ブランチID",
  "PLAYCANVAS_PROJECT_ID": プロジェクトID,
  "PLAYCANVAS_TARGET_DIR": "./playcanvas",
  "PLAYCANVAS_API_KEY": "API_KEY",
  "PLAYCANVAS_BAD_FILE_REG": "^\\.|~$",
  "PLAYCANVAS_BAD_FOLDER_REG": "\\."
}

ここまで作成すると、使えるようになります。
あとは、作業ディレクトリ内で
この中にあるコマンド

https://github.com/playcanvas/playcanvas-sync

ローカルのファイルをPlayCanvasへアップロード

pcsync pushAll

PlayCanvas Editor内のファイルをローカルへダウンロード

pcsync pullAll

などで、プロジェクトの同期をすることが出来ます。


✍️ Posted by はが(@yushimatenjin) on 2020/11/30

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

PlayCanvasですが、エンジンについては、オープンソースで開発されておりますので、
TypeScript化などが進んでおります。

TypeScript化への移行

https://github.com/playcanvas/engine/pull/2577

Virtual WebGL Meetup 2020 (12分 16秒 ~ 22分00秒)

Virtual WebGL Meetup 2020にて、今後のアップデート内容や利用例などが
動画内で話されております。

Area Light

Feature/arealights #2535

Animation State Graphs

アニメーションの制御がエディターからできる機能ですが
こちら、現時点では未実装ですが近いうちに実装がされそうです。


✍️ Posted by はが(@yushimatenjin) on 2020/11/30

PlayCanvasアドベントカレンダー
です、皆さんよかったらご参加ください!