Unityのゲームでキャラクターの動きを追うレーダーカメラを作成する

以前の記事でメインカメラとは別のカメラを作成し、別の視点で小窓に表示して俯瞰してキャラクターの動きが見えるようにしました。

Unityでサブカメラを作り、別視点で小窓に表示する

Unityでサブカメラを作成し、メインカメラの右上に小さく表示します。これでキャラクターの頭上からの視点を右上に小さく表示するといったことが出来ます

この記事ではメインカメラとは別のカメラを設置してゲームステージの全体像が別視点で見えるというものでした。

ゲームのステージが大きい時にステージ全体をカメラで表示した場合、実際に動いているキャラクターの色合いが地味で動きが見づらかったりします。

そこで今回は新しいカメラを作り別の視点で小窓に表示するところまでは同じで、キャラクターをもっと単純な形の丸で表示し、色も単色にして動きがわかりやすくなる
レーダーのように見せようと思います。

ゲームステージ上から見下ろすレーダーカメラの作成

まずは別視点のカメラを作成します。

ヒエラルキー上で右クリック→Cameraを選択し、新しいカメラを作成し、名前をRadarCameraとします。

レーダー用カメラを↑のような位置とサイズに変更します（設定する値はもちろんそれぞれ変わると思います）。
ゲームステージ全体が大きい場合はゲームステージの一部だけを表示させ、キャラクターに追従するようにレーダー用カメラを移動させるといいと思います。

カメラの追従に関しては

Unityでカメラの設定とキャラクターの追従をさせる

Unityで使うカメラの設定値を変更したり、カメラがキャラクターを追従するようにするしていきます。

を参照してください。

X軸の角度を90に設定して上から下を見下ろす感じにしています。

↑が実際のゲーム画面になります。
右上にゲームステージ全体を映すような視点のカメラが設置されます。

キャラクターの代わりに丸印を表示させる方法を考える

次にキャラクターを単純な丸い単色の目印にして、キャラクターの代わりにレーダーカメラに表示させたいのですが、どうやったら実現出来るでしょうか？

キャラクターと同じように目印が動くという事に注目すれば意外と簡単に出来ちゃいます。
そうです！

わたしが変なおじさんです！(^o^)丿

いや違います・・・・。
目印を作ってキャラクターの子要素に配置すればキャラクターの移動と共に動く目印が作れます。

では目印を作っていきましょう。

キャラクターの子要素に右クリック→3D Object→Sphereを作り、名前をRadarとします。
デフォルトだと白いので目印としては目立ちません。

そこでマテリアルを新しく作りRadarにそのマテリアルを設定します。
ProjectタブのAssetsフォルダで右クリック→Materialを選択しマテリアルを作成し、名前をMyRadarとします。

わたくはMaterialsフォルダを作成しその中に作成しました。

MyRadarを選択すると、インスペクタに↑のように表示されるので赤い四角の中をクリックし色の選択画面を開きます。

↑のような画面が表示されるので、色を赤色に設定します。
これで主人公キャラクター用の目印マテリアルMyRadarが出来上がりました。

出来上がったマテリアルをさきほど作成したRadarゲームオブジェクトにドラッグ＆ドロップしてマテリアルを設定します。

↑がマテリアルを設定した後のゲーム画面です。
レーダーカメラにも赤色が目立って表示されていますが、キャラクターが少し邪魔で目印が見えにくくなっています。

目印だけをレーダーカメラに表示したい

レーダーカメラは上からの視点なのでキャラクターの頭の上にキャラクターよりも大きい目印を作ればOKだ！

とやると確かにOKではあるんですが、目印よりも大きいキャラクターがいたり手が目印の端から飛び出ていたりで見えてしまうとカッコ悪いです。

そこでレーダー用カメラの表示する対象を選択して、ゲームステージと目印だけを表示するようにします。
カメラの表示対象はCulling Maskで設定出来ます。

ここで選択対象はどうやって区別しているかと言うと、ご存知（コスプ）レイヤーです。

無視していきましょう(T_T)/~~~

と言う事でゲームステージにField、キャラクターの子要素のRadarにRadarというレイヤーを設定します。

↑のようにLayerからAdd Layerを選択します。
（UnityのEditメニュー→Project Settings→Tags and Layersからでもレイヤーは作成出来ます）

RaydarとFieldというレイヤー名をつけ、キャラクターの子要素のRadarはRadarレイヤー、ゲームステージ全体をFieldレイヤーにします。
これでレイヤーの設定が出来ました。

最後にレーダーカメラの方でRadar、Fieldレイヤーのみを表示するように設定していきます。

また、メインカメラにレーダーカメラ用の目印が表示されてしまっているので、メインカメラには目印であるRadarは表示されないようにします。

↑のようにMain CameraのCulling MaskでRadarレイヤーを外します。

これでキャラクターの目印の設定とレーダーカメラの設定が終了したので、Unityの実行ボタンを押して確認してみましょう。

↑が実行画面です。

キャラクターを移動させるとレーダーカメラの目印も動くようになりました。
敵キャラクターには別の色の目印を付けると敵がどこにいるかわかりやすくなると思います。

キャラクターが坂を登ったり、ジャンプした時も目印が同じように動くのでちょっとかわいらしくもありますね(^^)v

キャラクターが進む向きにレーダーカメラを回転する

次にキャラクターが向きを変えるとレーダーカメラも回転してキャラクターが進んでいる向きを常に上向きにしてみます。

キャラクターが進む方向がわかりやすいように目印を丸のオブジェクトから矢印のオブジェクトに変更します。

キャラクターの子要素にUI→Imageを作成し名前をRadarUIとします。

RadarUIを選択しインスペクタで上のようにCanvasのRender ModeをWorld Spaceにします。
Render ModeをWorld Spaceにしたことで他のゲームオブジェクトと同じ空間に存在出来るようになります。

UIの向きやサイズを調整します。

↑のようにRadarUIの子要素のImageのインスペクタを表示しWidthとHeightをレーダーカメラから見て見やすい大きさに調整します。

矢印のImageを指定したいので、Source ImageにButtonArrowUpSpriteを設定します。
他に使いたい矢印があればそれを設定してください。

Scene画面を見てキャラクターが向いている方向に矢印が向くようにRadarUIを回転させています。

またColorを変更して矢印の色を赤色にします。

UIは

↑のような感じで頭上に位置するようにします。
これは足元に設置するとUIはペラペラなので坂などを登った時に半分埋まってしまうのを避ける為です。

これで目印が出来ました。

次はレーダーカメラがキャラクターの移動方向に従って回転するスクリプトを作成します。
新しいスクリプトRotateRadarCameraを作成しRadarCameraに設定します。


using UnityEngine;
using System.Collections;

public class RotateRadarCamera : MonoBehaviour {

	[SerializeField]
	private Transform character;

	void Update () {
		var rot = Quaternion.Slerp (transform.rotation, character.rotation, Time.deltaTime);
		transform.rotation = Quaternion.Euler (transform.eulerAngles.x, rot.eulerAngles.y, transform.eulerAngles.z);
	}
}