CrossViewとは
こちらの記事をご覧ください。
はじめに
前回、プレーヤーをPrefabからインスタンス化する実装を行いました。
前々回で実装した「ログ再生の仕組み」と組み合わせれば、3DLogPlayerとしてはほぼ完成と言えますが、次は周辺機能を実装しました。
せっかく3Dアプリとして実装するのですから、これを生かす意味で、「任意のプレーヤーの三人称視点」を表示する機能を実装してみます。
といっても非常に簡単な話しで、要するにThird Person Cameraです。
三人称視点を用いることで、ロボカップのサッカーサーバーから通知されてくる「視界の範囲内に存在するオブジェクトの情報」をビジュアル的に表現できると思われます。
Football_5
今回のテストプログラムでは、以下の項目を実装します。
- ViewModeとして3種類の見せ方を切り替える。
- サッカーフィールドを俯瞰して見せるタイプを２つ
- 任意のプレーヤーの三人称視点として見せるタイプを１つ
ViewMode
１つのカメラを使いまわして3種類の見せ方を実現するのではなく、3種類の見せ方に対応する専用のカメラを設置しておき、ViewModeの変更に合わせて必要なカメラをActiveにしていく、という方法で実現しています。
ViewMode #1（斜め上からの俯瞰映像）
ViewMode #2（天頂方向からの俯瞰映像）
ViewMode #3（画面分割：全体映像＋任意のプレーヤーの三人称視点）
画面分割
アプリのウィンドウを左右に2分割し、左画面と右画面それぞれに専用のカメラオブジェクトを用意します。
後述の参考サイトでも解説されていますが、カメラオブジェクトのViewport Rectを設定して、ウィンドウ上のどの位置にどのサイズで表示させるかを、割合で指定します。
右画面の三人称視点のカメラは、宇宙飛行士の移動に追従するように実装します。
また、宇宙飛行士の視線の先にあるものがカメラから見えるように、少し高い位置から見下ろすようにカメラ位置をセットしています。
今回は左右2分割を採用しましたが、他にも
- 12分割(4x3)にして、全体表示＋11名のプレーヤーを表示させる。
- ウィンドウいっぱいの三人称画面の中にPictureInPictureとして全体表示を埋め込む。
といった案も考えられるかと思います。
参考サイト
WebGL version
操作方法は、以下の通りです。
- WASDキー、または上下左右キーで宇宙飛行士を移動させることができます。
- 画面右下のViewModeボタンを押下すると、ViewModeが#1->#2->#3->#1...と切り替わります。
- 画面右上のDropdownは、三人称視点を表示するプレーヤーを選択するコントロールです。
- あくまでデザインイメージです。機能はしません。
- 左右(L,R)チームの背番号１～11までがリストアップされるので、クリックで選択します。
以上です。