Chapter 47

◽ 子ウィジェットを利用する

ポコ太郎
ポコ太郎
2022.01.09に更新

自作のウィジェットを流用することで『Editor Utility Widget』の UI の作成を楽にすることが可能です。その際に、配置した子ウィジェットのボタンを押した際に通知を行い、親が通知を受け取り、具体的な処理を親側で行う方法についてまとめました。

親と子のウィジェットを作成

まずは親となる『Editor Utility Widget』を作成して「EUW_Parent」と名付け、子となる「Widget Blueprint」を作成して「WBP_CHild」と名付けます。

大まかな構成

ボタンのある子ウィジェットを親の『Editor Utility Widget』に配置します。

親には子のボタンが表示されますが、ボタンを押した場合には子のクリックイベントが動作します。ですがボタンを押してどんな処理を走らせるかは親側で実装したかったりしますよね。

そこでイベントを他の BP に通知できる「イベントディスパッチャー」を使い、子から親にボタンが押されたことを通知し、親はその通知を受けて親側の処理を実行させます。

子ウィジェットの準備

子ウィジェットの BP を開いて、ここでは作業サイズを Custom(150 * 30)に設定しました。

🧱 ボタンを配置して 📰 Details パネルで名前を「BTN_Child」と名付けます。

それから Anchors を上下左右全てに固定させます。

そして Offset を全て 0.0 に設定すれば、ボタンが作業スペースにフィットします。

On Clicked イベントを追加します。

グラフに入ったら「EVENT DISPATCHERS」を追加して「ChildEventDispatcher」と名付けます。

作成したイベントディスパッチャーをグラフ内にドラッグ&ドロップして「Call」を選択。

作られたノードをクリックイベントに繋ぎます。これで、ボタンが押された時に子からイベントを通知するようになりました。ついでに動作チェック用に 📘 Print String に繋いで「Hello from Child!」とログに出力するようにします。

コンパイルして保存を忘れず行います。

親ウィジェットの編集

次に親となる『Editor Utility Widget』を開き、作業スペースを図のように設定します。

🎨 Palette パネルの USER CREATED カテゴリ内から 🧱 子ウィジェットを探し‥

キャンバス内に配置して、サイズや位置を好みで調整します。

名前を「WBP_Child」と名付けます。

「📋 EVENTS」内には子に作成したイベントディスパッチャーのイベントが見つかるので追加。

子から通知があれば「Child Event Dispacher」イベントが起こるので、その際の動作チェック用に 📘 Print String に繋いで「Hello from Parent!」とログに出力するようにします。

これで準備OKです。コンパイルして保存します。

動作テスト

親の『Editor Utility Widget』を実行します。

アウトプットログに親と子それぞれの Print String が無事に表示されました。

おまけ:ボタンにテキストを乗せる

親に配置した子ウィジェットの 🧱 ボタンに 🧱 テキストを乗せたいと思っても、配置した子ウィジェットには何も追加できないようです。

そこで子のボタンに 🧱 テキストを配置してコンパイルします。

親の『Editor Utility Widget』側にも即時、反映されます。

しかし、親のデザイナーでこのテキストを自由に編集できるかというと、できません。

そこで子ウィジェットのデザイナーに戻り 🧱 テキストを削除して、代わりに 🧱 Named Slot を配置してコンパイルします(ボタンの子にはできません)。

また親のデザイナーに戻り、配置した 🧱 子ウィジェットを展開すると 🧱 NameSlot が見つかります。🧱 NameSlot は配置先で好きなウィジェットを追加できる設定枠の機能を持ちます。

🧱 NameSlot の上に 🧱 テキストを追加し、自由に編集してコンパイルします。

無事反映されましたが‥位置が上寄せになっています。

あまり良くない修正方法かも知れませんが Margin > Top で調整できます。

これで位置も調整できてめでたしめでたし‥と思いきや‥

ボタンの手前にある Named Slot が邪魔をしてクリックに反応しません。

そこで子ウィジェットのデザイナーに戻り 🧱 NameSlot の Visibility 設定を「Not Hit-Testable (Self & All Children)」に変更します。これで無事ボタンに反応するようになります。

おまけ:子ウィジェットを複数配置する

子ウィジェットを選択してコピーし、キャンベスにペーストして位置を調整します。名前も「WBP_Child_Add」と「WBP_Child_Delete」に変更しました。

追加した子ウィジェットもイベントを追加します。

それぞれ違う文字列をログに表示させるようにします。

コンパイルして実行します。

ボタンそれぞれ、無事に動作していることが確認できます。

以上で、子ウィジェットを使い回しつつ、テキストは違うものに入れ替えつつ、クリックイベントも親側で別々に自由に設定できるようになりました。ツール制作も捗るのではと思います。