i-school - 2Dリアルタイムストラテジー 手順12
 キャラの移動の際、現在の地点から目的地までの移動経路を表示する機能を実装します。

実行動画
動画ファイルへのリンク

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



手順12 ー味方キャラの移動経路の表示機能の実装−
18.移動経路表示用のゲームオブジェクトを作成する
19.DrawPath スクリプトを作成する
20.MoveToClickTileMapPoint スクリプトを修正し、移動時に移動経路の表示を行う機能を実装する



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

 ・LineRenderer コンポーネント



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

1.設計


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

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

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

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








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


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

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

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



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


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


インスペクター画像



19.DrawPath スクリプトを作成する

1.設計


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


2.DrawPath スクリプトを作成する


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


DrawPath.cs

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


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


3.<LineRenderer コンポーネントの機能>


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

参考サイト
Unity 公式マニュアル
LineRenderer
https://docs.unity3d.com/ja/current/Manual/class-L...
Unity 公式スクリプトリファレンス
LineRenderer
https://docs.unity3d.com/jp/current/ScriptReferenc...


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


1.LineRenderer.startWidth

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


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


2.LineRenderer.endWidth

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


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


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


3.LineRenderer.positionCount

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

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

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


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


4.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...


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


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

インスペクター画像


 以上で完成です。


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

1.設計


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

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

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


2.MoveToClickTileMapPoint スクリプトを修正する


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


MoveToClickTileMapPoint.cs

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


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


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


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


インスペクター画像



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


4.ゲームを実行して動作を確認する


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


実行動画
動画ファイルへのリンク




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

 次は 手順13 −−? です。