３Ｄスライダーゲーム　発展４ - i-school

　この手順はスマホ用のジョイスティックを追加して、スマホでゲームを遊べるように機能を実装していきます。

　今回の実装では、画面の左半分はどの部分であってもスワイプするとジョイスティックが表示されて、キャラの移動が行えるようにしています。
このジョイスティックは画面をスワイプしたときだけ画面上に表示されます。

＜実装画像＞

　以下の内容で順番に実装を進めていきます。

発展４　ースマホでのプレイヤーの制御機能の実装ー

　６．Joystick PackアセットをUnityにインポートして、Canvas内にジョイスティックを設置する
　７．ジョイスティックと各ボタンをプログラムと連携して操作できるようにする

　新しい学習内容は、以下の通りです。

　・Joystick Pack

６．Joystick PackアセットをUnityにインポートして、Canvas内にジョイスティックを設置する

１．設計

　スマホにはキーボードがありませんので、そのままのプログラムではゲームをスマホ上で操作することができません。
遊ぶためにはプログラムの変更・追加と、キーボードの代わりのキー入力の装置が必要になりますが、
キー入力については、無料アセットである Joystick Pack を利用すると実装出来ます。

　Joystick Pack には複数のスマホ端末用の Joystick がプレファブのゲームオブジェクトとして登録されていますので
ゲームの特性にあったものを利用して、キー入力を行えるようにします。

　これらの Joystick 系のゲームオブジェクトにはクラス(スクリプト)がアタッチされており、
そのクラスにはキー入力を判定するための変数やメソッドが用意されていますので、それを PlayerController スクリプトと紐づけて
キー入力を判定できるようにします。

　まずはアセットをインポートします。

２．アセットストアへ移動する

　Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)

AssetStoreビュー

３．アセットストアで無料のエフェクト用アセットを検索する

　アセットストアのサイト上部にある検索窓に joystick と入力して検索を行います。

検索

　Joystick Pack という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。

Joystick Pack

　クリックするとアセットの詳細が画面に表示されますので、 Add To My Assets、あるいは Open in Unity という、青いボタンを押します。
(Add To My Assets の場合には、ログインを要求されます。ログイン後、同じボタンがOpen in Unity に変わります。)

　
　自動的にUnityのエディター画面に遷移します。これでアセットストアのサイトは閉じてしまって大丈夫です。

４．アセットをUnityにインポートする

　エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。

PackageManagerビュー

　
　インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。

Import確認のポップアップ

　待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。

　Project内を確認しましょう。Joystick Pack という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。（画像の青い部分が今回インポートされたアセットです）

Joystick Pack

　以上でアセットのインポート作業は終了です。

５．FloatingJoystick ゲームオブジェクトを Canvas 内に設置する

　スマホでキャラの移動を行うために、インポートした Joystick Pack アセットを利用します。

　以下のパスの場所にある Floating Joystick ゲームオブジェクトを選択してください。

パス

Assets/Joystick Pack/Prefabs/Floating Joystick.prefab

フォルダ画像

　Floating Joystick ゲームオブジェクトをヒエラルキーの Canvas ゲームオブジェクトの子オブジェクトとしてドラッグアンドドロップしてください。
SceneビューとGameビューに丸型のジョイスティックが表示されます。

ヒエラルキー画像

Sceneビュー画像

６．Floating Joystick ゲームオブジェクトの設定を行う

　Floating Joystick ゲームオブジェクトの大きさを調整します。
まずは現在の大きさをSceneビューにて確認します。左上のメニューボタンの Rect Tool を選択しておいてください。

　この Rect Tool で見える青い四角い範囲が、この Floating Joystick ゲームオブジェクトのサイズです。
これはそのまま、ジョイスティックが表示されて、スワイプを感知してくれる範囲にもなります。
下記の画像のように、画面の左半分を覆うようにサイズを変更してください。

サイズ変更後のSceneビュー画像

　設定が終了したら、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください。

Floating Joystick ゲームオブジェクト　インスペクター画像(これは画面の解像度によってWidthとHeightの値がそれぞれ異なりますので参考程度にしてください)

　以上で設定は完了です。
　続いて、Floating Joystick ゲームオブジェクトの子オブジェクトの設定を確認します。

７．Floating Joystick ゲームオブジェクトの子オブジェクト(Background ゲームオブジェクト / Handle ゲームオブジェクト)設定を行う

　Floating　Joystick ゲームオブジェクトには子オブジェクトである Background ゲームオブジェクトと、
さらにその子オブジェクトである Handle ゲームオブジェクトがありますので、そちらを順番に設定します。

　Background ゲームオブジェクトは、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください。　
他に変更箇所はありません。もしもジョイスティックの背景画像を変更したい場合には、Image コンポーネントの画像を変更してください。

Background ゲームオブジェクト　ヒエラルキー画像

Sceneビュー画像

　Handle ゲームオブジェクトも同様に、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください。　
こちらも他に変更箇所はありません。もしもジョイスティックの画像を変更したい場合には、Image コンポーネントの画像を変更してください。

Handle ゲームオブジェクト　インスペクター画像

Sceneビュー画像

　以上でジョイスティックの設定は完了です。

７．ジョイスティックと各ボタンをプログラムと連携して操作できるようにする

１．設計

　Canvas 内に Floating Joystick ゲームオブジェクトを設置しましたので、こちらを操作した際に、その情報を受け取って
キャラの移動に反映できるように、PlayerController スクリプトに処理を追加していきます。

　Joystick でスワイプ操作をして上下左右の入力を行う
　　　　↓
　Floating Joystick スクリプトによって、上下方向の情報と、左右方向の情報が変数に代入されているので、そちらを参照する
　　　　↓
　参照した値をキャラの移動方向に適用して、スワイプ操作によるキャラの移動制御を行う

　上記の流れになります。
　
　Floating Joystick スクリプトには Horizontal 変数と Vertical 変数が用意されており、
こちらを参照すると画面のスワイプ量を float 型の -1.0f ～ 1.0f の間で取得出来るようになっています。

２．PlayerController スクリプトを修正する

　宣言フィールドには、先ほど作成したゲームオブジェクトの位置情報を参照できるように
SerializeField属性で Transform 型の変数を２つ用意します。すでにお気づきかと思いますが、変数名とオブジェクト名とを大体合わせてあるのは
アサイン時にどのゲームオブジェクトをアサインするべきか、わかりやすくし、また万が一間違えていた場合に気づきやすくするためです。
これもスクリプトの可読性に関わる部分ですので、変数名にもわかりやすく、推察しやすい名前を付けるように心がけてください。

PlayerController.cs

　<=　クリックすると開きます。

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

public class PlayerController : MonoBehaviour
{
    private Rigidbody rb;                  // Rigidbody コンポーネントの操作を行うため、Rigidbody コンポーネントを取得して代入するための変数

    private bool isGoal;　                 // ゲームのクリア判定として利用するための変数

    private float coefficient = 0.985f;    // 速度を減速させるための係数
    private float stopValue = 2.5f;        // 減速中に、この値以下になったら停止させる速度の値

    private Animator anim;　　　　　       // Animator コンポーネントの操作を行うため、Animator コンポーネントを取得して代入するための変数

    private int score;                     // スコア管理用の変数。Circle ゲームオブジェクトを通過するたび、この値を加算していく

　　[Header("移動速度")]         　　　　  // Header属性を変数の宣言に追加すると、インスペクター上に( )内に記述した文字が表示されます。
    public float moveSpeed;

    [Header("加速速度")]
    public float accelerationSpeed;

    [Header("ジャンプ力")]
    public float jumpPower;

    [SerializeField]
    private PhysicMaterial pmNoFriction;

    [SerializeField, Header("地面判定用レイヤー")]
    private LayerMask groundLayer;

    [SerializeField, Header("斜面との接地判定")]
    private bool isGrounded;

    [SerializeField]
    private UIManager uiManager;　　　　　// UIManager スクリプトを利用するために UIManager スクリプトの情報を代入する変数


////* ここから追加 *////


    [SerializeField]
    private Joystick joystick;　　　　　　// JoyStick スクリプトを利用するために JoyStick スクリプトの情報を代入する変数


////* ここまで *////


    void Start()
    {
        // このスクリプトがアタッチされているゲームオブジェクトが持っている Rigidbody コンポーネントの情報を取得して rb 変数に代入
        rb = GetComponent<Rigidbody>();

　　　　// このスクリプトがアタッチされているゲームオブジェクトが持っている Rigidbody コンポーネントの情報を取得して rb 変数に代入
        anim = GetComponent<Animator>();
    }


    void FixedUpdate() {

        // ゴール地点を通過して、isKinematic が true になり、完全に移動が停止したら
        if (rb.isKinematic == true) {

            // ここで処理を中断する　=>　この if 文よりも下に書いてある処理が実行されなくなる 
            return;
        }

        // ゴール地点を通過したら
        if (isGoal == true) {

            // 速度を徐々に低下させる
            DampingSpeed();

            // ここで処理を中断する　=>　この if 文よりも下に書いてある処理が実行されなくなる 
            return;
        }

　　　　// 移動
        Move();

        // 加速
　　　　Accelerate();
    }


    /// <summary>
    /// 移動
    /// </summary>
    private void Move() {


////*　ここから処理を修正・追加　*////


        // キーボードの左右矢印のキー入力を判定し、-1.0f ～ 1.0f までの値を代入
        //float x = Input.GetAxis("Horizontal");　　//　<=　コメントアウトします


        float x;

# if UNITY_EDITOR
        x = Input.GetAxis("Horizontal");
# elif UNITY_ANDROID
        x = joystick.Horizontal;
# endif


////*　ここまで　*////


        // Rigidbody の Velocity(速度)に、キー入力の判定値と移動速度を代入してキャラを移動
        rb.velocity = new Vector3(x * moveSpeed, rb.velocity.y, rb.velocity.z);
    }

    void Update()
    {
        // ゴール地点を通過したら
        if (isGoal == true) {

            // ここで処理を中断する　=>　この if 文よりも下に書いてある処理が実行されなくなる 
            return;
        }

        // ブレーキ
        Brake();

        // 接地判定
        CheckGround();

        // スペースキーを押したとき、斜面のゲームオブジェクトとキャラが接地している場合
        if (Input.GetKeyDown(KeyCode.Space) && isGrounded == true) {

            // ジャンプ
            Jump();
        }
    }

　　/// <summary>
    /// ブレーキ
    /// </summary>
    private void Brake() {


////*　ここから処理を修正・追加　*////


        // 上下方向のキー入力を受け付けて値を代入
        //float vertical = Input.GetAxis("Vertical");   //  <=  コメントアウトします


        float vertical;

# if UNITY_EDITOR
        vertical = Input.GetAxis("Vertical");
# elif UNITY_ANDROID
        vertical = joystick.Vertical;
# endif


////*　ここまで　*////


        // 取得した値が 0 よりも小さい値(下方向のキー入力)なら
        if (vertical < 0) {

            // NoFriction の DynamicFriction の値を徐々に大きくする
            pmNoFriction.dynamicFriction += Time.deltaTime;

            // もしも DynamicFriction の値が最大値である 1.0f を超えたら
            if (pmNoFriction.dynamicFriction > 1.0f) {

                // 1.0f で停止する
                pmNoFriction.dynamicFriction = 1.0f;
            }
        } 
        // 取得した値が 0、あるいは 0 よりも大きな値(キー入力なし、あるいは上方向のキー入力)なら
        else {

            // 摩擦を 0 に戻す　=>　再び滑り始めるようになる
            pmNoFriction.dynamicFriction = 0;            
        }
    }

    /// <summary>
    /// 加速
    /// </summary>
    private void Accelerate() {

////*　ここから処理を修正・追加　*////


        // 上下方向のキー入力を受け付けて値を代入
        //float vertical = Input.GetAxis("Vertical");   //  <=  コメントアウトします


        float vertical;

#if UNITY_EDITOR
        vertical = Input.GetAxis("Vertical");
# elif UNITY_ANDROID
        vertical = joystick.Vertical;
# endif


////*　ここまで　*////


        // 取得した値が 0 よりも大きな値(上方向のキー入力)なら
        if (vertical > 0) {

            // 滑り下りている速度(Velocity の Z)を変更して加速させる
            rb.velocity = new Vector3(rb.velocity.x, rb.velocity.y, accelerationSpeed * vertical);
        }
    }

　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出される、コールバック・メソッド
    private void OnTriggerEnter(Collider other) {

        // 侵入したコライダーのゲームオブジェクトの Tag が Goal なら(それ以外の Tag ならば以下の処理を行わない)
        if (other.gameObject.tag == "Goal") {
            Debug.Log("Goal");

            // ゴール地点を通過した状態にする
            isGoal = true;

            Debug.Log(isGoal);
        }
    }

    /// <summary>
    /// 速度を徐々に減衰させて停止させる。このメソッドは FixedUpdate メソッド内から継続的に実行される
    /// </summary>
    private void DampingSpeed() {

        // キャラの速度を徐々に下げる
        rb.velocity *= coefficient;

        // 速度 Z の値(滑り降りる速度)が指定値より小さくなったら
        if (rb.velocity.z <= stopValue) {

            // 速度を 0 にして停止させる
            rb.velocity = Vector3.zero;

            // 物理演算の処理を停止する
            rb.isKinematic = true;
        }
    }


////*　ここから処理を修正　*////


    /// <summary>
    /// ジャンプ
    /// </summary>
    public void Jump() {    //  <=  ☆　修飾子を public に変更します


////*　ここまで　*////


        // キャラに上方向の力を加える
        rb.AddForce(transform.up * jumpPower);

　　　　// 引数で指定したパラメータを再生させる
        anim.SetTrigger("jump");
    }

    /// <summary>
    /// 斜面との接地判定。true なら接地している状態、false は接地していない状態と定義する
    /// </summary>
    private void CheckGround() {

        // Linecast メソッドを実行してキャラの足元に向けて見えない Line を飛ばし、
        // Line に groundLayer 変数で指定したLayer(Ground)を持つゲームオブジェクトが接触するか判定。対象のLayerのときは true を返す
        isGrounded = Physics.Linecast(transform.position, transform.position - transform.up * 0.3f, groundLayer);

　　　　// Sceneビューに Physics.Linecastメソッドの見えない Line を表示する
        Debug.DrawLine(transform.position, transform.position - transform.up * 0.3f, Color.red);
    }

    /// <summary>
    /// スコア加算
    /// </summary>
    /// <param name="amount"></param>
    public void AddScore(int amount) {
　　　　// スコア加算
        score += amount;

        Debug.Log("現在の得点 : " + score);   // <=　そのまま score とだけ引数に指定しても表示されますが、それでは数字しか表示されないため、詳細が分かりやすいように文字列を一緒に追加しています

　　　　// UIManager の情報が代入されている変数を利用して UIManager スクリプトの UpdateDisplayScore メソッドを呼び出す処理を実行する
        // 引数として score 変数の値を渡すことで、受け取ったメソッドがその値を利用できる。この時点で score 変数には Circle スクリプトから届いている point の値が加算されているため最新状態
        uiManager.UpdateDisplayScore(score);
    }


////*　ここからメソッドを１つ追加　*////


    /// <summary>
    /// 外部のクラスから private 修飾子の isGrounded 変数の情報を取得するためのメソッド
    /// </summary>
    /// <returns></returns>
    public bool GetIsGrounded() {
        return isGrounded;
    }


////*　ここまで　*////


}

　スクリプトを修正したらセーブを行い、PlayerController スクリプトがアタッチされている Penguin ゲームオブジェクトのインスペクターを確認します。
新しく SerializeField属性で宣言した JoyStick 変数が表示されていれば問題ありません。

Penguin ゲームオブジェクト　インスペクター画像

３．Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、Joystick 型のコンポーネントがアタッチされているゲームオブジェクトを登録する

　Floating Joystick ゲームオブジェクトにアタッチされている Floating Joystick スクリプトをアサインする必要がありますので、
こちらをヒエラルキーよりドラッグアンドドロップして登録します。

Penguin ゲームオブジェクト　インスペクター画像

４．ゲームを実行して動作を確認する

　ゲームを実行して、ジョイスティックを操作してみましょう。
まず、Unity エディター上ではジョイスティックを動かしてもペンギンが動かなければ制御成功です。
エディターの場合は、上下左右によってのみ、移動、加速、停止の処理が制御されるようになっています。

　問題なければスマホ用にビルドを行って、実機上でも確認をしてください。

　スワイプと同じ操作を実行できますので、まずはそちらで確認を行います。スワイプしたときだけジョイスティックが表示されて、
ドラッグに合わせてジョイスティックが動作し、キャラもそちらの方向に移動すれば制御成功です。上下も試してみてください。

　以上でこの手順は終了です。

　=>　次は　発展５　－スマホでのジャンプの制御機能の実装－　です。