はじめに
前回は、戦闘システム全体の設計を説明しました。
今回からは、実際にシステムを構築していきます。
まずはプレハブから作っていきましょう。
プレハブの作成
allyPortraitPrefab
ヒエラルキービューで右クリックし、
UI → Panel
を選択してください。
作ったパネルの名前を「allyPortraitPrefab」としてください。
アタッチされているImageコンポーネントは削除してください。
また、子オブジェクトとしてTextとPanelを追加してください。
それぞれ名前を「Text」「PortraitImage」とします。
このような階層になっています。
ここからはインスペクターの設定をしていきましょう。
allyPortraitPrefab
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→250
Height
→250
次に、新しくLayout Elementコンポーネントを追加し、以下のように変更してください。
Preferred Width
→ true, 160
Preferred Height
→ true, 160
Layout Priority
→ 1
Text
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, -100, 0)
Width
→160
Height
→30
また、Textコンポーネントを以下のように変更してください。
Font Size
→16
Alignment
→middle center
PortraitImage
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→250
Height
→250
ここまで設定し終えたら、プロジェクトタブへドラック＆ドロップし、プレハブ化してください。
enemyPortraitPrefab
ヒエラルキータブで右クリックし、
UI → Panel
を選択してください。
また、子オブジェクトとしてTextを用意してください。
以下のような構造です。
インスペクターの設定をしましょう。
enemyPortraitPrefab
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→250
Height
→250
次に、新しくLayout Elementコンポーネントを追加し、以下のように変更してください。
Preferred Width
→ true, 160
Preferred Height
→ true, 160
Layout Priority
→ 1
Text
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, -100, 0)
Width
→160
Height
→30
また、Textコンポーネントを以下のように変更してください。
Font Size
→16
Alignment
→middle center
ここまで設定し終えたら、プロジェクトタブへドラック＆ドロップし、プレハブ化してください。
magicArrow
ヒエラルキータブで右クリックし、
UI → Panel
を選択してください。
名前を「magicArrow」としてください。
また、子オブジェクトとしてTextとImageを用意してください。
名前を「Text」「Dot」とします。
このような構造です。
インスペクターの設定をしましょう。
magicArrow
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→220
Height
→50
また、「MagicPageArrow」という名称のスクリプトを作成、以下をコピペした後アタッチしてください。
using UnityEngine;
public class MagicPageArrow : MonoBehaviour
{
public bool isNext = false;
}
Text
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(20, 0, 0)
Width
→175
Height
→100
また、Textコンポーネントを以下のように変更してください。
Text
→(空欄)
Font Size
→40
Alignment
→middle center
Dot
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0, 0.5)
Max (0, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(10, 0, 0)
Width
→16
Height
→16
また、チェックボックスから非アクティブにしておいてください。
ここまで設定し終えたら、プロジェクトタブへドラック＆ドロップし、プレハブ化してください。
MenuOption
ヒエラルキータブで右クリックし、
UI → Panel
を選択してください。
名前を「MenuOption」とします。
また子オブジェクトとしてTextとImageを用意してください。
名前を「Label」「Dot」とします。
このような構造です。
インスペクターの設定に行きます。
MenuOption
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→220
Height
→50
次に、新しくLayout Elementコンポーネントを追加し、以下のように変更してください。
Preferred Width
→ true, 320
Preferred Height
→ true, 48
Layout Priority
→ 1
Label
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(20, 0, 0)
Width
→175
Height
→100
また、Textコンポーネントを以下のように変更してください。
Font Size
→16
Alignment
→middle center
Dot
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0, 0.5)
Max (0, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(10, 0, 0)
Width
→16
Height
→16
また、チェックボックスから非アクティブにしておいてください。
ここまで設定し終えたら、プロジェクトタブへドラック＆ドロップし、プレハブ化してください。
PlayerStatusEntry
ヒエラルキータブで右クリックし、
UI → Panel
を選択してください。
名前を「PlayerStatusEntry」とします。
子オブジェクトとして、Textオブジェクトを4つ追加してください。
名前を「Name」「HP」「MP」「Level」とします。
インスペクターの設定に移ります。
PlayerStatusEntry
Rect Transformの値を、以下のように変更してください。
Anchors
→Min (0.5, 0.5)
Max (0.5, 0.5)
Pivot
→(0.5, 0.5)
Pos
→(0, 0, 0)
Width
→0
Height
→100
また、Imageコンポーネントに以下の画像をアタッチしてください。
一旦、この画像のインスペクターから、Sprite Editorを開いてください。
そこで、以下のように変更してください。
Border
L:21 T:21 R:21 B:21
完了したらApplyを押し、PlayerStatusEntryのインスペクターに戻ってください。
Imageコンポーネントの「Image Type」を、「Sliced」にしてください。
次に、新たに「Vertical Layout Group」コンポーネントをアタッチしてください。
以下のように変更してください。
最後に、新たに「PlayerStatusUI」というスクリプトを作成し、以下をコピペ後アタッチしてください。
//PlayerStatusUI.cs
using UnityEngine;
using UnityEngine.UI;
public class PlayerStatusUI : MonoBehaviour
{
public Text nameText;
public Text hpText;
public Text mpText;
public Text levelText;
public void UpdateFrom(PlayerStats p)
{
if (p == null || p.stats == null) return;
if (nameText != null) nameText.text = p.stats.charName;
if (hpText != null) hpText.text = $"HP {p.stats.hp}/{p.stats.maxHP}";
if (mpText != null) mpText.text = $"MP {p.stats.mp}/{p.stats.maxMP}";
if (levelText != null) levelText.text = $"Lv {p.stats.level}";
}
}
アタッチ後、NameTextからLevelTextまでの各項目に、子オブジェクトを順に割り当ててください。
子オブジェクト
4つの子オブジェクトすべて、以下のように変更してください。
Rect Transformの値を、以下のように変更してください。
Pivot
→(0.5, 0.5)
PosZ
→0
Width
→80
Height
→25
また、Textコンポーネントを以下のように変更してください。
Font Size
→16
Alignment
→middle center
ここまで設定し終えたら、プロジェクトタブへドラック＆ドロップし、プレハブ化してください。
おわり
今回は、プレハブの作成を行いました。
次回は、スクリプトの作成を行います。