いよいよメニューを作成します。

Editor Utility Widget を作成

コンテンツブラウザ上で新しく『Editor Utility Widget』を作成します。

ここでは「EUW_SetTextureParam」と名付けました。

ダブルクリックして開くと「UMG」と同じ画面が開きます。ひとまず最初に知っておけば良い編集箇所は緑の枠内の３ヵ所です。実際に作成しながら解説します。

最初はデザイナと呼ばれる画面が表示されていると思います。BP を組んでいくグラフ画面は右上のボタンで切り替えますが、今はデザイナを編集していきます。

ボタンを配置

「🎨 Palette」パネル内の「🧱 Button」をドラッグ＆ドロップで配置します。

すると「📚 Hierarchy」パネル内にボタンが追加されていることが確認できます。ここではメニューを構成するために追加したパーツがツリー階層で表示されます。

テキストをボタン内に配置

今度は 🎨 Palette パネル内の「🧱 Text」ウィジェットをドラッグして、直接 📚 Hierarchy パネル内の 🧱 Button ウィジェット上にドロップしてください。

するとボタンの子としてテキストが配置されます。📚 Hierarchy パネル内では直接アイテムをドラッグ＆ドロップして階層を移動させることもできます。

📚 Hierarchy 内で 🧱 Text を選択し 📰 Details パネルで好きな文字列に変更してみます。

メニュー上に文字列が反映されていることを確認します。

フォントの種類やサイズ、右寄せやセンタリングは「📋 APPEARANCE」内で設定できます。

🧱 Button の幅が狭いので選択＞大きさも調整します。

ボタンのクリックイベントを作成

ボタンを押したら BP の処理を走らせたいので、ボタンのクリックイベントを追加しますが、まずは 📰 Details 内でボタンの変数名を分かりやすい名前に変えます。ここでは「Btn_Press」と名付けました。

設定項目を一番下までスクロールして「📋 EVENTS」内の「On Clicked（クリックした時）」のボタンを押します。

すると編集画面がグラフに切り替わり「📕 On Clicked (Btn_Press)」というイベントが追加されます。クリックした時の処理はこのイベントノードに構成していけば良い訳です。