２Ｄリアルタイムストラテジー 手順６
最終更新：
orika_ex_miyako 2022年12月18日(日) 16:04:48履歴
この手順では、タイルマップ上に経路情報を作成する手順の実装を行います。
＜実装画像 Bake された経路情報(川や山は移動不可のタイルとして設定されている)＞
以下の内容で順番に実装を進めていきます。
手順６ −NavMeshComponents のインポートと Bake 処理−
新しい学習内容は、以下の通りです。
９．NavMeshComponents のインポート
１．設計
タイルマップで製作したステージ、および、キャラの作成が終了しましたので、次は、キャラをタップした地点に向けて移動させる機能を実装します。
そのためには、タップした地点が移動可能な範囲であるのかを設定しておく必要があります。
この機能は Unity が用意している 2D 用の NavMeshAgent の機能である NavMeshComponents を利用して、事前に経路となる移動範囲を設定しておき、
その移動範囲内であれば移動を行う、という形で実装してきます。移動可能な範囲には岩や川といった、移動できないタイルは省かれるように設定しておくことで、
タップした地点に向かって、最短距離、かつ、移動できないタイルは避けて移動していく処理を実装することが出来ます。
タップ処理は次の手順とし、この手順では、NavMeshComponents のインポート、および、移動可能な範囲の設定を行います。
なお、NavMeshComponents ではタイルマップに限らず、2D ゲームにおいて NavMeshAgent の機能を利用した経路移動の処理を実装することが出来ます。
２．NavMeshComponents をインポートする
NavMeshComponents は正式なパッケージとしては公式リリースはまだされておりません。(2022.12月現在)
そのため、Unity 内の PackageManager ではインストールできませんので、下記の Unity の NavMesh 関連のリポジトリからパッケージをダウンロードして入手します。
master ブランチではなく、2D 用のブランチからダウンロードする必要がありますので、
2019.3-2D ブランチからダウンロードを行います。
＜NavMeshComponents 2D用＞
Github サイト内の Code ボタンを押して、Download Zip を選択してください。
圧縮された状態で「NavMeshComponents-2019.3-2D.zip」パッケージがダウンロードできますので、そちらを展開します。
その後、展開したフォルダ内を NavMeshComponents-2019.3-2D/Assets と開いていき、「NavMeshComponents」のフォルダを選択します。
＜NavMeshComponents-2019.3-2D/Assets/NavMeshComponentsフォルダ＞
この「NavMeshComponents」のフォルダを Unity 内の Project フォルダにドラッグアンドドロップして Unity へインポートします。
インポート後の Unity の Project/Assets フォルダ画像
以上でインポートは完了です。
１０．タイルマップを Bake して移動経路を作成する
１．設計
NavMeshComponents フォルダ内にある NavMeshBuilder2D と NavMeshSourceTag2D という２つのクラスを使って、実際には経路移動の処理が実装されます。
そのためには、3D の NavMeshAgent と同じように、タイルマップ上に AI で検知可能な経路を設定して Bake を行う必要があります。
ですが現在はまだ、Bake を行う対象が指定されていません。
Bake 処理を行う前に、まずは移動可能なタイルマップの情報を画像側を設定します。
２．移動可能な画像の設定を行う
移動可能なタイルマップの元となっているタイル用の画像のファイルを選択し、インスペクターから Sprite Editor を起動します。
Sprite Mode が Multiple になっていることを確認してください。
Sprite Editor が起動したら、左上のメニューより、Custom Physics Shape を選択します。
＜Custom Physics Shape を選択＞
Custom Physics Shape を選択した状態で、分割されている１つの画像内をドラッグアンドドロップして枠を描くようにすると、白いコライダー用の枠が出現します。
この白いコライダーの枠が、経路として Bake 対象となる、移動可能な範囲となります。(通常のコライダーとは考え方が逆になります)
各角をドラッグアンドドロップすると範囲の変更ができますので、こちらを各画像の最大値まで引き伸ばして設定します。
そうすることにより、この画像はすべての位置で通過可能な画像として設定されます。
＜手順動画 白いコライダーの操作＞
動画ファイルへのリンク
＜白いコライダー設定後の画像＞
＜手順動画 移動可能にする、すべての画像に白いコライダーを設定する＞
動画ファイルへのリンク
設定が終了したら、右上の Apply を押して保存します。
この手順を、移動可能とさせたい各画像に対して、それぞれ設定を行ってください。
３．Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap の設定を行う
移動可能となる経路の情報を設定するため、Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクトを選択します。
最初にインスペクターの右上にある static にチェックを入れます。NavMesh の情報を Bake するためには、ゲームオブジェクトが static に設定されている必要があります。
次に、Add Component ボタンから、TilemapCollider2D コンポーネントと NavMeshSourceTag2D コンポーネントをアタッチします。
追加の設定は不要ですので、アタッチされていることを確認しておいてください。
Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクト インスペクター画像
以上で設定は完了です。
４．NavMeshBuilder ゲームオブジェクトを作成し、設定を行う
実際に Bake を行うための機能を実装します。
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。(あるいは ctrl + shift + N でショートカットキー操作します)
新しいゲームオブジェクトが作成されますので、名前を NavMeshBuilder に変更します。
インスペクターの最下段より Add Component を選択して、NavMeshBuilder2D コンポーネントをアタッチします。
NavMeshBuilder ゲームオブジェクト インスペクター画像
追加の設定は不要です。以上でこのゲームオブジェクトは完成です。
５．Bake を行い、Bake した経路情報をセーブする
NavMeshBuilder ゲームオブジェクト内の NavMeshBuilder2D コンポーネントにある Bake ボタンを押して、Bake を行います。
Bake した情報は、Navigation ウインドウを選択していることで可視化可能になります。
Unity の左上のメニューの中から Window > AI > Navigation を選択してください。Navigation ウインドウが開くか、インスペクター内に Navigation タブが追加されます。
インスペクターのタブを Navigation タブに切り替えてください。Scene ビュー内に経路が表示されれば、Bake 成功です。
タブを Navigation に切り替える
Bake した際の Scene ビュー画像
先ほどの手順で設定した画像の上が移動可能な範囲として Bake されているか確認します。
正常に Bake されていない場合には、画像の設定を見直してください。
Bake に問題がなければ、NavMeshBuilder2D コンポーネントにある Bake On Eneble にチェックをいれてください。
このチェックを入れることにより、Bake した経路情報がセーブされます。
インスペクター画像
以上で設定は完了です。
６．移動範囲の調整を行い、再度 Bake する
必要に応じて、移動範囲の調整を行います。
Bake された経路で問題なければ、この手順は不要です。
初期値で Bake を行うと、想定しているよりも、タイルマップから離れた位置での Bake になる場合があります。
これは、Bake を行う際の Agents の設定によるものです。
Navigation ウインドウ内に Agents タブがありますので、こちらの Radius の値を小さい値にしていくことで、
移動不可能なタイルマップになるべく近い位置まで侵入して移動することが可能になります。
Navigation ウインドウ/ Agents タブ 画像
Bake は何回でも行えますので、こちらの設定を変更して Bake をやり直して、想定している移動範囲になるように調整を行ってください。
以上でこの手順は終了です。
次は 手順７ −タイルのタップ感知制御の実装− です。
＜実装画像 Bake された経路情報(川や山は移動不可のタイルとして設定されている)＞
以下の内容で順番に実装を進めていきます。
手順６ −NavMeshComponents のインポートと Bake 処理−
９．NavMeshComponents のインポート １０．タイルマップを Bake して移動経路を作成する
新しい学習内容は、以下の通りです。
・NavMeshComponents パッケージ ・タイルマップの Bake 処理
９．NavMeshComponents のインポート 
１．設計
タイルマップで製作したステージ、および、キャラの作成が終了しましたので、次は、キャラをタップした地点に向けて移動させる機能を実装します。
そのためには、タップした地点が移動可能な範囲であるのかを設定しておく必要があります。
この機能は Unity が用意している 2D 用の NavMeshAgent の機能である NavMeshComponents を利用して、事前に経路となる移動範囲を設定しておき、
その移動範囲内であれば移動を行う、という形で実装してきます。移動可能な範囲には岩や川といった、移動できないタイルは省かれるように設定しておくことで、
タップした地点に向かって、最短距離、かつ、移動できないタイルは避けて移動していく処理を実装することが出来ます。
タップ処理は次の手順とし、この手順では、NavMeshComponents のインポート、および、移動可能な範囲の設定を行います。
なお、NavMeshComponents ではタイルマップに限らず、2D ゲームにおいて NavMeshAgent の機能を利用した経路移動の処理を実装することが出来ます。
２．NavMeshComponents をインポートする
NavMeshComponents は正式なパッケージとしては公式リリースはまだされておりません。(2022.12月現在)
そのため、Unity 内の PackageManager ではインストールできませんので、下記の Unity の NavMesh 関連のリポジトリからパッケージをダウンロードして入手します。
master ブランチではなく、2D 用のブランチからダウンロードする必要がありますので、
2019.3-2D ブランチからダウンロードを行います。
＜NavMeshComponents 2D用＞
https://github.com/Unity-Technologies/NavMeshCompo...
Github サイト内の Code ボタンを押して、Download Zip を選択してください。
圧縮された状態で「NavMeshComponents-2019.3-2D.zip」パッケージがダウンロードできますので、そちらを展開します。
その後、展開したフォルダ内を NavMeshComponents-2019.3-2D/Assets と開いていき、「NavMeshComponents」のフォルダを選択します。
＜NavMeshComponents-2019.3-2D/Assets/NavMeshComponentsフォルダ＞
この「NavMeshComponents」のフォルダを Unity 内の Project フォルダにドラッグアンドドロップして Unity へインポートします。
インポート後の Unity の Project/Assets フォルダ画像
以上でインポートは完了です。
１０．タイルマップを Bake して移動経路を作成する
１．設計
NavMeshComponents フォルダ内にある NavMeshBuilder2D と NavMeshSourceTag2D という２つのクラスを使って、実際には経路移動の処理が実装されます。
そのためには、3D の NavMeshAgent と同じように、タイルマップ上に AI で検知可能な経路を設定して Bake を行う必要があります。
ですが現在はまだ、Bake を行う対象が指定されていません。
Bake 処理を行う前に、まずは移動可能なタイルマップの情報を画像側を設定します。
２．移動可能な画像の設定を行う
移動可能なタイルマップの元となっているタイル用の画像のファイルを選択し、インスペクターから Sprite Editor を起動します。
Sprite Mode が Multiple になっていることを確認してください。
Sprite Editor が起動したら、左上のメニューより、Custom Physics Shape を選択します。
＜Custom Physics Shape を選択＞
Custom Physics Shape を選択した状態で、分割されている１つの画像内をドラッグアンドドロップして枠を描くようにすると、白いコライダー用の枠が出現します。
この白いコライダーの枠が、経路として Bake 対象となる、移動可能な範囲となります。(通常のコライダーとは考え方が逆になります)
各角をドラッグアンドドロップすると範囲の変更ができますので、こちらを各画像の最大値まで引き伸ばして設定します。
そうすることにより、この画像はすべての位置で通過可能な画像として設定されます。
＜手順動画 白いコライダーの操作＞
動画ファイルへのリンク
＜白いコライダー設定後の画像＞
＜手順動画 移動可能にする、すべての画像に白いコライダーを設定する＞
動画ファイルへのリンク
設定が終了したら、右上の Apply を押して保存します。
この手順を、移動可能とさせたい各画像に対して、それぞれ設定を行ってください。
３．Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap の設定を行う
移動可能となる経路の情報を設定するため、Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクトを選択します。
最初にインスペクターの右上にある static にチェックを入れます。NavMesh の情報を Bake するためには、ゲームオブジェクトが static に設定されている必要があります。
次に、Add Component ボタンから、TilemapCollider2D コンポーネントと NavMeshSourceTag2D コンポーネントをアタッチします。
追加の設定は不要ですので、アタッチされていることを確認しておいてください。
Grid_Move ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクト インスペクター画像
以上で設定は完了です。
４．NavMeshBuilder ゲームオブジェクトを作成し、設定を行う
実際に Bake を行うための機能を実装します。
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。(あるいは ctrl + shift + N でショートカットキー操作します)
新しいゲームオブジェクトが作成されますので、名前を NavMeshBuilder に変更します。
インスペクターの最下段より Add Component を選択して、NavMeshBuilder2D コンポーネントをアタッチします。
NavMeshBuilder ゲームオブジェクト インスペクター画像
追加の設定は不要です。以上でこのゲームオブジェクトは完成です。
５．Bake を行い、Bake した経路情報をセーブする
NavMeshBuilder ゲームオブジェクト内の NavMeshBuilder2D コンポーネントにある Bake ボタンを押して、Bake を行います。
Bake した情報は、Navigation ウインドウを選択していることで可視化可能になります。
Unity の左上のメニューの中から Window > AI > Navigation を選択してください。Navigation ウインドウが開くか、インスペクター内に Navigation タブが追加されます。
インスペクターのタブを Navigation タブに切り替えてください。Scene ビュー内に経路が表示されれば、Bake 成功です。
タブを Navigation に切り替える
Bake した際の Scene ビュー画像
先ほどの手順で設定した画像の上が移動可能な範囲として Bake されているか確認します。
正常に Bake されていない場合には、画像の設定を見直してください。
Bake に問題がなければ、NavMeshBuilder2D コンポーネントにある Bake On Eneble にチェックをいれてください。
このチェックを入れることにより、Bake した経路情報がセーブされます。
インスペクター画像
以上で設定は完了です。
６．移動範囲の調整を行い、再度 Bake する
必要に応じて、移動範囲の調整を行います。
Bake された経路で問題なければ、この手順は不要です。
初期値で Bake を行うと、想定しているよりも、タイルマップから離れた位置での Bake になる場合があります。
これは、Bake を行う際の Agents の設定によるものです。
Navigation ウインドウ内に Agents タブがありますので、こちらの Radius の値を小さい値にしていくことで、
移動不可能なタイルマップになるべく近い位置まで侵入して移動することが可能になります。
Navigation ウインドウ/ Agents タブ 画像
Bake は何回でも行えますので、こちらの設定を変更して Bake をやり直して、想定している移動範囲になるように調整を行ってください。
以上でこの手順は終了です。
次は 手順７ −タイルのタップ感知制御の実装− です。
コメントをかく