【UE5】使いまわし用のButtonWidgetを作ってみよう

ボタンは様々な画面で使われます。ポーズ画面、リザルト画面、設定画面...

「1画面につきボタンが5個あって、6画面でボタンが30個もある...」
それらすべてを1個1個編集するのは面倒です。

ですが、1個のボタンWidgetを作ってしまえば、この手間はだいぶ軽減されます。
1個編集してしまえば、すべての画面でその変更が反映されるためです。

ButtonWidgetの作成

まずはUserWidgetを作成します。
名前は「W_Button」としました。

• Widgetの階層

ButtonとTextを追加します。

• Clickイベントを設定

• イベントディスパッチャーを用意

「W_Button」内でイベントディスパッチャーを作ります。
先ほど作ったClickEventとイベントディスパッチャーを繋げます。
Buttonに関してはこれで準備完了です。

次は、実際にこのButtonを使うために、親Widgetを用意します。

親Widgetの作成

親Widget（Widget名：W_Parent）に「W_Button」を格納していきます。

• 親Widgetから「W_Button」のClickを検知する

親Widgetの中には、変数として「W_Button」の値があります。
こちらを選択していただくと、「W_Button」側で用意したイベントディスパッチャーを確認できます。

こちらのイベント「XXXClick」は、「W_Button」のイベントディスパッチャーがCallされると、呼ばれるようになっています。

いちいちイベントをBindしなくて済むので楽でいいですね！

処理の流れ

「W_Button」内のButtonをクリックしたタイミングでイベントディスパッチャーを呼び、そのイベントディスパッチャーが呼ばれたことで親Widgetの「XXXClick」が呼ばれるという流れになっています。