[Unity]  joystickの実装（カメラが常に後ろに追従する）

今回はjoystickを用いて、カメラがずっとプレイヤーに追従する機能の実装についてまとめてみました！

:::note info
使用PC： MacBook Pro (13-inch, M1, 2020)
OSバージョン: 11.5.2
Unityバージョン：2020.3.20f1
:::

# 実際にゲームをプレイすると

![input-onlinegiftools.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/5a0c3aa7-88e3-ca7c-04a6-4f54f5e14e9f.gif)




こんな感じになったら完成です！

# 目次
[1.オブジェクトの準備](#1-オブジェクトの準備)
[2.joystickの設定](#2-joystickの設定)
[3.スクリプトの作成](#3-スクリプトの作成)
[4.オブジェクトの代入](#4-オブジェクトの代入)
[5.参考記事](#5-参考記事)

# オブジェクトの準備
①プレイヤー用のアセットをunityにインポートします。（今回はプレイヤーに[unity asset storeのアセット](https://assetstore.unity.com/packages/3d/characters/anime-character-yong-free-contain-vrm-184223)を使いました。）
②地面とかは適当にplaneかcubeで作成してください。

プレイヤーにアニメーションはつけたりするのですが、その辺はちょっと今回は省かせていただきます。。。

# joystickの設定
①[joystick](https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631)をasset storeからunityにインポートする

（※今回はFloating Joystickを使用します！Joystickの種類については[こちら](https://qiita.com/nkjzm/items/2c977aee580aed001b05)の記事がわかりやすく解説してくれているので参考にしてみてください！）

②Hierarchyビューで`Create`→`Canvas`を作成

③ProjectビューにインポートしておいたJoystick Packから、Floating JoystickをCanvasの子オブジェクトにドラッグ&ドロップ。
![スクリーンショット 2022-07-12 11.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/68714339-2978-2a1f-84c9-c917fc592f5e.png)

④canvasに内で位置や大きさを調整

# スクリプトの作成
```C#.PlayerScript.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerScript : MonoBehaviour
{
    public FloatingJoystick idou;
    public float speed;
    Animator ani;

    Quaternion qqq;
    Quaternion rot;

    // Start is called before the first frame update
    void Start()
    {
        ani = this.gameObject.GetComponent<Animator>();
    }

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

    void Move()
    {
        float dx = idou.Horizontal;
        float dy = idou.Vertical;

        float rad = Mathf.Atan2(dx - 0, dy - 0);
        float deg = rad * Mathf.Rad2Deg;

        this.transform.rotation = Quaternion.Euler(0, rot.eulerAngles.y + deg, 0);

        if (deg != 0) 
        {
            ani.SetBool("Walk", true); 
            this.transform.position += this.transform.forward * speed * Time.deltaTime; 
            qqq = gameObject.transform.rotation;
            
        }
        else
        {
            ani.SetBool("Walk", false); 

            this.transform.rotation = Quaternion.Euler(0, qqq.eulerAngles.y, 0); 
            rot = gameObject.transform.rotation;
        }
    }
}
```
## スクリプトの解説
コメントアウトに詳細を書きました。

**①変数宣言**
```C#.PlayerScript.cs
public FloatingJoystick idou; //入れたJoyStickの種類によって変えてください
public float speed; //Playerの移動速度。unity側で自由に設定してください。
Animator ani;

Quaternion qqq; //Playerが移動しているときの角度
Quaternion rot; //Playerが停止しているときの角度
```

**②void Move関数の中身~その1~**
```C#.PlayerScript.cs
float dx = idou.Horizontal; //joystickの水平方向の動き-1~1の値をとります
float dy = idou.Vertical; //joystickの垂直方向の動き-1~1の値をとります

float rad = Mathf.Atan2(dx - 0, dy - 0); //　 原点(0,0)と点（dx,dy)の距離から角度をとってくれる便利な関数
float deg = rad * Mathf.Rad2Deg; //radianからdegreeに変換します

this.transform.rotation = Quaternion.Euler(0, rot.eulerAngles.y + deg, 0);
//Playerの向きを停止時に取得した角度に当てはめて代入します。今回はy軸方向が回転軸になります。
```

**②void Move関数の中身~その2~**
```C#.PlayerScript.cs
if (deg != 0) //joystickの原点と(dx,dy)の２点がなす角度が０ではないとき = joystickを動かしている時
{
    ani.SetBool("Walk", true); 
    this.transform.position += this.transform.forward * speed * Time.deltaTime; //正面方向へプレイヤーを移動させ続ける
    qqq = gameObject.transform.rotation; //動いている時の角度を取得する
            
} 
 else //joystickの原点と(dx,dy)の２点がなす角度が０の時 = joystickが止まっている時
{
    ani.SetBool("Walk", false); 

    this.transform.rotation = Quaternion.Euler(0, qqq.eulerAngles.y, 0); //停止時のプレイヤーの動きの向きを設定
    rot = gameObject.transform.rotation; //停止している時の角度を取得する
}
```

# オブジェクトの代入
①Playerになるオブジェクトに`PlayerScript.cs`をドラッグ&ドロップで貼り付け
![スクリーンショット 2022-03-13 19.17.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/8d526a7b-5b20-10a4-32a2-ab703a2c1035.png)

②PlayerScriptにjoystickを紐付けする。speedはいい感じになるように数値を入れてください。
![スクリーンショット 2022-03-13 19.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/23884469-aa20-da26-37ee-417a667c9cbe.png)

③Main CameraをPlayerの子オブジェクトにして、いい感じの位置に調整する（今回使用したアセットではもともとカメラがついていましたが、動作上cameraを追加して使用しています）
![スクリーンショット 2022-03-16 18.29.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/51bf3f5c-196d-8884-3cad-29eaef06d990.png)


### 以上！！！！！

# 参考記事
・[【初学者向け】 Joystickを使ったアニメーション実装](https://qiita.com/tommy1317/items/fc5880c0c3a38aed2e71)
・[【Unity】 JoyStickで移動と視点変更を実装](https://qiita.com/Wadadada/items/28dcf832d0bcfee6625b)