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

<a href="https://www.assetstore.unity3d.com/jp/#!/content/32874" target="_blank">UGUI MiniMap</a>
<a href="https://www.assetstore.unity3d.com/jp/#!/content/32874" target="_blank"><img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-1.png"></a>

<h2>何ができるか</h2>
ミニマップ作れます。仕組みとしては別カメラで撮ったRenderTextureをuguiのMaskなどで円などの形で表示できます。
もちろん、アイテムや敵などをアイコンで表示したり、マップ自体をTextureにしてアイコンなどを載せる表示の仕方もできます。

<h2>環境</h2>
mac Unity5.4.2f2

<h2>インポートしたところ</h2>
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-2.png" width="200px"/>

<h2>デモ</h2>
2DのスクロールアクションののMinimapと3Dのミニマップがあります
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-3.png" width="300px"/><img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-4.png" width="300px"/>
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-10.png" width="300px"/>

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

ドキュメントは Documentation/Content/Documentationフォルダ配下にあります。
zipで、その中にhtmlで入っています。そのままフォルダに展開すると、htmlのjsなどでエラーで実行できなくなるのでどこかに移動してみましょう。

<h2>ためしてみる</h2>
今回は3Dのマップにミニマップ実装してみます。

<h3>まずステージ作り</h3>
新規シーンを作り、適当にマップを作ります
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-5.png" width="300px"/><img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-6.png" width="300px"/>

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

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



<h3>MiniMapのオブジェクト配置</h3>
Content/Prefabs配下のMiniMapとついているprefabをシーンにドラッグして配置します
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-7.png"/>

いくつか種類があるので好きなものをセット。今回はMiniMapCircleを使用することにしました。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-8.png" width="300px"/>

<h3>レイヤーの追加</h3>
次にMiniMapというレイヤーを追加します。

<h3>MiniMapの設定</h3>
先ほど配置したMinimapCircleのこのMiniMapのインスペクターにMiimapの設定があるので、
TargetにPlayerを設定します。あとは先ほど作成したレイヤーもセット。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-9.png" width="300px"/>
ここにMiniMap呼び出しのショートカットやデフォルトのサイズなど細かい設定があるので好きなように調節します。

これだけでもうplayerに追従するMinimapができました
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/minimap.gif" width="300px"/>

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

<h3>表示範囲の設定の設定</h3>
MiniMapの子のWorldSpaceというprefabがMinimapのサイズを設定しています
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-11.png"/>

現状こんな感じで大きすぎるのでこれくらいまでサイズを調整してあげます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-12.png" width="200px"/><img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-13.png" width="200px"/>

現在のミニマップはこんな感じ。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-14.png" width="200px"/>
このままでは別カメラで写したままなので、敵やアイテムなどはアイコンで表示するように修正します。

<h3>アイコンの設定</h3>
現在既に配置している敵と宝箱にアイコンを設定します
オブジェクトを選択し、bl_MiniMapItem.csをアタッチします。
メニューのGameObject->UI->MiniMap->Itemなどからでもアタッチできます

Graphic PrefabにとりあえずContent/Prefabs/Items/ItemPrefabを設定。
Iconの所のIconにミニマップで表示されるアイコン画像を設定。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-15.png" width="200px"/>

はい、MiniMapにアイコンが表示されました。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-16.png" width="400px"/>
Eキーを押すとマップが開くので、そこの画面に入力したInfoItemのテキストなどが表示されます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-17.png" width="400px"/>

<h3>マップのキャプチャ</h3>
マップ自体をレンダリングしたものではなく画像にすることもできるのでそこの設定をします。
特にスマホ向けの場合、こちらを使用したほうがいいようです。

まず、マップのスクリーンショットをとります
Prefabs/Util/SnapshotCameraのprefabをシーンにドラッグして配置します。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-18.png" />

するとこんな風になりました。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-19.png" width="300px"/>
画面全体に映るようにカメラを調節して、
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-21.png" width="300px"/>

SnapshotCameraのインスペクタにサイズなどがあるので調節してTakeSnapShot
この時にマップに移したくないものは隠しておくのを忘れないように。(モンスター出したままで撮っちゃったw)
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-22.png" />

これでSnapShotsフォルダ配下に画像ができます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-23.png" />

<h3>マップ画像を使用するように設定する</h3>
このままだとMiniMapにモンスターの3Dモデルも写ってしまうのでMinimapのカメラのCullingMaskをMiniMapに変えます。

MiniMapのインスペクタのTypeをReal TimeからPictureに変えます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/18-20.png" />
そして下の方の Picture Mode SettingsのMap Textureに先ほど撮った画像を設定。

はい、これでとりあえずは出来上がり。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/minimap2.gif" />