UIを操作するためのイベントインターフェース[Unity+UI]

UIとプログラムを連携させる時、イベント系のインターフェースを知っているととても簡単に実装できることがあります。ここではどのようなインターフェースがあるかと、簡単なサンプルを作ってみたいと思います。

目次

イベント系インターフェースについて

イベント系のインターフェースは、UIに関する所作を知ることができます。どんなことが出来るかや、インターフェースの実装方法を覚えましょう。

イベントの種類

イベントは以下のようなものがあります。全部覚える必要は無いですが、どんなことが出来るかは頭に入れておくと調べる時に助かるのではないかと思います。

インターフェース名呼ばれるタイミング
IPointerEnterHandlerカーソルが範囲内に入った時
IPointerExitHandlerカーソルが範囲内から出た時
IPointerDownHandler範囲内でマウスボタンを押した時、タップした時
IPointerUpHandlerPointerDown後にマウスボタン・タップ操作で指を離した時
IPointerClickHandlerPointerDown後にマウスボタン・タップ操作で指を離した時
UpHandlerとの違いはカーソル・指の位置が範囲内のままであるかどうか
IBeginDragHandlerドラッグ開始時
IDragHandlerドラッグ中。ドラッグはPointerDown後に押しっぱなしのまま動かす
IEndDragHandlerドラッグ終了時
IDropHandlerドロップした時。
ドロップとは他のオブジェクトでドラッグ状態になったカーソルが、
範囲内で離されることを指す
IScrollHandlerオブジェクトが選択された状態でマウスホイール入力があった時
IUpdateSelectedHandler選択中に毎フレーム発生
ISelectHandler選択された時
マウス・タッチ操作 > PointerDownとほぼ同じタイミング
キー操作 > 方向キーなどでフォーカスが移動した時
IDeselectHandler選択状態が解除された時
マウス・タッチ操作では範囲外でPointerDown入力があったタイミング
IMoveHandler選択状態で方向キーの入力があった時
方向キーはStandaloneInputModuleコンポーネントの[Horizontal][Vertical]
ISubmitHandler選択状態で決定ボタンの入力があった時
決定ボタンはStandaloneInputModuleコンポーネントの[Submit Button]
ICancelHandler選択状態でキャンセルボタンの入力があった時
キャンセルボタンはStandaloneInputModuleコンポーネントの[Cancel Button]

インターフェース実装方法

プログラムでインターフェースを使うには以下の手順で実装します。

  • usingの追加
    • using UnityEngine.EventSystems;
  • 利用するインターフェースを追加
    • 下のサンプルではIPointerClickHandlerを追加
  • インターフェースに対応したメソッドを追加
    • インターフェースはクラス内に対応したメソッドを実装する必要があります(必須)

画像(UI.Image)をクリックされたときにログを表示させる

using UnityEngine;
using UnityEngine.EventSystems;

public class ClickSample : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("Click");
    }
}

対応したメソッドについて

メソッドに関しては覚えておくに越したことはありませんが、Visual StudioやVSCodeを使っている場合、インターフェースを加えた段階で赤い波線が表示されます。これは対応したメソッドが実装されていないというエラーです。エディター機能を使って補完することで簡単に対応メソッドを実装することができます。

  • 赤い波線にマウスをホバーさせる
  • 補完処理を呼び出す
    • VisualStudio:考えられる修正内容>インターフェースを実装
    • VSCode:Quick Fix>インターフェースを実装します
  • 内容を書き換えて完了

実際に使ってみた

イベントを使って簡単なサンプルを作ってみましょう。

マウスホバーで色が変わるサンプル

作ったImageに下記スクリプトを貼り付けてゲームを実行すると、色が変化します。複数のインターフェースを実装する場合、カンマを使って繋いでください。下図はマウス映ってないですが、マウスが画像にかぶると色が変わっています

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ChangeColor : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    public void OnPointerEnter(PointerEventData eventData)
    {
        GetComponent<Image>().color = Color.red;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        GetComponent<Image>().color = Color.white;
    }
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次