フォークしてプロジェクトを作成する

 

まずはプロジェクトを作成しましょう。

本ワークショップではあらかじめスタートのプロジェクトを用意していますので、それをフォーク(複製)して始めます。

https://playcanvas.com/project/568982/overview/2dhandsonstartにアクセスしてプロジェクトをフォークしてください。

フォークするとPROJECT NAMEが聞かれるので、好きな名前を入力してFORKしてください。

フォークが終わると自分のプロジェクトに登録されます。

これでプロジェクトの作成は終了です。

登録されたらEDITORを押して、EDITORを開きましょう。

 

「SCENESを選択」

hanson-startをダブルクリックしてください。

「PlayCanvas Editor」

Editorを起動すると以下のような画面になります。PlayCanvasはスクリプト作成以外の作業をこのEditorから操作することができます。

Editorの構成は以下のようになっています。

 各要素は以下のとおりです。

1. シーン(SCENE)

シーンビューには製作中のゲーム世界（シーン）が表示され、自由な位置・角度から眺めることができます。

2. インスペクター(INSPECTOR)

シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。

3. ヒエラルキー(HIERARCHY)

シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。

4. アセット(ASSETS)

製作中のプロジェクト（ゲーム全体）に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。

5. メニュー(MENU)

シーンのビューモードやプロジェクトセッティング等の作業が行えます。

 

「ゲームの実行」

ゲームを作り始める前に、現状の機能を確認しておきましょう。 PlayCanvasは「ゲーム再生ボタン」をクリックすることで、ゲームの挙動を確認することが出来ます。

ゲームを再生して下さい。ゲームの再生は別タブのlaunchで実行されます。

実行すると、矢印キーかWASDキーでSandyちゃんが移動できることが確認できます。左右に移動すると、足場がないところでは落ちて行ってしまうところまで確認出来たらOKです

「足場を増やす」

Sizeを調整する

ゴブリンのところまでたどり着けるように、足場を増やしましょう。

足場はspriteアセットによって構築されているため、Spriteの機能を利用することで拡大縮小せずにタイリングして簡単に引き延ばすことができます

HIERARCHYのGrass_Longを選択。SPRITEのSizeを調整します。

SizeのWidth,Heightの値を調整することで縦横にタイリングされます。今回はwidthへ15と入力してください。

「ゴブリンがすり抜ける」

この状態で再生すると、Sandyちゃんとゴブリンがすり抜けてしまいます。

次のパートからゴブリンに当たるような処理を追加していきましょう

 

 チュートリアル -2Dアクションゲーム-