ゲーム開発を受注しようぜ＜その３＞　Unity2Dで　画面の中にキャラクターを置こうぜ

ゲーム作りを実践しながら覚えたい場合は　次のサイトのチュートリアルがおススメ。

「【Unity1】ユニティちゃんを自動で移動！Sprite画像, velocity【ユニティちゃん縦スクロール1】」ひよこのたまご
http://hiyotama.hatenablog.com/entry/2014/11/27/225323

また、Unityの公式だろうか、シューティング・ゲームを作るチュートリアルもあるようだ。

「2Dシューティングゲーム」
https://github.com/unity3d-jp-tutorials/2d-shooting-game/wiki


この記事では、作業をずらっと流してみる。

# スプライトを置く

![20170605l1b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/6bc87412-f24c-a2c2-dca5-5e440a09fff2.png)

Hierarchyビューで右クリック。[2D Object] - [Sprite]。

![20170605l2b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d2407853-e522-4289-e81b-985ec136d26f.png)

New Sprite が作られるので、クリックして Player と打鍵。名称変更する。

画面を見てもキャラクターがいないのは、背景の後ろに隠れているからだ。
レイヤーを作りたい。

# 表示順のレイヤーを作る

![20170605l15b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/b1e0f13c-c5a5-5a70-0300-a41d7213c8e4.png)

レイヤー設定ビューへの進み方は　いろいろあるが、
とりあえず Player スプライト選択状態で Inspector の Sorting Layer ドロップダウンリストをクリックし、[Add Sorting Layer...]をクリック。

![20170605l16b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/5f530713-a795-f8bb-754a-6ffa41e1dd7c.png)

レイヤーの名前を追加していく。[+]ボタンで行を追加したり、行をクリックして[-]ボタンで削除することも可能。行頭の[=]のような記号はハンドル（＝つかむところ）になっていてドラッグ＆ドロップで順序を入れ替えることもできる。

![20170605l17b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/f38de603-e2f3-52ec-3090-30c33418e22a.png)

これで　キャラクターが背景より手前に置かれた。
背景画像は今 Default レイヤーにあるので、全て適切に設定しよう。

### C#スクリプト で　ソーティング・レイヤーを 設定する方法

```C#
    // Tile1 ゲーム・オブジェクトを作る
    GameObject go = new GameObject("Tile1", typeof(SpriteRenderer));
    // 在るものから探す場合
    // GameObject go = GameObject.Find("Tile1");
    SpriteRenderer rend = go.GetComponent<SpriteRenderer>();
    rend.sortingLayerName = "Ground";
```


# 大元のレイヤー

味方が撃った弾は敵に当たって、味方には当たらない、といったことがあるだろう。

![20170605l19b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/0e289b0c-e628-4a61-43a6-0670c93030b4.png)

この目立つところにあるレイヤーは、そういうのを分けたり、ライトに照らされるやつ、照らされないやつ、を分けるような使い方をするようだ。

![20170605l18b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/62dd87ee-644f-cdce-ca9b-13604745d8ea.png)

最初からいくつか設定されている。とりあえず今のところ Default だけ使っていればいいのではないか。


# タイル画像をスライスする

![20170605l3b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/b159137a-7c43-27c4-952f-a8d800e58cc6.png)

Projectビューで画像をクリック。Inspectorビューでこれから設定を行う。

拡大縮小時に　ドット絵を　ぼかしたくない場合は
[Advanced] - [Filter Mode] を `Point(no filter)` に変更。

１枚の画像をスライス（分割）して　アニメを作りたい場合は Sprite Mode を `Multiple` に変更して [Sprite Editor] ボタンをクリック。

![20170605l4b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/9560abc2-81ec-d269-62dd-a0fcb3844797.png)

スプライト・モードを Multiple にしたなど、変更した場合、画面が変わる際に　変更を適用するか尋ねられるので [Apply] をクリック。

![20170605l5b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/9bac570b-991a-a10a-2184-cc736005f124.png)

Sprite Editor が出てきたら　画面上の方の[Slice]ボタンをクリック。

Type を `Grid By Cell Size` にし、
Pixel Size の X、Y に　ヨコ幅、タテ幅を設定。
[Slice]ボタンをクリックする。

[Apply]ボタンは、今押しても、後でダイアログボックスが出てきて押してもいい。
[×]ボタンでウィンドウを閉じる。

![20170605l6b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/1e88fe63-10b8-3dd6-b4e4-6b6246b8059a.png)

Hierarchyビューの Player スプライトをクリックして選択状態にする。

アニメーションだけ設定してアニメーション・データを持っておく、といったことはできないので、このスプライトのアニメを設定する、という風に紐づく。

Playerスプライトを選択状態のまま [Window] - [Animation] をクリック。

![20170605l7b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/b3f171d0-6ec6-3bb6-b4ae-499bded94b05.png)

Animationウィンドウが出てくる。
最初は何もないので [Create]ボタンをクリック。

![20170605l8b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/47f6a9a6-d721-d011-3900-2f8e260aefa8.png)

アニメーション・データをどこに保存するか　尋ねられる。
Unityのプロジェクト・フォルダーの `Assets/Resources` の下に保存しておかないと、後で検索が使いにくいケースがある。

わたしは `Assets/Resources/AnimationClips` というフォルダーを作って 名前を `Player.anim` にして入れることにした。

![20170605l9b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/78b5116f-d212-5c34-118a-20f707bd6b15.png)

タイムライン（ドープシートという）が出てくるが　これは無視して、
左上の方の [Player] という名前をクリックして [Create New Clip...] をクリックする。

![20170605l10b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/53c7025d-f994-8ec1-bab3-31e2e52c0042.png)

また　.anim の保存を尋ねられる。
ダッシュ・モーションを作りたいので `Player@Dash.anim` みたいな名前にする。アットマークをここで使っていいのかよく分からない。

![20170605l11b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/c8d45c70-41e8-0717-cbb2-244a6e6d2a25.png)

[Samples] に 4 を入れて　キーボードの[Enter]キーを押す。
隣のタイムラインも 4 で１サイクルになった。

![20170605l12b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/6f28b5bb-d3aa-fe3d-c1ae-9789277823e3.png)

Projectビューで、スプライトをスライスした画像を　[Ctrl]キーを押しながら４枚クリックする。
スライスした画像が出ていなければ、画像の右隣の三角印をクリックする。

４枚の画像を、タイムラインの１フレーム目にドラッグ＆ドロップする。

![20170605l20b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/c5d49a3e-b1fa-a459-c5ca-62583b5f6ad6.png)

アニメーション・ウィンドウの三角ボタンを押すと、アニメーションを確認できる。

![20170605a2.gif](https://qiita-image-store.s3.amazonaws.com/0/159417/445904d6-d8de-3c9f-2ecc-2ee63e980707.gif)

# 地面にキャラクターを立たせるには

ひよこのたまご　で紹介されている方法を真似てみる。
「【Unity8】ユニティちゃんを歩かせる！Animator Controller, rigidbody2D.velocity【横スクロールユニティちゃん2】」
http://hiyotama.hatenablog.com/entry/2015/06/13/090000

## キャラクターに、当たるところ　を設定する

Player スクリプトを選択状態にして、Inspectorビューの [Add Component]ボタンをクリック。

![20170606a1b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d4ff6e83-58fd-c992-f530-0e6e5b88b609.png)

[Physics 2D] - [Circle Collider 2D] をクリック。

![20170606a2b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/87a953e3-9ff6-e7e7-76c7-4b081abf1fc7.png)

緑色の円が表示された。これがコライダー（当たり判定）だ。

![20170606a3b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/30aa225c-d951-52cc-723e-e165062f5a62.png)

Inspectorビューの Circle Collider 2D コンポーネントの
Offset Y を -0.1 にすると、サークルが 10ピクセル下がる。（pixel per unit が100の場合）

Radius は半径の長さなので、ラジウスを小さくすることで　円が小さくなる。
円の底の方を、足元の接地面に合わせた。足がじたばたするときは半円を描くだろうから、理屈には合っているのだろう。崖のぎりぎりで、体を半分以上だしたときに中心からずれて落ちていくのも都合がいい。

![20170606a4b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/7f4d671a-7207-4e22-347e-3d1d641f0fdc.png)

さらに [Add Component] ボタンをクリックして [Physics 2D] - [Box Collider 2D] をクリック。
ボックス・コライダー２Ｄを追加した。

サークル・コライダー２Ｄと合うように　上図のように　位置を調整しなおした。

## キャラクターが重力に引かれるよう　重さ　を付ける

![20170606g1b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/6090ff67-6eca-36ed-cdc8-77fb68e8c893.png)

Player ゲーム・オブジェクトを選択状態にし、Inspectorビューから [Add Component] - [Physics 2D] - [Rigidbody 2D] と進む。

リジッドボディを付けると、物理演算の計算対象になって、重力に引かれて落ちていったり、跳ねたり、回転したりするようになる。

２Ｄゲームでは　それはやりすぎなので、あとで回転しないとか　制限を付けていくことになる。


# 地面

あとは地面にも　コライダーを付ければいい。

![20170606a5b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/6d4e4168-d55e-1572-ecef-b76e704866fd.png)

このサンプル画像の地面は　タイル・マップのデータを読込んで作っている。　地面の緑色のところに　ボックス・コライダー２Ｄ　を付けた。

関連記事：http://qiita.com/muzudho1/items/061944fdcc73008c822c

![20170606a3.gif](https://qiita-image-store.s3.amazonaws.com/0/159417/e7d88b6c-d2e3-29ca-ded0-f43af27bc065.gif)

何にぶつかっているのか分からないが　へんなところに詰まっている。

このバグの理由：http://qiita.com/muzudho1/items/3ff571b64373a1de06b8

おわり。