夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

【Unity5でレースゲーム】バックミラーを追加してみた

今回は、カーレースゲームになくてはならない?バックミラーを追加してみました。
バックミラーを実現するにははカメラが一つ増える事になりますので、フレームレートへの影響は少なくないです。
ゲームによっていはバックミラーに映るオブジェクトは少なかったり簡易的だったりしますが、今回は特にそのような工夫はしていません。ただ、バックミラー用のカメラが映す距離は短めにしていますのでその分メインカメラよりは軽くなっています。

最初は普通に後ろ向きのカメラを自車に設置して速攻完成したかに思われたのですが、残念ながらそれだと左右が逆になってしまいます。
鏡のようにするには左右を反転する必要があるのですが、Unityのカメラには左右を反転する機能はありません。
ググってみたところ、一般的なのは一旦レンダーテクスチャにカメラの画像を書き込み、それを左右反転するという方法のようです。

早速Assets > CreateメニューからRender Textureを作成します。
とりあえずSizeをバックミラーっぽい比率に変更します。
私の場合は256 x 64とし、高さを幅の1/4にしました。
バックミラー用カメラのTarget Textureに作成したRender Textureを指定すれば準備完了です。

次に、Render Textureを書き込むQuadオブジェクトを作り、メインカメラの子オブジェクトにします。
これがバックミラーの実体となります。これをメインカメラの前方に置けばメインカメラにバックミラーが映るという仕組みです。

まずスケールで先ほどのレンダーテクスチャと同じ比率になるようにします。重要なのはScale Xの値をマイナスにして左右を反転する事です。
私はScale X -1, Scale Y 0.25としました。
ゲーム画面上のバックミラーの大きさはPosition Z、位置(高さ)はPosition Yで適当に合わせます。
このゲームではPosition Y を0.8, Position Zを1.8としました。
Quadオブジェクト用にAssets>Create>Materialでマテリアルを作成し、シェーダーにUnlit/Textureを指定します。Unlitを使うのは、ミラーへの光の当たり方によってミラーの画像が明るくなったり暗くなったりしないようにするためです。
あとは、マテリアルに先ほど作ったRender Textureを設定し、Quad オブジェクトのMaterialsに作ったマテリアルを設定すればちゃんと左右が鏡のように反転して映るバックミラーの完成です。

あとは適当にカメラのパラメーターを調整します。
バックミラーに映る範囲はカメラのField of Viewで調整します。大きくすると広範囲が見えますが、後方左右にいる敵車がニョーンと伸びて見えるので、あまり大きくしない方が良いと思います。私は30度に設定しました。視野が狭ければミラーに映るオブジェクトが減るので処理も軽くなるはずです。

あとは、Clipping Planesでミラーに映る距離をの範囲を指定します。Nearの方は自分の車のリアスポイラーが映らない範囲にして、Farは70としてみました。Farの値を小さくすれば処理は軽くなると思いますが、近くしか映らなくなりますので、不自然でない程度に大きくする必要はあります。

気になるフレームレートですが、こんな感じになりました。
ミラー無しの場合は40fps。
f:id:takujidev:20150727220302j:plain

ミラーを付けると・・・
f:id:takujidev:20150727220340j:plain
41fps。かなり下がってしまいました。
もう少し工夫が必要かもしれませんね。

さて、今回の動画です。
実はこの動画を撮るのに20分くらい掛かりました。カメラに敵を大きく映しつつ、クラッシュせず、最後尾にならない走りというのはかなり難しく、このテイクでも最終的にクラッシュしてグダグダの展開となってしまいました。トホホ。

https://itunes.apple.com/jp/app/toraberushutingu-retorona/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt