【２Ｄ】NavMeshComponents を利用した経路移動処理の実装例��
最終更新：
orika_ex_miyako 2024年01月03日(水) 19:46:30履歴
前回の手順に続き、この手順では、タイルマップ上に経路情報を作成する手順の実装を行います。
＜実装画像 Bake された経路情報＞
＜実装動画 Bake された経路情報(穴・壁・家具は移動不可のタイルとして設定されている)＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
新しい学習内容は、以下の通りです。
３．タイルマップを Bake して移動できない範囲を作成する
１．設計
移動可能なタイルマップと移動不可のタイルマップを分けて作成します。
移動できるタイルマップ
移動できるタイルマップのインスペクター(NavMeshSourceTag2D の Area の数字が 0)
移動できないタイルマップ
Bake 部分(赤くなって囲まれている)
移動できないタイルマップのインスペクター(NavMeshSourceTag2D の Area の数字が 1)
Tilemap に用意されている Tilemap Collider2D コンポーネント、
および NavMeshComponents フォルダ内にある NavMeshBuilder2D と NavMeshSourceTag2D という２つのクラスを使って、実際には経路移動の処理が実装されます。
そのためには、3D の NavMeshAgent と同じように、タイルマップ上に AI で検知可能な経路を設定して Bake を行う必要があります。
ですが現在はまだ、Bake を行う対象が指定されていません。
そこで Bake 処理を行う前に、まずは移動可能なタイルマップの情報を画像側を設定します。
２．移動できないタイルの設定を行う
移動できないタイルですが、こちらも、タイルの Collider Type が Grid、あるいは Sprite になっている場合のみ設定可能です。
None にしてしまうと、移動可能・不可能のいずれにも該当せず、Bake が出来ません。
Collider Type を Grid に設定している場合、タイル全体が移動可能、あるいは移動不可能の形状のコライダーを持つタイルになります。
Sprite に設定している場合、タイルの画像部分のみが移動可能、あるいは移動不可能な形状のコライダーを持つタイルになります。
タイルの Collider Type はタイルを選択時、インスペクターより確認できます。
＜タイルの Collider Type＞
わかりやすく、移動不可能な場合のタイルを画像で比較しておきます。
＜Grid の場合＞
＜Sprite の場合＞
Grid の方はタイルそのものが移動不可の形状となっており、Sprite の方はそれよりも小さくタイル内の画像に沿った形状になっています。
特に形状を気にしないのであれば Grid、画像に沿った形状にしたい場合には Sprite で考えるようにします。
また Sprite の場合、画像の通りにコライダーが形成されない場合のあります。
その際には、下記の手順により、タイルではなく、タイルの元になっている画像側で設定を行ってください。
タイルの元となっているタイル用の画像のファイルを選択し、インスペクターから Sprite Editor を起動します。
Sprite Mode が Multiple になっていることを確認してください。
Sprite Editor が起動したら、左上のメニューより、Custom Physics Shape を選択します。
＜Custom Physics Shape を選択＞
Custom Physics Shape を選択した状態で、分割されている１つの画像内をドラッグアンドドロップして枠を描くようにすると、白いコライダー用の枠が出現します。
この白いコライダーの枠が、経路として Bake 対象となる、移動可能な範囲となります。(通常のコライダーとは考え方が逆になります)
各角をドラッグアンドドロップすると範囲の変更ができますので、こちらを各画像の最大値まで引き伸ばして設定します。
(ただし、Unity 2022.2 以降はサイズの再調整が出来ませんので、何回かにわけて作成してください)
そうすることにより、この画像はすべての位置で通過可能な画像として設定されます。
よって、通行させたくない場合には、この白いコライダーを画像よりも小さく設定します。
＜手順動画 白いコライダーの操作＞
動画ファイルへのリンク
＜白いコライダー設定後の画像＞
＜手順動画 移動可能にする、すべての画像に白いコライダーを設定する＞
動画ファイルへのリンク
設定が終了したら、右上の Apply を押して保存します。
３．Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap の設定を行う
移動できない部分を経路の情報を設定するため、Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクトを選択します。
最初にインスペクターの右上にある static にチェックを入れます。
NavMesh の情報を Bake するためには、ゲームオブジェクトが static に設定されている必要があります。
次に、Add Component ボタンから、TilemapCollider2D コンポーネントと NavMeshSourceTag2D コンポーネントをアタッチします。
追加の設定は不要ですので、アタッチされていることを確認しておいてください。
NavMeshSourceTag2D コンポーネント内にある Area の値を 0 → 1 に設定します。
この部分を設定することで、通行できないタイルマップとして設定されます。
Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクト インスペクター画像
以上で設定は完了です。
４．NavMeshBuilder ゲームオブジェクトを選択し、Bake を行い、Bake した経路情報をセーブする
NavMeshBuilder ゲームオブジェクト内の NavMeshBuilder2D コンポーネントにある Bake ボタンを押して、Bake を行います。
Bake した情報は、Navigation ウインドウを選択していることで可視化可能になります。
Unity の左上のメニューの中から Window > AI > Navigation を選択してください。Navigation ウインドウが開くか、インスペクター内に Navigation タブが追加されます。
インスペクターのタブを Navigation タブに切り替えてください。Scene ビュー内に経路が表示されれば、Bake 成功です。
(Unity 2022.2 以降は、該当するゲームオブジェクトを選択することで、Scene ビュー内に経路が表示されます。タブの切り替えは不要になりました。)
タブを Navigation に切り替える
Bake した際の Scene ビュー画像
＜実装動画 Bake された経路情報(穴・壁・家具は移動不可のタイルとして設定されている)＞
動画ファイルへのリンク
先ほどの手順で設定した画像の上が移動可能な範囲として Bake されているか確認します。
正常に Bake されていない場合には、画像の設定を見直してください。
Bake に問題がなければ、NavMeshBuilder2D コンポーネントにある Bake On Eneble にチェックをいれてください。
このチェックを入れることにより、Bake した経路情報がセーブされます。
インスペクター画像
もしも Bake が上手くいかない場合には、タイルマップのゲームオブジェクトのコンポーネントを見直してください。
TilemapCollider2D コンポーネント → NavMeshSourceTag2D コンポーネントの順で並んでいない場合、 Bake に失敗することがあります。
以上で設定は完了です。
５．移動範囲の調整を行い、再度 Bake する
必要に応じて、移動範囲の調整を行います。
Bake された経路で問題なければ、この手順は不要です。
初期値で Bake を行うと、想定しているよりも、タイルマップから離れた位置での Bake になる場合があります。
これは、Bake を行う際の Agents の設定によるものです。
Navigation ウインドウ内に Agents タブがありますので、こちらの Radius の値を小さい値にしていくことで、
移動不可能なタイルマップになるべく近い位置まで侵入して移動することが可能になります。
Navigation ウインドウ/ Agents タブ 画像
Bake は何回でも行えますので、こちらの設定を変更して Bake をやり直して、想定している移動範囲になるように調整を行ってください。
以上でこの手順は終了です。
＜実装画像 Bake された経路情報＞
＜実装動画 Bake された経路情報(穴・壁・家具は移動不可のタイルとして設定されている)＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
３．タイルマップを Bake して移動できない範囲を作成する
新しい学習内容は、以下の通りです。
・タイルマップの Bake 処理の続き
３．タイルマップを Bake して移動できない範囲を作成する 
１．設計
移動可能なタイルマップと移動不可のタイルマップを分けて作成します。
移動できるタイルマップ
移動できるタイルマップのインスペクター(NavMeshSourceTag2D の Area の数字が 0)
移動できないタイルマップ
Bake 部分(赤くなって囲まれている)
移動できないタイルマップのインスペクター(NavMeshSourceTag2D の Area の数字が 1)
Tilemap に用意されている Tilemap Collider2D コンポーネント、
および NavMeshComponents フォルダ内にある NavMeshBuilder2D と NavMeshSourceTag2D という２つのクラスを使って、実際には経路移動の処理が実装されます。
そのためには、3D の NavMeshAgent と同じように、タイルマップ上に AI で検知可能な経路を設定して Bake を行う必要があります。
ですが現在はまだ、Bake を行う対象が指定されていません。
そこで Bake 処理を行う前に、まずは移動可能なタイルマップの情報を画像側を設定します。
２．移動できないタイルの設定を行う
移動できないタイルですが、こちらも、タイルの Collider Type が Grid、あるいは Sprite になっている場合のみ設定可能です。
None にしてしまうと、移動可能・不可能のいずれにも該当せず、Bake が出来ません。
Collider Type を Grid に設定している場合、タイル全体が移動可能、あるいは移動不可能の形状のコライダーを持つタイルになります。
Sprite に設定している場合、タイルの画像部分のみが移動可能、あるいは移動不可能な形状のコライダーを持つタイルになります。
タイルの Collider Type はタイルを選択時、インスペクターより確認できます。
＜タイルの Collider Type＞
わかりやすく、移動不可能な場合のタイルを画像で比較しておきます。
＜Grid の場合＞
＜Sprite の場合＞
Grid の方はタイルそのものが移動不可の形状となっており、Sprite の方はそれよりも小さくタイル内の画像に沿った形状になっています。
特に形状を気にしないのであれば Grid、画像に沿った形状にしたい場合には Sprite で考えるようにします。
また Sprite の場合、画像の通りにコライダーが形成されない場合のあります。
その際には、下記の手順により、タイルではなく、タイルの元になっている画像側で設定を行ってください。
タイルの元となっているタイル用の画像のファイルを選択し、インスペクターから Sprite Editor を起動します。
Sprite Mode が Multiple になっていることを確認してください。
Sprite Editor が起動したら、左上のメニューより、Custom Physics Shape を選択します。
＜Custom Physics Shape を選択＞
Custom Physics Shape を選択した状態で、分割されている１つの画像内をドラッグアンドドロップして枠を描くようにすると、白いコライダー用の枠が出現します。
この白いコライダーの枠が、経路として Bake 対象となる、移動可能な範囲となります。(通常のコライダーとは考え方が逆になります)
各角をドラッグアンドドロップすると範囲の変更ができますので、こちらを各画像の最大値まで引き伸ばして設定します。
(ただし、Unity 2022.2 以降はサイズの再調整が出来ませんので、何回かにわけて作成してください)
そうすることにより、この画像はすべての位置で通過可能な画像として設定されます。
よって、通行させたくない場合には、この白いコライダーを画像よりも小さく設定します。
＜手順動画 白いコライダーの操作＞
動画ファイルへのリンク
＜白いコライダー設定後の画像＞
＜手順動画 移動可能にする、すべての画像に白いコライダーを設定する＞
動画ファイルへのリンク
設定が終了したら、右上の Apply を押して保存します。
３．Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap の設定を行う
移動できない部分を経路の情報を設定するため、Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクトを選択します。
最初にインスペクターの右上にある static にチェックを入れます。
NavMesh の情報を Bake するためには、ゲームオブジェクトが static に設定されている必要があります。
次に、Add Component ボタンから、TilemapCollider2D コンポーネントと NavMeshSourceTag2D コンポーネントをアタッチします。
追加の設定は不要ですので、アタッチされていることを確認しておいてください。
NavMeshSourceTag2D コンポーネント内にある Area の値を 0 → 1 に設定します。
この部分を設定することで、通行できないタイルマップとして設定されます。
Grid_Obstacle ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクト インスペクター画像
以上で設定は完了です。
４．NavMeshBuilder ゲームオブジェクトを選択し、Bake を行い、Bake した経路情報をセーブする
NavMeshBuilder ゲームオブジェクト内の NavMeshBuilder2D コンポーネントにある Bake ボタンを押して、Bake を行います。
Bake した情報は、Navigation ウインドウを選択していることで可視化可能になります。
Unity の左上のメニューの中から Window > AI > Navigation を選択してください。Navigation ウインドウが開くか、インスペクター内に Navigation タブが追加されます。
インスペクターのタブを Navigation タブに切り替えてください。Scene ビュー内に経路が表示されれば、Bake 成功です。
(Unity 2022.2 以降は、該当するゲームオブジェクトを選択することで、Scene ビュー内に経路が表示されます。タブの切り替えは不要になりました。)
タブを Navigation に切り替える
Bake した際の Scene ビュー画像
＜実装動画 Bake された経路情報(穴・壁・家具は移動不可のタイルとして設定されている)＞
動画ファイルへのリンク
先ほどの手順で設定した画像の上が移動可能な範囲として Bake されているか確認します。
正常に Bake されていない場合には、画像の設定を見直してください。
Bake に問題がなければ、NavMeshBuilder2D コンポーネントにある Bake On Eneble にチェックをいれてください。
このチェックを入れることにより、Bake した経路情報がセーブされます。
インスペクター画像
もしも Bake が上手くいかない場合には、タイルマップのゲームオブジェクトのコンポーネントを見直してください。
TilemapCollider2D コンポーネント → NavMeshSourceTag2D コンポーネントの順で並んでいない場合、 Bake に失敗することがあります。
以上で設定は完了です。
５．移動範囲の調整を行い、再度 Bake する
必要に応じて、移動範囲の調整を行います。
Bake された経路で問題なければ、この手順は不要です。
初期値で Bake を行うと、想定しているよりも、タイルマップから離れた位置での Bake になる場合があります。
これは、Bake を行う際の Agents の設定によるものです。
Navigation ウインドウ内に Agents タブがありますので、こちらの Radius の値を小さい値にしていくことで、
移動不可能なタイルマップになるべく近い位置まで侵入して移動することが可能になります。
Navigation ウインドウ/ Agents タブ 画像
Bake は何回でも行えますので、こちらの設定を変更して Bake をやり直して、想定している移動範囲になるように調整を行ってください。
以上でこの手順は終了です。
コメントをかく