こんにちは、とまです。
Unityで2Dゲームを作っていると、
「ゲーム画面を作りたいけど、UIはどうやって作ればいいんだろう？」と悩むことがあります。
今回は、放置系の街づくりゲームを例にして、ゲームに必要なUIの基本的な構成を作っていきます。
まずは「どんなUIが必要なのか」を決めて、画面上に配置できる状態を目指しましょう。
Canvasを作成する
UnityでUIを作る場合、まず必要になるのが「Canvas」です。
Hierarchyで右クリックして、
UI → Canvas
を選択します。
するとHierarchyにCanvasが追加されます。
Canvasは、ゲーム画面にUIを表示するための土台のようなものです。
作成したCanvasを選択し、Inspectorを確認します。
通常は、
Render Mode
Screen Space – Overlay
にしておけば問題ありません。
これでゲーム画面の上にUIを表示できます。
Canvas Scalerを設定する
ここは非常に重要です。
スマートフォン向けゲームでは、端末によって画面の大きさや縦横比が違います。
例えば、
1920 × 1080
1280 × 720
2340 × 1080
など、さまざまな画面サイズがあります。
UIを特定の画面サイズだけを基準に作ってしまうと、別の画面サイズで表示したときに、
「ボタンが画面外に出てしまった」
「文字が小さすぎる」
「UI同士が重なってしまった」
といった問題が発生することがあります。
そこでCanvasにある「Canvas Scaler」を設定します。
現在はスマホ向けゲームを作成中ですが、そのおすすめの設定は以下です。
UI Scale Mode
Scale With Screen Size
Reference Resolution
X = 1920
Y = 1080
Screen Match Mode
Match Width Or Height
Match
0.5
「Scale With Screen Size」にすると、基準となる画面サイズに合わせUI全体を拡大・縮小してくれます。
Reference Resolutionは、UIを作るときの基準解像度です。
今回は、
1920 × 1080
を基準にします。
実際のスマートフォンの解像度が1920×1080でなくても問題ありません。
「このサイズを基準にUIを設計する」という意味です。
Anchorを使ってUIを崩れにくくする
Canvas Scalerだけではなく、もう一つ重要なのが「Anchor」です。
Anchorは簡単にいうと、
「画面のどこを基準にUIを配置するか」
を決める仕組みです。
例えば、画面左上に表示したい「DayText」を考えてみます。
単純に位置だけを指定すると、画面サイズが変わったときに
位置がずれてしまう可能性があります。
そこでAnchorを「左上」に設定します。
すると、
のように、画面の左上を基準に配置できます。
というように、UIの役割に合わせてAnchorを設定すると、画面サイズが変わっても崩れにくくなります。
特にスマートフォン向けゲームでは、位置を数字だけで固定するのではなく、Anchorを意識することが大切です。
HUDを作る
次にゲーム中に常に表示しておきたい情報をまとめる「HUD」を作ります。
Canvasの子にPanelを作り、名前を、HUDにします。
Hierarchyは、
Canvas
└── HUD
となります。
HUDには、
- 日数
- 時刻
- 所持資源
などを表示します。
画面上部に配置するため、Anchorも上側を基準にします。
DayTextとTimeTextを作る
HUDの子にTextMeshProのテキストを追加します。
Hierarchyで、
HUD → 右クリック → UI → Text – TextMeshPro
を選択します。
名前を、
DayText
にします。
もう一つ同じように作り、
TimeText
とします。
最初は仮の文字として、
Day 1
や、
12:00
と表示しておけば十分です。
後からC#スクリプトと接続して、ゲーム内の日数や時間を表示するようにします。
ResourcePanelを作る
次に、プレイヤーが持っている資源を表示する場所を作ります。
HUDの子にPanelを追加し、
ResourcePanel
と名前を変更します。
Hierarchyは、
HUD
├── DayText
├── TimeText
└── ResourcePanel
となります。
ResourcePanelの中に、資源表示用のUIを4つ作ります。
ResourcePanel
├── Wood
├── Stone
├── Ore
└── Money
最初はTextMeshProを使って、
のように表示しておけばOKです。
後からアイコンを追加して、
木材アイコン 100
石材アイコン 50
鉱石アイコン 20
お金アイコン 1000
のようなデザインに変更できます。
BottomMenuを作る
次に画面下部に表示するメニューを作ります。
Canvasの子にPanelを追加して、
BottomMenu
と名前を変更します。
Anchorは画面下側を基準にします。
イメージは、
です。
BottomMenuの中にButtonを4つ作ります。
BottomMenu
├── BuildButton
├── ProductionButton
├── UpgradeButton
└── OtherButton
ボタンの文字は、
建築
生産
強化
その他
としておきます。
Horizontal Layout Groupでボタンを並べる
4つのボタンを手作業で配置することもできます。
しかし、UnityにはUIを自動的に並べてくれる便利な機能があります。
それが「Horizontal Layout Group」です。
BottomMenuを選択して、
Add Component → Horizontal Layout Group
を追加します。
すると、子オブジェクトのButtonが自動的に横並びになります。
[ 建築 ] [ 生産 ] [ 強化 ] [ その他 ]
のような状態を作りやすくなります。
このようなLayout Groupを使うと、ボタンの数を変更したときにも調整しやすくなります。
画面サイズが変わっても崩れにくいUIにするポイント
ここまで作ったUIを、スマートフォンのさまざまな画面サイズで使えるようにするには、主に3つのポイントを意識します。
Canvas Scalerを使う
CanvasのCanvas Scalerを、
UI Scale Mode
Scale With Screen Size
Reference Resolution
1920 × 1080
Screen Match Mode
Match Width Or Height
Match
0.5
にします。
Anchorを設定する
「画面のどこに置きたいのか」を考えてAnchorを設定します。
例えば、
DayText
→ 左上
ResourcePanel
→ 右上
BottomMenu
→ 下
BuildingInfoPanel
→ 右側
というようにします。
Layout Groupを活用する
複数のUIを並べる場合は、なるべく手作業で位置を固定するのではなく、
Horizontal Layout Group
Vertical Layout Group
Grid Layout Group
などを利用します。
例えば4つのメニューボタンなら、
Horizontal Layout Group
を使うことで、横並びを自動化できます。
この3つを意識するだけでも、UIが画面サイズの変更によって大きく崩れる問題をかなり減らせます。
まずはUIの「骨組み」を作ろう
今回の段階では、UIのデザインを完成させる必要はありません。
まずは、
Canvas
├── HUD
├── BottomMenu
├── BuildPanel
├── BuildingInfoPanel
└── Popup
という大きな構造を作ることを優先しましょう。
その後、
HUD
↓
日数・時間・資源
BottomMenu
↓
建築・生産・強化・その他
BuildPanel
↓
建築カテゴリー・建物一覧
BuildingInfoPanel
↓
建物情報・強化・撤去
Popup
↓
確認ダイアログ
というように、それぞれの役割を決めていきます。
そしてUIの骨組みが完成したら、次の段階でC#と接続します。
最終的には、
建築ボタンを押す → 建物一覧が表示される → 建物を選択する
→ グリッドが表示される → マスをタップする → 資源を消費して建築する
というゲームの流れにつなげていきます。
最初からすべてを完成させようとせず、
まずは「UIが正しい場所に表示されるところ」まで作ってみるのがいいかと思います。
ゲーム設計が、後から変わっちまった…みたいなこともよくあります。
ですので、UIについて本格的に悩むのは、意外と完成目前とかでも大丈夫ですよ！
本日はここまでです！お疲れさまでした～！
それでは、またお会いしましょう～
お付き合いいただきありがとうございます。
コメント