オプションメニューの設定項目

オプションメニューの画面モード、解像度、フレームレート、グラフィック品質、アンチエイリアス、テクスチャ品質、V-SYNCの設定。

マウスとゲームパッドに対応しています。

Engineバージョンは5.3.2。

列挙型: E_SettingItem

ブループリント > 列挙型
名前: E_SettingItem
新規作成

フォルダ構成は自由です。
私はコンテンツ > Blueprints > UI > Settingsというフォルダ構成にしました。

E_SettingItemの編集

設定項目の数だけ+列挙子を追加をします。
今回は、画面モード、解像度、フレームレート、グラフィック品質、アンチエイリアス、テクスチャ品質、V-SYNCの7項目。

ウィジェットBP: W_SettingItem

ユーザーインターフェース > ウィジェットブループリント
親: User Widget
名前: W_SettingItem
新規作成

W_SettingItemの編集

ビューポート右上のFill ScreenをCustom on Screenにして幅を1280にする。

パレット > 一般 > Borderをドラッグ&ドロップで配置。
詳細 > アピアランス > Brush > Tint > Aを0.0(透明)にする。

パレット > 一般 > ButtonをBorderの子として配置。階層ウィンドウにドロップすれば良いです。
名前をBackgroundにします。
詳細 > アピアランス > Style > Normal > Tintで色を黒にします。
詳細 > アピアランス > Style > Hovered > Tintはカーソルで選択中の色です。好きな色を指定してください。
詳細 > インタラクション > Is Focusableのチェックを外す。Backgroundはフォーカスされたくありません。

パレット > パネル > Horizontal BoxをBackgroundの子として配置。
詳細 > スロット > Horizontal Alignmentを= *一番右
詳細 > スロット > Vertical Alignmentを|| *一番右

パレット > 一般 > TextをHorizontal Boxの子として配置。
名前をText_SettingItemにします。
詳細のIs Variableにチェックを入れる。
詳細 > スロット > Sizeをフィル
Horizontal AlignmentとVertical Alignmentを左から2番目。
詳細 > コンテンツ > TextにSettingItemと入力。

パレット > 一般 > ButtonをHorizontal Boxの子として配置。
名前をButton_Leftにします。
詳細 > アピアランス > Style > Normal > Tint > Aを0.0(透明にします)
詳細 > アピアランス > Style >Hovered > Tintは選択中の色です。好きな色を指定してください。

パレット > 一般 > TextをButton_Leftの子として配置。
詳細 > コンテンツ > Textに<と入力。

Button_Leftを複製してButton_Rightにする。
子のTextも自動でついてきます。Textに>と入力。

パレット > 一般 > TextをHorizontal Boxの子として配置。
名前をText_SettingValueにします。
詳細のIs Variableにチェックを入れる。
詳細 > スロット > Sizeをフィル
Horizontal AlignmentとVertical Alignmentを左から2番目。
詳細 > コンテンツ > TextにSettingValueと入力。

階層でButton_Rightを選択し、ビューポート上で「右」をクリック。
並び替えされます。

イベントグラフ

右上の「グラフ」をクリックしてイベントグラフを開く。

【変数追加】
SettingItem – E_SettingItem(オブジェクト参照)

ノードを組む

カスタムイベントを追加し、名前をUpdateSettingItemにします。
UpdateSettingItemから線を伸ばしてSequenceを配置。
Then 0から線を伸ばしてゲームのユーザー設定を取得(Get Game User Settings)を配置。
変数ConfigItemをGet。線を伸ばしてEnum_ConfigItem でスイッチを配置。ゲームのユーザー設定を取得から繋ぐ。
下記はゲームのユーザー設定を取得のReturn Valueから線を伸ばす。
・Return Valueから線を伸ばして全画面モードの取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はWindowMode。
・Return Valueから線を伸ばして画面解像度の取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はResolution。
・Return Valueから線を伸ばしてフレームレート制限の取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はFrameRateLimit。
・Return Valueから線を伸ばして全体的なスケーラビリティレベルの取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はGraphicsQuality。
・Return Valueから線を伸ばしてアンチエイリアス品質の取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はAntiAliasingQuality。
・Return Valueから線を伸ばしてテクスチャ品質の取得を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はTextureQuality。
・Return Valueから線を伸ばしてVSyncが有効を配置。そのReturn Valueから線を伸ばして変数へ昇格。名前はIsVsync?。
それぞれの実行ピンをE_SettingItemでスイッチから繋げる。

ノードを組む

SettingItemをGetして線を伸ばして選択するを配置。
Text_SettingValueをGetして線を伸ばしてSetText (Text)を配置。In TextとReturn Valueを繋ぐ。
・WindowModeをGetして線を伸ばしてEnum を String に変換を配置。「画面モード」と繋ぐ。
・ResolutionをGetして線を伸ばしてIntPointを分解を配置。Appendを配置してピンを追加。XとAを繋げ、YとCを繋げ、Bには「x」と入力。「解像度」と繋ぐ。
・FrameRateLimitをGetして「フレームレート」と繋ぐ。
・GraphicsQualityをGetして選択するを配置。Option 0で右クリックして「ピンの種類を変更」でTextにする。ピンを追加して5つにする。0から5までそれぞれ低、中、高、最高、神と入力。「グラフィック品質」と繋ぐ。
・AntiAliasingQualityとTextureQualityもGraphicsQualityと同じようにやります。
・IsVsync?をGetして選択するを配置。ピンの種類をTextにする。Falseには「Off」、Trueには「On」を入力。「V-Sync」と繋ぐ。
【関数化】
このノードを全て選択して右クリックして関数に折りたたむ。名前をUpdateSettingValueにします。
ちなみに最初から関数UpdateSettingValueを作成して、上記ノードを組んでも良いです。関数の実行ピンはSetText (Text)に繋げます。

ノードを組む *Then 1

Text_SettingItemをGetして線を伸ばしてSetText (Text)を配置。Then 1から繋ぐ。
実行ピンを伸ばしてUpdateSettingValueを配置。
SettingItemをGetして線を伸ばしてEnum を String に変換を配置してIn Textに繋ぐ。

ウィジェットBP: W_Setting

ユーザーインターフェース > ウィジェットブループリント
親: User Widget
名前: W_Setting
新規作成

デザイナー

パレット > パネル > Canvas Panelを配置。

パレット > パネル > Vertical BoxをCanvas Panelの子として配置。階層は階層ウィンドウで見ると確実です。
詳細 > スロット > アンカーを真ん中にする。
詳細 > スロット > 位置をX0とY0にする。
詳細 > スロット > サイズをX1200とY600にする。
詳細 > スロット > AlignmentをX0.5とY0.5にする。

パレット > ユーザーが作成 > W Setting ItemをVertical Boxの子として配置。
W Setting Itemを2つ複製して計7つにする。
名前変更はしなくてもいいですが、私はわかりやすくするために変更しました。

イベントグラフ

右上の「グラフ」をクリックしてイベントグラフを開く。

ノードを組む

カスタムイベントを追加し、名前をShowSettingにする。
ShowSettingから線を伸ばしてゲームのユーザー設定を取得→ロード設定を配置。Return Valueとターゲットも繋ぐ。
W_Setting_Item_*を7つともGet。それぞれ線を伸ばしてSet Setting Itemを配置し、一列に繋げる。Setting Itemは画面モード、解像度、フレームレート、グラフィック品質、アンチエイリアス、テクスチャ品質、V-SYNCをそれぞれ指定する。ロード設定から繋ぐ。
さらに線を伸ばしてUpdate Setting Itemを配置。ターゲットにはW_Setting_Item_*を7つともGetして繋ぐ

ゲームモード: BP_GameMode

ブループリント > ブループリントクラス
親: Game Mode Base
名前: BP_GameMode
新規作成

イベントグラフ

ノードを組む

イベント BeginPlayから線を伸ばしてウィジェットを作成を配置。ClassにW_Settingを指定。Returnから線を伸ばして変数へ昇格。名前はW_SettingRefにします。

編集 > プロジェクト設定 > プロジェクト > マップ&モードのデフォルトのゲームモードを「BP_GameMode」にしてください。

その下の選択したゲームモードのDefault Pawn ClassをBP_Playerにします。

入力: IA_OptionsMenu

入力 > 入力アクション
名前: IA_OptionsMenu
新規作成
・サードパーソンテンプレートを使っているなら、コンテンツ > ThirdPerson > Input > Actionsフォルダ内に作成しましょう。

詳細 > アクション > Trigger when Pausedにチェックを入れる。ポーズ中も入力が有効になります。
詳細 > アクション > Triggersを追加し、「Pressed」を指定。

入力マッピングコンテキスト: IMC_Default

サードパーソンテンプレートを使っているなら、コンテンツ > ThirdPerson > InputフォルダにIMC_Defaultがあります。

マッピングに+して、先ほど作成したIA_OptionsMenuを追加しましょう。
好きなボタンを割り当てる。

キャラクターBP: BP_Player

プレイヤーキャラクターのブループリントを開きます。
私はサードパーソンテンプレートのBP_ThirdPersonCharacterを複製してBP_Playerにしました。

【変数追加】
IsOptionsMenuOpen? – Boolean
・オプションメニューが開いているかどうかのチェック。

ノードを組む

インプットアクションを配置して線を伸ばしてCast To BP_GameModeを配置。そのObjectからはGet Game Mode。
Cast To BP_GameModeのAs BP Game Modeから線を伸ばしてW Setting Refを取得。
・Set Show Mouse Cursorを配置するためには「状況に合わせた表示」のチェックを外す必要があるかと思います。

ウィジェットBP: W_SettingItem

画面モード、解像度、フレームレート、グラフィック品質、アンチエイリアス、テクスチャ品質、V-SYNCそれぞれに関数を作る必要があります。

関数: UpdateWindowMode

ノードを組む

・Window Modeをゲットした後、線を伸ばしてTo Integer (Byte)を配置。
・Clamp (Integer)の後はTo Byte (Integer)を配置。

関数: UpdateResolution

【変数追加】
ResolutionIndex – Integer

ノードを組む

・SetしたResolutionはピンで右クリックして「構造体ピンを分割」します。

初回起動時、ResolutionとResolutionIndexの値がズレます。1回変動させれば合致します。
初回から合わせるには、W_Settingのイベントグラフに下記ノードを追加する必要があります。
ResolutionのXの値を見て、ResolutionIndexを合わせるようにしています。

関数: UpdateFrameRateLimit

ノードを組む

関数: UpdateGraphicsQuality

ノードを組む

関数: UpdateAntiAliasing

ノードを組む

作り方は似ています。
FloatとIntegerの違いはあります。
値は5段階ですからMin0～Max4になります。

関数: UpdateTexture

ノードを組む

関数: UpdateVsync

ノードを組む

イベントグラフ

デザイナーで階層のButton_Leftを選択し、詳細のOn Clickedを+。

ノードを組む Button_Left

・左ボタンがクリックされた時、Addの値はマイナスになります。
フレームレートは30区切りなので-30.0。
V-SyncのようなBooleanはFalse(Off)。

デザイナーで階層のButton_Rightを選択し、詳細のOn Clickedを+。

ノードを組む Button_Right

・Button_LeftのノードをコピペしてAddとIs Vsync?の欄を変更するだけです。

この時点でセッティングメニューは機能します。

ボタンのフォーカス設定

ゲームパッドorキーボード操作時に選択されているボタンの色を変える設定をします。

ウィジェットBP: W_Setting

イベントグラフ

ノードを組む「<」「>」の色

・変数FocusedButtonは、ボタンがフォーカスされている時の色を指定します。
NormalとHoveredのTintがフォーカス&ホバー時の色になります。
PressedのTintが押した時の色です。色を指定しても良いですし、Aを0.0にして透明にしても良いです。
・変数FocusedButtonRemoveはボタンがフォーカスされていない時の色を指定します。
NormalのAを0.0にして透明にします。
Hoveredはフォーカス&ホバー時と同じ色にします。

「<」「>」ボタンを選択時、Backgroudの色が変わるようにします。

関数: FocusBackground

ノードを組む

・変数FocusedBackgroundは「<」か「>」がフォーカスされている時の色。
NormalとHoveredのTintがフォーカス&ホバー時の色になります。「<」「>」のフォーカス時の色よりも、やや薄い方が良いです。
・変数FocusedBackgroundは「<」と「>」がフォーカスされていない時の色。今回は黒です。