Fabで販売されているコマンドRPGを制作するためのプロジェクト『Turn-Based jRPG Template』の第9回。
#9 設定メニューの追加
メインメニューの「Back (戻る)」を「Settings (設定)」に変更し、6つの設定項目を追加しました。
列挙型: E_SettingItems
名前: E_SettingItems
・新規作成します。
- 画面モード
- 解像度
- フレームレート
- グラフィック品質
- 動的解像度
- V-SYNC
ウィジェットブループリント: W_SettingItem
親クラス: BP_UIBase
名前: W_SettingItem
・新規作成します。親クラスをBP_UIBaseにするのを忘れないように。
デザイナー
Custom on Screenにして幅:1280 高さ:100ぐらいにします。
最低限必要な物は、まず[Horizontal Box]。
[Horizontal Box]の中に、
Text | BP_ArrowButton | Text | BP_ArrowButton
です。
TextとBP_ArrowButtonは全てIs Variableにチェックを入れて変数化します。
BP_ArrowButtonは2つとも 動作 > Visibility をHiddenにしておきます。
BP_ArrowButtonの右側は、デフォルト > Is Rightにチェックを入れます。
- Text_Title
「解像度」とか「フレームレート」になります。 - LeftArrowButton
左向きの矢印です。 - Text_Value
「1920×1080」とか「120」とか設定値になります。 - RightArrowButton
右向きの矢印です。Is Rightにチェックを入れると右向きになります。
・最低限必要なもの以外に、[オーバーレイ]を使ってドラゴンクエストっぽいUIにしています。
イベントグラフ
変数の追加
SettingItem – E_SettingItems
└「インスタンス編集可能」にチェックを入れる。
WindowMode – EWindowMode
└EWindowModeはデフォルトで存在します。
Resolution – Int Point
FrameRateLimit – Float
FrameRate – Text
GraphicsQuality – Integer
ResolutionIndex – Integer
Vsync – Boolean
DynamicResolution – Boolean
・このウィジェットが開いた時に、Focus on This UIでボタンをフォーカスさせています。
・Highlightは、ボタンフォーカス時のボタンの処理。ここでは単純に表示と非表示を切り替えています。
関数
関数を作成します。名前はUpdateSettingValue。
セッティングメニューを開いた時に各項目の値を表示する処理です。
関数を作成します。名前はUpdateWindowMode。
画面モード(ウィンドウモード)が変更された時の処理です。
・WindowModeは、To Integer (Byte)で整数に変換できます。
その逆はTo Byte (Integer)です。
関数を作成します。名前はUpdateResolution。
解像度が変更された時の処理です。
関数を作成します。名前はUpdateFrameRateLimit。
最大フレームレート設定が変更された時の処理です。
関数を作成します。名前はUpdateGraphicsQuality。
グラフィック品質が変更された時の処理です。
関数を作成します。名前はUpdateDynamicResolution。
動的解像度の設定が変更された時の処理です。
関数を作成します。名前はUpdateVsync。
V-Syncの設定が変更された時の処理です。
関数を作成します。名前はSetResolutionIndex。
解像度のInt PointをIntegerに変換する処理です。
OnYesとOnNoは削除します。
イベントグラフ
左入力時の処理を複製して値を変更すると楽です。
W_Settingsが開いた時、最初にこれを読み込みます。
W_Settings
親クラス: BP_UIBase
名前: W_Setting
・新規作成します。親クラスをBP_UIBaseにするのを忘れないように。
デザイナー
最低限必要なものは、まず[Vertical Box]。
この[Vertical Box]のIs Variableにチェックを入れて変数化します。
名前はVerticalBox_StettingItemListにしました。
VerticalBox_StettingItemListの中に、W_SettingItemを設定項目の数だけ入れます。
今回は6つ入れて、それぞれ名前変更しました。
- W_SettingItem_Window
デフォルト > Setting Item を「画面モード」にする。 - W_SettingItem_Resolution
デフォルト > Setting Item を「解像度」にする。 - W_SettingItem_Framerate
デフォルト > Setting Item を「フレームレート」にする。 - W_SettingItem_GraphicsQuality
デフォルト > Setting Item を「グラフィック品質」にする。 - W_SettingItem_DynamicResolution
デフォルト > Setting Item を「動的解像度」にする。 - W_SettingItem_Vsync
デフォルト > Setting Item を「V-SYNC」にする。
W_SettingItemも全てIs Variableにチェックが入っていて変数化されていることを確認してください。
参考UI
・Background、BP_BackButton、[TitleText]は、他のUIからコピペしました。
・[TitleText]のTextを「設定」か「Settings」にします。
イベントグラフ
変数の追加
highlightedSettingItem – W_SettingItem
selectedSettingItemButtonIndex – Integer
イベントディスパッチャーの追加
OnSettingsClosed
【変数】
Setting Itemsは配列を作成のArrayから「変数へ昇格」。
BP_PauseMenu
デザイナー
BackButtonの名前をSettingsButtonに変更します。
Button Textを「設定」に変更します。
Button Imageのアイコンも可能なら変更したいところです。
イベントグラフ
SettingsButtonがクリックされた時の処理は、カスタムイベント BindEventsの後半にあります。
SettingsButtonが繋がれているOn Button Clickedにイベントをバインドから、カスタムイベント OnSettingButtonClickedを作成して繋げます。
コメント