はじめに
前回は、スクリプトの作成を行いました。
今回は、UIの作成を行います。
先に全体像を示しておくと、以下のような構造となります。
UIの作成
ヒエラルキー上で右クリックし、
UI → Canvas
を選択してください。
その子オブジェクトとして、空のオブジェクトを作成してください。
名前を、「BattleRoot」とします。
BattleRootには、全部で9個の子オブジェクトを追加します。
Panelオブジェクトを9個追加してください。
名前を、「Background」「PlayerStatusPanel」「EnemiesContainer」「AlliesContainer」「MessageWindow」「ActionMenuPanel」「MagicMenupanel」「ItemMenuPanel」「TargetMenuPanel」としてください。
それぞれ。細かい設定に入りましょう。
Background
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→1920
Height
→1080
また、ImageコンポーネントのColorを、任意の色にしてください。
PlayerStatusPanel
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 1)
Max (0.5, 1)
Pivot
→(0.5, 1)
Pos
→(0, -12, 0)
Width
→400
Height
→170
また、Horizontal Layout Groupコンポーネントを追加し、以下のように設定してください。
EnemiesContainer
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.74)
Max (0.5, 0.74)
Pivot
→(0.5, 0.5)
Pos
→(0, -90, 0)
Width
→1400
Height
→400
また、Horizontal Layout Groupコンポーネントを追加し、以下のように設定してください。
AlliesContainer
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.55)
Max (0.5, 0.55)
Pivot
→(0.5, 0.5)
Pos
→(0, -240, 0)
Width
→1400
Height
→200
また、Horizontal Layout Groupコンポーネントを追加し、以下のように設定してください。
MessageWindow
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.02, 0)
Max (0.98, 0.14)
Pivot
→(0.5, 0)
Pos
→(500, -20, 0)
Bottom
→20
Right
→500
また、Imageコンポーネントを追加し、以前登場した以下の画像をアタッチしてください。
Image TypeはSlicedにしてください。
次に、子オブジェクトとして、Textオブジェクトを追加します。名前を、「MessageText」としてください。
MessageTextについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0, 0)
Max (1, 1)
Pivot
→(0.5, 0.5)
Pos
→(0, -240, 0)
Left,Right
→(20,20)
Top,Bottom
→(10,10)
ActionMenuPanel
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.12)
Max (0.5, 0.12)
Pivot
→(0.5, 0)
Pos
→(0, 170, 0)
Width
→560
Height
→50
Imageコンポーネントに、以下の画像をアタッチしてください。
ImageTypeをSlicedにしてください。
またHorizontal Layout Groupコンポーネントを追加し、以下のように設定してください。
次に子オブジェクトの設定をします。
まず、Panelオブジェクトをアタッチし、名前を「Option0」としてください。付属しているImageコンポーネントを削除してください。
Option0
Option0について。Rect Transformの値を以下のように変更してください。
Pivot
→(0.5, 0)
PosZ
→0
Width
→140
Height
→50
Option0にImageとTextの2つのオブジェクトを追加し、名前を「Dot」と「Text」にしてください。
Dotについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(-45, 0, 0)
Width
→16
Height
→16
Textについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→140
Height
→35
また、Textコンポーネントについて、以下のように設定してください。
Font Size
→16
Alignment
→middle center
その他子オブジェクト
ここまで設定できたら、Option0を複製し、4つにしてください。
そして「Option1」から「Option3」まで名前を変更してください。
現状。ActionMenuPanelについてはこのような構造になっています。
また、各TextコンポーネントのText内容について、Option0から順に、「こうげき」「まほう」「アイテム」「にげる」としてください。
MagicMenuPanel
Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.45)
Max (0.5, 0.45)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→720
Height
→450
また、Imageコンポーネントに以下の画像をアタッチし。ImageTypeをSlicedにしてください。
子オブジェクト
次に、子オブジェクトを作成します。
Panelオブジェクトを追加し、名前を「MagicGridContainer」としてください。
また、Imageコンポーネントを削除してください。
これについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→720
Height
→480
またGrid Layout Groupを追加し、以下のように設定してください。
ItemMenuPanel
Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.12)
Max (0.5, 0.12)
Pivot
→(0.5, 0)
Pos
→(-520, -40, 0)
Width
→420
Height
→840
また、Imageコンポーネントに以下の画像をアタッチし。ImageTypeをSlicedにしてください。
子オブジェクト
Panelオブジェクトを追加し、名前を「ItemGridContainer」としてください。
また、Imageコンポーネントを削除してください。
これについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→420
Height
→840
またGrid Layout Groupを追加し、以下のように設定してください。
TargetMenuPanel
Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(500, -150, 0)
Width
→3000
Height
→380
また、Imageコンポーネントに以下の画像をアタッチし。ImageTypeをSlicedにしてください。
子オブジェクト
Panelオブジェクトを追加し、名前を「TargetListContainer」としてください。
また、Imageコンポーネントを削除してください。
これについて、Rect Transformの値を以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→300
Height
→360
またVertical Layout Groupを追加し、以下のように設定してください。
ここまで来たら、 BattleRoot全体を非アクティブにしてください 。
スクリプトのアタッチ
一旦Canvasの外の話をします。
2つ空のGameObjectを作り、名前を「BattleManager」「PartyManager」にしてください。
BattleManager
以下のように、各欄にアタッチしてください。
分かりにくいため説明しておくと、ActionOptionsについては、子オブジェクトのTextを割り当ててください。
PartyManager
以下のように設定してください。
おわり
今回は、UI系の作成をしました。
次回は、エンカウント処理を実装します。