• Register
Post tutorial RSS Mouse Pointer Handler system (OnPointerEnter, OnPointerExit) for Unity3D UI

As in the last article we presented our Tooltip System for Unity3d, we now explain, with prose and C# code, how we implement the pointer behavior so that it can handle the tooltip on UI elements.

Posted by on - Intermediate Client Side Coding

Hello guys,

still Emiliano here, and still talking about the Unity UI system. A couple of days ago I explained our new tooltip system, now let me show you how those tooltips are called into action. What I am going to explain (in words and code) today is the solution I found to manage the mouse pointer entering or exiting an UI element in the cleanest possible way I could devise.

First of all, you need a canvas and an event system as basic setup. Then an empty GameObject in the scene to which you will attach the script MousePointerHandler script (see the bottom of the post for the script). The script is built according to the singleton pattern, that means that it is static and can be accessed from anywhere in the code in the scene by just typing MousePointerHandler.mph.name_of_the_method.

MousePointerHandler empty object in the scene

MousePointerHandler empty object in the scene

The only method of this script just does a simple thing: Given a GameObject and two Methods passed as parameters, attaches a UIPointerTrigger script to the gameObject and registers the two callbacks so that he first one will be managing the pointer when it enters the object, and the second one will manage the pointer when it leaves the GameObject.

The two callbacks are defined as OnPointerEnter and OnPointerExit.

Now create a script called UIPointerTrigger and store it in the assets of your project. This script reimplements IPointerEnterHandler and IPointerExitHandler, by associating the two behaviors with the two callbacks passed in input.

Multiline


At this point, pick the UI script in which you need to detect the pointer enter/exit :

  1. In the Start() method use MouserPointerHandler.mph.AddMouseTracker(GameObject,OnPointerEnter,OnPointerExit); (where GameObject is the GameObject associated to your UIElement, e.g. closeButton.gameObject)
  2. Implement the two callbacks in the same script
    1. public void OnPointerEnter(GameObject hovered)
    2. public void OnPointerExit(GameObject hovered)

inside those, to detect the UIElement you are hovering and tune the callback behavior, you can just have a simple switch of the type (The name has to be the GameObject name in the scene, not the variable in which you stored it in the script)

switch(hovered.name){
case “closeButton” : Debug.Log(“Enter/Exit”);
}

A tooltip running on the described method

A tooltip running on the described method

The above system has in my opinion a series of nice advantages :

  1. You add the management to an UIElement with just a single line of code (bingo!)
  2. The UIPointerTrigger is much more lightweight compared to the use of the Event Trigger (it only checks for 2 events to occur, PointerEnter and PointerExit, while the EventTrigger constantly checks for 12 different events)
  3. It works perfectly well with our tooltip system

I already used this video to show off our Tooltip a couple of days ago, but it works fine for this tutorial as well as the system i just described is what is getting the tooltips to work in the scene.


As usual, I hope all this was useful for you, had I found something similar I would have spared myself months of thinking and brainwork to figure out a good clean way to get this working. If this helped you, please don’t hesitate to follow us through our newsletter (several new tutorials are coming soon, both in text and video) and follow our youtube channel and our twitter and facebook pages. And well, if you use it, feel free to mention us! Cheers!

Emiliano, LeadDev H&R, @DokHgn

using UnityEngine;
using System.Collections;
using UnityEngine.Events;
using UnityEngine.EventSystems;
 
public class MouserPointerHandler : MonoBehaviour{
 
public static MouserPointerHandler mph;
 
//singleton class system
void Awake () {
mph=this;
}
 
/// <summary>
/// Add a UIPointerTrigger script to an UI element's GameObject and link to it the
/// OnPointerEnter and OnPointerExit callbacks from another script
/// </summary>
/// <param name="uiItem">User interface item.</param>
/// <param name="OnPointerEnter">OnPointerEnter<GameObject> callback.</param>
/// <param name="OnPointerExit">OnPointerExit<GameObject> callback.</param>
public void AddMouseTracker(GameObject uiItem, UnityAction<GameObject> OnPointerEnter, UnityAction<GameObject> OnPointerExit){
UIPointerTrigger trig = uiItem.GetComponent<UIPointerTrigger>();
//if the given object didn't have an UIPointerTrigger script attached, add one by default
if(trig==null){
trig=uiItem.AddComponent<UIPointerTrigger>();
}
trig.InitCallBacks(OnPointerEnter,OnPointerExit);
}
}
using UnityEngine;
using System;
using System.Collections;
using UnityEngine.Events;
using UnityEngine.EventSystems;
 
public class UIPointerTrigger : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler{
 
UnityAction<GameObject> OnPointerEnter;
UnityAction<GameObject> OnPointerExit;
 
//called from the manager to init the callbacks
public void InitCallBacks(UnityAction<GameObject> Enter, UnityAction<GameObject> Exit){
OnPointerEnter = Enter;
OnPointerExit = Exit;
}
 
#region IPointerEnterHandler implementation
void IPointerEnterHandler.OnPointerEnter (PointerEventData eventData){
OnPointerEnter(this.gameObject);
}
#endregion
 
#region IPointerExitHandler implementation
void IPointerExitHandler.OnPointerExit (PointerEventData eventData){
OnPointerExit(this.gameObject);
}
#endregion
}
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.