PlayCanvas EditorのコードをGitで管理をするために使えるライブラリ「playcanvas-sync」

PlayCanvas Editorで開発をしていると、ソースコードの管理をPlayCanvas Editorのバージョン管理機能を使用しないで、Gitで管理をしたい場合があります。その際に使える便利なライブラリがplaycanvas/playcanvas-syncです。

ライブラリ(GitHub)
https://github.com/playcanvas/playcanvas-sync

このライブラリは、PlayCanvas EditorのAPI Tokenを使い、ローカルマシーンのアセットをPlayCanvas EditorへREST API経由で同期できるライブラリです。

使い方

PlayCanvas Editorのアセットをローカルマシンに同期する

インストール

pc-syncはnode.jsの環境で動くライブラリですが、npmでは公開されていないのでGitHubのリポジトリからインストールする必要があります。

1. リポジトリをクローンします。

git clone [email protected]:playcanvas/playcanvas-sync.git

2. npm install

cd playcanvas-sync
npm install

3. パスを通す

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

4. パスの確認をします

pwd  

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

Mac BigSurでの設定です。
各 OSで必要な方法でパスを通してください。

export PATH="$PATH:パス"

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

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

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

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

mkdir project
cd project

1. pcconfig.jsonを作成

同期をするプロジェクトの、ブランチID, プロジェクトID, アップロード先ディレクトリ, API_KEY
を含む設定ファイルを作成します。
ブランチID, プロジェクトIDはPlayCanvas Editorのプロジェクトから取得します。

ブランチID

Versionコントロールから確認できます

プロジェクトID

https://playcanvas.com/project/*プロジェクトID*から取得できます。

PLAYCANVAS_TARGET_DIR

同期する、ローカルのフォルダを設定します。
ここでは./playcanvasを作成します。

mkdir playcanvas

API_KEY

API Keyはこちらから、GENERATE TOKENから生成したものを設定します

{
  "PLAYCANVAS_BRANCH_ID": "ブランチID",
  "PLAYCANVAS_PROJECT_ID": 00000000000000,
  "PLAYCANVAS_TARGET_DIR": "./playcanvas",
  "PLAYCANVAS_API_KEY": "API_KEY",
  "PLAYCANVAS_BAD_FILE_REG": "^\\.|~$",
  "PLAYCANVAS_BAD_FOLDER_REG": "\\."
}

ここまで設定した現状のディレクトリはこのような形です。

- project
  - pcconfig.json // 設定ファイル
  - playcanvas //アップロード先

コマンド

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

pcsync or pcsync.js pushAll

2. テクスチャを含むPlayCanvasへアップロード

pcsync or pcsync.js pushAll -r "\\.(png|jpeg)"

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

pcsync or pcsync.js pullAll

4. テクスチャを含むPlayCanvasへをローカルへダウンロード

pcsync or pcsync.js pullAll -r "\\.(png|jpeg)"

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