読者です 読者をやめる 読者になる 読者になる

任意のシーンからマップを作る、UGUI MiniMapのご紹介

Unity UnityAssets

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

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

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

f:id:Takyu:20151209223546p:plain

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

2Dモード

f:id:Takyu:20151210100907p:plain


3Dモード

f:id:Takyu:20151210100928p:plain


けっこう色々できることがわかったので、使い方などをまとめてみました。

なぜかそのままだとサンプルシーンが動かない、などがあるので、ご参考になれば幸いです。




目次
1. サンプルシーン実行による動作確認
2. 任意のCGモデルからマップを作成
3. その他の機能
3-1. 地図上にItemを表示する
3-2. RenderModeとPictureMode

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

1. まずは、AssetStoreから購入し、インポートします。
(v1.6で検証しています)

2. Project ViewのExample/Sceneの中から"MiniMap"を開きます。

3. FPSControllerのGravity Multiplierを0に変更します。

f:id:Takyu:20151210094951p:plain

これをやらないと、開始直後に無限落下します。

f:id:Takyu:20151210095028p:plain


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


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

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

f:id:Takyu:20151210101054p:plain


5. 実行します。

f:id:Takyu:20151210101412p:plain

ピンク色の枠で囲ったボタンを押すと、表示の見た目を変更することができます。

この画像では、「Circle Mode」を選択しています。


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

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

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

f:id:Takyu:20151210073217g:plain


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

f:id:Takyu:20151210102053p:plain



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を選びました)


f:id:Takyu:20151210103533p:plain


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

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

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

f:id:Takyu:20151210104003p:plain


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


3. その他の機能


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


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

手順です。


1. 適当なGameobjectをマップ上に配置する。
(ここではSphereを追加しました。)

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

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

f:id:Takyu:20151210164956p:plain

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

f:id:Takyu:20151210165303p:plain


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

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

f:id:Takyu:20151210165423p:plain

5. 実行する。


こんな感じです。
Sphereがマップ上で白い十字マークとして表示されています。

空間内のSphereには、見やすくするためパーティクルで見た目を加工しています。


f:id:Takyu:20151210170343g:plain


3-2. RenderModeとPictureMode

UGUIMiniMapには、RenderModeとPictureModeという2種類のモードがあります。

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

一方、PictureModeとは、あらかじめ地図として上空から撮影したものをマップとして使用するモードです。

テクスチャの上にマップ上のプレーヤを表示するだけなので負荷が少なくて済みます。

手順です。

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

f:id:Takyu:20151210171716p:plain

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

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

f:id:Takyu:20151210172019p:plain

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

f:id:Takyu:20151210172322p:plain

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

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

f:id:Takyu:20151210172802p:plain

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

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


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

f:id:Takyu:20151210172204p:plain

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


6. 実行する

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

f:id:Takyu:20151210171524g:plain


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

以上です。