PlayCanvasでサンディちゃんを歩かせるゲームを作るぞ☆（第１回）

# はじめに
なんとなく手を出してみたPlayCanvasが使いやすかったので、ひととおりゲームらしきものを作ってみようかと。

# こんなん作ってます。
https://playcanv.as/b/6yisdCs4/
※本解説よりも開発が進んでいることもございますのでご了承ください。

# PlayCanvasのいいところ
- ネットに繋がってる端末があればどこでも開発ができる。
- ブラウザアプリに限定すればUnityよりビルドが速く快適。

# シーンを作る。
プロジェクトの作成は省略。

とりあえず最初だし『No.0』という名前で作成。

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/92927ac1-2a3b-d908-d52c-ac62cf070100.jpeg)


デフォルトはこんな感じ。
豆腐がある風景。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/6fa4e7d8-e014-2c2e-1443-b5660961e657.jpeg)


# サンディちゃん、配置
サンディちゃんとは・・・
https://playcanvas.jp/sandy/

まあUnxxyのゆに●ぃちゃんみたいなマスコットです。

3Dオブジェクトをダウンロードしておきましょう。


まず「Player」って名前のフォルダを作ります。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/5c3c898a-f755-e00f-c7e4-51ff8a70d485.jpeg)
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/457bf874-6d6a-fff0-1a24-6ba548f39f06.jpeg)
<br>

このフォルダにサンディちゃんのファイルを全部あげちゃいましょ。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/7d76b676-8990-fc3b-a6fc-d07ef497ca95.jpeg)

![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/81aed3dd-6cb5-03c2-16dc-008f8300c2d8.jpeg)

![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/01b440bf-f419-d0c8-7ecb-935ee6ebd9f0.jpeg)


（全部あげてゴチャゴチャしちゃったけど、こうしないとおかしくなるのでとりあえずこれで良しとすｗ）


次にサンディちゃんをステージにあげます。

HIERARCHYの「＋ADD ENTITY」を押してModelを追加。

![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/75f667fa-f991-c772-d777-9749defdf425.jpeg)

次にModelの名前の変更と、モデルの適用を行います。
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/c358d6e5-6d03-644b-198b-8bd6f09b71c4.jpeg)

緑枠が名前でPlayer、オレンジ枠がモデルでidle.jsonにしましょう。

アニメーションを追加します。

ADD COMPONENTでANIMATIONを選択。
![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/36f96f6e-889a-223c-2b7a-a74b5df17d19.jpeg)

ADD ANIMATIONでidle.jsonを選択、DONEをクリック。
![13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/e090275d-5819-0d06-d315-2fc39b43d85c.jpeg)

Assetsに追加されます。
![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/42ea243c-eae9-2df4-a5a2-076481d9fb84.jpeg)

この状態でいったん動かしてみましょう。
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/b3b16244-c827-d8eb-16e6-48d27454d553.jpeg)

再生マークのボタンを押してみましょう。

新しくタブが開いてローディング
![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/c07e3677-5364-0839-bec5-1c6cdbc35d53.jpeg)

息をしているサンディちゃんがたたずんでおります。
![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/30cf2ebd-4041-fb09-8fab-7a5c981731f4.jpeg)

Launchボタンを押してから10秒かかってないです。（この内容だから軽いだけ？）

PUBLISHもしちゃいましょう。

MANAGE SCENEから行きます。
![スクリーンショット 2019-12-19 0.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/150f5c91-e9a4-3fd1-49ce-a97a9925b27f.png)

PUBLISH！！
![スクリーンショット 2019-12-19 0.21.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/5caf3ac7-6d03-3d16-c1f3-9b57e59c140a.png)

ここからあれこれ入力していけば、制作したゲームをすぐに遊べるURLが出力されます。
![スクリーンショット 2019-12-19 0.22.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/ecd0a029-1524-33e3-161d-d50abd2eb095.png)

ほらね。（サンディちゃんがたたずんでるだけです）
![スクリーンショット 2019-12-19 0.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110583/89ba4fa8-c3f1-d77b-3e45-b0bc1013f2a2.png)

PUBLISHは進捗などをツイッターに貼る場合に使うといいと思います。


## 所感
今のところ、ブラウザでの開発についてはUnityよりはイイです。
アセットやAPIなどのボリュームについては敵わないだろうなと思いますけれど。
しかし何よりも自前のデバイスが手元になくても、ゲーム開発できることが案外ノンストレスで楽しいですね。
個人的にこれがかなり大きい。