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

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

####前回の記事で用意した素材（名前は一例です）

• Earth.png 地面用素材
• Player.png キャラクラー素材
• Wall.png その他オブジェクト

※素材を用意してない方は、こちらをそのままご利用ください。

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

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

Unityを起動して新規プロジェクトを作成します。

プロジェクトが作成されたら、[File]->[Save Scene As]より、新規シーンを保存します。
Mainという名前にしました。

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

使用する画像は作成したUnityのAssetsフォルダ内に入れます。

#地面を配置、カメラの設定
####地面を配置
地面となる画像を配置します。
配置したら、画像オブジェクトの位置座標を(0,0,0)に設定しましょう。

小さいですね。

####カメラの設定

画像を大きくすることもできますが、今回はカメラの位置を変えることで調整していきます。

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

#キャラクターの配置
####キャラクターの配置オブジェクトを作成
キャラクターを配置するオブジェクトを作成します。
Hierarcy上を右クリック->[Create Empty]で空のオブジェクトを作成しましょう。
名前をPlayerとし、位置を(0,0,0)に設定します。

####キャラクター画像の設定行う
Projectウインドウ上でPlayer画像を選択すると画像の設定を行うことができます。
画像のTexture設定をMultipleにしたら、SpriteEditorを開き更に設定を行っていきます。

実際にうまくスライスされたか確認してみましょう。
ProjectウインドウでPlayer画像を選択してみましょう

####キャラクターの画像をオブジェクトに配置
スライスしたプレイヤー画像を実際に配置してみましょう。

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

#重なり順を考える

####Sorting Layers
UnityにはSortingLayer機能があり、ペイントソフトのレイヤー機能と同じように重なり順を制御することができます。新規レイヤーを作成(Add Sorting Layer)しましょう。

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

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

いいかんじです

設定がおわったら、PlayerオブジェクトにPlayerImageをつっこみます。

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

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

入力後、Create and Addでスクリプトが作成され、PlayerオブジェクトにAddされます。

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

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

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);
    }
}

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

ｗｗｗｗ pic.twitter.com/9NXe9F67Jx

— hayu (@hayu_dev) 2018年12月2日

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

まずは、先程適当に作ってしまったアニメーションを正しい名前にします。
AnimatorとAnimationが作成されていますので、それぞれ右クリックからRenameで名前を修正します。
こちらの画像をみながら、アイコン（AnimatorとAnimation）に気をつけて名前を変更しましょう。

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

####AnimatorとAnimationの準備

実際に、AnimatorとAnimationウインドウにプライヤーのアニメーションを表示させましょう。

また、AnimatorでPlayerと表示されているAnimationの名称をPlayerBottomに修正します。

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

####４つのAnimationを作成する
#####PlayerBottom
Animationウインドウをみてみます。
下の画像の▶をおすことで、実際にキーフレームに割り当てられている画像を確認することができます。

現在の状態ですと、先程の動画のようにただ４つの画像が切り替わって表示されている（ぱらぱら漫画のようなもの）だけですので、PlayerBottomの画像だけにして、残りの画像のキーフレームを削除します。

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

#####PlayerTop、PlayerRight、PlayerLeft
次にPlayerTop状態を作成しましょう。
PlayerBottomと表示されているところを選択し、CreateNewClipをします。
新規のAnimationが作成されるので、名称を「PlayerTop」としましょう。

そして、PlayerTop状態の画像をタイムライン上に設定します。

これでPlayerTopの状態のAnimationが作成できました。
同様にPlayerRight、PlayerLeftを作成します。

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

####アニメーション切り替えに必要なパラメータ
次にアニメーション切り替えに必要なパラメータを追加します。
プレイヤーの向きは移動するX,Yの値によって決まるので、その２つの値を追加してあげます。
float型で、moveX、moveYを追加しました。

####BlendTreeを作る

次に、さきほど追加したパラメータによって４つのAnimationを切り替える作業をします。
今回はBlendTreeを使って、Animationの切り替えを行います。
Animatorウインドウを右クリックし、新しいBlendTreeを作成します。

BlendTreeをダブルクリックすると、BlendTreeの編集画面に入ることができます。
デフォルトの名前をPlayerMovementに変更しておきましょう。

さらにBlendTreeを選択すると、見るパラメータの設定をすることができます。
BlendTypeと、実際に見るパラメータを設定しましょう。

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

同様に他のAnimationをMotionに追加していきましょう。
すると、ちょっとかっこいい画面になります

それぞれのアニメーションのPosX、PosYは次の画像のとおりに入力してください。

####Animatorの設定

それでは、作成したBlendTreeを実際にAnimatorからつなぎ込みをおこないます。
AnimatorでPlayerTop、PlayerBottom、PlayerRight、PlayerLeftのAnimationを削除することで、Entryから初期状態をPlayerMovement(BlendTree)につなぐことができました。

あとすこしです！

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

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をドラッグアンドドロップします。

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

🤩🤩🤩 pic.twitter.com/3WJe6CgFu2

— hayu (@hayu_dev) 2018年12月2日

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