AsepriteとUnityを使った2Dジャンプゲームの制作過程

#はじめに
はじめまして、@tm_1219といいます。普段は[株式会社qnote](https://qiita.com/organizations/qnote)で猫社員たちと戯れながら、片手間にAndroidアプリ開発をしています。
この記事は「[qnote Advent Calendar 2020](https://qiita.com/advent-calendar/2020/qnote)」23日目の記事になります。

私は2020年10月にリリースされたスクウェア・エニックスのオクトパストラベラー大陸の覇者というスマホゲームを最近やっているのですが、ドット絵って綺麗で良いものだなぁと再認識し、**ドット絵描いてみたい、ゲームを作って動かしてみたい**、と思ったのでそのゲーム制作の様子を記事にしました。
業務と全く関係無い内容で本当に申し訳ないのですが、反省はしていません。

本記事ではUnityの解説を入れながら、**Unityでゲームを動かす仕組みと、徐々にゲームができていく様子**を伝えられたら良いなと思います。
Unityはドットインストールで触ったことはありましたが自分でゲームを作ったのは今回が初めてなので、ご指摘もコメントでどしどし頂けると助かります！

<font color="Red">ちなみにめちゃくちゃ長い記事になってしまったので、ゲームの雰囲気だけ知りたい方は途中途中のGIFアニメを流し読みして頂けたらと思います！</font>
<font color="Red">また、制作した以下のゲームはオンラインランキング機能があるので、遊んで頂けるだけでも泣いて喜びます。</font>
https://unityroom.com/games/tapfly_mod
※PCのみ動作します。

#環境
macOS Catalina 10.15.7
Unity 2019.4.16f1
Aseprite v1.2.25

#Asepriteを触ってみる
まず私はドット絵を描いたことが無かったので、ひとまずAsepriteを触って感触を掴んでみようと思いました。
ちなみにAsepriteは、Windows,mac,Linuxで使える唯一無二の神ツールと呼ばれています。
**体験版でも保存機能以外は全て使える**ので皆さんもぜひ触ってみてください！
[Aseprite 体験版](https://www.aseprite.org/trial/)
[Aseprite 製品版](https://store.steampowered.com/app/431730/Aseprite/?l=japanese)

##Asepriteの使い方
以下の記事を参考にさせて頂きました。
とてもわかりやすい内容となっているので、本記事では解説は割愛させて頂きます。
[Asepriteでドット絵を描くには ～最初の設定とAsepriteの使い方～](https://yuzuyu3.com/aseprite-start/)
[Asepriteでドット絵を描く](https://qiita.com/akeru/items/7294811b89c2421bc412)

##お試しでドット絵を描いてみる
[株式会社qnote](https://qiita.com/organizations/qnote)では10匹の猫社員たちと共に仕事をしており、せっかくなのでキャラクターとして登場させたいと思いました。
ひとまず試しに猫社員ちゃこ氏のドット絵を描いてみました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/e7d4d4b9-ace6-11ab-9d86-77fc03d4edbc.jpeg" width=38%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/acbb7fd3-1bcb-bb39-25c2-c3f7a14f4cca.png" width=15%>
ジト目にハチワレに長いまつげとお髭という個性豊かな子だったので、その要素を取り入れるだけでそれっぽくなりました！

ちなみに当初の予定ではAseprite触ってみた、という記事にしようとしていたので何も考えずただドット絵を描いて楽しんでいました。
ひとまずゲーム作りに入って、あとから必要なドット絵を描くこととします。

#Unityを使ったゲーム制作の流れ
猫といえばジャンプ、ジャンプと言えばJump○ingということで、ジャンプしてどんどん上に登っていくようなゲームを作りたいと思います。

##1.Unityの導入
こちらもわかりやすい導入記事がありましたので、参考にさせて頂いた記事の紹介のみとさせて頂きます。
[2020年度版Unityダウンロード方法](https://qiita.com/tommy1317/items/148fde8765f612af1f61)

##2.SceneとGameObjectとComponent
Unityではキャラクターもステージも背景も全て**GameObject**として定義します。
そしてそのGameObjectに色々な種類の**Component**を組み合わせて設定することで様々な制御を行うことができます。
**Scene**はGameObjectたちを格納する箱のようなものです。

###キャラクターの表示
まず操作するキャラクターを表示させます。
UnityはAssetStoreに有償・無償の素材が沢山あるので一旦以下の素材について画像だけ使わせて頂きました。
[AssetStore Sprite Pack #1 Tap and Fly](https://assetstore.unity.com/packages/2d/characters/sprite-pack-1-tap-and-fly-21454)

上記ページのAdd to My Assetsでダウンロード、インポートすると以下のような画面になります。
![unity_init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1c393ee5-f4d6-3208-61cb-7a294c6b5dc1.png)
下のProjectビューから表示させたい画像を複数枚選んでSceneビューにドラッグ&ドロップしてアニメーションを保存すると、Hierarchyビューにplayer_fly_f01というGameObjectが追加され、Sceneビューに画像が表示されます。
わかりやすいように名前はPlayerに変えておきます。
![unity_player.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/dfa137bb-e4bf-bc4c-019e-a590013dcbb9.png)
そして、右側のInspectorからTransform ComponentのPositionとScaleをいじって上部の再生ボタンをクリックすると・・・。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/fdef4cb1-ac8b-dc6e-f5dc-fa07333cfb10.gif" width=30%>
簡単にアニメーションさせることができました。
このように実際にどのようにゲームが動作するのかプレビュー表示させて確認することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/0d722079-735c-03d3-2bbd-a6cb5d15c7c9.png" width=30%>
再生の他に、一時停止、1フレームだけ進める、といったことができるようになっているのでデバッグ時にも役に立ちます。

###RigidBody Componentの設定
物理法則に則ってオブジェクトを動かしたい場合は、**RigidBody**というComponentを設定することで実現できます。
Add ComponentからPhysics 2D->Rigidbody 2Dを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/9ccaeac5-4dcc-abc9-d8ca-0dc8260f72ff.png" width=60%>
色々と設定がありますが、ひとまず**Mass(質量)を20**、**GravityScale(重力のかかり具合)を6**としてみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/95aa731d-5773-b161-114a-a40db74217c7.png" width=80%>
再生してみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/84f6f856-2148-7af3-dbef-404023f48605.gif" width=40%>
落ちた！

###床の設置
次はステージの土台となる床を設置してみます。
左のHierarchyビューから、+マーク->3D Object->Cubeを選択しFloorという名前をつけます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cc73f6ee-4176-7f7d-b441-c90245b18836.png" width=60%>
床についてもまずはTransformでPositionとScaleを調整し土台となるように設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/03bb49f7-b4ac-b458-b736-ad53cf8270b3.png" width=60%>
ここまで2Dで全て表示させていましたが、実際は↓のように**3D空間にそれぞれのオブジェクトが存在**しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/880ea58f-7184-0340-3dcc-47546c933be9.gif" width=80%>
ひとまず再生してみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/8ecb9aa6-3df6-6748-da2f-8df0f0e96633.gif" width=40%>
すり抜けます。

###Colliderによる衝突判定
Unityには**Collider**というComponentがあり、これを使って衝突判定を行います。
2Dオブジェクトと衝突判定させるため、Floorに元々設定されている3Dオブジェクト用のBox ColliderをRemoveし、InspectorのAdd ComponentからPhysics 2D->Box Collider 2Dを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/24edfb99-bef5-92cb-8db4-3582cb292ea7.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/09471dda-5174-bdb1-eec5-aeb046b70a62.png" width=60%>
見づらいですが、床全体が緑の線に囲われており、こちらが衝突判定に使われます。

Player側にもColliderが必要なのでCircle Collider 2Dを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/f5211b7f-ba12-2ff7-7877-5714bd35ff4f.png" width=30%>
Player側はこの緑の円が衝突判定に使われます。
再生してみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/ae7c61a5-938d-ea54-13f9-8351292fd28e.gif" width=40%>
うまく乗せることができました。

##3.スクリプトによる制御
Unityではキー操作や、ある条件のときに何か処理をさせたい場合、**C#でスクリプトを書く**ことで実現できます。

###キャラクターの操作
まずはスペースキーを押した時にジャンプさせてみます。

Projectビューで右クリック->Create->C# Scriptを選択して、↓のサンプルコードを実装します。

```Player.cs
using UnityEngine;
using System.Collections;

public class Player : MonoBehaviour {

    // 変数の定義と初期化
    public float flap = 550f;
    Rigidbody2D rb2d;

    // Updateの前に1回だけ呼ばれるメソッド
    void Start() {
        // Rigidbody2Dをキャッシュする
        rb2d = GetComponent<Rigidbody2D>();
    }

    // シーン中にフレーム毎に呼ばれるメソッド
    void Update() {
        // スペースキーを押したら
        if (Input.GetKeyDown(KeyCode.Space)) {
            // (0,1)の垂直方向に瞬間的に力を加えて跳ねさせる
            rb2d.AddForce(Vector2.up * flap, ForceMode2D.Impulse);
        }
    }
}
```
1.最初に**Startメソッドが一度だけ呼び出される**ので、PlayerのRigidbody2Dを保持しておく。
2.**1フレーム毎に毎回呼び出されるUpdateメソッド**において、Input.GetKeyDownメソッドにてスペースキーが押下されているかチェックする。
3.押下されていたらAddForceにてVector2.up(0,1)の垂直方向に一定の力を掛けて、瞬間的(ForceMode2D.Impulse)に力を加える。

スクリプトをHierarchyビューのPlayerにドラッグ&ドロップして設定し、再生します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/80e0c46b-a65d-ec38-ebbb-984f8558855c.gif" width=40%>
スペースキーを押すたびにジャンプしてくれました。
可愛い。

###キーの押下時間によってジャンプ力を変える
次はJump○ing的な感じでスペースを押した時間によってジャンプの高さを変えたいのでコードを修正してみます。
まず、スペースを離した時にジャンプさせるために、Input.GetKeyDownをInput.GetKeyUpに変更。

```Player.cs
        // スペースを離したら
        if (Input.GetKeyUp(KeyCode.Space)) {
```

次に押している時間によってジャンプ力を変えたいので、Input.GetKey(KeyCode.Spece)でジャンプ力を累積して、AddForce時に考慮する。

```Player.cs

    public float chargePower = 0f;

    // シーン中にフレーム毎に呼ばれるメソッド
    void Update() {
        // スペースキーを押している間
        if (Input.GetKey(KeyCode.Space)) {
            // ジャンプ力を累積する。
            chargePower += 1f;
        }

        // スペースキーを離したら
        if (Input.GetKeyUp(KeyCode.Space)) {
            // (0,1)の垂直方向に瞬間的に力を加えて跳ねさせる
            rb2d.AddForce(Vector2.up * flap * chargePower, ForceMode2D.Impulse);
            // 一度ジャンプしたらpowerをリセットする
            chargePower = 0;
        }
    }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/c2868bcf-be1b-c1ce-db2c-e59544893835.gif" width=30%>
**どこいくねーーーーん！！！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/9cd5e99d-9774-edec-69f3-ffc8804056b2.gif" width=30%>
引きで撮影したところこのくらい飛んでいました。

これはAddForceにて適当にchargePowerを掛けてしまったのが原因のようです。
フレーム毎に加算する値を増やして、足すようにします。

```Player.cs
        if (Input.GetKey(KeyCode.Space)) {
            // ジャンプ力を累積する。
            chargePower += 5f;
        }

        // スペースキーを離したら
        if (Input.GetKeyUp(KeyCode.Space)) {
            // (0,1)の垂直方向に瞬間的に力を加えて跳ねさせる
            rb2d.AddForce(Vector2.up * (flap + chargePower), ForceMode2D.Impulse);
            // 一度ジャンプしたらpowerをリセットする
            chargePower = 0f;
        }

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/c3b67eb3-8421-d72c-04e7-36e1b1ef5cc0.gif" width=30%>
タップ、1秒長押し、2秒長押しの順。良い感じです。

###左右へのジャンプ
次は、左右どちらかのカーソルを押したままジャンプした場合はその方向に飛ぶようにします。
Vector2は(x,y)で二次元のベクトルを扱える型なので、それぞれ以下の値を設定すれば良さそうです。
　上方向:(0,1) ・・・ Vector2.upはnew Vector2(0,1)と同義
　左斜め上方向:(-1,1)
　右斜め上方向:(1,1)

```Player.cs
        // スペースキーを離したら
        if (Input.GetKeyUp(KeyCode.Space)) {
            // 初期値は上方向
            Vector2 direction = Vector2.up;

            // 左右キーが押されているかどうかチェックする。
            if (Input.GetKey(KeyCode.LeftArrow) && Input.GetKey(KeyCode.RightArrow)) {
                // どちらも押されていたら垂直に飛ぶ。
            } else if (Input.GetKey(KeyCode.LeftArrow)) {
                // 左が押されていたら左斜め方向に設定する。
                direction = new Vector2(-1, 1);
            } else if (Input.GetKey(KeyCode.RightArrow)) {
                // 右が押されていたら右斜め方向に設定する。
                direction = new Vector2(1, 1);
            }

            // directionに設定した方向に瞬間的に力を加えて跳ねさせる
            rb2d.AddForce(direction * (flap + chargePower), ForceMode2D.Impulse);

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/eb97b1f3-8c57-7e62-6d89-8662aa4f972b.gif" width=120%>
転がれたんかワレ・・・。

トリさんが可哀想なので綺麗に着地できるようにします。
まず、Rigidbody 2Dの設定で**Freeze Rotation**にチェックを入れるだけで回転が抑止できるようです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/0fc47b7f-6d53-64c0-2793-2674c1b442e4.gif" width=120%>
ゲーム性としては着地はビタ止めさせたいので、地面と接触したときにトリを止めます。
キャラクターのオブジェクトにRigidbody 2DとCollider 2D、接触判定させたい床のオブジェクトにCollider 2Dが設定されていれば接触したタイミングで**OnCollisionEnter2Dメソッドが呼び出される**のでそこで速度をゼロにします。

```Player.cs
    // ゲームオブジェクト同士が接触したタイミングで実行
    void OnCollisionEnter2D(Collision2D collision) {
        // 着地した場合は速度をゼロにする。
        rb2d.velocity = Vector2.zero;
    }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cdea5d05-642a-e18e-548b-6ee1527f276a.gif" width=120%>
気持ちいいビタ止め。
少し浮いていたのでColliderの範囲も調整しました。

###左右への移動
ジャンプだけではなく、左右に歩けるようにします。
移動についてはtransformで座標を設定する方法や、RigidBodyのAddForceで物理的に力を加える方法などがありますが、今回は慣性も必要なくただ等速に左右に動かしたいだけなのでtransformを使っていきます。

```Player.cs
        private Vector3 velocity = new Vector3(30f, 0, 0);

        if (Input.GetKey(KeyCode.Space)) {
        } else if (Input.GetKey(KeyCode.RightArrow)&&Input.GetKey(KeyCode.LeftArrow)) {
            // 左右どちらも押下されていたら移動しない
        } else if (Input.GetKey(KeyCode.RightArrow)) {
            // velocityにTime.deltaTimeをかけてフレームレートによらず一定速度となるように調整
            transform.position += (velocity * Time.deltaTime);
        } else if (Input.GetKey(KeyCode.LeftArrow)) {
            // -velocityにTime.deltaTimeをかけてフレームレートによらず一定速度となるように調整
            transform.position += (-velocity * Time.deltaTime);
        }
```
transform.positionに対してx軸を移動させたいので、Vector3で定義したvelocityを足しています。
ここで、**動作環境のfpsによってUpdateメソッドが呼ばれる間隔がずれてしまう**ため、Time.deltaTime(フレーム間の経過時間)をかけることで**同じ時間で同じ距離を移動するように**しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cb55ae82-bbb6-d43d-9ec2-91685e03a415.gif" width=100%>
移動はできましたが、ずっと右を向いたままなのが不自然ですね。

###スプライト画像の差し替え
右を向いているとき、左を向いているとき、力を溜めている時、とそれぞれの画像を変えてみます。
まずAssetStoreから拾ってきた素材は全て右向きのため、以下の画像をコピーしてそれぞれ左向き用の画像を作成します。
(macであればプレビュー.appで左右反転できます)

左向き
  player_fly_f01.png → player_fly_f01_left.png 
  player_fly_f02.png → player_fly_f02_left.png
  player_fly_f03.png → player_fly_f03_left.png

力を溜める(右向き左向きで、それぞれ同じ画像を二枚用意しています)
  player_idle_f02.png → player_idle_f02_02.png
　　　　　　　　　→ player_idle_f02_left.png
　　　　　　　　　→ player_idle_f02_left_02.png
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/ea2a41cc-9f50-392b-0d0c-67a69466fad8.png" width=80%>
上記で用意した左向きの画像三枚と、力を溜める(右向き)の画像二枚、力を溜める(左向き)の画像二枚を、それぞれまとめてSceneビューにドラッグ&ドロップします。(Hierarchyビューに生成される各オブジェクトは不要なので削除します)
ここで、力を溜める動作は一枚の画像だけで実現できると思うのですが、同じ画像を二枚使ってアニメーションを作ってしまうほうが手っ取り早かったのでそうしています。
アニメーションについてはまだまだよくわかっていないので、別の記事で詳しく取り上げたいと思います。

わかりやすいように元々あったflyアニメーションファイルをrightward,rightwardControllerにそれぞれリネームしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/22cee0dd-5350-4d5a-a321-dd8033c823c3.png" width=100%>
あとはスクリプトで切り替えたいタイミングでAnimatorのruntimeAnimatorControllerにそれぞれのAnimatorControllerを設定します。

```Player.cs
using UnityEditor.Animations;

public class Player : MonoBehaviour {
    Animator animator;
    public AnimatorController leftwardController;
    public AnimatorController rightwardController;
    public AnimatorController chargeLeftController;
    public AnimatorController chargeRightController;
    bool isRightward = true;

    void Start() {
        // Rigidbody2Dをキャッシュする
        rb2d = GetComponent<Rigidbody2D>();
        // Animatorをキャッシュする
        animator = GetComponent<Animator>();
    }

    // シーン中にフレーム毎に呼ばれるメソッド
    void Update() {
〜省略〜
        // スペースキーを押している間
        if (Input.GetKey(KeyCode.Space)) {
            // ジャンプ力を累積する
            chargePower += 100f;
            // 歩いていた方向によってスプライト画像を差し替える
            animator.runtimeAnimatorController = (RuntimeAnimatorController)RuntimeAnimatorController.Instantiate(isRightward ? rightwardController : leftwardController);
        } else if (Input.GetKey(KeyCode.RightArrow)&&Input.GetKey(KeyCode.LeftArrow)) {
            // 左右どちらも押下されていたら移動しない
        } else if (Input.GetKey(KeyCode.RightArrow)) {
            // velocityにTime.deltaTimeをかけてフレームレートによらず一定速度となるように調整
            transform.position += (velocity * Time.deltaTime);
            // 左を向いていた場合に一度だけ右向きのスプライト画像に差し替える
            if(!isRightward){
                animator.runtimeAnimatorController = (RuntimeAnimatorController)RuntimeAnimatorController.Instantiate(rightwardController);
                isRightward = true;
            }
        } else if (Input.GetKey(KeyCode.LeftArrow)) {
            // -velocityにTime.deltaTimeをかけてフレームレートによらず一定速度となるように調整
            transform.position += (-velocity * Time.deltaTime);
            // 右を向いていた場合に一度だけ左向きのスプライト画像に差し替える
            if(isRightward){
                animator.runtimeAnimatorController = (RuntimeAnimatorController)RuntimeAnimatorController.Instantiate(leftwardController);
                isRightward = false;
            }
        }

        if (Input.GetKeyUp(KeyCode.Space)) {
            // ジャンプする前の向きによって画像を差し替える
            animator.runtimeAnimatorController = (RuntimeAnimatorController)RuntimeAnimatorController.Instantiate(isRightward ? rightwardController : leftwardController);

```
publicで変数設定を行うとInspectorから設定変更できるようになるので、それぞれAnimatorControllerを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cb59831d-553c-9ed2-403b-2f7d6187f5e5.png" width=80%>
再生してみると・・・。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/02283431-fa2c-886e-dd71-ed85e8cc2303.gif" width=100%>
それぞれの動作時に画像が切り替わってくれました。

##4.Prefabについて
**Prefab**はGameObjectの型のようなもので、予めこの型を作っておくとGameObjectの生成を楽に行うことができます。
また、スクリプトからも生成することができるようになるので、ある条件の時に動的に生成したい場合に大活躍します。

###台の設置
まずジャンプして上に登っていくゲームを考えたときに登るための台を設置する必要があります。
ひとまず床と同様にCubeオブジェクトをStepという名前でいくつか配置します。
また、忘れずにBox Collider 2Dを設定しておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1abf0b1b-a6a7-9996-13e0-6ee23ff6d4fe.gif" width=100%>
それっぽくなってきました。

###Prefabを使ったオブジェクトの動的生成
ステージを固定して台をあらかじめ決められた場所に設置しておいても良いのですが、台をランダムに生成してどれだけ登れたかを競うようなゲームにしようと思います。
そこでPrefabを使ってオブジェクトを動的に生成したいと思います。

Assetsフォルダ配下にResourcesフォルダを作成し、先程作成したStepオブジェクトをHierarchyビューからドラッグ&ドロップします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/e0cdc5d2-0ef0-2d0d-3ceb-3d21a8e6c73c.png" width=20%>
そうするとStepというprefabファイルが作成できます。
<font color="Red">※スクリプトからファイルを取得する際にはAssets->Resources配下にファイルが存在していることが必須なので注意。</font>(サブフォルダがあるのは問題ない)

次にスクリプト上でこのファイルを参照しオブジェクトを生成するコードを加えます。
先程作成したStepオブジェクトのAdd ComponentからNew scriptでStepというスクリプトを作成します。

```Step.cs
using UnityEngine;
using System.Collections;

public class Step : MonoBehaviour
{
    private GameObject stepPrefab;

    void Start() {
        // StepのprefabファイルをGameObject型で取得
        stepPrefab = (GameObject)Resources.Load ("Step");
    }

    void Update() {
        // スペースキーを押したら
        if (Input.GetKeyDown(KeyCode.Space)) {
            // x,y軸はある範囲の中でランダムに座標を決める。
            float x = Random.Range(-30.0f, 30.0f);
          	float y = Random.Range(10.0f, 30.0f);

            // StepPrefabオブジェクトを生成する。
            Instantiate(stepPrefab, new Vector3(x, y, 0f), Quaternion.identity);
        }
    }
}
```
1.Startメソッドで一度だけ、Resources.Loadメソッドを使ってResourcesフォルダ配下の”Step”ファイルをロードします。
2.Updateメソッドにおいてスペースキーを押されたときにInstantiateメソッドでStepオブジェクトを生成します。
またx,y座標はRandom.Rangeを使って、ある範囲の中でランダムに決めています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/a52ecfe4-4553-49f8-ab75-786e62ad2fac.gif" width=100%>
スペースキーを押すたびに台が生成されました。(挟まれて可哀想・・・)
HierarchyビューでもStepオブジェクトがクローンされていることがわかります。

###台に着地したときに新たな台を生成する
先程はスペースキーを押すたびに台が生成されるようにしましたが、実際は台に着地できたら新たな台を生成させたいです。
Stepスクリプトの台の生成処理を**OnCollisionEnter2D**に移動します。

```Step.cs
using UnityEngine;
using System.Collections;

public class Step : MonoBehaviour{
    private GameObject stepPrefab;
    bool isFirstCollisionEnter = true;
    Camera cam;

    void Start() {
        // StepのprefabファイルをGameObject型で取得
        stepPrefab = (GameObject)Resources.Load ("Step");

        // メインカメラオブジェクトを取得
        cam = Camera.main;
    }

    void Update() {}

    void OnBecameInvisible() {
        Destroy(this.gameObject);
    }

    // ゲームオブジェクト同士が接触したタイミングで実行
    void OnCollisionEnter2D(Collision2D collision) {
        // 初めて着地したときのみ実行する
        if(isFirstCollisionEnter){
            isFirstCollisionEnter = false;

            // x,y軸座標と幅はある範囲の中でランダムに座標を決める。
            Vector3 stepPos = transform.position;
            float x = Random.Range(stepPos.x * (-1), stepPos.x * (-1));
            float y = Random.Range(stepPos.y + 10.0f, stepPos.y + 25.0f);
            float width = Random.Range(5.0f, 20.0f);
            stepPrefab.transform.localScale = new Vector3(width, stepPrefab.transform.localScale.y, stepPrefab.transform.localScale.z);

            // StepPrefabオブジェクトを生成する。
            Instantiate(stepPrefab, new Vector3(x, y, 0f), Quaternion.identity);

            // メインカメラも上に移動する
            Vector3 cameraPos = cam.gameObject.transform.position;
            cameraPos.y = y+5f;
            cam.gameObject.transform.position = cameraPos;
        }
    }
}
```
1.StartメソッドでStepのprefabファイルと、メインカメラのオブジェクトを取得します。
2.OnCollisionEnter2Dメソッドにおいて、初めて台に着地したときのみx,y座標と幅をある範囲の中で変動させて、新たなStepオブジェクトを生成します。
3.台に登ったら新たに生成した台のy座標をもとにメインカメラを移動します。
また、ここで**OnBecameInvisibeメソッドで自分のオブジェクトをDestroy**していますが、これは画面外にオブジェクトが出た際に削除する処理になります。
この処理を入れないと**いつまでもStepオブジェクトが残り続けて負荷がかかってしまいます**。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/5f18b462-99c3-43b8-8131-f8ed63c8e914.gif" width=80%>
ひとまずどんどん上に登って行けるようになりました！
ただし・・・。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/30618c90-5b43-cd4d-cbc3-3453efc80c53.gif" width=80%>
頭突きした場合や、台の横の部分に接触した場合でも着地したことになっていることに気がつきました。

###衝突判定を細かく設定する
しっかりと台の上に着地したときだけ新たな台が生成される様にします。
そのためにPlayerオブジェクトに対して**Edge Collider 2D**を追加で設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1d6a4f6b-d609-b191-04be-8c1ac6a29795.png" width=60%>
ここで**Is Trigger**にチェックを入れると**衝突判定をしない(すり抜けるようになる)代わりに、オブジェクトが接触したかどうか**を判定することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/016c6168-3876-f775-60aa-97c2fe19c6cf.png" width=40%>
矢印が指す足元部分にEdge Collider 2Dを配置しています。
そしてスクリプトにおいて、元々OnCollisionEnter2Dメソッドで処理していたものを、**OnTriggerEnter2Dメソッド**で処理することでPlayerの足元に床、もしくは台が接触したときだけ呼び出されるようになります。

```Player.cs
    private void OnTriggerEnter2D(Collider2D other) {
```
```Step.cs
    private void OnTriggerEnter2D(Collider2D other) {
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/caadb05f-7554-f503-10c2-84067f5942ef.gif" width=100%>
しっかりと判定できています。

##5.Sceneの追加
Unityでは場面が変わる場合、例えばタイトル画面、ゲームプレイ中、ゲームオーバー時などは**それぞれ別のSceneを作る**のが一般的です。

###タイトル画面の実装
まず、新しくタイトル画面用のSceneを作成します。
File->New SceneでGameStartという名前をつけてSceneフォルダに保存します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/45cfa9a2-c178-a50d-7bc5-63abdb242ee5.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/e592d5b5-cfbb-46b0-0933-20d54bec8887.png" width=60%>
次にCanvasというオブジェクトを作ります
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/2f1034d5-ad6a-8034-4efa-9c03d35b34df.png" width=60%>
Canvasの子オブジェクトとしてPanel、Panelの子オブジェクトとしてButtonとImageを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/d7a6b15a-5bd1-c33c-251b-ca8a7ae3d39a.png" width=60%>
今回Panelは一つだけなので無くても良いのですが、今後領域を分けて管理したい場合にPanelを作っておくと便利なので倣っておきます。

次にButtonのInspectorにおいて、Rect TransformでPosとWidth,Heightの設定、Image->Source Imageにスプライト素材のbutton_playをドラッグ&ドロップで設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/b8a96cda-5287-077e-b87e-9865acae0401.png" width=60%>
Imageについても同様に設定し、スプライト素材はtitleを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/f478b9f1-10ee-fb15-6fc8-563244e35592.png" width=60%>
Panelについては、scene_01_skyを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/556ed6b5-4bbe-5bcc-b51e-716358704704.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/085e9980-58f1-a385-476b-36d5a6dbf559.png" width=60%>
素材のおかげでそれっぽくなりましたね！

次にスタートボタンを押したときにゲームが開始されるようにします。
元々のSampleSceneはGamePlaySceneにリネームしておきます。

まず、空のオブジェクトを作成し、Add ComponentでGameStartスクリプトを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1b1d65c3-84e6-3647-d53d-b2830e2cf42f.png" width=60%>

```GameStart.cs
using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameStart : MonoBehaviour {
    public void StartGame(){
        SceneManager.LoadScene("GamePlayScene");
    }
}
```
SceneManager.LoadSceneで指定したSceneを読み込んで遷移することができます。

このGameStartObjectをButtonに紐付けて、No FunctionとなっているところをGameStart->StartGameを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/c200b67c-5e16-26d3-dd01-9e6275364247.png" width=60%>
ここで、スクリプトをButtonに直接紐付けると関数が表示されないので、**必ずGameObjectを紐付ける**必要があります。

最後に作成したSceneをプロジェクトに追加する必要があります。
File->Build Settingsで設定を開き、Add Open Scenesを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/dac6b4af-ac94-4ba4-e990-bf7660186b6a.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/0a0448ab-8999-912b-db1a-c0f99f549a35.png" width=60%>
GamePlaySceneを開き同様に追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/3eaf5967-6d91-e5ab-d89c-98840cfa485f.png" width=60%>
再生してみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/656a293c-35ec-956a-79a2-0f7f6bed8013.gif" width=100%>
うまく遷移させることができました。

###ゲームオーバー画面の実装
スタート画面と同様に新しくSceneを作り、名前はGameOverSceneとします。
同じようにCanvas,Panel,Button,Imageを作りますが、リトライとタイトル画面に戻る、の二つのボタンを配置することにします。
以下のスクリプトを作成し、GameObjectに紐付けて、それぞれのボタンにRetryGameとBackTitleを設定します。

```GameOver.cs
using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameOver : MonoBehaviour {
    public void RetryGame(){
        SceneManager.LoadScene("GamePlayScene");
    }

    public void BackTitle(){
        SceneManager.LoadScene("GameStartScene");
    }
}
```
そしてメインカメラの子オブジェクトとして空のGameObjectを作りGameOverColliderという名前にして、Edge Collider 2Dを以下のような形で追加します。
メインカメラの子オブジェクトとすることで**カメラの移動にあわせてEdge Collider 2Dの判定も追従して移動してくれます。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/3fabc7c5-6e73-a321-c740-a7f46f9f7bcb.png" width=40%>
GameOverColliderにおいてスクリプトを作成し紐付けます。

```GameOverCol.cs
using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameOverCol : MonoBehaviour {
    private void OnTriggerEnter2D(Collider2D other) {
        SceneManager.LoadScene("GameOverScene");
    }
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/2db76ad2-0473-83f2-c458-d21bc6279650.gif" width=100%>
これでゲームスタートからゲームオーバーまで一連の流れができました。

##6.その他
###効果音をつける
ボタン押下や、ジャンプ、台に乗れたときのスコア加算などについて、効果音をつけます。
効果音を鳴らしたいゲームオブジェクトについて、**Audio Source** Componentを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/9370b1dc-c19d-35a7-0515-c9aed1ffc021.png" width=40%>
次にスクリプトにおいてAudioClipをpublicで宣言し、各アクション時に**audioSource.PlayOneShotメソッド**を呼び出します。

```Player.cs
public class Player : MonoBehaviour {
    public AudioClip jump;

    AudioSource audioSource;

    void Start() {
        // AudioSourceをキャッシュする
        audioSource = GetComponent<AudioSource>();
    }

        if (Input.GetKeyUp(KeyCode.Space)) {
            // ジャンプ音を鳴らす。
            audioSource.PlayOneShot(jump);
```

最後にpublic宣言したAudioClipについて、サウンドファイルを紐付けます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/fdddcf0e-b839-4d93-d1d8-5d459d5eba04.png" width=60%>
スコア加算と、ボタン押下、ゲームオーバー時も同様に対応します。
音については実際にゲームを遊んで頂いて確認してみてください。

###BGMをつける
まずは使用するBGMのサウンドファイルを追加して、GameObjectを生成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/a261d1ae-476e-daff-3b00-3b1a5b348cce.png" width=60%>
Loopにチェックを入れておきます。
そしてこのGameObjectにスクリプトを新規作成して追加します。

```bgm.cs
public class bgm : MonoBehaviour {
    void Start() {
        DontDestroyOnLoad (this);
    }
}
```
ここで、**DontDestroyOnLoadメソッド**を呼んでおくと、シーンが切り替わっても**オブジェクトが破棄されなくなり**、BGMが鳴り続けます。

###スコアの実装
登った高さと、台の長さによってスコアを計算して表示するようにします。
0~9までの数字が一つの画像にまとまっている素材を使ってカスタムフォントを設定する方法で進めたのですが、ややこしくててこずりました・・。
以下の記事がとても参考になりました。
[【Unity】自作テクスチャで文字を表示する（カスタムフォント）](http://daradaraunity.blog.fc2.com/blog-entry-1.html)

まず、MaterialをScoreFontという名前で新規作成します。
ShaderはUnlit/Transparent、TextureをSprites->GUI->text_playScoreに設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/533298fe-907e-cab3-63eb-4cfffb206bf9.png" width=60%>
次に、ProjectビューでCustom FontをScoreFontという名前で作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/08b0499c-c7eb-b9d3-52cc-f0772f1f53ca.png" width=60%>
次に作成したScoreFontを選択し、Inspectorで以下のように設定していきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cb7314ef-e071-c5f9-c7d9-94cb66e90914.png" width=60%>
**Line Spacing**は行間で、今回は一行しかないので0にしています。
**Ascii Start Offset**はASCIIコード表において数字の0から表示させる=４８番目までオフセットさせるということで48を設定しています。
**Tracking**は同じ行における隣り合う文字の間隔で1を設定しています。
ややこしいのは**Character Rects**の設定です。
これらは素材として使用しているtext_playScore.pngにおいて、0〜9までのそれぞれの数字がどの位置に、どのサイズで配置されているかを教えてあげる設定になります。
<font color="Red">※Element0,1までしか見えていないですが、9まで設定しています。IndexとUv Xを同じ用に加算していけばOKです。</font>

今回使用したtext_playScore.pngは260x38ピクセルの画像になるので、横に10分割してそれぞれのサイズを求めていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/b4d39df6-d874-7b0e-77e2-08313931c2e6.png" width=80%>
ここで**Uv**は全体を1としたときの設定、**Vert**は画像のピクセルサイズをもとに設定します。
各パラメータの解説は公式ドキュメントにも記載があるので参考にしてください。
　https://docs.unity3d.com/ja/2019.4/Manual/class-Font.html

ここまでできたらHierarchyビューにCanvas,Panel,textを二つを配置して、それぞれScoreTitle,Scoreという名前にします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/66b41c79-fbf2-50d7-6d98-db710c8fad3f.png" width=60%>
ScoreのFontに先程作成したScoreFontを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/cefe6d54-e017-4023-2598-d3de88286bfc.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/c600ab17-3caf-7395-f265-fb6c5351e488.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/747d1f1c-e7a4-781a-9116-fcdd4f87a77f.png" width=60%>
Text欄に入力した数字がそれぞれの画像で表示されました！

そしてあとはスクリプトでスコアを計算して、textに動的に設定するようにしていきます。

```Step.cs
public class Step : MonoBehaviour {
    public Material normalMaterial;
    public Material bonusMaterial;

    void Start() {
〜省略〜
        // 幅が短い場合はボーナスがつくため金色のマテリアルに変える
        if(this.transform.localScale.x < 10.0f){
            this.GetComponent<Renderer>().material = bonusMaterial;
        } else {
            this.GetComponent<Renderer>().material = normalMaterial;
        }
    }

    private void OnTriggerEnter2D(Collider2D other) {
        // 初めて着地したときのみ実行する
        if(isFirstCollisionEnter){
            isFirstCollisionEnter = false;

            // スコアを加算する。
            GameObject scoreObj = GameObject.Find ("Score");
            Text textComponent = scoreObj.GetComponent<Text>();

            // 台の長さが短いほどスコアが高くなるようにする。
            int stepWidthScore = 50 - (int)this.transform.localScale.x;
            if(this.transform.localScale.x < 10.0f){
                // 幅が10.0f未満の場合は短さに応じて倍率をかける。
                stepWidthScore *= 11 - (int)this.transform.localScale.x;
            }
            // 今のスコアに足してtextに設定する。
            int scoreNum = int.Parse(textComponent.text) + (100 * stepWidthScore);
            textComponent.text = scoreNum.ToString();

```

台については通常時と、幅が短かったときのボーナス用の二枚の素材を使います。
ノーマル用は元々あったscene_01_cradleを良い感じに切り出しました。
ボーナス用は金色っぽく新しく作ってみました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/db0986d7-6e0d-8808-8a51-db5d7b4e251c.png" width=60%>
上記の画像を設定したmaterialを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/bda2d97c-d70e-6f4e-fb01-384ca9ed128c.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/a9234e46-9221-2a6b-0d3f-48d67e24ec25.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/fe664998-31a6-6768-6829-55c98b19654b.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/243d0224-18c1-b124-70ea-faece8b0fe9f.png" width=80%>
こっそり床の素材も変えておきました。
画像のWrap ModeをRepeatにして、materialのTilingを設定するとその個数分だけ並べて画像を表示してくれます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1ea83ba2-b070-b939-3f0b-7f45ccd38379.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/1ad6f4f4-41eb-d60e-0e87-7b83b09efdd3.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/2168bc73-3f5c-cfff-03cf-820484827b56.gif" width=100%>
スコアが加算されるようになりました。

###オンラインランキングの実装
以下のライブラリを使用させて頂き、オンラインランキングを導入します。
https://blog.naichilab.com/entry/webgl-simple-ranking
解説通り進めていけば実装できましたので、導入手順は割愛します。

スクリプトについては、スコアをPlayerオブジェクトにstatic変数で保持して、ゲームオーバー時にそのスコアを送信します。


```Player.cs
    public static int score = 0;

    void Start() {
        score = 0;
    }
```

```Step.cs
    // ゲームオブジェクト同士が接触したタイミングで実行
    private void OnTriggerEnter2D(Collider2D other) {
        // 初めて着地したときのみ実行する
        if(isFirstCollisionEnter){
〜省略〜
            // Playerのscore変数にも格納しておく。(ゲームオーバー時に参照する)
            Player.score = scoreNum;
```

```GameOver.cs
using UnityEngine.SceneManagement;
using UnityEngine.UI;

public class GameOver : MonoBehaviour {
    void Start(){
        // 最終スコアを加算する。
        naichilab.RankingLoader.Instance.SendScoreAndShowRanking(Player.score);
    }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764219/bf4d174d-74a1-1afd-b436-2edbe6f77892.gif" width=100%>
ランキング機能が実装できました！
ちなみに**同じユーザにつき一つのハイスコア**を残すことができるようです。

##7.スプライト素材の作成
残念ながらゲーム作りに時間がかかってしまい、ボーナス台やボタンのデザインを修正するくらいしかできませんでした。。
今後、猫社員たちのドット絵や、背景なども自作して、また記事を投稿したいと思っています。

##8.ビルド、ゲームの公開
今回は**WebGL**で遊べるようにして、UnityRoomというUnity公式のプラットフォームで公開します。
以下の記事を参考にさせて頂きました。手順通りで問題なく公開できたので解説は割愛します。
[unityroomに投稿する方法](https://blog.naichilab.com/entry/how-to-upload-unityroom)

こっそりハードモードを追加しました。

#今後の課題
・キャラクターや背景などのスプライト素材や効果音なども自作したい
　背景については高く登っていくたびに宇宙に近づいている様子を背景で表したかった・・。
・ゲームバランス見直し
　台の生成処理のランダム性、アイテムなどを出現させる、など。
・Unityのスクリプトについてリファクタリングする(ゴリ押し実装が多そう)
・スマホ対応(マルチタッチが大変そう)
・アニメーションについて理解を深める
・まったく別のゲーム作成もやってみる
などなど。。

これらは今後も継続的にQiitaに記事をあげて理解を深めていきたいと思っています。

#さいごに
最後まで読んで頂きありがとうございました。
とても長くなってしまいましたがUnityを使ったゲーム制作の雰囲気が伝わったでしょうか？
元々はアドベントカレンダーの記事投稿のために始めたことでしたが、記事作成とゲーム制作どちらもとても楽しめました。
また、記事を作成するためには自分が理解していないと記事が書けないので、ただUnityを触るよりも一つ一つしっかりと理解しながら進められたことはとても良かったと感じました。

**みなさんも興味があったらぜひUnityやAsepriteを触ってみてください！！**