UIデザインで重宝するグリッドパネルの使い方を解説します。
今回はHD-2D版『ドラゴンクエストIII そして伝説へ…』の基本メニューUIを真似てみます。
左上の「どうぐ」「じゅもん」らが表示されている部分です。
ウィジェットブループリントを作成して編集
コンテンツブラウザで右クリックして、
ユーザーインターフェース > ウィジェットブループリント を選択。
親クラスはユーザーウィジェット。
名前はWBP_HUDにしました。
キャンバスパネル→サイズボックス→オーバーレイ
WBP_HUDを開き、デザイナー画面にキャンバスパネルを配置します。
キャンバスパネルの中にサイズボックスを配置します。
アンカー:左上
位置X:100 位置Y:60
サイズX:450 サイズY:200
サイズボックスの中にオーバーレイを配置します。
Padding:0
Horizontal Alignment: 一番右(横全体)
Vertical Alignment:一番右(縦全体)
枠と背景
オーバーレイの中に画像を2つ配置します。
画像の名前は、Image_BackgroundとImage_Windowです。
複数の画像を同じ階層に配置した場合、階層で下に表示されている方が上に重なって表示されます。
今回の画像は背景のImage_Backgroundと枠のImage_Windowですから、Image_Windowを上に重ねたいため、階層ではImage_Windowを下に配置します。
何を言っているか不明だった場合↓のように配置してください。
Image_Background
Horizontal Alignment: 一番右(横全体)
Vertical Alignment:一番右(縦全体)
アピアランス > Brush > Tint R:0 G:0 B:0 A:0.8
アピアランス > Brush > Draw As:Round Box
Outline Settings > コーナー半径:全て18.0
Outline Settings > 輪郭 > ラウンディングタイプ:Fixed Radius
Image_Window
Padding: 6.0
Horizontal Alignment: 一番右(横全体)
Vertical Alignment:一番右(縦全体)
アピアランス > Brush > Tint R:0 G:0 B:0 A:0
アピアランス > Brush > Draw As:Round Box
Outline Settings > コーナー半径:全て16.0
Outline Settings > 輪郭 R:1.0 G:1.0 B:1.0 A:1.0
Outline Settings > 輪郭 > 幅:4.0
Outline Settings > 輪郭 > ラウンディングタイプ:Fixed Radius
グリッドパネル
オーバーレイの中にグリッドパネルを配置します。
均一グリッドパネルではなく、グリッドパネルです。
Padding: 20.0
Horizontal Alignment: 一番右
Vertical Alignment:一番右
■枠の数と幅の指定
Columnは列、Rowは行です。
列の設定。
フィルルール > Column Fill:4配列エレメント
インデックス[0]:0.3
インデックス[1]:1.0
インデックス[2]:0.3
インデックス[3]:1.0
↓こういう意味です。
4列にして枠の幅を指定しました。
幅0.2の狭い枠はカーソル表示用です。
行の設定。
フィルルール > Row Fill:3配列エレメント
インデックス[0]:1.0
インデックス[1]:1.0
インデックス[2]:1.0
↓こういう意味です。
同じ幅の3行です。
列と行の幅は1.0を基準にして、狭くしたい場所の値を小さくします。
これで列と行の設定ができたわけです。
列(Column)の番号と行(Row)の番号で枠の位置を示します。
左上の枠がRow:0 Column:0
「どうぐ」の枠がRow:0 Column:1
「そうび」の枠がRow:1 Column:1
右下の「さくせん」の枠がRow:2 Column:3
という具合です。
■ボタンとテキスト
これらの枠に「どうぐ」「じゅもん」「そうび」「とくぎ」「おもいで」「さくせん」のボタンを配置します。
まずは「どうぐ」。
グリッドパネルの中にボタンを配置します。
名前はButton_Itemにしました。
Horizontal Alignment: 一番左(左配置)
Vertical Alignment:左から二番目(中央配置)
アピアランス > Normal Padding:0
アピアランス > Pressed Padding:0
このボタンの中にテキストを配置します。
名前はText_Itemにしました。
Horizontal Alignment: 一番左(左配置)
Vertical Alignment:左から二番目(中央配置)
コンテンツ > Text:どうぐ
「どうぐ」の位置は、上から1番目、左から2番目の枠です。
Button_Itemの詳細でRow:0 Column:1にすれば、上から1番目、左から2番目に入ります。
デザイナーの画面上で「上」「下」「左」「右」をクリックして直感的に移動させることもできます。
このButton_Itemを複製し、名前変更して他のボタン&テキストにします。
次は「そうび」、Button_Itemを複製して、名前をButton_EquipmentとText_Equipmentにします。
Text_Equipmentの コンテンツ > Text を「そうび」に変更。
「そうび」の位置は、上から2番目、左から2番目の枠です。
Button_Equipmentの詳細でRow:1 Column:1にすれば、上から2番目、左から2番目に入ります。
ここまでは見やすくするためにボタンの色をつけていますが、ボタンの色は必要ありません。
ボタンの アピアランス > Style > Tint A:0 にして透明化しましょう。
この要領で、「じゅもん」「とくぎ」「おもいで」「さくせん」も作成します。
名前はMagic、Skill、Memory、Operationにしました。
テストプレイで表示してみるとこうなります。
グリッドパネルを使うことで、キレイに配置できました。
グリッドパネルはステージ選択画面やショップ画面などでも使いやすいです。
カーソル画像の追加
カーソル画像のインポート
ドラゴンクエストIIIっぽいカーソル画像(PNG)を用意しました。
PNGやJPEGはコンテンツブラウザにドラッグ&ドロップでインポートできます。
このテクスチャの名前はT_Cursor_DQ3にしました。
ウィジェットブループリントの編集
WBP_HUDを開く。
カーソル画像を配置するわけですが、「どうぐ」「じゅもん」「そうび」「とくぎ」「おもいで」「さくせん」の6ヵ所全てに配置します。
1つのカーソルを動かしているわけではなく、6つのカーソルの中で選択されているカーソルだけが表示されて、動いているように見えるわけです。
まず「どうぐ」用のカーソルを作ります。
グリッドパネルの中に画像を配置。名前はCursor_Itemにします。
Horizontal Alignment: 一番左(左配置)
Vertical Alignment:左から二番目(中央配置)
アピアランス > Brush > Image:T_Cursor_DQ3
アピアランス > Brush > Image Size X:50.0 Y:50.0
グリッドパネル内での位置は上から1番目、左から1番目になりますから、Cursor_Itemの詳細でRow:0 Column:0にします。
デザイナー画面上で「上」「下」「左」「右」を使って配置しても構いません。
選択されているカーソル以外は非表示にしますから、Visibilityのデフォルト設定はHiddenにします。
動作 > Visibility > Hidden
このCursor_Itemを複製して名前変更して他のカーソルにします。位置も移動させます。
Cursor_Equipment
Cursor_Magic
Cursor_Skill
Cursor_Memory
Cursor_Operation
テストプレイで表示確認。
Visibilityが全てHiddenのままだとカーソルが表示されませんから、Cursor_ItemだけVisibleにして表示を確認します。
確認を終えたらHiddenに戻します。
コメント