マウス&キーボード&ゲームパッドに完全対応したメインメニューとセッティング画面を作成しました。
Unreal Engineのバージョンは5.3.0 Preview 1です。
やっとマウスとゲームパッドに両対応したメニュー画面が作れた。完璧な答えが見つからないから難しくてつらかった。#UE5 pic.twitter.com/1kzbAPfTGj
— ハマーキーUE (@Hummerkey_UE) August 20, 2023
W_MainMenu(ウィジェットブループリント)
親クラス：User Widget
名前：W_MainMenu
Canvas Panelを配置。
Canvas Panelの子にVertical Boxを配置。
・サイズ X:400 Y:600
・Alignment X:-0.2 Y:-0.3
Vertical Boxの子としてButtonを3個配置。
名前を「Button_Save」「Button_Settings」「Button_Quit」にする。
Padding Bottomを20にする。
各Buttonの子としてTextを配置。コンテンツ > Textは上から「SAVE / LOAD」「SETTINGS」「QUIT」。
各Buttonのイベント On Hoveredを配置。マウスのHoveredとキーボード(ゲームパッド)のFocusを同期させるためです。
Make ArrayとButtonの接続をしてからArrayから線を伸ばしてFor Each Loopを配置しましょう。順序を間違えるとターゲットがWidgetになってしまう場合もあります。
Set Styleは「状況に合わせた表示」を消す必要があります。
Set StyleのIn Styleから線を伸ばして変数へ昇格させます。
FocusedButton
・NormalがキーボードFocusの色
・HoveredがマウスHoveredの色
・Pressedがクリックされた時の色
FocusedButtonRemove
・Normalが選択されていない時のボタンの色
インプットアクション
メインメニューを開くボタンのインプットアクションを作成する場合、ポーズ中でも入力が利くようにTrigger when Pausedにチェックを入れておく必要があります。
TriggersはPressedのみで構いません。
BP_Player(プレイヤーブループリント)
ウィジェットを作成はイベント Begin Playの方に繋いで変数へ昇格させています。
W_Settings(ウィジェットブループリント)
親：User Widget
名前：W_Settings
Canvas Panelを配置。
Canvas Panelの子としてVertical Boxを配置。
・アンカー 中央
・位置 X:0 Y:0
・サイズ X:1280 Y:640
・Alignment X:0.35 Y:0.6
Vertical Boxの子としてHorizontal Boxを配置。
Horizontal Boxの子としてBorderを配置。
・Sizeをフィルにする。
・アピアランス > Brush > Tint > Aを0.0(透明)にする。
Borderの子としてButtonを配置。
・名前をBackgroundにします。
・インタラクション > IS Focusableのチェックを外す。
Background(Button)の子としてHorizontal Box(※0)を配置。
・Horizontal Alignmentを一番右。
・Vertical Alignmentを一番右。
Horizontal Box(※0)の子としてText(※1)を配置。
・スロット > Sizeをフィル。
・Horizontal Alignmentを左から2番目。
・Vertical Alignmentを左から2番目。
Horizontal Box(※0)の子としてButton(※2)を配置。Button(※2)の子としてTextを配置。
・コンテンツ > Textに<と入力。
Horizontal Box(※0)の子としてText(※3)を配置。
・スロット > Sizeをフィル。
・Horizontal Alignmentを左から2番目。
・Vertical Alignmentを左から2番目。
Horizontal Box(※0)の子としてButton(※4)を配置。
Button(※4)の子としてTextを配置。
・コンテンツ > Textに>と入力。
階層で[Horizontal Box]をコピーする。※0ではなく上の階層の。
[Vertical Box]を選択して貼り付け。
階層で[Horizontal Box]をコピーする。※0ではなく上の階層の。
[Vertical Box]を選択して貼り付け。
階層で[Horizontal Box]をコピーする。※0ではなく上の階層の。
[Vertical Box]を選択して貼り付け。
階層で[Horizontal Box]をコピーする。※0ではなく上の階層の。
[Vertical Box]を選択して貼り付け。
5行になります。
各行の左側のコンテンツ > Textを入力します。
・1行目：画面モード
・2行目：解像度
・3行目：フレームレート
・4行目：グラフィックス
・5行目：V-SYNC
Buttonの名前を変更します。
・1行目 左：Windowmode- 右：Windowmode+
・2行目 左：Resolution- 右：Resolution+
・3行目 左：Framerate- 右：Framerate+
・4行目 左：Graphics- 右：Graphics+
・5行目 左：Vsync- 右：Vsync+
Backgroundも
・1行目 Background_Windowmode
・2行目 Background_Resolution
・3行目 Background_Framerate
・4行目 Background_Graphics
・5行目 Background_Vsync
としておくとわかりやすい。
画面モード 入力
Windowmode-を選択してイベント On Clickedを作成。
Windowmode+を選択してイベント On Clickedを作成。
変数Windowmodeを作成し、型はEWindow Mode。
GetしたWindowmodeから線を伸ばした後はTo Integer (Byte)を配置。
Clamp (Integer)の後はTo Byte (Integer)を配置。
解像度 入力
Resolution-を選択してイベント On Clickedを作成。
Resolution+を選択してイベント On Clickedを作成。
変数ResolutionIndexを作成し、型はInteger。
変数Resolutionを作成し、型はInt Point。
セットは変数Resolutionをセットして構造体ピンを分割しています。
フレームレート 入力
Framerate+を選択してイベント On Clickedを作成。
変数Framerateを作成し、型はFloat。デフォルト値は60。
グラフィックス 入力
Graphics-を選択してイベント On Clickedを作成。
Graphics+を選択してイベント On Clickedを作成。
変数GraphicsIndexを作成し、型はInteger。
V-SYNC 入力
Vsync-を選択してイベント On Clickedを作成。
Vsync+を選択してイベント On Clickedを作成。
変数Vsync?を作成し、型はBoolean。
開いた時の呼び出し
画面モード 出力
解像度 出力
フレームレート 出力
フレームレートの右のテキストブロックを選択してバインディングを作成。
グラフィックス 出力
V-SYNC 出力
プレイヤーブループリント
ウィジェットを作成し、Return Valueを変数へ昇格。
Flip FlopのBの末尾へ検証済ゲットとRemove from Parentを追加する。
W_MainMenu(ウィジェットブループリント)
Button_Settingsを選択してイベント On Clicledを配置。
W_Settings(ウィジェットブループリント)
マウスのHoverとキーボードFocusを同期
全てのButtonにイベント On Hoveredを追加して、キーボードFocusと同期させる必要がありました。
BackgroundをマウスでHoverした時も近くの左側のButtonをFocusするようにしています。
FocusされたButtonのカラー設定
MainMenuと同じです。Buttonが増えただけ。3行でも10行でもクリック&Getなので、たいした手間ではありません。
Set StayleのInStyleを変数へ昇格させるのも同じ。
マウスがBackgroundをHoverした時
過去最悪のぐちゃぐちゃなノード群になりました。
全ての左右ButtonをHas User FocusでFocus中かチェックして、Focus中であればその背景となっているBackgroud Buttonのカラーを変更しています。
その前にBackgroud Buttonのカラーをリセットするノードを置いています。
もっとスマートにやる方法があると思いますが、そこに到達する知識がありません。しかしながら、やりたい事は100%できましたから、ノード群をキレイにまとめるのは重要だと思いません。
今後、知識を得て「こうやればできる」と気付いた時に整頓しようかと思います。
完璧にできた
以前作成したコンフィグ画面はメインメニューと連動していませんでした。実用性を考えるとメインメニューとの連動は必須かと思ってやり直しました。
そして大きな違いとして、以前のコンフィグ画面はUI_ConfigとUI_ConfigItemに分けて作成していましたが、今回はW_Settingsのみで作成しました。
2つに分けた時はボタンをLeft_BTNとRight_BTNとBackgroundにまとめていたところが、今回は1項目ずつボタンがバラバラになってボタン数が多くなっています。これはマウスのHoveredとキーボード&ゲームパッドのFocusを完全同期させるのにボタンが個別の方がやりやすかったからです。
ボタン数が増えてもSettingsで使う項目は限られますから、あえてボタンを共通化してまとめる必要性も感じませんでした。
ゲームパッド操作を対象外にするのであれば、こういう事を考える必要はないわけですが、私はゲームパッド操作は重要だと考えますので、試行錯誤して満足いく結果になってホッとしています。
コメント