【Unreal Engine_5】カメラのFOV変更とビューの保存機能を追加してみた

前回と同様、UE5を使ったデザインレビューツールの拡張を続けます。

今回のテーマは、様々なCADやCGツールでおなじみの機能ですが、カメラ位置の登録とカメラのFOV調整機能の実装です。

業務で使用する中で、以前とまったく同じビューでレンダリングする機会って頻繁に発生しますよね。そんなわけで、この必須となる機能を試行錯誤しながら実装してみました。

・前回のブログ記事の完成状態からスタートします。

・前回までに作成したPersistentレベルのブループリントのノードツリーを整理し、以下の2つのノードから分岐させるように準備します。

①Add to Viewportノードの後ろのSequenceノード

②Create Widgetノード(Class : Button_Widget)のReturn Value

・続いて前回作成したButton_Widgetを開き、UIを一気に上の図のように作成します。

・数時のボタンは押すと登録したカメラ位置に移動、SETボタンがカメラ位置の登録、CLボタンは登録したカメラ位置の削除です。合計で5セットのスロットを設置しました。

・FOV変更スライダーはMIN値を10.0、MAX値を90.0、Valueを50.0にしました。このあたりはお好みでOKです。

・上の図で選択しているFOVの表示があるテキストボックスは実際のFOV値を表示する個所になりますので、Details欄のContent項目にあるBindをクリックしてCreate Bindingを選択

・画面が自動で切り替わるので、String型の変数を新規作成し、Return Valueにつなぎます。この変数に文字をセットしたら、テキストボックスに値が表示される仕組みです。

・ボタンのクリックイベントを設定するので、Details欄のOn Clicked横にあるプラスボタンを押します。

・数が多いので大変ですが、すべてのボタンのクリックイベントを作成します。

・前回と同様、実際の動作部分はPersistentレベルのブループリントに記載するので、ここではイベントの発生通知を行う機能としてEVENT DISPACTHERを上の図のように全てのノードに設定します。識別しやすいように名前をつけたほうがいいかもしれません。

・Persistentレベルのブループリント画面に切り替え、まずは変数を設定します。

①Name : Camera_Position, Type : Vector(Array)

②Name : Camera_Rotation, Type : Rotator(Array)

③Name : Camera_Target_Arm_Length, Type : Float(Array)

④Name : Camera_FOV, Type : Float(Array)

⑤Name : Flag, Type : Boolean(Array)

・上から4つ目までは登録したカメラの情報を格納する配列、一番最後のFlagは登録した情報があるかどうか識別するブーリアン変数です。登録がされていないスロットは数字ボタンを押しても反応しないようにするために使います。

・すべての配列は上の図のように、スロットの数の分だけ初期値を忘れずに設定しておきます。

・つづいて一番左端にある数字ボタンとSETボタンを押した時の動作を組んでいきます。上半分のイベントがSetボタン、下半分が数字ボタンに関連するノードです。

・Add to Viewportノードの後ろのSequenceノード、Create Widgetノード(Class : Button_Widget)のReturn Valueから分岐させたルートをつないでいきます。

・Setボタンを押すとイベント発生通知を受け取り、配列の0番目にカメラの各種情報をセットし、数字ボタンの背景カラーを変更したのちFlag変数の配列0番目をTrueに変更します。

・数字ボタンを押すとイベント発生通知を受け取り、配列の0番目から各種データを取り出しカメラにセットします。その後、まだ設定はしていませんがFOVの値をテキストボックスで表示し、スライダーの値にセットしています。

・ここまで完了したらコンパイル後にプレイモードにして動作をチェックできます。

・動作チェックが問題無ければ、すべてのボタンについて同様のノードを組みます。配列のインデックス番号やイヴェントディスパッチャーを間違えないようにします。かなり長くなるので組み終わったら関数化して見た目を整えることをお勧めします。

・CLボタンも同様に、Add to Viewportノードの後ろのSequenceノード、Create Widgetノード(Class : Button_Widget)のReturn Valueから分岐させたルートをつないでいきます。

・CLボタンのクリックイベント通知を受け取ったら、カメラ情報に関する変数を0に戻し、数字ボタンの背景カラーを白に変更してからFlag変数をFalseに戻します。

・他のボタンも同様に組むと上の図のようになります。

・続いて、FOV変更スライダーのノードを組んでいきます。Button_Widgetを開き、スライダーを選択した状態でDetails欄のOn Value Changed横のプラスボタンをクリック。

・同様に、Editable TextBoxを選択した状態でOn Text Committed横のプラスボタンをクリック。

・そのままGraph画面に切り替え、上の図のように組んでいきます。

・最後に、プレイモード開始直後にFOV変更スライダー横のテキストブロックに初期のFOVを表示させるノードを作成します。

・Persistentレベルのブループリントを開き、Add to Viewportノードの後ろのSequenceノード、Create Widgetノード(Class : Button_Widget)のReturn Valueから分岐させたルートを上の図のようにつなぎます。

・以上ですべて完了なので、コンパイル後に上書き保存します。

・ボタンのクリック、動作が問題無ければ完成です。