PlayCanvasで「Roll a Ball」をつくる②

#前回のおさらい
前回はアカウント作成と簡単なエディタの見方までやりました。
今回は空のプロジェクトから「Roll a Ball」をつくっていきます。

#はじめに
一旦[PlayCanvasのトップページ](https:playcanvas.com/)に戻ります。
するとログイン前とは見た目が変わっていると思います。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/196f0620-c2b9-6f85-a6b4-0f69a7ef47c3.png)
###HOME
PlayCanvasのコミュニティです。現在進行中のプロジェクトについてリリースノートを書いたり、共有したりします。オープンソースのコミュニティらしく、開発者同士の交流の場になっています。

###PROJECT
自身の開発したプロジェクトが並んでいます。

###ACCOUNT
アカウント設定ができます。

#プロジェクトの新規作成
「PROJECT」を選択し、「NEW」から新規プロジェクトを作成します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/7327d794-df95-ff6b-dd78-f1418418d81b.png)
「Blank Project」を選択していることを確認して、「roll a ball」と言う名前でプロジェクトを新規作成します。

![image](https://qiita-image-store.s3.amazonaws.com/0/148084/7f458001-40d1-80eb-7741-5c75d9139df7.png)
プロジェクトができたら、「EDITOR」を選択してエディタを開きます。

#ゲームの作成
##床の作成
まず床を作ります。最初にある「Plane」エンティティを選択します。
インスペクターから、scaleを(20,1,20)に変更し、Nameを「Ground」に変更しましょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/695b600b-4f67-d883-567d-a636fedde7b3.png)

##カメラの配置
ヒエラルキーから「Camera」を選択すると、左上にカメラが見ているビューが表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/9da74a0a-1059-5869-623d-dc09923b258c.png)
デフォルト位置だと、全体を移すことができていないので、全体が写る場所にカメラの場所を編集しましょう。
インスペクタービューよりカメラを
Position
　x: 0, y: 16, z: 23
Rotation
　x: -35, y: 0, z: 0
に変更します。

##実行してみる
シーンビュー右上の「▶」を選択することでゲームが実行されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/f657df97-fe8e-083e-1a86-52fe4f20fa34.png)
このときこのように別ウィンドウで実行することで、シーンビューの変更が即時的にlaunchに反映されます。

##Playerの作成
ヒエラルキーから「Box」を選択し、Nameを「Player」, ModelコンポーネントのTypeを「Sphere」にします。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/120267a8-26c6-ac5f-d23d-ea1badfea509.png)
Playerができました。

##Playerを動かす
プレイヤーエンティティをキーボード入力から制御します。
エンティティを動かすには、座標で動かす方法と物理で動かす方法と2つあるのですが、今回は物理で動かす方法を実装して行きます。

###Groundに剛性を持たせ、あたり判定を追加する。
Groundを選択し、インスペクターからコンポーネントを追加します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/24393c72-4e13-ba2e-9da7-8a25bec3ba3e.png)
まず衝突の当たり判定を決めるcollisionコンポーネントを追加します。

追加するとこのように薄くBoxがシーンに表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/654be176-68ec-3663-ae14-e08c4998f533.png)
これがGroundそのものの当たり判定です。Collisionコンポーネントの「Half extents」より修正できますので実際の見た目と同じになるように(10,0.01,10)に編集します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/f5ad3ffb-3f55-c90b-6b16-2aa7e49f3c7b.png)
このようにmodelと同じ大きさになればOKです

次にRigid bodyを追加してオブジェクトに剛性を持たせます。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/4dcec10e-b526-07cd-a178-cbd1c9ef993d.png)
Rigid bodyコンポーネントを追加することで、オブジェクトが剛性を持ち、物理オブジェクトとして機能します。
Groundは動かない物理オブジェクトなのでRigid bodyのtypeはStaticのままでかまいません。

###Playerエンティティを編集する
Playerエンティティにも同様に、collisionコンポーネント、Rigid bodyコンポーネントを追加します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/838b39b1-58c9-89cf-9625-da2893e7f381.png)
PlayerのmodelはSphereなので、collisionのtypeを「Sphere」にします。
また、動きまわるため、Rigid bodyのTypeを「Dynamic」に設定します。

###Playerエンティティを操作するためのスクリプトを追加する。
Playerエンティティを操作するスクリプトを書いて行きます。
まず、Playerエンティティに「Add Component」よりスクリプトコンポーネントを追加します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/15b618f8-7f52-7d9a-a933-f3c83010d03b.png)
するとインスペクターの一番下にスクリプトコンポーネントが追加されているので、「ADD Script」より「New Script」を選択します。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/66883519-3f34-109c-e306-7340cf6e00cd.png)
するとスクリプト名を聞かれるので「PlayerControl」と入力してください。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/99dcce25-4f4c-34dd-27a1-160669a98f7c.png)

これで空のスクリプトが作成されプレイヤーエンティティにアタッチされました。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/c59dad48-d867-f101-d8bf-7261a99bfb7a.png)

###スクリプトの記述
SCRIPTS > playerControlの「EDIT」を選択すると別ウィンドウでコードエディターが開き、コードの編集ができます。

PlayerControl.jsを以下のように書き換えます。

```javascript:PlayerControl.js
var PlayerControl = pc.createScript('playerControl');

// initialize code called once per entity
PlayerControl.prototype.initialize = function() {
    
};

// update code called every frame
PlayerControl.prototype.update = function(dt) {
    if(this.app.keyboard.isPressed(pc.KEY_UP)){
        //上キーが押されたとき
        this.entity.rigidbody.applyForce(0,0,-1);
    }
    if(this.app.keyboard.isPressed(pc.KEY_DOWN)){
        //下キーが押されたとき
        this.entity.rigidbody.applyForce(0,0,1);
    }
    if(this.app.keyboard.isPressed(pc.KEY_RIGHT)){
        //右キーが押されたとき
        this.entity.rigidbody.applyForce(1,0,0);
    }
    if(this.app.keyboard.isPressed(pc.KEY_LEFT)){
        //左キーが押されたとき
        this.entity.rigidbody.applyForce(-1,0,0);
    }
};
```

実行して矢印キーでプレイヤーが動くことが確認できれば成功です。
![image](https://qiita-image-store.s3.amazonaws.com/0/148084/e672790e-9a53-106a-1a6a-803869a824ad.png)

#次
https://qiita.com/ryotaro_/items/14f0d16ffeaddd537d5b