『Turn-Based jRPG Template』の使い方 #8 ドラゴンクエストっぽいUIに変更

Fabで販売されているコマンドRPGを制作するためのプロジェクト『Turn-Based jRPG Template』の第5回。

#8 ドラゴンクエストっぽいUIに変更
1. その他にも多数のUI

#8 ドラゴンクエストっぽいUIに変更

UIをドラゴンクエストっぽくします。
ウィンドウ素材も用意しています。

環境

エンジン: Unreal Engine 5.5.4
プロジェクト: Turn-Based jRPG Template
素材: ウィンドウ画像

一般的な会話のメッセージウィンドウUI

BP_InfoDialogue

UIフォルダの中に数多くのウィジェットブループリントがあります。
その中で、一般的な会話のメッセージウィンドウがBP_InfoDialogueです。
(場所: コンテンツ > TurnBasedJRPGTemplate > Blueprints > UI > Dialogues)

階層: BlackAreaの削除
BlackAreaは画面全体を黒くするものです。ドラゴンクエストっぽくないので削除します。

階層: DialogueBackgroundの編集 → DialogueＷindow
DialogueBackgroundがウィンドウのデザインそのものです。
まずPaddingを6.0にします。これは背景よりもウィンドウを少し小さくするためです。
Brush > Image をT_Window_900x200にします。
これは背景ではなくウィンドウになりますから、名前をDialogueＷindowに変更しておきます。

階層: [オーバーレイ]の位置変更
オーバーレイを選択し、アンカーを下中央にします。
位置X:0 位置Y:-80
Alignment X:0.5 Y:1.0

階層: 画像の追加 DialogueBackground
階層に画像を追加し、名前をDialogueBackgroundにします。ウィンドウの背景になります。
位置は必ずDialogueＷindowの上にしてください。下に置くとWindowが埋もれます。
上層下層ではなく、同じ層の位置的に上と下です。

Horizontal AlignmentとVertical Alignmentを両方とも一番右。

Brush > Tint を黒にする。
半透明にしたい場合は、Aを0.8くらいにする。
Brush > Tint > Draw As をRound Boxにする。
Brush > Tint > Outline Settings > コーナー半径を4つとも16.0にする。
ラウンディングタイプをFixed Radiusにする。

階層: [Text] “This is an in..”の移動と編集
[Text] “This is an in..”を[Text]”Info”の下に移動させます。下層ではなく、同じ層の位置的に下です。
[Vertical Box]は使いませんので。

Paddingを30.0にする ※全部
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
ラップ > Wrap Text Atを840にする。これは文字を改行させる長さを指定します。

階層: ConfirmImageの移動と編集
ConfirmImageを[Text] “This is an in..”の下に移動させます。
[Vertical Box]を削除します。

PaddingのBottomを18.0。その他は0。
Horizontal Alignmentを左から2番目。
Vertical Alignmentを右から2番目。
Brush > Image をTex_ArrowIconに変更。
Image Size X:40.0 Y:20.0

テストプレイしてクエストNPCに話しかけると、かなりドラゴンクエストっぽいウィンドウになっています。

同じ感じで他のUIも変更できます。

「はい」「いいえ」の選択肢UI

BP_YesNoDialogue

選択肢付きのUIはBP_YesNoDialogueです。
(場所: コンテンツ > TurnBasedJRPGTemplate > Blueprints > UI > Dialogues)

階層: BlackAreaの削除

階層: DialogueBackgroundの編集 → DialogueＷindow
Paddingを6.0にします。
Brush > Image をT_Window_900x200にします。
名前をDialogueＷindowに変更しておきます。

階層: [オーバーレイ]の位置変更
オーバーレイを選択し、アンカーを下中央にします。
位置X:0 位置Y:-80
Alignment X:0.5 Y:1.0

階層: 画像の追加 DialogueBackground
階層に画像を追加し、名前をDialogueBackgroundにします。
位置はDialogueＷindowの上。
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
Brush > Tint を黒にする。
半透明にしたい場合は、Aを0.8くらいにする。
Brush > Tint > Draw As をRound Boxにする。
Brush > Tint > Outline Settings > コーナー半径を4つとも16.0にする。
ラウンディングタイプをFixed Radiusにする。

階層: [Text] “This is a YES..”の移動と編集
[Text] “This is a YES..”を[Title]”Confirm”の下に移動させます。

Paddingを30.0にする ※全部
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
ラップ > Wrap Text Atを840にする。

階層: [オーバーレイ]を追加
2つめとなるオーバーレイを追加します。
これは「Yes」「No」の選択肢を入れるものです。
Size To Contentにチェックを入れる

階層: DialogueWindowを複製
DialogueWindowを複製し、名前をDialogueWindow_Miniにします。
2つめの[オーバーレイ]の中に入れる。
Paddingを6.0にします。
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
Brush > Image をTex_Window_260x140にします。

階層: DialogueBackgroundを複製
DialogueBackgroundを複製し、名前をDialogueBackground_Miniにします。
2つめの[オーバーレイ]の中に入れて、DialogueWindow_Miniの上に配置。
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
Brush > Tint を黒にする。
大きなウィンドウの上に重ねるので、半透明にはしなくていいです。
Brush > Tint > Draw As をRound Boxにする。
Brush > Tint > Outline Settings > コーナー半径を4つとも16.0にする。
ラウンディングタイプをFixed Radiusにする。

階層: YesButtonとNoButton
YesButtonとNoButtonを[Vertical Box]に入れる。
空になった[Horizontak Box]は削除。
[Vertical Box]を2つめの[オーバーレイ]の中に入れます。

YesButtonとNoButtonは、スロット > Size をフィルにする。
Vertical Alignmentを左から2番目にしても良いです。

階層: [Vertical Box]
Paddingを20.0 ※全て
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
※現時点では、Yes ButtonとNo Buttonが大きすぎてハミ出してしまっていますが、後で小さくします。

2つめのオーバーレイの位置を変更して、メインウィンドウの右上に乗せるようにしましょう。

イベントグラフの編集

デフォルトでは「Yes」と「No」が横並びになっていましたが、縦並びに変更しましたので、入力のを修正します。

ノードの編集

・イベント MenuRightとイベント MenuLeftは切っても良いです。

BP_DialogueButton

「Yes」「No」のテキストサイズが大きすぎますので、BP_DialogueButtonで小さくします。
(場所: コンテンツ > TurnBasedJRPGTemplate > Blueprints > UI > Dialogues)

階層: [Text]”テキストブロック”
[Text]”テキストブロック”を選択し、Font > Size を26にする。

その他、下線は階層: Underline、カーソルのアイコンは階層: SelectedImageで変更できます。

SHOPの購入画面UI

BP_ShopBuyDialogue

SHOPの購入画面UIはBP_ShopBuyDialogueです。
ちなみに売却画面はBP_ShopSellDialogue。
(場所: コンテンツ > TurnBasedJRPGTemplate > Blueprints > UI > Dialogues)

階層: [Background]
[Background]を削除する。

階層: [ItemListBackground]
Paddingを6.0にします。
Brush > Image をTex_Window_750x780にする。
名前をItemListWindowに変更。

階層: [DetailsPanelBackground]
Paddingを6.0にします。
Brush > Image をTex_Window_750x780にする。
名前をDetailsPanelWindowに変更。

階層: 追加画像 ItemListWindowBackground
画像を追加し、名前はItemListWindowBackground。
ItemListWindowの上に配置。
Horizontal AlignmentとVertical Alignmentを両方とも一番右。
Brush > Tint を黒にする。
半透明にしたい場合は、Aを0.8くらいにする。
Brush > Tint > Draw As をRound Boxにする。
Brush > Tint > Outline Settings > コーナー半径を4つとも16.0にする。
ラウンディングタイプをFixed Radiusにする。

階層: 複製名前変更 DetailsPanelBackground
ItemListWindowBackgroundを複製して、名前をDetailsPanelBackgroundにする。
DetailsPanelWindowの上に配置。