【Unity】エースコンバット風の方向を示す矢印を作りたい
皆さんこんにちは。
早速ですが、エースコンバットってご存知ですか？
エースコンバットとは歴史ある、由緒正しい、戦闘機シミュレーションゲームなのですが、色々と「エースコンバットといえばこれだよ！」というUIがあります。
そのうちの一つが、HUD（ヘッドアップディスプレイ）に表示されるこれ。
これです！
ロックオンした敵の方向を示す矢印！！！
「Unityの3Dアクションゲームでもこれ作りてえな～」ってことで、作ってみましたので方法を紹介します。
よければ、最後までご覧ください。
目次
まずは諸準備から
3D空間を用意しましょう
今回は3Dアクションゲームを想定した環境で作成するので、まずは3D空間を用意します。
既にゲームを制作中で、矢印を組み込みたい方はそのままで構いません。
この記事では、Unity公式が出しているアセットの「Unity-Chan! Model」を使用して、コントローラーで動かせるまで設定しました。
設定については、以下の記事が詳しかったので参照しました。
矢印の3Dモデルをインポートする
次に3Dモデルをインポートするのですが、こちらのモデルは何でも構いません。
方向さえわかればいいので、矢印でなくとも3Dモデルであれば大丈夫です。
今回使用させていただいたのは、こちらの3Dモデルです。無料です。
fbxファイルで配布されていたので、上記のモデルであればUnityのエディターにドラッグアンドドロップでモデルをインポートできます。
なお、デフォルトではマテリアルが読み込めないので、インスペクターからMaterialsを選択して、「Use External Materials (Legacy)」でマテリアルを抽出してください。
この件については、以下の記事が詳細に書かれており、参考になります。
矢印を表示したい
まずは矢印を配置する
それでは、3Dモデルを配置します。
この実装方法では矢印を同じシーン上に配置するため、どこかに置く必要があります。
しかし、プレイヤーを映すカメラに映る位置では混乱を招くため、通常のカメラに映らない位置に置かなくてはいけません。
上空やステージ範囲外でも構わないのですが、今回は絶対に映らない地下に配置します。
今回は、空のオブジェクトを用意して、その子オブジェクトとして先程インポートした3Dモデルを配置する仕組みとします。
「モデルを配置したのに見えない」という場合は、3Dモデルのインスペクターからスケールファクターを調整してください。
レンダーテクスチャを生成する
次に、レンダーテクスチャを用意します。
レンダーテクスチャ（Render Texture）とは何？という話なんですが、映った映像をリアルタイムで反映できるテクスチャみたいなものです。
つまり、これを応用すれば鏡やスタジアムの中継スクリーンを作れます。
レンダーテクスチャは作成後、適当な名前に変更してください。
すると、サムネイルが真っ暗になりますが、このままで大丈夫です。
矢印を映すカメラを用意する
次に、矢印を映すカメラを配置します。
左上のヒエラルキーから、カメラを作成して、矢印が映るように配置してください。
次に、ターゲットテクスチャ（Target Texture）に先ほど作成した、レンダーテクスチャをドラッグアンドドロップで配置してください。
カメラにレンダーテクスチャを配置した場合、テクスチャにカメラの映像を書き込む役割を担います。レンダーテクスチャをUIとして配置した際に役立ちます。
もし、最後まで作業を終えた後にうまく表示されなかったら、この工程を見直してみてください。
最後に、カメラのインスペクター上にあるクリアフラグ（Clear Flags）をソリッドカラー（Solid Color）に設定してください。
ソリッドカラーに変更することで背景を削除する効果があり、矢印のオブジェクトだけをカメラに映すことができます。
UIとして矢印を表示する
次に、UIとして先程撮影した矢印の画像を貼り付けます。
ヒエラルキーから追加のプラスボタンを選択し、UI、Raw画像（Raw Image）と選択してUIを追加してください。
その後、作成したUIのインスペクターから、Raw Imageのテクスチャを選択してください。
そこに、冒頭で設定したレンダーテクスチャをドラッグアンドドロップで配置してください。
その後、ウィンドウをゲームに切り替え、矢印の位置を調整してください。
もし、この段階で表示されない場合は、カメラとUIにレンダーテクスチャがきちんと配置されているか見直すことをおすすめします。
今後は矢印を動かしたい
矢印を動かすスクリプトを書く
こちらのプログラムを、矢印を動かすオブジェクトにアタッチしてください。
gist87b23cd9db9eac178b9439a02768f01c
この記事の内容そのままの場合、アタッチするオブジェクトは矢印の3Dモデルです。
それ以外にアタッチした場合、動作は保証できませんのでご注意ください。
その後、インスペクターからPlayer、Camera、Targetにそれぞれ相当するオブジェクトは配置してください。
矢印が動いた！！！
完成！！！！！
これでオブジェクトの方を指す矢印が完成しました！！！
あとは、この矢印を緑色のものに差し替えたり、表示位置を調整してください。
設定とありそうな質問について
Q. ターゲットやカメラをゲーム中に変更したい
プログラムの方でPlayer、Camera、Targetを動的に変更できるプロパティを用意しているので、そこから変更お願いします。
プロパティの型はTransform型なので、変更するオブジェクトのTransformを代入してください。
Q. カメラを動かしても追従してくれるの？
カメラの向きを取得して補正をかけているため、カメラだけを動かしても動いてくれます。
もし、矢印の回転方向がおかしい場合は、モデルの向きが正しいか見直すか、55行目にあるCamera.transform.forwardの部分を変更してください。
Q. 矢印が見切れる・矢印が小さい
矢印を映すカメラの位置を調整してください。
個人的なおすすめの画角は、やや上から見下ろす角度で矢印を撮影する画角です。
Q. 特定の軸だけ回転するようにしたい
プログラムの58行目を、以下のように変更してください。
なお、改変後のサンプルソースコードも最後に載せます。
すると、Y軸だけ回転するようになります。
また、このプログラムを応用すればX, Z軸のみやX軸のみの回転も実現できます。
ソースコード全文です。
gist42a75a814ef3a29ad37305cb8ef6f9c2
最後に
今回は、エースコンバット風の方向を示す矢印を紹介しました。
矢印はフリーで配布されている素材を使用しましたが、緑色で半透明の矢印を使用すれば、よりエースコンバットに似た矢印を作れると思います。
最後までお読みいただき、ありがとうございました。
