CrossRoad

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

【Unity】任意のシーンからマップを作るアセットUGUI MiniMapの使い方概要とTips紹介

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

これは別カメラがプレーヤーの上空から追尾することで、カメラの映像がそのままマップになる、という仕組みです。今回はこれの使い方とTipsを紹介いたします。

1. UGUI MiniMapのサンプルを見てみる

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

uGUI MiniMapの利用例

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

2Dモード
uGUI MiniMapの2Dモード

3Dモード
uGUI MiniMapの3Dモー

2. サンプルシーン実行手順

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から変更できます。

[f:id:Takyu:20180715004636j:plainalt=Bl_MiniMap.csからキー割り当てを変更するときの変更場所]

3. 任意の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を選びました)

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

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

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

追尾したいGameObjectの指定

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

4. その他Tips

4.1 地図上にItemを表示する

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

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

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

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

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

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

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

5. 実行する。

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

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

4.2 RenderModeとPictureMode

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

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

手順です。

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

Aasets/UGUIMinimap/Content/Prefab/Util の中にあります。

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を使った例

5. 終わりに

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