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

2021年3月17日

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

レイアウトの自動配置

オブジェクトの配置

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

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

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

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

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

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

Imageオブジェクトあと3つ複製し、全部で4つにします。
複製の仕方は、複製したいオブジェクトを選択し、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 : マウスがオブジェクトの位置から離れた時(クリックはしない)
など

Event Typeイベント発生のタイミング
PointerEnterポインターがオブジェクトに乗ったとき
PointerExitポインターがオブジェクトから離れたとき
PointerDownポインターがオブジェクトを押下したとき
PointerUpポインターを押下状態から離したとき
PointerCheckオブジェクト上でポインターを押下し、同一のオブジェクト上で離したとき
Dragオブジェクトがドラッグされている間
※クリックしてポインターを動かせば、実際にオブジェクトが移動していなくても発生
Dropドラッグされてきた他のオブジェクトが、範囲内でドラッグ解除されたとき
Scrollオブジェクトの範囲内でマウスホイールスクロールをしたとき
UpdateSelected選択中のオブジェクトで毎フレーム発生
※選択可能なオブジェクトでのみ発生
※Imageなどで使用する場合はSelectableコンポーネント等の追加が必要
Selectオブジェクトが選択されたとき
※選択可能なオブジェクトでのみ発生
Deselect選択中のオブジェクトで、選択状態が解除されたとき
※選択可能なオブジェクトでのみ発生
Moveキー入力による移動イベント(左、右、上、下など)が起こったとき
(選択状態で方向キーの入力があったとき)
InitializePotentialDragドラッグ対象が見つかったとき
(ドラッグ対象をクリックしたとき)
BeginDragドラッグを開始したとき
EndDragドラッグが終了したとき
(ドラッグ状態を解除したとき)
Submitサブミットボタン(リターンキーやスペースキー)が押されたとき
※選択可能なオブジェクトでのみ発生
Cancelキャンセルボタン(エスケープキーなど)が押されたとき

今回は、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} クリック!");
    }
}

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

実行結果

2021年3月17日Unity

Posted by hidepon