【Unity】前後関係を考慮したＵＩの配置【uGUI】
はじめに
タワーディフェンスを作ろうの記事第６回目です。
いままではコーディングを解説してきましたが、一通りの機能が出そろったので次はＵＩを作ってみましょう。
今までの記事はこちら。
uGUIとは
UnityのUIはuGUIで作ります。
uGUIというのはUnityで標準で搭載されているUI描画システムのことです。
昔は標準的なUIが無く、EasyGUIやNGUIといったアセットが使われていましたが2020年現在ほぼuGUIに一本化されています。
uGUIを使うという事は、Unityで普通にUIを作る事だと思って差し支えありません。
描画の前後関係について
uGUIを扱ううえでまず鬼門となるのが描画順に関わるパラメーターの多さです。
- Camera Depth
- Sorting Layer
- Order in Layer
- Transform のZ座標
- Hierarchy 上の位置
これが全部描画順に関わる要素になります。
これを一気に理解しようと思うと頭がこんがらがってしまいますが、Hierarchy 上の位置だけ分かっていれば何とかなることがほとんどです。
今回もHierarchy 上の位置だけでＵＩを作っていきたいと思います。
Hierarchyの描画順
uGUIではHierarchyの上にあるオブジェクトが奥に、下にあるオブジェクトが手前に表示されます。
レイヤーに分ける
ゲーム画面を作るときには描画の要素ごとにレイヤー分けすると作りやすいです。
具体的には、要素ごとに空のGameObjectを作り、その下にオブジェクトを置くようにします。
こうしておく事でキャラが背景の奥に行ってしまったり、ＵＩの手前に来てしまったりする事を防ぐことができます。
背景レイヤー
BgLayerには背景の画像を置きます。
ユニットレイヤー
UnitLayerには拠点ユニットを置きます。
出撃した通常ユニットもUnitLayerの下に置くようにします。
ＵＩレイヤー
UiLayerにはボタンやゲージなどのＵＩを置きます。
エフェクトレイヤー
EffectLayerには各種演出・エフェクトを置きます。
最終的なＵＩ
これらのレイヤーを合わせるとゲーム画面になります。
プレイ動画
第１回～第６回までの内容をまとめで出来上がったゲームのプレイ動画です。
記事にしていない内容もちょくちょく入っていますが、大体こんな感じのゲームが出来上がります。
最後に
画像素材一式はデザイナーの友人に作ってもらいました、ありがとうございました。
今回でタワーディフェンスを作ろうの記事は最後になります。
プレイ動画でみられるドラッグ＆ドロップでユニットを配置したりしている部分など、記事で解説していない内容もありますがそこら辺は折を見てＴｉｐｓ記事として載せていこうかと思います。
Discussion