UMGを使ったメニューバーの作り方

このページは4.7.5を対象としています。

参考URL

概要

このページでは上の動画のようなウィンドウを開くだけの機能を持ったメニューバーをUMGで作成する方法についてまとめます。 ウィンドウの作り方についてはこのページでまとめており、 これにメニューバーを追加するので、こちらを先にご覧ください。 Win32 APIのメニューバーを参考にしていますが、ウィンドウを開くだけの機能に簡略化しています。 また、メニューバーの各部分の名称は次の通りにしました。

メニューバー全体をMenu Widgetブループリント、 その中の一つのポップアップをPopup Widgetブループリント（これは複数のMenuitemを含む）、 さらにその中の一つの項目をMenuitem Widgetブループリントとしました。

おおまかな処理の流れは次の通りです。

  1. 開始処理。Menuの中にPopupを作成し、さらにその中にWindowと関連付けたMenuitemを作成する。
  2. Popupのボタンをクリック。PopupのMenuitemのリストを表示し、Menuを最前面に移動する。
  3. Menuitemのボタンをクリック。関連付けたWindowを開き、最前面に移動し、Menuitemのリストを非表示にする。

1.Menuの作り方

まず、Menuの見た目と処理を作ります。 デザイナーで次のようにルートにHorizontalBox（IsVariable）を1つ配置します。

グラフで次のようにMainUMGオブジェクトリファレンス型で編集可能のParentUMGという変数を追加します。

グラフで次のようにAddPopupとSetFront関数を追加します。

2.Popupの作り方

次に、Popupの見た目と処理を作ります。 デザイナーで次のように配置します。 

VerticalBox
	Button_PopupButton（IsVariable、Sizeで自動、HorizontalAlignment、VerticalAlignmentでそれぞれフィルを指定、OnClickedでバインド）
		TextBlock_0（IsVariable、HorizontalAlignment、VerticalAlignmentでそれぞれCentorを指定、Textにバインド）
	VerticalBox_MenuitemList（IsVariable、Sizeでフィル、HorizontalAlignment、VerticalAlignmentでそれぞれフィルを指定、VisibilityでHiddenを指定）

グラフで次のように、 文字列型で編集可能のcaption、 Menuオブジェクトリファレンス型で編集可能のParentUMG、 という変数を追加します。

グラフで次のようにAddMenuitemとGetText_0関数、及びEventGraphで処理を追加します。

3.Menuitemの作り方

次に、Menuitemの見た目と処理を作ります。 デザイナーで次のように配置します。 

Button_0（IsVariable、OnClickedでバインド）
	TextBlock_0（IsVariable、HorizontalAlignment、VerticalAlignmentでそれぞれCentorを指定、Textにバインド）

グラフで次のように、 文字列型で編集可能のcaption、 Widgetオブジェクトリファレンス型で編集可能のParentWidget、 Windowオブジェクトリファレンス型で編集可能のWindow、 という変数を追加します。

グラフで次のようにGetText_0関数、及びEventGraphで処理を追加します。

4.MainUMGの作り方

MenuはMainUMGのデザイナーで次のように配置して使います。 ポップアップメニューを開いた高さも考慮し少し高めの高さにしましょう。

EventGraphで次のようにMenuの初期化が必要です。

これで完成です。

戻る

inserted by FC2 system