ARPG開発 015 コンフィグ

フレームレートやテクスチャ品質の設定ができるコンフィグ画面。

列挙型(Enum)の作成と編集

コンテンツブラウザで右クリックしてブループリント > 列挙型を選択。
名前をEnum_ConfigItemにします。

Enum_ConfigItemの編集

+列挙子を追加をクリックして表示名を3つにする。
それぞれフレームレート、アンチエイリアス、テクスチャ品質と入力。

ウィジェットブループリントの作成と編集

コンテンツブラウザで右クリックしてユーザーインターフェース > ウィジェットブループリント。親はUser Widget。
2つ作成し、名前はUI_ConfigItemとUI_Configにしました。

UI_ConfigItemの編集

パレット > 一般 > Borderをドラッグ&ドロップで配置。
ビューポート右上のFill ScreenをCustom on Screenにして幅を1280にする。
詳細 > アピアランス > Brush > Tint > Aを0.0(透明)にする。

パレット > 一般 > Buttonを階層のBorderの子として配置。
名前をBackgroundにします。
詳細 > アピアランス > Style > Normal > Tintで色を黒にします。
詳細 > アピアランス > Style >Hovered > Tintは選択中の色です。オレンジっぽくしておきます。

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

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

パレット > 一般 > Buttonを階層のHorizontal Boxの子として配置。
名前をLeft_BTNにします。
詳細 > アピアランス > Style > Normal > Tint > Aを0.0(透明にします)
詳細 > アピアランス > Style >Hovered > Tintは選択中の色です。赤っぽくしておきます。

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

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

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

Right_BTNを選択し、ビューポート上で「右」をクリック。

右上の「グラフ」をクリックしてイベントグラフを開く。
変数を追加して名前をConfigItem、型はEnum Config Itemにする。

ノードを組む Then 0

カスタムイベントを追加し、名前をUpdateConfigItemにします。
UpdateConfigItemから線を伸ばしてSequenceを配置。
Then 0から線を伸ばしてゲームのユーザー設定を取得(Get Game User Settings)を配置。
変数ConfigItemをGet。線を伸ばしてEnum_ConfigItem でスイッチを配置。ゲームのユーザー設定を取得から繋ぐ。
Return Valueから線を伸ばしてフレーム レート制限の取得を配置。
Return Valueから線を伸ばしてアンチエイリアス品質の取得を配置。
Return Valueから線を伸ばしてテクスチャ品質の取得を配置。
上記3種のReturn Valueから線を伸ばして変数へ昇格。名前はFrameRateLimit、AntiAliasingQuality、TextureQualityにする。
それぞれの実行ピンをEnum_ConfigItem でスイッチから繋げる。
ノードを組む Then 1

Config Item TextをGetして線を伸ばしてSetText (Text)を配置。Then 1から繋ぐ。
ConfigItemをGetして線を伸ばしてEnum を String に変換を配置してIn Textに繋ぐ。
【以下は関数化】

またConfigItemをGetして線を伸ばして選択するを配置。
Config Value TextをGetして線を伸ばしてSetText (Text)を配置。In TextとReturn Valueを繋ぐ。
FrameRateLimitをGetしてフレームレートと繋ぐ。
選択するアンチエイリアステクスチャ品質からそれぞれ線を伸ばして選択するを配置。
IndexにはAntiAliasingQualityTextureQualityをGetして繋ぐ。
選択するのピンを追加して5つにして、低、中、高、最高、神と入力。
【以下は関数化】からのノードを全て選択して右クリックして関数に折りたたむ。名前をUpdateConfigValueにします。
Then 1のSetText (Text)から繋ぐ
UI_Configの編集

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

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

パレット > ユーザーが作成 > UI Config Itemを階層のVertical Boxの子として配置。
UI_ConfigItemを2つ複製して計3つにする。

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

ノードを組む

カスタムイベントを追加し、名前をShowConfigにする。
ShowConfigから線を伸ばしてゲームのユーザー設定を取得ロード設定を配置。Return Valueターゲットも繋ぐ。
UI_ConfigItem_*を3つともGet。それぞれ線を伸ばしてSet Config Itemを配置し、一列に繋げる。Config Itemはフレームレート、アンチエイリアス、テクスチャ品質をそれぞれ指定する。ロード設定から繋ぐ。
さらに線を伸ばしてUpdate Config Itemを配置。ターゲットにはUI_ConfigItem_*を3つともGetして繋ぐ

ゲームモードの編集

自分が使用しているゲームモードブループリントを開く。
新規でブループリント クラス > Game Mode Baseで作成も可能。
名前はBP_GameModeにしました。

BP_GameModeの編集
ノードを組む
イベント BeginPlayから線を伸ばしてウィジェットを作成を配置。ClassにUI_Configを指定。Returnから線を伸ばして変数へ昇格。名前はUIConfigにします。

プレイヤーブループリントの編集

ノードを組む

コンフィグメニューを開くためのインプットアクションを作成する。インプットアクションの詳細 > 入力 >Execute When Paused(Trigger when Paused)にチェックを入れる。
インプットアクションを配置して線を伸ばしてCast To BP_GameModeを配置。そのObjectからはGet Game Mode
実行ピンから線を伸ばしてFlip Flopを配置。
As BP Game Modeから線を伸ばしてUIConfigを取得
【A】
「状況に合わせた表示」のチェックを外してからAdd to Viewportを配置してターゲットとUIConfigを繋ぐ。Flip FlopのAからも繋ぐ。
Add to Viewportから線を伸ばして「状況に合わせた表示」のチェックを外してからSet Show Mouse Cursorを配置。Show Mouse Cursorにチェックを入れる。「状況に合わせた表示」のチェックを入れてからターゲットから線を伸ばしてGet Player Controllerを配置。
Set Show Mouse Cursorから線を伸ばしてSet Input Mode Game And UIを配置。そのPlayer ControllerにはGet Player Controllerを繋ぐ。
Set Input Mode Game And UIから線を伸ばしてSet Game Pausedを配置。Pausedにチェックを入れる。
UIConfigから線を伸ばしてShow Configを配置。Set Game Pausedから繋ぐ。
【B】
「状況に合わせた表示」のチェックを外してからRemove from Parentを配置。
As BP Game Modeから線を伸ばしてUIConfigを取得し、右クリックメニューから検証済みゲットに変換する。は有効であるから線を伸ばしてRemove from Parentに繋ぐ。UIconfigターゲットも繋ぐ。
Flip FlopのBから線を伸ばして検証済みゲットに繋ぐ。
Set Show Mouse Cursorを配置し、Show Mouse Cursorにチェックを外す。
Set Input Mode Game Onlyを配置。
Set Game Pausedを配置。Pausedのチェックを外す。

UI_ConfigItemの編集

フレームレート、アンチエイリアス、テクスチャ品質それぞれに関数を作る必要があります。
まずフレームレートの関数、UpdateFrameRateを作成。
ノードを組む

変数FrameRateLimitをGetして線を伸ばして、加算する(+)を配置。
左下のピンからUpdate Frame Rateに繋ぐ。そのインプットの名前をAddにします。
右上のピンから線を伸ばしてClamp (Float)を配置。Minを30、Maxを120にします。最小値と最大値を設定して制限するノードです。
Update Frame Rateから線を伸ばしてゲームのユーザー設定を取得を配置。さらに線を伸ばしてフレーム レート制限の設定を配置。2本の線を繋ぐ。New LimitClamp (Float)から繋ぐ。
変数FrameRateLimitをSetして繋ぐ。
アンチエイリアスの関数、UpdateAntiAliasingを作成。
ノードを組む

作り方は似ています。
FloatとIntegerの違いはあります。
値は5段階ですからMin0~Max4になります。
テクスチャ品質の関数、UpdateTextureを作成。
ノードを組む
デザイナーで階層のLeft_BTNを選択し、詳細のOn Clickedを選択。
デザイナーで階層のRight_BTNを選択し、詳細のOn Clickedを選択。
ノードを組む Left_BTN

On Clicked (Left_BTN)から線を伸ばしてSequenceを配置。
Then 0から線を伸ばしてEnum_ConfigItem でスイッチを配置。Selectionには変数ConfigItemをGetして繋ぐ。
フレームレート、アンチエイリアス、テクスチャ品質に作成した関数を繋げる。
Left_BTNなので減らす設定です。Addは-30、-1、-1と入力。
Then 1から線を伸ばして関数Update Config Valueを配置。さらに線を伸ばしてゲームのユーザー設定を取得を配置。さらに線を伸ばして設定の適用を配置。
ノードを組む Right_BTN

ほぼコピペです。
こちらは増やす設定ですから値を30、1、1と入力。
テストプレイして正常な動作を確認。

その他の設定項目の確認

右上の設定 > エンジンの拡張機能設定で、その他の項目が確認できます。これらは全て5段階ですから、アンチエイリアスやテクスチャ品質と同じように導入できます。

解像度の追加

Enum_ConfigItem
「解像度」を追加する。

構造体 Struct_Resolutionの作成
名前はResolution、型はInt Point。

データテーブル DT_Resolutionの作成
4行にして行の名前は行数。
解像度をそれぞれ入力。

UI_ConfigItem
変数ResolutionSettingを追加。型はInt Point。
イベントグラフに画面解像度の取得を追加。
関数UpdateResolutionを追加。

関数UpdateConfigValueの修正。

カスタムイベントUpdateConfigItemの修正

On Clicked (Left_BTN)とOn Clicked (Right_BTN)の修正。
Update Resolutionを追加しAddを-1と1と入力。

UI_Config
階層にUI_ConfigItem_3を追加する。
イベントグラフに解像度のSet Config Itemを追加する。

参考サイト

【UE5ゲーム制作】ゲームの設定(コンフィグ)画面の作り方【逆引きUE】 – YouTube

コメント

タイトルとURLをコピーしました