【初学者向け】  Joystickを使ったアニメーション実装

Unityちゃんをアニメーション付きでjoystickで動かしてみましょう！
RPGとか３Dステージでプレイヤーを動かしたい時に使えると思います！

初心者向けでつくっているので細かく解説しています🙌


#こんなんやってみます
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/3f7d8f63-0d98-a7eb-4ba6-33420ae7f86e.gif)


#実装手順
###①　[Unityちゃん](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705)と[JoyStick](https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631)をアセットストアからUnityに追加

　　>>> [アセットストアからアセットをUnityに追加する方法](https://qiita.com/tommy1317/items/83a59abaa97d412a1009)

![スクリーンショット_2020-12-05_10_57_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/6b732e65-a87c-2cbc-839a-d96863c80e98.png)

この状態になっていればOKです！


###②　Unityちゃんの設定
まずはUnityちゃんから
　　![スクリーンショット_2020-12-05_13_40_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/315c03f7-0dd2-dc87-a2f2-e59ae80c2ab0.png)
インポートしたUnityちゃんのフォルダを展開して、その中にある「UnityChan」というPrefabをHierarchyビューにドラッグ＆ドロップしましょう！

Animatorを覗くといっぱいAnimationが入っているのがわかります！
このようにAssetにはすでにアニメーションがいくつも入っているんです！

今回はここに入ってるアニメーションを使って機能の実装をしてみましょう

###③　Animatorの作成
新しくAnimatorを作って、自分好みのアニメーションを実装していきます。
![スクリーンショット_2020-12-05_14_01_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/03726e3e-9354-39d3-48a6-f8da2842e59b.png)

Projectから新しくAnimatorControllerを作成して、今回は名前を「MyAnimator」にしました

![スクリーンショット_2020-12-05_14_04_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/0c4fe1b9-055c-9e92-6a8c-c8111905b4f0.png)

そうしたら、「MyAnimator」をUnityちゃんを選択した状態でInspectorにあるAnimatorのControllerの中にドラッグ＆ドロップします。

そうすると左にAnimatorの表示がきれいになっているとおもいます。そこに新しくAnimationを組み合わせていれます！

### ④Animation実装
お次は、アニメーション！
Unityちゃんは非常に便利でいっぱいアニメーションがすでに入っているのでそれを使っていきます。今回は止まった状態と歩いている状態でのアニメーションをつけていきましょう。

![TestScene_-_unityChan_-_PC__Mac___Linux_Standalone_-_Unity_2019_4_8f1_Personal__Personal___Metal_-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/9608ecb5-ec04-1c36-83fe-e684844a40a2.png)


![スクリーンショット_2020_12_08_1_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/d095b2b7-a4f7-4405-9583-8248b9253f50.png)

これができたらAnimatorの中にあるAnimationのところで右クリックして「MakeTransition」をしこの二つをつなげます。
その後の設定は以下の画像の通り。
![スクリーンショット_2020_12_08_1_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/3c32f9fd-0cf2-e00a-1ff6-87bb83a7c184.png)

これで終わり！

### ⑤JoyStickをいれます
![スクリーンショット_2020_12_08_1_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/23966fca-29bf-2318-a9bb-0c44e163c2f1.png)

JoyStickPackに入っているものは全部で４種類！
違いについて、詳しくは[こちら](https://qiita.com/nkjzm/items/2c977aee580aed001b05)

今回はFixedJoyStickをいれます（個人的な好み）

これでUnity側の準備は終わり！

### ⑥コードをかく
PlayerScriptとというのを使って以下のコードを書いていきます。



```cs:PlayerScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerScript : MonoBehaviour
{
    public FixedJoystick joy; // ここは入れたJoyStickの種類によって変えてください！
    public float speed; //Unity側で自由に調整して下さい
    Animator ani;

    float degStop;

    // Start is called before the first frame update
    void Start()
    {
        ani = this.gameObject.GetComponent<Animator>(); //UnityChanについているAnimatorを取得
    }

    // Update is called once per frame
    void Update()
    {
        
       Move();
    }

    void Move()
    {

        float dx = joy.Horizontal; //joystickの水平方向の動きの値、-1~1の値をとります
        float dy = joy.Vertical; //joystickの垂直方向の動きの値、-1~1の値をとります

        float rad = Mathf.Atan2(dx-0, dy-0); //　 原点(0,0)と点（dx,dy)の距離から角度をとってくれる便利な関数

        float deg = rad*Mathf.Rad2Deg; //radianからdegreenに変換します

        this.transform.rotation = Quaternion.Euler(0, deg,0); //Unityちゃんの向きを先ほど取得した角度に当てはめて代入します。今回はy軸方向が回転軸になります。

        if(deg!=0) //joystickの原点と(dx,dy)の２点がなす角度が０ではないとき = joystickを動かしている時
        {
            ani.SetBool("Walk",true); //wait→walkへ
            this.transform.position += this.transform.forward  *speed* Time.deltaTime; //正面方向へプレイヤーを移動させ続ける
            
            degStop = deg; //停止前のプレイヤーの向きを保存
        }
        else //joystickの原点と(dx,dy)の２点がなす角度が０の時 = joystickが止まっている時
        {
            ani.SetBool("Walk",false); //walk→waitへ
            
            this.transform.rotation = Quaternion.Euler(0,degStop,0); //停止時のプレイヤーの動きの向きを設定
        }
    }
}

```

詳しくはコメントアウトに書いてありますのでよんでみてください。

### ⑦動きの原理

こんな感じです！シンプル！
![TestScene_-_unityChan_-_PC__Mac___Linux_Standalone_-_Unity_2019_4_8f1_Personal__Personal___Metal_-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/33b29a70-c689-9908-654a-b87e488a8c9c.png)

### ⑧Unity側でjoystickを紐付け
![TestScene_-_unityChan_-_PC__Mac___Linux_Standalone_-_Unity_2019_4_8f1_Personal__Personal___Metal_-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465974/5d99db3e-d6cd-2f55-0da3-3f847bf45c3d.png)

speedとかもいい感じに設定してみる

プレビューするといい感じに動くと思います🙌

もし歩くから走るとかのアニメーションを実装したいとかあったら、(dx,dy)の値がいくつ以上だったら走るとかにコードを書き加えていくとよりそれっぽいものが実装できます！

とりあえずここまでお疲れ様でした！



#終わりに

普段はGeekSalonという大学生限定プログラミングコミュニティでメンターをしております。
Unityを使ったGameアプリ開発のコースがあるので
もし興味ありましたら下のURLからぜひ！！
👇詳細はこちらから👇

https://bit.ly/3f8zWgJ