Unityに関連する記事です

 UI の機能の1つとして、プレイヤーの位置を知らせるミニマップ機能の実装例です。
ゲーム画面に常時、ワールドマップやエリアマップなどを縮小表示します。


<完成時の Game ビュー画像 .┘螢▲泪奪廖



<完成時の Game ビュー画像◆.錙璽襯疋泪奪廖




<新しく学習する内容>
 ・RenderTexture
 ・Mask コンポーネント
 ・RawImage コンポーネント



設計


 ミニマップを画面内の邪魔にならない位置に表示し、ゲーム画面を上空から俯瞰して見えるようにする機能を実装します。
 
 今回の手順では必要なゲームオブジェクトの作成を行い、次の手順でスクリプトを作成して、ミニマップの制御を行うようにします。

 こちらのサイトを参考にしております。(こちらでは3D用のミニマップの制作手順が紹介されています)

【Unity】ミニマップの作り方!敵やアイテムの位置が一目で分かるようにしよう


新しい Layer の作成


 カメラに映るゲームオブジェクトの種類を Layer によって制御できるように、新しい Layer を作成します。

 Ground と GroundDetector の2つの Layer を作成してください。

 地面用のゲームオブジェクト(あるいはタイルマップ)の Layerには Ground を設定し、
他にミニマップに表示したいゲームオブジェクト(プレイヤーや敵の位置用のマーカーなど)の Layer には GroundDetector を設定します。

 まずは地面用、タイルマップのゲームオブジェクトの Layer に Ground を設定しておいてください。
ミニマップに映したいゲームオブジェクトにだけ設定すれば問題ありません。


Tags And Layers インスペクター画像



RenderTexture の作成


 RenderTexture は、リアルタイムに描画を行うタイプのテクスチャです。
今回の場合であれば、カメラの画像をリアルタイムに投影させるテクスチャとして利用しています。

 任意のフォルダ内で Create => RenderTexture を選択することで新しい RenderTexture を作成できます。
名前は MinimapRenderTexture のように、わかりやすい名称にしておいてください。

 特に設定を変更する必要はありません。
インスペクターで設定可能な項目の詳細については、Unity のマニュアルなどを参考にしてください。





参考サイト
Unity 公式マニュアル
レンダーテクスチャ
はなちるのマイノート 様
【Unity】3分で分かるRenderTextureを使ってRawImageにカメラの映像を写す手順


MinimapCamera の作成


 ミニマップ用のカメラを新しく作成します。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Camera を選択します。
新しい Camera ゲームオブジェクトが作成されますので、名前を MinimapCamera に変更します。

 Transform コンポーネントの Position の X 軸と Y 軸について適宜な位置に調整してください。
プレイヤーが映る位置に移動させておくとよいでしょう。
Z 軸については -10 にして、ゲーム画面を引いて映す位置に配置してください。(そうしないとゲーム画面がカメラに映りません)

 また、AudioListener コンポーネントはいずれかのカメラに1つアタッチされていれば不要であるため、このカメラからはリムーブします。



 Camera コンポーネント内の各項目の設定を順番に行います。

 Clear Flags の設定Solid Color に変更します。
Background の項目が追加されて、背景色を選択できるようになりますが、初期設定の紺や黒のままで問題ありません。

 Culling Mask の設定を行い、Ground と GroundDetector の2つの Layer のみを選択します。
こうすることにより、指定した Layer のゲームオブジェクト群のみを描画するカメラになります。

 Projection Type の設定Orthographic に設定します。(最初から設定されていれば変更は不要です)
画面を平行投射して描画するカメラになります。

 Size の値はミニマップの表示形式を「ゲーム全体のワールドマップの縮小サイズ」にするか、「プレイヤー周辺のエリアマップの縮小サイズ」にするかによって、値を設定します。
この値によって、カメラの描画範囲が変化しますので、調整しながら設定してください。
基本的には、ワールドマップにする場合には値を大きく、エリアマップにする場合には値を小さく設定します。

 Clipping Planes の設定のうち、Far の値を 30 前後に下げます。これはカメラが映す距離の最大値です。
遠くまで描画を行う必要がないため、数値を下げて必要な範囲だけを描画するようにし、カメラによる描画負荷を下げます。

 Target Texture の部分に、先ほど作成した MinimapRenderTexture をドラッグアンドドロップしてアサインしてください。
これで、MinimapCamera が描画した内容が、MinimapRenderTexture にも描画させるようになります。


 それ以外の部分は初期設定のままで問題ありません。

 Unity のバージョンにより、Culling Mask の表示形式が異なりますが、設定内容は同じです。
(Position の位置は参考になりませんので、自分のプロジェクトに合わせてください。)


インスペクター  Culling Mask が Mixed となる場合ー



インスペクター◆ Culling Mask が設定した内容となる場合ー



Culling Mask の内容



参考サイト
XR-HU3 様
【Unity】カメラの基本設定を理解しよう!|Camera入門
https://xr-hub.com/archives/5914


ミニマップのフレーム用の画像とマスク用の画像をインポートする


 アセットストアから無料アセット、あるいは無料のイラストサイトから、ミニマップ用のフレーム画像をダウンロードして Unity へインポートしておきます。
専用のフォルダを作成しておくと管理しやすいです。
 
 下記は無料アセットです。


Fantasy Wooden GUI : Free
https://assetstore.unity.com/packages/2d/gui/fanta...




Dark Brown GUI kit
https://assetstore.unity.com/packages/2d/gui/dark-...





 インポートした画像の Texture Type を Default から Sprite(2D and UI) に変更しておいてください。



 マスク用の画像については、Unity にインポートされている UI 画像でも対応できます。
また、下記のサイト内で配布されている丸型のマスク画像をダウンロードして利用していただいても問題ありません。

【Unity】ミニマップの作り方!敵やアイテムの位置が一目で分かるようにしよう


CanvasWithMinimap の作成


 新しい Canvas を作成します。
名前を CanvasWithMinimap に変更します。

 ここでは Canvas コンポーネントの Render Mode の設定が Screen Space - Overlay になっていますが、
通常の UI のように、常に前面にミニマップを表示させる設定ですが、World Space に変更して、ゲーム空間に配置しても構いません。

 Canvas Scaler コンポーネントの UI Scale Mode などの設定を行い、ゲーム画面と同じサイズに変更しておいてください。

 またこの Canvas では GraphicRaycaster コンポーネントは不要ですので、リムーブしてください(残っていても問題はありません)。











Image の作成


 CanvasWithMinimap ゲームオブジェクトの子オブジェクトとして、新しい Image を作成します。
名称は任意に設定してください。

 アンカーを設定した上で、任意の位置に配置してください。
ここでは左上を設定していますが、他の位置でも問題ありません。

 こちらは、ミニマップを表示させるフレーム用の画像を設定します。
Image コンポーネントの Source Image に、先ほどインポートした画像の内の、フレーム用の画像をドラッグアンドドロップしてアサインしてください。

 また Image コンポーネント内の Raycast Target のチェックを外してください。











Mask の作成(任意)


 こちらは先ほどのマップのフレームの形状に合わせて、必要に応じて追加してください。
フレームの形状をそのまま利用する場合には不要です。

 例えば、フレーム用の画像が丸い形状をしている場合、形状内のみ描画を行い、外側を表示しないようにするための、
マスクの設定を行うためのゲームオブジェクトです。

 機能的には RectMask2D コンポーネントをアタッチすることで実現できます。
チャレンジしてみましょう。


<実装動画>
動画ファイルへのリンク



 Image ゲームオブジェクトの子オブジェクトとして、もう1つ Image を作成します。
こちらの名称は Mask に変更してください。

 インスペクターの一番下にある Add Component ボタンを押下して、Mask コンポーネントを追加してください。
Show Mask Graphic にチェックが入っている場合には、チェックを外しておいてください。
 
 Image コンポーネントの Source Image にはマスク用の画像を設定します。
先ほどインポートした画像の内の、マスク用の画像をドラッグアンドドロップしてアサインしてください。








参考サイト
Unity 公式マニュアル
Mask
https://docs.unity3d.com/ja/current/Manual/script-...
[Kan のメモ帳] 様
SpriteやImageでMaskを使って画像を任意の形に切り抜いて表示する 【Unity】【uGUI】
https://kan-kikuchi.hatenablog.com/entry/Mask
渋谷ほととぎす通信 様
【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要
https://shibuya24.info/entry/ugui_rect2dmask


RawImage_Minimap の作成


 Texture の画像を表示させるためのコンポーネントとして RawImage コンポーネントが用意されています。
通常の Iamge コンポーネントは Sprite 形式の画像のみを UI として設定することができますが、
RawImage コンポーネントでは、UI 表示させるために、Sprite 形式以外の画像も設定することが可能です。
そのため、RenderTexture も設定することが出来ます。



 ゲームオブジェクトの作成位置は、Mask ゲームオブジェクトの有無で異なります。
手順にかかわらず、名前は RawImage_Minimap に変更してください。


 Mask ゲームオブジェクトがない場合には、Image ゲームオブジェクトの子オブジェクトとして、UI => RawImage を選択して、新しく RawImage ゲームオブジェクトを作成します。






 Mask ゲームオブジェクトがある場合には、Mask ゲームオブジェクトの子オブジェクトとして、UI => RawImage を選択して、新しく RawImage ゲームオブジェクトを作成します。






 続いて、RawImage コンポーネントの Texture の部分に、MinimapRenderTexture をドラッグアンドドロップしてアサインしてください。
これにより、MinimapRenderTexture に表示されているカメラが映している画面の内容を、RawImage コンポーネントが UI として表示するようになります。











参考サイト
Unity 公式マニュアル
Raw Image


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


 ここまでの手順により、ミニマップ自体は完成となります。
ゲームを実行し、UI としてミニマップが表示されているか確認してください。

 この後の手順は、ミニマップ上にプレイヤーや敵などの情報をマーカーとして表示させる場合の設定や
プレイヤーの移動に合わせてミニマップを連動させる設定です。

 自分の利用したいミニマップのタイプに応じて必要な設定を追加してください。


<MinimapCamera ゲームオブジェクトをプレイヤーのゲームオブジェクトの子オブジェクトに設定する>


 ワールドマップとしてミニマップを利用する場合には、この手順は不要です。

 エリアマップとして利用する場合、プレイヤーをミニマップの中心に置き、周辺情報を更新して表示させることになりますので
MinimapCamera ゲームオブジェクトの位置とプレイヤーの位置とを連動させる必要があります

 MinimapCamera ゲームオブジェクトをプレイヤーのゲームオブジェクトの子オブジェクトに設定します。
プレイヤーのゲームオブジェクトの構造に合わせて、子オブジェクトの配置をしてください。





 設定したら、ゲームを実行し、プレイヤーの移動に合わせてミニマップが移動するか、確認をしてください。


<マーカーの作成と設定>


 多くのミニマップの場合、マーカーという形で、ゲーム内のゲームオブジェクトのアイコンを表示させます。
プレイヤーのアイコン、敵のアイコン、アイテムのアイコン、拠点のアイコンなど、ミニマップに表示させたい情報に応じてマーカーを作成します。

 マーカーの作成方法はどれも同じになります。ここではプレイヤーのマーカーの作成を例に挙げます。

 プレイヤー用のゲームオブジェクトの子オブジェクトとして、2Dゲームオブジェクトを新しく追加します。
ここでは Create → 2D Object → 円状のゲームオブジェクトを作成しています。





 名称は任意ですが、分かりやすく Marker のように変更しておいてください。

 マーカー用の画像についてはミニマップのアイコンとなりますので、適宜な画像を設定してください。
今回の場合、初期画像をそのまま利用し、色だけを変えて使用しています。

 ミニマップの目印になればよいため、目立つ工夫をしてみてください。



 続いて、Layer の設定を GroundDetector に変更します。
この設定にすることで、MinimapCamera ゲームオブジェクトの描画対象となります。





 以上でマーカーは完成です。

 ゲームを実行してマーカーが表示されているか、確認してください。
プレイヤーの子オブジェクトになっていますので、プレイヤーの位置と同じ位置にマーカーが表示されます。

 Unity の親子関係を上手く活用していきましょう。


<MainCamera ゲームオブジェクトの設定>


 現在の設定のままですと、ゲーム画面の方にもマーカーが映りこんでしまうため、
GroundDetector に設定されている Layer のゲームオブジェクト(マーカー)については、MainCamera には描画しないように設定します。

 MainCamera ゲームオブジェクトの Camera コンポーネント内にある Culling Mask のプルダウンを選択し、
設定から GroundDetector の Layer のチェックを外します。

 これにより、MainCamera ではマーカーのゲームオブジェクトを描画しない状態になります。





 ゲームを実行して、ゲーム画面からはマーカーが消え、ミニマップにのみマーカーが表示されているか、確認してください。


<Cinemachine を利用している場合の対応>


 MainCamera に Cinemachine を連動させている場合、Confiner ゲームオブジェクトによって Cinemachine の稼働範囲を制限しているケースがあります。
この場合、新しく作成した Ground と GroundDetector の2つの Layer が接触してしまい、正常に動作しない恐れがあります。

 同様に、プレイヤー、弾、敵といったゲームオブジェクトにもそれぞれの Layer を設定している場合、
この新しい Layer が干渉してプレイヤーや敵が移動できなくなったりします。

 このケースに対応するには、ProjectSettings → Physics2D の項目内にある Layer Collision Matrix の設定を見直してください。

 新しい Layer との干渉を外すことで正常に動作するようになります。


設定例





 以上で完成です。

 調整しながら応用方法を考えてみると良いでしょう。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます