Unity UIにアイテムを整理して表示する

2021年3月17日2021年3月18日

CanvasにいくつかのUIオブジェクトを配置し、均等に並ぶようにしてみましょう。
これは、位置を都度手作業で調整するのではなく、Unity側に自動で配置してもらう仕組みになります。

レイアウトの自動配置

オブジェクトの配置

UIメニューからPanelを追加します。

CanvasオブジェクトのCanvas Scalerを次のように変更します。
これは、ゲーム画面のサイズ変更があった場合、UIの縮尺も合わせるためです。

Panelオブジェクトを選択し、さらに子オブジェクトとしてPanelを追加します。

作成されたPanelの名前を「MainPanel」に変更します。

MainPanelオブジェクトを選択し、さらに子オブジェクトとして、Imageを作成します。

作成されたImageオブジェクトのImageコンポーネント-> カラープロパティで色を赤に変更します。

Imageオブジェクトあと３つ複製し、全部で４つにします。
複製の仕方は、複製したいオブジェクトを選択し、Ctlを押下したままDキーを押すとできます。（Macの場合は、Cmdキーを押しながらになります）

パネル内のアイテムを整列させる

今回は、垂直（Vertical)に整列させます。
Vertical Layout Groupコンポーネントを追加します。

このように縦に整列できましたね。

調整を進めましょう。
Paddingで、上下左右に隙間を作成します。
Control Child Sizeで、子オブジェクトのサイズを自動調整できるようにします。

それぞれのImageオブジェクトのColorを変更します。

ボタン以外のUIオブジェクトのクリックイベント作成

Event Triggerを使う方法

最初にクリックされた時のイベントハンドラ（メソッド）をpublicで作成しておきます。

using UnityEngine;

public class ClickEvent : MonoBehaviour
{
    public void OnClickDown()
    {
        Debug.Log($"{gameObject.name} クリック！");
    }
}

作成したスクリプトをImageオブジェクトにアタッチします。

Event Trigger コンポーネントをアタッチします。

Event Trigger コンポーネントに新しくEventのタイプを追加します。

今回は、マウスでクリックされた時のイベントを作成します。

他には、次のようなものがあります。
Pointer Enter : マウスがオブジェクトの上に来た時（クリックはしない）
Pointe Exit : マウスがオブジェクトの位置から離れた時（クリックはしない）
など

今回は、PointerDown（マウスが押された瞬間）を選択します。

イベントが発生した時のイベントハンドラ（メソッド）を登録します。

メソッドが記述されているスクリプトをドラッグ&ドロップします。（教科書では、オブジェクト

実行結果

イベントをスクリプトだけで実行する方法

次のようなスクリプトを作成します。
EventSystemsネームスペースの利用を宣言します。
IPointerDownHandlerインターフェースを実装します。
クラスの行の最後に、IPointerDownHandlerと入力し、インテリセンスでインターフェースの実装を実行すると、イベントハンドラが自動作成されます。

using UnityEngine;
using UnityEngine.EventSystems;

public class ClickEventOnlyScript : MonoBehaviour, IPointerDownHandler
{
    public void OnPointerDown(PointerEventData eventData)
    {
        Debug.Log($"{gameObject.name} {eventData.position} クリック！");
    }
}

スクリプトをアタッチします。

実行結果