How to change the CURSOR IMAGE on MOUSE HOVER over UI ELEMENTS in Unity

Introduction

In this arti­cle we are going to see how to change the cur­sor image when the point­er hov­ers over a but­ton in Uni­ty. In addi­tion, a down­load pack­age is pro­vid­ed with the scripts, sprites and the scene with all the ele­ments already configured.

Download the Unity Package

Here you can down¬≠load the Uni¬≠ty Pack¬≠age with the exam¬≠ple on how to change the cur¬≠sor image in Unity.

ūüéĀ UNITY PACKAGE: Change cur¬≠sor sprite on mouse hov¬≠er over UI elements

ABOUT THIS SOLUTION

  • When you import this Uni¬≠ty Pack¬≠age you will find a fold¬≠er with a scene, a script, 2 cur¬≠sor images and some extras.
  • Inside the scene you'll find detailed infor¬≠ma¬≠tion about how this solu¬≠tions works.

IF YOU WANT TO THANK FOR THIS DOWNLOAD YOU CAN DO IT BY SUBSCRIBING TO THE CHANNEL
WITH THIS YOU HELP ME TO KEEP CREATING MORE CONTENT TO SHARE

ABOUT THIS VIDEO

In this video we see how to change the CURSOR IMAGE on HOVER in Unity.

HERE MY UNITY PLAYLIST
ūüĎáūüŹĹ

Fig. 1: Scene from the Uni¬≠ty pack¬≠age, the cur¬≠sor is on the screen and it's an arrow.
Fig. 2: Scene from the Uni¬≠ty pack¬≠age, the cur¬≠sor is on the but¬≠ton and now change to a hand.

Default Cursor Settings in Unity

This is some­thing that can be done with­in a Start func­tion, but if our game or appli­ca­tion will have a cus­tom cur­sor, for exam­ple a cus­tom arrow, it is con­ve­nient to define it with­in the project para­me­ters, going to Edit > Project Set­tings, the win­dow shown in Fig­ure 3 is dis­played, there we can assign the default cur­sor Sprite, as well as its Hotspot coordinates.

change default cursor image in unity and define the hotspot
Fig. 3: Default cur¬≠sor set¬≠tings in Unity.

CHECK OUT THIS CRAZY EXPERIMENT

Determining the Hotspot of our customized cursor

The hotspot of the cur¬≠sor is the off¬≠set vec¬≠tor mea¬≠sured from the upper left cor¬≠ner of the Sprite and it indi¬≠cates the point of the image where the tip of the cur¬≠sor is con¬≠sid¬≠ered to be. The script that comes in the pack¬≠age has fields defined to assign the Sprite of two cur¬≠sors as well as the vec¬≠tors of their respec¬≠tive Hotspots, as seen in the inspec¬≠tor in Fig¬≠ure 4.

To deter­mine the Hotspots you have to enter the game mode and try dif­fer­ent val­ues until the cur­sor match­es, anoth­er way would be to know exact­ly how many pix­els hor­i­zon­tal­ly and ver­ti­cal­ly is the point of the cursor.

script to change the cursor in unity
Fig. 4: Inspec­tor of the Cur­sor Man­ag­er script includ­ed in the Uni­ty pack­age, Sprite assign­ment and Hotspot configuration.

How to change the cursor IMAGE in Unity

To change the image shown by the cur¬≠sor just exe¬≠cute the instruc¬≠tions shown in fig¬≠ure 5, in lines 31 and 37, the SetCur¬≠sor method inside the Cur¬≠sor class, pass¬≠ing as para¬≠me¬≠ter the sprite you want to show, the Vector2 with the posi¬≠tion of the Hotspot and the cur¬≠sor mode.

functions to change the cursor image in unity
Fig. 5: Func¬≠tions to change the cur¬≠sor image in Unity.

When to change the cursor image in Unity

In this par­tic­u­lar case we are inter­est­ed in con­stant­ly show­ing a default cur­sor until the point­er is posi­tioned over a but­ton, at that moment we want to show anoth­er dif­fer­ent cur­sor to give feed­back that the user can inter­act with that ele­ment. For this we need to be able to detect exact­ly when these events occur and for that I assign to each but­ton an "Event Trig­ger" com­po­nent and adding the "Point­er Enter" and "Point­er Exit" events.

To both events we assign the GameOb¬≠ject that has the Script with the func¬≠tions that we want to exe¬≠cute (these func¬≠tions must be defined as pub¬≠lic) and then using the drop-down menu we choose the func¬≠tions to exe¬≠cute in each event.

change cursor image when hovering over a button in unity
Fig. 6: Assign¬≠ment of script func¬≠tions to each event.

YouTube
Scroll to Top
Secured By miniOrange