Unity初心者向け！MagicaVoxelの素材を使って、2.5Dのゲームを作ろう②〜キャラクターを動かす編〜

こんにちは。
前回の記事の続きとなります。
前回はMagicavoxelを使って素材の書き出しをしました。
今回は、書き出しをした素材を使って実際にUnityに素材を配置し、画面タップした位置にキャラクターを動かすところまでまとめていきます。

####前回の記事で用意した素材（名前は一例です）
- Earth.png 地面用素材
- Player.png キャラクラー素材
- Wall.png その他オブジェクト

※素材を用意してない方は、[こちら](https://www.dropbox.com/sh/oost9imbayyyhd6/AABiCOzTtOHGnpdp3is6oaRQa?dl=0)をそのままご利用ください。

こちらの記事はUnity初心者向けのため、操作方法をかなり細かく書いています。
玄人さんはどんどん読み飛ばして進めていきましょう！

#プロジェクト、シーンを作成する

Unityを起動して新規プロジェクトを作成します。
![スクリーンショット 2018-12-01 17.50.58.png](https://qiita-image-store.s3.amazonaws.com/0/311402/3c5267f8-f8be-778a-7402-966735d4fb88.png)

プロジェクトが作成されたら、[File]->[Save Scene As]より、新規シーンを保存します。
Mainという名前にしました。
![スクリーンショット 2018-12-01 17.58.32.png](https://qiita-image-store.s3.amazonaws.com/0/311402/f4c112bf-3225-e66f-2840-1d44c1afe1ac.png)

#使用する画像をUnityプロジェクトにつっこむ

使用する画像は作成したUnityのAssetsフォルダ内に入れます。
![あああ.png](https://qiita-image-store.s3.amazonaws.com/0/311402/de5f5db0-21e9-d0bc-2eb9-ea87a5cf254c.png)


#地面を配置、カメラの設定
####地面を配置
地面となる画像を配置します。
配置したら、画像オブジェクトの位置座標を(0,0,0)に設定しましょう。
![スクリーンショット 2018-12-02 11.19.30.png](https://qiita-image-store.s3.amazonaws.com/0/311402/06cc75ed-f788-5ea2-5117-51ccd8bce614.png)

小さいですね。


####カメラの設定

画像を大きくすることもできますが、今回はカメラの位置を変えることで調整していきます。
![スクリーンショット 2018-12-01 18.23.47.png](https://qiita-image-store.s3.amazonaws.com/0/311402/5a229fb2-406f-d302-3170-483ac0d8d00d.png)

Hierarcy上のMainCameraを選択し、Size設定を変えます。
Gameウインドウを見ながら適当な値に調整しましょう。

#キャラクターの配置
####キャラクターの配置オブジェクトを作成
キャラクターを配置するオブジェクトを作成します。
Hierarcy上を右クリック->[Create Empty]で空のオブジェクトを作成しましょう。
名前をPlayerとし、位置を(0,0,0)に設定します。
![スクリーンショット 2018-12-01 18.30.06.png](https://qiita-image-store.s3.amazonaws.com/0/311402/3458310a-4407-73d9-0909-daf28a6ea2e1.png)

####キャラクター画像の設定行う
Projectウインドウ上でPlayer画像を選択すると画像の設定を行うことができます。
画像のTexture設定をMultipleにしたら、SpriteEditorを開き更に設定を行っていきます。
![スクリーンショット 2018-12-02 11.23.56.png](https://qiita-image-store.s3.amazonaws.com/0/311402/45ad7c8b-8826-45c1-de09-b71315d804de.png)
![スクリーンショット 2018-12-02 11.27.18.png](https://qiita-image-store.s3.amazonaws.com/0/311402/d7db344b-2b20-bc88-9bac-1d99b9b3cf9d.png)

実際にうまくスライスされたか確認してみましょう。
ProjectウインドウでPlayer画像を選択してみましょう
![スクリーンショット 2018-12-02 11.31.36.png](https://qiita-image-store.s3.amazonaws.com/0/311402/607e66e3-4050-b71e-3e62-e3d7be6ebbed.png)


####キャラクターの画像をオブジェクトに配置
スライスしたプレイヤー画像を実際に配置してみましょう。
![スクリーンショット 2018-12-02 11.36.15.png](https://qiita-image-store.s3.amazonaws.com/0/311402/4a2779cb-5231-930e-a4ce-91c150e16b17.png)

![スクリーンショット 2018-12-02 11.40.04.png](https://qiita-image-store.s3.amazonaws.com/0/311402/94d15c9d-6ffa-c43f-790d-4e2a8f105099.png)

画像が大きすぎる上に、地面よりも下に描画されていますね。
これを調整していきます。


#重なり順を考える

####Sorting Layers
UnityにはSortingLayer機能があり、ペイントソフトのレイヤー機能と同じように重なり順を制御することができます。新規レイヤーを作成(Add Sorting Layer)しましょう。
![スクリーンショット 2018-12-02 11.43.34.png](https://qiita-image-store.s3.amazonaws.com/0/311402/64f97caa-dff0-656c-e8ce-1946ebc2ce45.png)


![スクリーンショット 2018-12-01 18.51.49.png](https://qiita-image-store.s3.amazonaws.com/0/311402/bd748615-1505-5a61-9c9a-e837884d041a.png)

これにてSortingLayerを作成することができました。下になるほど前に描画されます。
**Sorting　LayerとLayerは別物ですので、注意しましょう。**

####Sorting Layersの割当て
次に、実際にオブジェクトに対して並び替え順を設定します。
PlayerImageにPlayer、Eatrh画像にはEarthを設定します。
ついでにPlayerImageはScaleをいじり、ちょうどいいサイズにしましょう。

![スクリーンショット 2018-12-02 11.45.36.png](https://qiita-image-store.s3.amazonaws.com/0/311402/0953112f-3db3-3c49-caff-1ece90edf003.png)

![スクリーンショット 2018-12-01 19.06.56.png](https://qiita-image-store.s3.amazonaws.com/0/311402/69782e6b-53a3-e15e-6763-037bf6617512.png)
いいかんじです:relaxed:

設定がおわったら、PlayerオブジェクトにPlayerImageをつっこみます。
![スクリーンショット 2018-12-02 11.51.42.png](https://qiita-image-store.s3.amazonaws.com/0/311402/45d4ce03-f49a-2cda-cd21-5bfa6ee4d45b.png)


#キャラクターを移動させる
実際にキャラクターを移動させましょう。
そのためには、C#スクリプトでキャラクターを制御する必要があります。

####PlayerControllerを作成する
作成と同時に、スクリプトの名前を入力します。

![スクリーンショット 2018-12-02 11.56.02.png](https://qiita-image-store.s3.amazonaws.com/0/311402/9a833d1e-cf1f-e405-7c5b-ba306c8837eb.png)

入力後、Create and Addでスクリプトが作成され、PlayerオブジェクトにAddされます。
![スクリーンショット 2018-12-02 11.57.50.png](https://qiita-image-store.s3.amazonaws.com/0/311402/c9cd807d-b7e7-1f4d-7a4d-5974dd4670a0.png)

これでPlayerController.csが作成されました。

####PlayerController.cs
PlayerController.csはその名の通り、プレイヤーをコントロールするスクリプトです。
スクリプトを開き（ProjectウインドウでPlayerController.csをダブルクリックすることで何かしらのエディタが開きます）、スクリプトに以下のコードを貼り付けます。

```C#:PlayerController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour {
    const float SPEED = 2.0f;
    Vector2 inputPosition;

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            inputPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        }

        transform.position = Vector2.MoveTowards(transform.position,
                                                 new Vector2(inputPosition.x, inputPosition.y),
                                                 SPEED * Time.deltaTime);
    }
}

```


再生すると、以下の動画のようにタップした場所にキャラクターが動きます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr">ｗｗｗｗ <a href="https://t.co/9NXe9F67Jx">pic.twitter.com/9NXe9F67Jx</a></p>&mdash; hayu (@hayu_dev) <a href="https://twitter.com/hayu_dev/status/1069065492231413761?ref_src=twsrc%5Etfw">2018年12月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#動く方向によってキャラクターの画像を変更する
今のままですと、ひたすらキャラクターが回転しているだけなので、アニメーションの制御をしていきます。

まずは、先程適当に作ってしまったアニメーションを正しい名前にします。
AnimatorとAnimationが作成されていますので、それぞれ右クリックからRenameで名前を修正します。
こちらの画像をみながら、アイコン（AnimatorとAnimation）に気をつけて名前を変更しましょう。
![スクリーンショット 2018-12-02 12.09.17.png](https://qiita-image-store.s3.amazonaws.com/0/311402/0c32f473-5cbe-808c-3ed2-c9159eb539d0.png)

次に、Animation、Animatorウインドウをだします。
[Window]->[Animation]->[Animation]でAnimationのウインドウ
[Window]->[Animation]->[Animator]でAnimatorのウインドウ
を出すことができます。

####AnimatorとAnimationの準備

実際に、AnimatorとAnimationウインドウにプライヤーのアニメーションを表示させましょう。
![スクリーンショット 2018-12-02 12.17.51.png](https://qiita-image-store.s3.amazonaws.com/0/311402/c8fa4ef0-09eb-4bce-7288-8e162445c4ff.png)

また、AnimatorでPlayerと表示されているAnimationの名称をPlayerBottomに修正します。
![スクリーンショット 2018-12-02 12.18.10.png](https://qiita-image-store.s3.amazonaws.com/0/311402/3e3b7310-c59c-410a-7a0a-b8ac143ad167.png)

それでは、早速プレイヤーのBottom状態の画像をAnimationのPlayerBottomに割り当てていきましょう。


####４つのAnimationを作成する
#####PlayerBottom
Animationウインドウをみてみます。
下の画像の▶をおすことで、実際にキーフレームに割り当てられている画像を確認することができます。
![スクリーンショット 2018-12-02 12.23.23.png](https://qiita-image-store.s3.amazonaws.com/0/311402/f916c298-4578-553e-ff09-e4d7b21851cd.png)
現在の状態ですと、先程の動画のようにただ４つの画像が切り替わって表示されている（ぱらぱら漫画のようなもの）だけですので、PlayerBottomの画像だけにして、残りの画像のキーフレームを削除します。
![スクリーンショット 2018-12-02 12.23.38.png](https://qiita-image-store.s3.amazonaws.com/0/311402/23215804-659e-8550-6e4d-468db5b809d0.png)

これでPlayerBottom状態を作成することができました。

#####PlayerTop、PlayerRight、PlayerLeft
次にPlayerTop状態を作成しましょう。
PlayerBottomと表示されているところを選択し、CreateNewClipをします。
新規のAnimationが作成されるので、名称を「PlayerTop」としましょう。
![スクリーンショット 2018-12-02 12.28.58.png](https://qiita-image-store.s3.amazonaws.com/0/311402/6e484812-c984-f332-406b-2e99f7d0ad05.png)

そして、PlayerTop状態の画像をタイムライン上に設定します。
![スクリーンショット 2018-12-02 12.30.53.png](https://qiita-image-store.s3.amazonaws.com/0/311402/0e1d8bbc-5fc0-5750-3895-12263af701f1.png)
これでPlayerTopの状態のAnimationが作成できました。
同様にPlayerRight、PlayerLeftを作成します。

![スクリーンショット 2018-12-02 12.33.37.png](https://qiita-image-store.s3.amazonaws.com/0/311402/24a69674-fbea-2058-75e2-697e6009102d.png)
![スクリーンショット 2018-12-02 12.34.42.png](https://qiita-image-store.s3.amazonaws.com/0/311402/319cfd2e-2fff-50fd-dc6b-9c9f30ba079c.png)

####AnimatorでAnimationをコントロールする
Animatorウインドウをみると、先程作成した４つのAnimationが追加されていることが確認できます。

![スクリーンショット 2018-12-02 12.36.13.png](https://qiita-image-store.s3.amazonaws.com/0/311402/a9b45a1c-f788-6134-1089-4a4e6f9d3407.png)

####アニメーション切り替えに必要なパラメータ
次にアニメーション切り替えに必要なパラメータを追加します。
プレイヤーの向きは移動するX,Yの値によって決まるので、その２つの値を追加してあげます。
float型で、**moveX、moveY**を追加しました。
![スクリーンショット 2018-12-02 12.48.29.png](https://qiita-image-store.s3.amazonaws.com/0/311402/5ef73163-a103-0030-235e-a8da0bdcd47d.png)


####BlendTreeを作る

次に、さきほど追加したパラメータによって４つのAnimationを切り替える作業をします。
今回はBlendTreeを使って、Animationの切り替えを行います。
Animatorウインドウを右クリックし、新しいBlendTreeを作成します。
![スクリーンショット 2018-12-02 12.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/311402/12067648-1e1b-2aef-b131-a3ad2a1f1346.png)

BlendTreeをダブルクリックすると、BlendTreeの編集画面に入ることができます。
デフォルトの名前をPlayerMovementに変更しておきましょう。
![スクリーンショット 2018-12-02 12.53.05.png](https://qiita-image-store.s3.amazonaws.com/0/311402/243825de-dd38-2af8-f4b2-344be5f2e3f8.png)
さらにBlendTreeを選択すると、見るパラメータの設定をすることができます。
BlendTypeと、実際に見るパラメータを設定しましょう。
![スクリーンショット 2018-12-02 12.55.47.png](https://qiita-image-store.s3.amazonaws.com/0/311402/69fde0a6-a3e7-c411-4fd6-fe496ac48997.png)

####BlendTreeのMotionを追加する
次に、AddMotionFieldで、Animationを追加します。まずはPlayerBottomを追加しましょう。

![スクリーンショット 2018-12-02 13.01.19.png](https://qiita-image-store.s3.amazonaws.com/0/311402/9d5a9f68-910e-45bf-797c-ec58fe72ca41.png)
![スクリーンショット 2018-12-02 13.01.52.png](https://qiita-image-store.s3.amazonaws.com/0/311402/fb9b737d-1587-5561-274e-19c1bfc1a9d7.png)

同様に他のAnimationをMotionに追加していきましょう。
すると、ちょっとかっこいい画面になります:point_up:
![スクリーンショット 2018-12-02 13.04.42.png](https://qiita-image-store.s3.amazonaws.com/0/311402/11b189d3-c4e2-303f-6450-272a3e8faf45.png)

それぞれのアニメーションのPosX、PosYは次の画像のとおりに入力してください。
![スクリーンショット 2018-12-02 13.33.41.png](https://qiita-image-store.s3.amazonaws.com/0/311402/4709740f-5c67-2ef2-7bd8-6b5b0d781a17.png)


####Animatorの設定

それでは、作成したBlendTreeを実際にAnimatorからつなぎ込みをおこないます。
AnimatorでPlayerTop、PlayerBottom、PlayerRight、PlayerLeftのAnimationを削除することで、Entryから初期状態をPlayerMovement(BlendTree)につなぐことができました。
![スクリーンショット 2018-12-02 13.12.29.png](https://qiita-image-store.s3.amazonaws.com/0/311402/cd384e54-1bd4-3b0e-0165-873d41362736.png)

あとすこしです！

####スクリプトで、制御
先程追加したパラメータmoveX、moveYの値はパラメータから設定します。
PlayerControllerをこのように書き換えてみましょう。

```C#:PlayerController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour {
    const float SPEED = 2.0f;
    Vector2 inputPosition;
    [SerializeField] Animator anim;

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            inputPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        }
        Vector2 moveDiff = inputPosition - (Vector2)transform.position;
        if (moveDiff != Vector2.zero)
        {
            SetAnimatorParam(moveDiff.normalized);
        }
        transform.position = Vector2.MoveTowards(transform.position,
                                                 new Vector2(inputPosition.x, inputPosition.y),
                                                 SPEED * Time.deltaTime);
    }

    void
    SetAnimatorParam (Vector2 moveVector)
    {
        anim.SetFloat("moveX", moveVector.x);
        anim.SetFloat("moveY", moveVector.y);
    }

}

```

Unityにもどり、コンパイルが完了したらPlayerオプジェクトにアタッチされているPlayerControllerのAnimにPlayerImageをドラッグアンドドロップします。
![スクリーンショット 2018-12-02 13.29.48.png](https://qiita-image-store.s3.amazonaws.com/0/311402/79437c51-6399-9f82-3430-3f8249a51c29.png)

#お楽しみの確認タイム
それではUnityを再生させてみましょう！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr">🤩🤩🤩 <a href="https://t.co/3WJe6CgFu2">pic.twitter.com/3WJe6CgFu2</a></p>&mdash; hayu (@hayu_dev) <a href="https://twitter.com/hayu_dev/status/1069088479487741952?ref_src=twsrc%5Etfw">2018年12月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

動かした方向に、キャラクターの向きをそろえることができました！
大変おつかれさまでした！次回は仕上げに入っていきます。それではまたこんど。