Unity
minimap

ミニマップを表示する(UGUI MiniMap)

More than 1 year has passed since last update.

UGUI MiniMap

何ができるか

ミニマップ作れます。仕組みとしては別カメラで撮ったRenderTextureをuguiのMaskなどで円などの形で表示できます。

もちろん、アイテムや敵などをアイコンで表示したり、マップ自体をTextureにしてアイコンなどを載せる表示の仕方もできます。

環境

mac Unity5.4.2f2

インポートしたところ

デモ

2DのスクロールアクションののMinimapと3Dのミニマップがあります



MiniMapというレイヤーと追加してMiniMapのレイヤーを設定してあげないと3Dの方のデモでボタンを切り替えた時にエラーになるので注意。

ドキュメントは Documentation/Content/Documentationフォルダ配下にあります。

zipで、その中にhtmlで入っています。そのままフォルダに展開すると、htmlのjsなどでエラーで実行できなくなるのでどこかに移動してみましょう。

ためしてみる

今回は3Dのマップにミニマップ実装してみます。

まずステージ作り

新規シーンを作り、適当にマップを作ります

こんな感じのシーンをつくりました。

Playerは手っ取り早くつくるのでればMinimapのDemoにあるFPSControllerのprefabを置くだけで十字キーとマウスでの視点移動などできます。

ちょっとこのままだとマップ小さすぎるので調整します。

MiniMapのオブジェクト配置

Content/Prefabs配下のMiniMapとついているprefabをシーンにドラッグして配置します

いくつか種類があるので好きなものをセット。今回はMiniMapCircleを使用することにしました。

レイヤーの追加

次にMiniMapというレイヤーを追加します。

MiniMapの設定

先ほど配置したMinimapCircleのこのMiniMapのインスペクターにMiimapの設定があるので、

TargetにPlayerを設定します。あとは先ほど作成したレイヤーもセット。



ここにMiniMap呼び出しのショートカットやデフォルトのサイズなど細かい設定があるので好きなように調節します。

これだけでもうplayerに追従するMinimapができました

マップの+ -などをクリックで動かすにはEventSystemが必要なので配置を忘れずに

表示範囲の設定の設定

MiniMapの子のWorldSpaceというprefabがMinimapのサイズを設定しています

現状こんな感じで大きすぎるのでこれくらいまでサイズを調整してあげます。

現在のミニマップはこんな感じ。



このままでは別カメラで写したままなので、敵やアイテムなどはアイコンで表示するように修正します。

アイコンの設定

現在既に配置している敵と宝箱にアイコンを設定します

オブジェクトを選択し、bl_MiniMapItem.csをアタッチします。

メニューのGameObject->UI->MiniMap->Itemなどからでもアタッチできます

Graphic PrefabにとりあえずContent/Prefabs/Items/ItemPrefabを設定。

Iconの所のIconにミニマップで表示されるアイコン画像を設定。

はい、MiniMapにアイコンが表示されました。



Eキーを押すとマップが開くので、そこの画面に入力したInfoItemのテキストなどが表示されます。

マップのキャプチャ

マップ自体をレンダリングしたものではなく画像にすることもできるのでそこの設定をします。

特にスマホ向けの場合、こちらを使用したほうがいいようです。

まず、マップのスクリーンショットをとります

Prefabs/Util/SnapshotCameraのprefabをシーンにドラッグして配置します。

するとこんな風になりました。



画面全体に映るようにカメラを調節して、

SnapshotCameraのインスペクタにサイズなどがあるので調節してTakeSnapShot

この時にマップに移したくないものは隠しておくのを忘れないように。(モンスター出したままで撮っちゃったw)

これでSnapShotsフォルダ配下に画像ができます。

マップ画像を使用するように設定する

このままだとMiniMapにモンスターの3Dモデルも写ってしまうのでMinimapのカメラのCullingMaskをMiniMapに変えます。

MiniMapのインスペクタのTypeをReal TimeからPictureに変えます。



そして下の方の Picture Mode SettingsのMap Textureに先ほど撮った画像を設定。

はい、これでとりあえずは出来上がり。