Cross Road

Unity、VR、MR、ARを中心とした技術ブログ

任意のシーンからマップを作る、UGUI MiniMapの使い方概要

そろそろゲームが作りたくて、マップが作れるアセットを探していたら、UGUI MiniMapを見つけました。

これは別カメラがプレーヤーの上空から追尾することで、カメラの映像がそのままマップになる、という仕組みです。

こんな風にマップが左上に表示されます。

uGUI MiniMapの利用例

目の前に表示することもできます。目の前に表示しないと違いがわかりづらいですが、2Dモードと、3Dモードという表示もあります。

2Dモード

uGUI MiniMapの2Dモード


3Dモード

uGUI MiniMapの3Dモード

けっこう色々できることがわかったので、使い方などをまとめてみました。そのままだとサンプルシーンが動かない、などがあるので、ご参考になれば幸いです。

=====

目次

1. サンプルシーン実行による動作確認

2. 任意のCGモデルからマップを作成

3. その他の機能

=====

1. サンプルシーン実行による動作確認

1. まずは、AssetStoreから購入し、インポートします。

(v1.6で検証しています)

2. Project ViewのExample/Sceneの中から"MiniMap"を開きます。
3. FPSControllerのGravity Multiplierを0に変更します。

FPSControllerのGravity Multiplierの設定画面

(これはこのサンプルシーン特有の問題なので、2で説明する任意のシーンでマップを作る時は不要です)

4. Hierarchy ViewのMiniMap3D/MiniMap/MiniMapCameraのClearFlagを"Solid Color"に変更します。

これをやらないと、3Dモードのとき、マップ上にどんどん表示が重なって何も見えなくなります。

Solid Colorに変更しなかった場合の表示不具合の例

5. 実行します。

uGUI MiniMapの実行例

ピンク色の枠で囲ったボタンを押すと、表示の見た目を変更することができます。この画像では、「Circle Mode」を選択しています。


また、以下の機能もあります。

・キーボードのE:地図を目の前に拡大表示させることができます。
・キーボードの"+"と"-":地図の表示範囲を変更できます。

別シーンで実行した例ですが、このようになります。

別シーンでuGUI MiniMapを実行した例


キー割当はHierarchyViewのMiniMap3D(2D)/MiniMapにアタッチされている、Bl_MiniMap.csをInspector Viewから変更できます。

Bl_MiniMap.csからキー割り当てを変更するときの変更場所

2. 任意のCGモデルからマップを作成

次は任意のCGモデルからマップを作ってみます。何でもよいのですが、以前実験で使ったCGモデル「Urban City Scene」があったので、これを使ってみます。

1. CGモデルアセットと、UGUI Mini Mapアセットをインポートする
2. CGモデルのシーンを開く
3. Asset ViewのUGUI MiniMapのContent/Prefabから、MiniMap3D、MiniMap2D、MiniMapCirlceのいずれかをHierarchyViewにドロップする。

(この後の手順はどれでも同じです。私はMiniMap3Dを選びました)


uGUIMiniMapで使用するPrefab一覧

4. 追尾したいプレーヤーオブジェクトを設定

Hierarchy ViewのMiniMap3D / MiniMap のオブジェクトにアタッチされている、BL_MiniMapスクリプトのTargetに指定します。

ここではFPSControllerを指定しました。

追尾したいGameObjectの指定

これでOKです。先ほどのgif動画のように、別のCGモデルでもマップの機能を簡単に追加できます。

3. その他の機能

3-1. 地図上にItemを表示する

たとえばマップの中にアイテムを表示させるとか、次のポイントを表示させる、のようなこともできます。

手順です。

1. 適当なGameobjectをマップ上に配置する。

(ここではSphereを追加しました。)

2. bl_MiniMapItemというスクリプトをGameObjectにアタッチする

パスは、Content/Scripts/Core/bl_MiniMapItemです。

bl_MiniMapItem.csの配置場所

3. Inspectorにて、bl_MiniMapItemの「Target」のGraphic PrefabにItemButtonを指定する

ItemButton Prefabの配置場所

4. Inspectorにて、bl_MiniMapItemの「ICON」のIcon に好きなSprite画像を指定する

サンプルはContents/Art/UI/Icons にあります。

ICON Sprite画像の配置場所

5. 実行する。

Sphereがマップ上で白い十字マークとして表示されています。空間内のSphereには、見やすくするためパーティクルで見た目を加工しています。


uGUI MiniMapでItemを地図表示させた場合

3-2. RenderModeとPictureMode

UGUIMiniMapには、RenderModeとPictureModeという2種類のモードがあります。RenderModeは別カメラに追尾させてリアルタイムにマップとして描画する機能ですが、公式の説明書によるとモバイルで使用するとかなりの負荷になるようです。

一方、PictureModeとは、あらかじめ地図として上空から撮影したものをマップとして使用するモードです。テクスチャの上にマップ上のプレーヤを表示するだけなので負荷が少なくて済みます。

手順です。

1. SnapShotCamera PrefabをHierarchy Viewにドラッグする

SnapShotCamera Prefabの配置場所

2. SnapShotCamera のPositionやSizeを調整して、上空からマップとして見えるようにする

(Size とはこの辺りの白い線のことです)

Sizeの場所

3.テクスチャを撮影する

Textureを撮影するときの撮影ボタン

SnapShotCameraにアタッチされているスクリプトより、TakeSnapShotを押すと、撮影できます。

4. 撮影したテクスチャを、マップとして指定する

テクスチャをbl_MiniMapコンポーネントにアタッチする場所

先ほど撮影したテクスチャは、Contents/Art/Snapshots に格納されているので、これをHierarchy ViewのMiniMapオブジェクトのbl_MiniMapコンポーネント内にアタッチします。

下の方に、Picture Mode Settingsという項目があり、ここのMapTexture です。

5. Hierarchy ViewのWorldSpace オブジェクトの位置とサイズを調整する

Hierarchy ViewのWorldSpace オブジェクトの位置とサイズ調整箇所

(この枠で囲った機能を使うとサイズ調整が簡単です)

6. 実行する

いちおうできたのですが、テクスチャと自分の位置の微調整が難しそうだなと感じました。

マップテクスチャでuGUI MiniMapを使った例


マップがあるとゲームの雰囲気がぐっとよくなりますよね。最後のPictureModeだけまだうまく使えてませんが、これだけできて$15はかなりお得な気がしました。

以上です。