UE5のUIでバインディング非推奨を調べる
UE5で、UI側に変数取得や更新処理を持たせたくないので調べていたところ、バインディングというものが存在する事を発見。
使おうとしたけど、いまいち自分のやりたい方法で変数を渡せなかったためUE5のDiscordで質問したところ、バインディングがバッドプラクティスであるとの回答をいただいた。
ReactのようなUI作成の快適さが欲しい
私は普段は Python or Typescript を触っているので、ReactのようにViewコンポーネントに状態を持たない形でUIを作りたいと思っています。
ですので、おおよそMVVMパターンが実装できればゴールとします。
これはUnityを触っている方なら馴染みのあるUniRx(現R3)を利用すれば実装することができ、他言語でもRxCppやRxJs等があり同様のデザインパターンを実現可能です。
Reactの状態管理ライブラリであるReduxもRxJsベースだとかなんとか聞いたことあります。
Reactのコードで言えば、こんな感じで書きたいですね。
import styles from "./Button.module.css";
type Props = {
label: string;
onClick: () => void;
}
export const Button = (props: Props) => {
const { onClick, label } = props;
return (
<button
type="button"
onClick={onClick}
className={styles.button}
>
{label}
</button>
)
}
これはUE5上で言えば、こんな感じで実装できます。
グラフでButtonLabel
という変数を宣言しておき、デザイナーのコンテンツ->TextにてButtonLabel
をバインドします。
ボタンのコールバックは、OnClickedのイベントディスパッチャーを作成し、これを親コンポーネント側からBind event to on clicked
ノードでイベント登録します。
(正確にはMVVMではないが、ReactっぽくかけたのでOKとします。)
これだけなら、UE5のベストプラクティスに乗ってUI作成できているように思えます。
バインディングにSetter関数も乗せられる様子
このバインディングをクリックするとバインディングを作成
とあり、選択するとグラフで関数が作成されます。
調べてもUE5はまともにドキュメントが無いので、おそらくですがReactでいうところのuseEffectのようなものと推察します。
親コンポーネントから渡された変数をもらって、それをUIに表示するためにBreakしてごにょごにょ、って感じですね。
多言語対応はまだ未知数ですが、
{
"ja": "ボタン",
"en": "Button"
}
ここから日本語を引っ張り出したり。
Name
からDataTableを参照して対応言語のテキストを取ってくるのもいいと思います。
ただこれは関数なので、useEffectのように発火の依存先を指定したいはずです。
上記の書き方は当然ながらアウトなので、どう依存先の変数を指定すればいいのか分からず、Discordで質問したところバッドプラクティスとのことでした…。