【UE5】Chooserで始めるデータドリブン管理
こんにちは！
情熱開発部・プログラム課の長谷です。
早いもので、年が明けてもう一か月が過ぎようとしていますね。
最近はフルリモートになった影響で、家の整理で大忙しでした。
物が増えてくると、管理が大変になるなと改めて感じました。
開発でも同様に、アセットやデータが増えてくると管理が大変になると思います。
今回は、そんな場面で活躍する Chooser という機能についてご紹介いたします！
目次
Chooserとは？
Chooserは、UnrealEngineのプラグイン機能の一つです。
また、どのような機能か一言でいうと、
「設定した条件に合わせて、動的にアセット選択を行うことのできる機能」です。
▼使用場面の一例
以下のような色違いの複数のテクスチャがあったとします。
青かピンクか、条件によるテクスチャ切り替えが発生した場合、
次のように分岐して割り当てると思います。
ここでさらに対応する色が増えた場合、
ノードが煩雑になって管理が大変になってしまいました。
そこでChooserを使用すると…
このようにスッキリと管理することができます！
では、実際にどのように実装していくのかご紹介していこうと思います。
事前準備
まず、Chooesrを使用するために以下のプラグインにチェックを入れてください。
環境
UnrealEngine5.6.1 を使用しています。
Chooserを使ってみる
触ってみるのが一番手っ取り早いと思いますので、早速使っていこうと思います。
まずは、アセットの説明と使用するための準備をしていきます。
使用する主なアセット
以下の3点を使っていきます
- ChooserTable
- ProxyAsset
- ProxyTable
それぞれコンテンツブラウザを右クリックし、「その他」の項目から作成することができます。
まずは、ChooserTableを使っていこうと思います。
（ProxyAssetとProxyTableは後ほど紹介します！）
ChooserTableを作成してみる
作成すると、次のような設定ウィンドウが表示されます。
各設定項目については、以下のようになっています。
| ChooserType | 用途に合わせた枠の設定 基本はGenericChooserで問題ないです |
| ResultType | 返すデータの種別を指定します |
| ResultClass | 返すデータクラスの設定になります |
| Parameters | Chooser に渡されるパラメータになります。 条件列の設定で使され、Inputは読み込み用、Outputは書き込み用となっています。 |
今回はテクスチャの管理を行いたいので、
ResultClassにTexture2Dを設定しました。
他に変更の必要はないので、このまま作成します。
※これらの項目はあとで変更可能です！
ChooserTableの設定
早速開いてみると、行の追加と列の追加という項目があります。
それぞれ簡単に説明すると、
行→返すアセットデータの設定列→判定条件を設定
となっております。
次にそれぞれの設定内容について説明していきます。
◆行の設定
まずは行側の設定を追加していきます。
「行を追加」を選択すると、以下のような項目が出てきます。
今回はテクスチャアセットが欲しいので、アセットを選択します。
こんな感じで追加してみました。
◆列の設定
次は列の追加をしていきます！
が、その前に列の設定に必要となる、Parametersを設定していきます。
まず、ChooserTableを使用するWidgetを作成します。
作成したWidgetには、
Texture設定用のImageウィジェットを作成、種類判別用のbool変数を定義しておきます。
次に、ChooserTable内のテーブル設定→ParametersへWidgetを登録します。
これで準備はできましたので、列の設定を行っていきます。
「列を追加」を選択すると、以下のような様々な項目が表示されます。
今回はBoolを選択します。
追加したboolのプロパティを選択すると、先ほどの作成したWidgetが選択に出てくると思います。
そこで、Widgetが持っている変数をバインドします。
最終的には、行ごとの取得したいアセットに合わせて、各boolの設定を行いました。
ChooserTableからアセット取得
ChooserTableの作成が完了しましたので、実際にアセットを取得していきます。
1. Widgetを開いて「Evaluete Chooser」ノードを作成します
2.1のノードの詳細設定から、作成したChooserTableを割り当てます
3.Parametersで設定していた引数を渡します
今回はselfを渡せば大丈夫です
4.ChooserTable内で選択されたアセットをResutから受け取ります。
これでChooserTableの作成は完了しましたので、動作確認していこうと思います。
動作の確認
なんとChooserTableでは、動的に選択状態を確認することができます！
「デバッグターゲット」という項目から、実行中のインスタンスを選択が可能です。
雑な確認にはなりますが、
フラグ切り替えによって選択状態が切り替わっているのが分かると思います。
これでChooserとはどういう機能なのか、何となく分かっていただけたかなと思います。
以降は、さらにに汎用性を高めることのできる機能を紹介いたします。
複数種類のテクスチャを条件分岐管理してみる
先ほどは、色によってアセットを切り替えてみましたが、
さらにポーズも条件に加えて試していきます。
ここから紹介するのは、
「ProxyAsset」と「ProxyTable」を組み込んだ管理方法についてです！
ProxyAssetとProxyTableについて
まず、それぞれの役割を簡単に説明します。
ProxyAsset → 実際に使用されるデータを保持する存在
ProxyTable → どのProxyAssetを使うかを決定するテーブル
先ほどの例では、ChooserTableによってアセット管理まで行い、
評価の結果として直接アセットを返す構成になっていました。
この構成をProxyAsset・ProxyTableを使って分離することで、
- ChooserTable：状態判定に専念
- ProxyTable：アセット管理を担当
といった形で、責務を切り分けることができます。
では、実際に作成していきたいと思います。
ProxyAssetの作成
設定項目は、ChooserTableと似たような構成になっています。
ProxyAssetでは、紐づけられるアセットクラスの指定を行うことができます。
ChooserTableのResultで指定している型と合わせるため、
TypeをTexture2Dに変更しておきます。
また、色ごとに名前を分けて複製しておきます。
これらはChooserTableやProxyTableで、間接的にアセット参照するために使用します。
ProxyTableの作成
行を追加の項目があると思いますので、
ChooserTableの時と同様にアセットを選択します。
すると、「プロキシ」「値」という2つのドロップダウンが出てきます。
プロキシはProxyAssetを設定、
値は実アセットの割り当てができます。
↓作成したProxyAssetに紐づくような形で、テクスチャをそれぞれ割り当てました。
また、切り替え確認用にポーズが異なるバージョンも作成しておきました。
作成したアセットを使ってみる
ProxyAsset、ProxyTableの作成ができましたので、
Chooserと組み合わせて使ってみたいと思います。
まず、これまでboolで行っていた色判定処理を、
複数バリエーションに対応できるよう列挙型に変更しておきます。
次に、Widget側で使用するために列挙型とProxyTable変数を定義しておきます。
続いてChooserの中身を変更していきます。
今回は構成自体を変えるわけではないため、
ResultやParametersの設定はそのままにし、
行・列のバインドしているデータのみ差し替えていきます。
まず、行追加で「ルックアッププロキシ」という項目を選択します。
選択後は、左にProxyTableを、右にProxyAssetを設定します。
列側には先ほど作成した列挙型をバインドします。
そして、各ProxyAssetと列挙子が紐づくように配置しておきます。
流れとしては、
ChooserTableでProxyTableを切り替えることでポーズを決定し、
ProxyAssetによって色ごとのアセットを切り替えています。
これで準備は完了したので、動作を確認していきます。
動作を確認してみる
以下は検証用に組んだウィジェット処理になります。
- Chooserからテクスチャを取得し、Imageウィジェットに反映
→初期化と更新の両方で評価させる - 設定を切り替える用のボタンを用意
①列挙型切り替えで色変更
②ProxyTableを差し替えて、表示テクスチャを変更
こちらが検証結果になります！
上のボタンで色の変化、下のボタンでテクスチャの種類切り替え
が行えているのが確認できました！
まとめ
Chooserを使ったアセット管理について紹介しましたが、いかがだったでしょうか？
ロジックとデータの役割を分担をして管理できるため、アセットの差し替えや調整がしやすく、
プログラマ以外のメンバーも含めたチーム開発が進めやすくなるかなと思います。
今回はテクスチャを例に紹介しましたが、
メッシュやアニメーションなど、他のアセットにも応用できますので、
ぜひ開発にご活用いただければ幸いです。
参考文献
以下のサイト参考にさせていただきました。
【免責事項】
本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。