２Ｄリアルタイムストラテジー　手順１２

　キャラの移動の際、現在の地点から目的地までの移動経路を表示する機能を実装します。

実行動画

動画ファイルへのリンク

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

手順１２　ー味方キャラの移動経路の表示機能の実装－

１８．移動経路表示用のゲームオブジェクトを作成する
１９．DrawPath スクリプトを作成する
２０．MoveToClickTileMapPoint スクリプトを修正し、移動時に移動経路の表示を行う機能を実装する

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

　・LineRenderer コンポーネント

１８．移動経路表示用のゲームオブジェクトを作成する

１．設計

　キャラの移動経路を表示するため、移動経路表示用のゲームオブジェクトを作成します。

　経路の表示は LineRenderer コンポーネントと LineRenderer 用に作成するマテリアルによって行います。

　LineRenderer コンポーネントでは、頂点の数に合わせて直線のゲームオブジェクトを描画します。
例えば、A(x = 0, y = 0) と B(x = 5, y = 0) という頂点情報がある場合、右上方向に向けた直線を描画します。

　キャラの移動に利用している NavMeshAgent には、各経路の位置情報がスタート地点からゴール地点まですべて保持されていますので、
この情報を頂点情報として活用し、LineRenderer コンポーネントと NavMeshAgent の経路の位置情報を組み合わせることで
キャラの移動経路と同じ内容の移動経路の描画を行うようにします。

２．経路表示用のマテリアルを作成する

　LineRenderer コンポーネントを利用してライン描画を行うためにはマテリアルが必要になります。
Unity に用意されているマテリアルを利用してもいいですし、新しく作成しても構いません。

　今回は青い色のマテリアルを新しく作成しています。

インスペクター画像　参考例

３．DrawPath ゲームオブジェクトを作成し、設定を行う

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。
名前を DrawPath に変更し、LineRenderer コンポーネントを追加します。

インスペクター画像

１９．DrawPath スクリプトを作成する

１．設計

　LineRenderer コンポーネントをアタッチしただけではライン描画を行うことは出来ませんので、
ライン描画専用のスクリプトを作成し、この中で LineRenderer コンポーネントを制御してライン描画を行うようにします。

２．DrawPath スクリプトを作成する

　LineRenderer コンポーネントを制御するための変数とメソッドを用意したスクリプトを作成します。

DrawPath.cs

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

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

public class DrawPath : MonoBehaviour
{
    [SerializeField]
    private LineRenderer line;


    /// <summary>
    /// 経路の生成
    /// </summary>
    /// <param name="corners"></param>
    /// <returns></returns>
    public IEnumerator DrawCornersLine(Vector3[] corners) {

        // 経路の頂点数の設定
        line.positionCount = corners.Length;

        // 経路の太さ調整
        line.startWidth = 0.3f;
        line.endWidth = 0.3f;

        // 経路の表示(描画)
        line.SetPositions(corners);

        Debug.Log("Draw Line");

        yield return new WaitForSeconds(1.0f);

        // 経路破棄
        Destroy(gameObject);
    }
}

　スクリプトを作成したらセーブします。

３．＜LineRenderer コンポーネントの機能＞

　Line Renderer (ラインレンダラー) コンポーネントは、空間の２つ以上の点の配列をとることで、それぞれの間に直線を描きます。
公式サイトには３Ｄとありますが、２Ｄでも応して活用していくことが可能です。

参考サイト

Unity 公式マニュアル
LineRenderer
https://docs.unity3d.com/ja/current/Manual/class-L...

Unity 公式スクリプトリファレンス
LineRenderer
https://docs.unity3d.com/jp/current/ScriptReferenc...

　今回実装している変数やメソッドについてまとめておきます。
必ず自分でも調べて、自分の知識として吸収しておいてください。

１．LineRenderer.startWidth

　LineRenderer で描画するラインの幅のスタートのサイズを設定することができる変数です。

参考サイト

Unity 公式スクリプトリファレンス
LineRenderer.startWidth
https://docs.unity3d.com/jp/current/ScriptReferenc...

２．LineRenderer.endWidth

　LineRenderer で描画するラインの幅の最後のサイズを設定することができる変数です。

参考サイト

Unity 公式スクリプトリファレンス
LineRenderer.endWidth
https://docs.unity3d.com/jp/current/ScriptReferenc...

　これらの他にも、色を変更する変数や、曲線を描くための変数なども用意されています。

３．LineRenderer.positionCount

　LineRenderer で描画するラインの頂点数を設定したり、参照したりすることができる変数です。

　// 経路の頂点数の設定
  line.positionCount = corners.Length;

　今回は代入処理を行い、頂点数の設定を行っています。corners.Length の値は移動経路の頂点の数であり、可変する値です。
そのため、ラインを生成するための頂点数を毎回この部分でセットして設定します。
この複数の頂点を結ぶことでラインを生成します。ここではそのための準備をしています。

参考サイト

Unity 公式スクリプトリファレンス
LineRenderer.positionCount
https://docs.unity3d.com/jp/current/ScriptReferenc...

４．LineRenderer.SetPositions

　ラインの頂点の位置をすべて設定するメソッドです。この処理によって描画処理が実行されます。
SetPosition メソッドという処理も用意されていますが、リファレンスにもあるように、複数のラインを描画する場合にはこちらの処理の利用するようにしてください。

　// 経路の表示(描画)
  line.SetPositions(corners);

参考サイト

Unity 公式スクリプトリファレンス
LineRenderer.SetPositions
https://docs.unity3d.com/jp/current/ScriptReferenc...

　そのほかの活用事例を紹介しているサイトもたくさんありますので、自分でも検索してみてください。

参考サイト

はなちるのマイノート様
【Unity】LineRendererをスクリプトから自由自在に操る
https://www.hanachiru-blog.com/entry/2020/10/05/12...

４．DrawPath ゲームオブジェクトに DrawPath スクリプトをアタッチしてからプレファブにする

　作成した DrawPath スクリプトを DrawPath ゲームオブジェクトにアタッチし、必要な情報をアサインしてからプレファブにします。
プレファブにしたら、ヒエラルキーにある DrawPath ゲームオブジェクトは削除してください。

インスペクター画像

　以上で完成です。

２０．MoveToClickTileMapPoint スクリプトを修正し、移動時に移動経路の表示を行う機能を実装する

１．設計

　経路の情報を管理している MoveToClickTileMapPoint スクリプトを修正し、経路の情報を先程作成した DrawPath スクリプトの DrawCornersLine メソッドを実行して
経路の情報を DrawPath スクリプトへ渡す処理を追加します。

　この処理により、キャラの移動経路と同じ経路の情報が DrawPath スクリプトでも利用できることになり、
DrawPath スクリプトが LineRenderer コンポーネントを利用してライン描画を行うことで、移動経路と同じ情報のラインを生成することが出来るようになります。

　引数に経路の各頂点情報を渡しているため、その都度、移動経路の情報を用いてライン描画が行えるロジックになっています。

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

　TODO 部分に実装を行い、新しく作成した DrawPath スクリプトに対して経路の情報を渡して、
移動経路の表示を行う機能を追加します。

MoveToClickTileMapPoint.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Tilemaps;
using UnityEngine.AI;

/// <summary>
/// タイルマップをタップして NavMesh で移動させるためのクラス
/// </summary>
public class MoveToClickTileMapPoint : MonoBehaviour {

    [SerializeField]
    private Grid grid;

    [SerializeField]
    private Tilemap tilemap;


////*　新しい変数の宣言を１つ追加　*////


    [SerializeField]
    private DrawPath drawPathPrefab;


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


    private NavMeshAgent agent;

    private CharaController charaController;

    private IEnumerator coroutine;


    // デバッグ用
    void Start() {

　　　　// NavMeshAgent を取得できるか判定する。取得できた場合のみ、if 文内の処理を行う
        if (TryGetComponent(out agent)) {

            // インスタンス対応。ここで NavMeshAgent を有効化する。事前に入れておくと、Bake している地点を認識できずにエラーになるため
            agent.enabled = true;

            // 3D 用の設定をオフにする。2D なので、この処理がないと、変な位置に勝手に移動する
            agent.updateRotation = false;
            agent.updateUpAxis = false;

            // 初期目的地設定(これがないと初期位置からズレる)
            agent.destination = transform.position;

            // 移動速度の設定
            agent.speed = 3.0f;
        }

        if (!TryGetComponent(out charaController)) {
            Debug.Log("CharaController を取得出来ませんでした。");
        }
    }

    void Update() {

　　　　// NavMeshAgent を取得できて利用できる状態であり、かつ、タイルマップをタップ(マウスクリック)したら
        if (agent && Input.GetMouseButtonDown(0)) {

            // タップの位置を取得してワールド座標に変換し、それをさらにタイルのセル座標に変換
            Vector3Int gridPos = grid.WorldToCell(Camera.main.ScreenToWorldPoint(Input.mousePosition));

            Debug.Log(gridPos);

            // タップしたタイルが移動不可のタイルでなければ
            if (tilemap.GetColliderType(gridPos) != Tile.ColliderType.None) {

                // タップしたタイルマップを目的地として移動
                SetPathAndMove(gridPos);
            }
        }
    }

    /// <summary>
    /// タップ(マウスクリック)したタイルマップを目的地として移動
    /// </summary>
    /// <param name="gridPos"></param>
    private void SetPathAndMove(Vector3Int gridPos) {

        // 目的地点の設定。調整することで、キャラをタイルの中央位置まで移動させる
        Vector3 nextPos = new Vector3(gridPos.x + 0.5f, gridPos.y + 0.5f, 0);

        // キャラの位置のうち、Z 軸の情報を 0 に設定。目標地点とキャラの位置との比較する情報の Z 軸を両方とも 0 に指定しておかないと、2Dの経路計算ができない
        transform.position = new Vector3(transform.position.x, transform.position.y, 0);

        Debug.Log(nextPos);

        // 目的地の更新
        //agent.SetDestination(nextPos);  // どちらの処理で設定をしても問題なし
        agent.destination = nextPos;

        Debug.Log(agent.hasPath);
        Debug.Log(agent.isOnNavMesh);

        // 経路表示の準備
        StartCoroutine(GenerateCornerLineFromPath(transform.position, nextPos));


　　　　/// <summary>
        /// 経路表示の準備
        /// </summary>
        /// <param name="startPos"></param>
        /// <param name="endPos"></param>
        IEnumerator GenerateCornerLineFromPath(Vector3 startPos, Vector3 endPos) {

            // パスを取得するまで待機
            yield return new WaitUntil(() => agent.hasPath);

            Debug.Log(agent.hasPath);
            Debug.Log(agent.isOnNavMesh);

            NavMeshPath path = new NavMeshPath();


            // 経路の情報を取得できているか確認
            if (NavMesh.CalculatePath(startPos, endPos, NavMesh.AllAreas, path)) {

                // 経路の座標情報取得
                Vector3[] corners = path.corners;

                // すでに移動中のアニメを再生している場合
                if (coroutine != null) {

                    // アニメ再生を停止
                    StopCoroutine(coroutine);
                    coroutine = null;
                }

                // アニメ再生用のメソッド登録
                coroutine = charaController.SetAnime(corners);

                // 登録したアニメ再生用のメソッドを実行
                StartCoroutine(coroutine);


////*　TODO 部分に処理を実装します　*////


                // 経路情報がある場合、経路表示用のゲームオブジェクト作成
                DrawPath drawPath = Instantiate(drawPathPrefab);

                // 経路の作成
                StartCoroutine(drawPath.DrawCornersLine(corners));


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


            }
        }
        Debug.Log("移動");
    }
}

　スクリプトを作成したらセーブを行います。セーブは Ctrl + Shift + S キーです。

３．Chara ゲームオブジェクトの設定を行う

　Prefab フォルダにある Chara ゲームオブジェクトの設定を行います。
インスペクターより、 MoveToClickTileMapPoint スクリプト内にある DrawPath 変数に
同じく Prefabs フォルダにある DrawPath ゲームオブジェクトをドラッグアンドドロップしてアサインします。

インスペクター画像

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

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

　ゲームを実行し、いままでと同じように移動したい地点をクリックしてください。
キャラの移動に合わせて、目標地点までの移動経路が表示されるようになれば制御成功です。

実行動画

動画ファイルへのリンク

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

　次は　手順１３　－－?　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

２Ｄリアルタイムストラテジー　手順１２ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school