Mouse Hover Effects in Unity

Generate an effect when hovering over a game object with your mouse in Unity3d

It is important to visually cue your gamers in a pleasant way during game play. One way to do this is with mouse in and out effects like you see on many websites. Hover over the buttons to see examples.

Pretty cool, but I know, you have see these a million times. We are going to start a little more basic than even that. Today, we are going to create a 3D game object and have it provide us textual feedback when we hover over it with a mouse. After you have this down, move on the the next lesson where we will be changing colors and perhaps a few other cool tricks.

Without further ado, let's jump right in to creating a mouse hover effect in Unity. Create a new project in Unity and name it as you please.

Create a new cube asset

Add a script to your new cube asset as cubeScript

Double click to open cubeScript in your ide and add the following to the update method:
// Update is called once per frame
void Update()
{
  RaycastHit hit;
  Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
  if (Physics.Raycast(ray, out hit))
  {
    Transform objectHit = hit.transform;
    print(objectHit);
  }
}

Run the project and in the console window you should see the name of the game object print output for every frame you are hovering over the cube.

Pretty neat, huh? We can see in the Unity console that when we hover over the cube with the mouse, the details of the cube game object are displayed. It feels like an accomplishment, however, this isn't really practical if we are making a visual game.

We need to let the user know that the are hovering over our glorious cube. To do that we will need to create a new text asset. You can do this from GameObject->UI->Text or by right clicking in the hierarchy and selecting UI->Text. This will create a UI game object with a text child object. Here is a view of the hierarchy and Inspector after creating the text object.

Next we need to make some updates to the cubeScript to make the text change when we hover over the cube. Basically, we are just adding the UI namespace with using UnityEngine.UI;, creating a public text object which will reference the text component we just created in the hierarchy public Text cubeText, and updating the text output with the name of our gameObject (cube) whenever we hover over it cubeText.text = (objectHit.name);.

Here is what your cubeScript should look like now:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class cubeScript : MonoBehaviour {

  public Text cubeText;

  // Use this for initialization
   void Start () {

  }
  // Update is called once per frame
  void Update()
  {
    RaycastHit hit;
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    if (Physics.Raycast(ray, out hit))
    {
      Transform objectHit = hit.transform;
      //print(objectHit);
      cubeText.text = (objectHit.name);
    }
  }
}

Run your program and you should see "New Text" get replaced with "Cube" when you hover your mouse cursor over the cube. Sweet! Here is what it looks like when I run it

I think that is enough for 1 lesson but there are some obvious improvements we need to make before this is production ready. I have a few in mind but how about you? What would you like to see me do with the second article in our mouse hover effects series?

 
Comments
Mich5
2017-08-25 09:15:34
Ty for this. What I was looking for
Post a Comment