更新

2018/11/1 続きの記事を書きました
【Unity】UGUIでuiの上にカーソルが重なったらメッセージを出すその2

概要

よくアイコンの上にマウスカーソルを重ねるとポップアップでメッセージが表示されるみたいなことをやりたくて試しにuguiを使って作ってみました。

uguiでuiの上にマウスが乗ったらメッセージを出すみたいなことがやりたくて朝からやってやっとできた pic.twitter.com/NaDMQ5e4gi
— ダリア (@daria_nicht) 2018年10月28日

○使うもの

・IPointerEnterHandler
uGUIで作成したuiの上にマウスカーソルが重なったときに呼ばれるイベントOnPointerEnterを呼ばれるようにするインターフェース。
一度重なったら2回目は呼ばれず、再び同じuiでこのイベントを呼ぶためには一度uiから離れるか他のuiに重なる必要がある。

・IPointerExitHandler
上のイベントと逆で一度重なったuiから離れたり他のuiに重なったときに呼ばれるイベントOnPointerExitを呼ばれるようにするインターフェース。

サンプルコード


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

public class HelpBox : MonoBehaviour , IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] private string _helpMessage;

    [SerializeField] private Text _text;
    private const Vector2 POPUP_OFFSET = new Vector3(0, 10);
    public void OnPointerEnter(PointerEventData eventData)
    {
        _text.transform.position = eventData.position + POPUP_OFFSET;
        _text.text = _helpMessage;
        _text.transform.gameObject.SetActive(true);

    }

    public void OnPointerExit(PointerEventData eventData)
    {
        _text.transform.parent.gameObject.SetActive(false);
    }
}

詳細

上記2つのインターフェースを継承したコンポーネントを作成し、uiが重なったらserializeFieldで設定したテキストを表示し、uiから離れたらテキストを非表示にするようにしました。
このコンポーネントをメッセージを表示したいゲームオブジェクト(動画の部分で言うとImageとButton)追加するだけで呼ばれます。
気をつけないといけないのは、serializeFieldで設定したTextのRaycast Targetを外さないとポップアップで表示された時にカーソルが重なるためOnPointerExitが呼ばれて、OnPointerExitが呼ばれるとポップアップが非表示になるためすぐにOnPointerEnterが呼ばれてまたポップアップが表示され…というループを繰り返してしまいます。

問題点

現状これでポップアップの表示はできましたが、汎用的に使っていくと考えるとこのコンポーネントには以下の問題があります
・つけるオブジェクトすべてに同じポップアップで使うTextを設定しないといけない
・ポップアップを表示したくないゲームオブジェクトのUiのRaycastTargetのチェックを外さないといけない

なので、こういう事ができたらいいのかなと思っています。
・Rayがあたったゲームオブジェクトが特定のインターフェース(コンポーネント)を持ってたらポップアップを表示する
・ポップアップ管理クラスがポップアップ用のTextを保持しておいて、Rayが当たった座標だけもらってそこに表示するようにする。

ざっと調べた感じEventSystem周りの構造を理解すれば実現可能…？