#概要
2020年5月現在、Playcanvas(の公式エディタ)ではTypeScriptをサポートしていないので、
どうにか使えないかと試行錯誤した結果をまとめるためのメモです。
#そもそもPlayCanvasとは
誤解を恐れずざっくり言えばエディタも実行環境もブラウザでスクリプトがJavaScriptなUnityといったところでしょうか。
詳しくは公式サイト、日本語公式サイト、関連リンク集の記事あたりでも。
#実現方法
PlayCanvasはREST APIを使ってアセット(ファイルみたいなもの)をアップロードする機能を持っているので、
それを使ってnode.js環境でTypescriptコードをトランスパイルし出来上がったJavaScriptコードをアップロードすればエディタの環境を生かしつつスクリプトをTypeScriptでコーディングする環境が実現できます。
タスクランナーを使ってトランスパイルからアップロードまで一括でまとめて行うこともできます。
#インストール
node.js環境が必要ですので、お手持ちのPCにインストールするか、インストールされている環境を用意してください。
IDEはなんでもいいですが、VSCodeがおすすめです。
PlayCanvas同様IDEもブラウザ上で開発したい場合はコマンドラインが使えるWebIDEが必要です。
探した範囲で無料でもコマンドラインが使えるWebIDEはGitPod(無料ユーザーは月50時間までの使用制限あり)くらいでした。
以下のモジュールをインストールします。
gulp
typescript
gulp-playcanvas
gulp-typescript
playcanvas
through2 (Webpackを使う場合は不要)
WebPackを使う場合は以下をインストールします
webpack
webpack-cli
webpack-stream
ts-loader
基本的にはローカルでもグローバルでもどちらでもいいようですが、gulpだけはグローバルとローカル両方に入れる必要があるようです。
#node.js環境でPlayCanvas APIを使う
「Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった」という記事で
Playcanvas APIのラッパとglupタスクをnpmやyarnでインストールできる形で公開された方がいましたので、有難く使わせていただきます。
ただ残念ながらAPIの使用に必要な設定ファイル(playcanvas.json)の説明が欠けているようなので、自分なりに探ってみた結果をのせておきます。
{
"accessToken": "",
"projectName": "",
"projectId": "",
"scenes": [""],
"branchId": "",
"remotePath": ""
}
PlayCanvasのログイン直後の画面(HOME)から辿るものは先頭に＊、対象にするプロジェクトを開いたエディタ画面から辿るものは先頭に＋をつけておきます。
エディタ画面の各種名称はチュートリアルの「PlayCanvas Editor」に記載の名称に準拠しています。
####＊accessToken:
右上のユーザーアイコンからメニューを開き、「Account」を選んでアカウント設定に行くと、下のほうに「API Tokens」という項目があるのでその中の「GENERATE TOKEN＋」をクリック、ダイアログが出て名前の入力を求められるので適当に名前をつけるトークンとなる文字列が現れるのでそれをコピーアンドペーストします。
####＊projectName:
プロジェクト名を直接記述するか、右上のユーザーアイコンからメニューを開き、「Projects」を選んでプロジェクト一覧から対象のプロジェクトをクリックしてoverviewを開き、上のプロジェクト名をコピーアンドペーストします。
####＊projectID:
右上のユーザーアイコンからメニューを開き、「Projects」を選んで出てきた画面から対象のプロジェクトをクリックしてoverviewを開くとURLに6桁の数字が載っているはずなのでその数字をコピーアンドペーストします。
*の部分が設定する数字になります。
####＋scenes:
対象のシーン名を直接記述するか、エディタを開き、対象のシーンを開いた後、ビューの左上からシーン名をクリックすると右側のインスペクタにシーン名の設定が表示されるので、そこからコピーアンドペーストします。配列形式なので複数指定できるっぽい感じになっていますが、やるとどうなるかは未確認。
####＋branchID:
ビューにあるブランチ名、または左側にあるメニュー上のPlayCanvasアイコンをクリックして表示されるメニューから「Version Control」を選ぶとブランチの一覧が出てくるので(初期状態ではmasterというブランチ1つだけ)対象のブランチ名の下に表示されている長ったらしい英数字とハイフンの組み合わせになってる文字列をコピーアンドペーストします。
####＋remotePath:
スクリプト(アセット)をアップロードしたいフォルダアセット名を記述します。フォルダアセットがない場合はあらかじめ作っておく必要があります。
#準備はここまで
これでアセットをアップロードする準備はできたのでgulpタスクを用意するのですが、モジュール機構の関係で(詳細は後述)Webpackを使わない場合と使う場合で内容が異なるので続きの記事に載せたいと思います。