Unity UIにアイテムを整理して表示する
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} クリック!");
}
}
スクリプトをアタッチします。

実行結果

ディスカッション
コメント一覧
まだ、コメントがありません