🏞️

【Unity】前後関係を考慮したUIの配置【uGUI】

2020/12/25に公開

はじめに

タワーディフェンスを作ろうの記事第6回目です。
いままではコーディングを解説してきましたが、一通りの機能が出そろったので次はUIを作ってみましょう。

今までの記事はこちら。
https://zenn.dev/supple/articles/2012a0ebfe13181286af
https://zenn.dev/supple/articles/64c9f9aaf2e7ca6f7151
https://zenn.dev/supple/articles/e4a5a7bb57922c
https://zenn.dev/supple/articles/884d2439cd034a
https://zenn.dev/supple/articles/9a62ab655fc70d

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 上の位置だけでUIを作っていきたいと思います。

Hierarchyの描画順

uGUIではHierarchyの上にあるオブジェクトが奥に、下にあるオブジェクトが手前に表示されます。

レイヤーに分ける

ゲーム画面を作るときには描画の要素ごとにレイヤー分けすると作りやすいです。
具体的には、要素ごとに空のGameObjectを作り、その下にオブジェクトを置くようにします。

こうしておく事でキャラが背景の奥に行ってしまったり、UIの手前に来てしまったりする事を防ぐことができます。

背景レイヤー

BgLayerには背景の画像を置きます。

ユニットレイヤー

UnitLayerには拠点ユニットを置きます。
出撃した通常ユニットもUnitLayerの下に置くようにします。

UIレイヤー

UiLayerにはボタンやゲージなどのUIを置きます。

エフェクトレイヤー

EffectLayerには各種演出・エフェクトを置きます。

最終的なUI

これらのレイヤーを合わせるとゲーム画面になります。

プレイ動画

第1回~第6回までの内容をまとめで出来上がったゲームのプレイ動画です。

記事にしていない内容もちょくちょく入っていますが、大体こんな感じのゲームが出来上がります。

最後に

画像素材一式はデザイナーの友人に作ってもらいました、ありがとうございました。
今回でタワーディフェンスを作ろうの記事は最後になります。
プレイ動画でみられるドラッグ&ドロップでユニットを配置したりしている部分など、記事で解説していない内容もありますがそこら辺は折を見てTips記事として載せていこうかと思います。

Discussion