In this quick tutorial, I’ll show you how to modify a UI object when the player moves the mouse over it.

As always, if anything in this tutorial is new to you, refer to my Pong tutorial where I explain all the major Unity functionality in detail.

In this tutorial we use Event Triggers, which were explained in a bit more detail in the Input Manager tutorial, so if you want more detailed steps, refer to that tutorial.

What We’ll Do

We will create a simple scene with a few UI buttons. We will create a script that changes the colour and size of a button when the mouse passes over it.

Getting Started

1. Create a new Unity project.
2. Add a UI Canvas GameObject to the Hierarchy (Unity will automatically add an EventSystem object as well)
3. Add some buttons to the canvas, and make sure they don’t overlap.

Colour Change on MouseOver

Unity already gives buttons a mouseover colour change, though the default setting is quite subtle. Let’s start by making this colour change more obvious.

Select one of the buttons in the Hierarchy so that its components show in the Inspector pane.

The ‘Highlighted Color’ property is the shading applied to the button when the mouse is over the button (or when the button is currently the selected button with keyboard/gamepad). Click in the Highlighted Colour box and select a new colour. Pick something obvious:

Now play the scene and move the mouse cursor over the button you modified.

Advanced MouseOver Using Event Trigger

The built-in mouseover behaviour is fine for simple use and prototyping, but in a game you usually want something more interesting. Using an Event Trigger, we can script anything to happen to the button when the mouse is over it.

Choose one of the other buttons in your scene this time so you can compare the difference with the button you already played with.

Create a Script

1. Create a new C# script and call it ‘MouseOverEffect’.
2. Open MouseOverEffect in your code editor of choice.

For now, we’ll just create empty methods in the script. We need these empty methods so we can assign them to the events in the Inspector. Once that is done we will add the actual code to the script.

Put the following code in the script:

using UnityEngine;
 public class MouseOverEffect : MonoBehaviour
 {
     public void PointerEnter()
     {
         print(“MouseEntered”);
     }
     public void PointerExit()
     {
         print(“MouseExited”);
     }
 }

 Create the Events

Your button needs to know when to call the code in the script, so we use an Event Trigger component to set up the events we want to listen to.

1. Add an Event Trigger component to your button.
2. Click the Add New Event Type button and choose PointerEnter.
3. Click the Add New Event Type button again and choose PointerExit.

Now you need to tell the Event Trigger what code to call when these events occur.

1. On the same button you added the Event Trigger component, add your MouseOverEffect script.
2. Click the plus sign button at the bottom of the Pointer Enter area.
3. Drag-and-drop the same button GameObject you are working with into the field on the left.
4. Select MouseOverEffect > PointerEnter from the drop-down selector on the right.

You have now told the Event Trigger that when the mouse (pointer) enters this button, run the PointerEnter method on the MouseOverEventSctipt attached to the button’s GameObject.

Now repeat those steps for the PointerExit event, except this time choose the PointerExit method in the final step.

Now run your scene and test that it is working. You should see text in the Console panel when the mouse cursor enters and exits the button area.

If that’s working correctly, you can move onto the next section where we will add something more interesting to the mouseover effect.

Scale the Button

The basic functionality is all there now. You are detecting when the mouse is over the button and running some code when it happens. Now all you need to do is put something more interesting into that code.

We are detecting two events – PointerEnter and PointerExit. This is so we can do something when the mouse moves over the button, then undo it when the mouse leaves the button.

Let’s scale the button.

Replace the two methods with the following:

public void PointerEnter()
 {
     transform.localScale = new Vector2(1.2f, 1.2f);
 }
 public void PointerExit()
 {
     transform.localScale = new Vector2(1f, 1f);
 }

Now test the scene (make sure you save the script first). You should now have something like this:

You can add any code here you like. You can also combine the built-in colour shading that Unity provides.

Since the button is quite generic, try replacing the button image, text, and font to create something that looks a bit more at home in a game.

Next Steps

There is no limit to what you can do to enhance this functionality and create interesting UI. Here are a few things you could try adding to your code:

• Change the image/sprite
• Play a sound effect
• Rotate or animate the button

The scaling technique I’ve shown above is very basic. You will probably want to replace it with a smooth animation. Look into ‘tweening’ to find ways of smoothly animating the scale so it looks slick and professional.