ProjectのFork

sandy-TankGameのprojectを複製(Fork)して使用します。下記URLにアクセスしてください。

Forkボタンを押すと、プロジェクト名とオーナーを決めるダイアログが出ますので、お好きなプロジェクト名を入力してください。オーナーはそのままの設定でOKです。入力が完了したら再度、ダイアログのForkボタンをクリックしてください。

先ほど入力したプロジェクト名が入ったページが開きます。"Play"のボタンが無いのは、まだビルドしていないからです。"EDITOR"ボタンをクリックすると、PlayCanvasのビジュアルエディターのページが開きます。

エディット画面のGUIの説明

まずSCENESの画面からeditするsceneを選びます。
"Standerd"を選択。

Untitledをクリックすると以下の画面になります。

以下の画像を基に、GUIを簡単に説明していきます。

メニュー(MENU)
Photoshopなどでいうツールバーとメニューバーが合わさっている感じ。
プロジェクトの設定やシーンの設定などもここで操作できます。
ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。
このシーンではどんなentityが使われているのかなどここで管理。
まとめてグループ化や名前の変更などもできる。
シーン(SCENE)
3D空間が表示され、自由な位置・角度から眺めることができます。
3DコンテンツやカメラのPositionやRotateなどを弄ることができます。
アセット(ASSETS)
プロジェクトhtmlやcss、imgといったファイルや3Dモデルのデータなどもここで表示され、ここに入れて使われるデータたちは合わせてアセットと呼ばれています。
ディレクトリで分けたり名前を変更することもできます。各ファイルはアップロード時にIDが付与され管理されるため、同じ名前のファイル名をアップロードしても上書きアップロードにはならないことがあるので注意。
インスペクター(INSPECTOR)
ヒエラルキーやシーンで選択中のオブジェクトの設定を編集できます。
3Dモデルのメッシュや衝突判定、物理制御に関するパラメータもここで定義することが可能。

基本的なGUIはこの5つで、他にコードエディターがあります。
コードエディターはメニューの下の方にあります。

コードエディターは普段使用されているであろうエディターと基本同じです。
JavaScriptのsnippetやコードのhighlightなども基本付いています。

基本ここでコードを書いて反映していきます。

右上の再生ボタン的な矢印のボタンをクリックすると、Launch実行されます。

Sceneの現状をLaunch実行してくれるため、開発しながら確認ができます。
Launch画面を開いたままにしておくと、Editor画面とライブリンクが持続した状態になり、Editor画面でScaleの数値などを変更するとリアルタイムでLaunch画面でもプレビューされます。

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する