#更新
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周りの構造を理解すれば実現可能…?