PLAYCANVASを触ってみる

#はじめに
[某勉強会](http://vrtokyo.connpass.com/event/40235/)で「PLAYCANVAS」のお話を聞き、感動してしまったので、さっそく触ってみた。

#環境設定
まずは環境を作成してみる。
基本的には[ここ](http://qiita.com/p-baleine@github/items/5f9204c654badeccbe66)を参考にしながら進めていった。

※その他の参考資料
[PlayCanvas Developer Resources](http://developer.playcanvas.com/)

##違ったところ

###アカウント作ったら、いきなりプロジェクトのエディター画面になった
いきなりだし。
英語だし。（それだけで拒否反応）
戻れないし。

仕方ないから、もう一度、Topページを開いた。

※真ん中上にある「My First Project」をクリックし、プロジェクトのTop画面が表示されたら、左上の「PLAYCANVAS」でTopページに戻れた
![image1.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/35e184b1-062e-d1aa-1d42-5f6c50a213a2.jpeg)
![image2.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/5d86e7f7-c296-ad78-63bb-71c0d5ed3266.jpeg)

#プロジェクトを作ってみる
参考にした記事を元に、早速プロジェクトを作ってみた

##違ったところ

###「NEW PROJECT」ダイアログの下に、なにやら増えてる
まぁこれはバージョンが上がったということで、仕方がないことですけど。
「ENABLE VR」を選ぶと、HMDに対応してくれるのかな？（未確認）
![image3.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/7f88857d-4061-f0b9-6159-3be87e3b9789.jpeg)

###すでにいくつもEntityが設定されている
これから地面（板）とかボールとかカメラとかライトとか設定するのに、すでにあるし．．．
仕方ないから、いったん消してみた。
![image4.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/29467ff7-7dbb-6c53-c22a-30b39659de6a.jpeg)

###「INSPECTOR」ペインってどれ？
どこにも書かれてないし．．．
どうやら真ん中のビューのある領域の模様。
![image5.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/6c4f6c15-bda0-7e6f-0e46-f4c9d1bc0dcf.jpeg)

###暗い（笑）
ライト消しちゃったからねぇ。
これは仕方ない。
![image6.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/029fe864-fbb9-9a5e-90c8-a47d3f3a4888.jpeg)

###ゲーム画面に編集内容が反映されない
別のウィンドウ（タブ）なので、当たり前ですよね。
何でこういう記事になったのかな？（古いバージョンは違った？）

仕方ないので、毎回、ローンチします。

###「Directional Light」を追加
これは、自分で消しちゃったんだからしょうがない。

###ライトに「Cast Shadows」がない
バージョンが変わったのでしょうか？　ないです。
おそらく「Shadows」になったのでしょうね。
![image7.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/9759bf7c-e1cd-024d-eb4c-cb6c9aba7b46.jpeg)

###床面の影がむごい
デフォルトのままだと、影と面が干渉したような描画になります。
![image8.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/dea0d4f8-8f14-58ad-7229-6edbaf75e994.jpeg)
床面に対しては、ちょっと設定が違うようです。
「Shadows」の「cast」をOFFにしてみます。
![image9.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/957f644e-044f-051b-a501-3ab6c2710d57.jpeg)

###「New Script」ではなくて「Script」だけ
まぁそうなったのでしょう。
![image10.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/d99f7a77-c474-bf2f-2db1-dfb468f1b318.jpeg)

###すでにスクリプトコードが書かれている
プレイヤーを動かすためのスクリプトを書こうとすると、デフォルトでコードが書かれていました。
![image11.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/8203cd5b-ff12-b47d-302a-738aed0c5070.jpeg)
仕方がないので、それっぽく書き直してみた。

```
var PlayerController = pc.createScript('playerController');

// initialize code called once per entity
PlayerController.prototype.initialize = function() {
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
};

// update code called every frame
PlayerController.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT)) {
        // 押下されたのが左キーだった場合
        // X軸方向に大きさ-1の衝撃をエンティティに与えることでエンティティを動かす
        this.entity.rigidbody.applyImpulse(-1, 0, 0);
    }
};

PlayerController.prototype.onKeyDown = function(event) {
    // デフォルトのキーイベントをキャンセルする
    event.event.preventDefault();
};
```

###スクリプトファイルをドラッグできない
まぁそうなったのでしょう。
選択する形式になったようです。
![image13.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/e5c13993-d35b-2d4d-dee4-eb8aa696f5ef.jpeg)

#結局
動いた！ヽ（￣￣∇￣￣）ノ
![image15.jpg](https://qiita-image-store.s3.amazonaws.com/0/130771/5c1efedb-8fb2-050d-0274-ccdca29ac6cb.jpeg)

#まとめ
結構難しいです。　というか、よくわからない。
「RIGID BODY」とか、なんのことだかわからないし。
やりたいことをするために、何をすればいいのかが分かるまでには、相当時間がかかりそう。

そういえば、Unityもよくわからなかったなぁ。