Unity 3D: How to Create a Simple Button with NGUI

I use NGUI on an almost daily basis for the majority of my GUI needs. Just like most tools, regardless of their user-friendliness, there is something of a learning curve. This post covers one of the simplest and most-used features of NGUI: making a standard 2D button.

NOTE: This blog post was originally written for NGUI 2.x. It has been updated for NGUI 3.x. If you are still using 2.x for some reason, please either upgrade or contact me and I'll send you the old post.

If you haven't already, hop on over to the Asset Store and download NGUI (full or free). Import the package into your project and we'll get started!

In the toolbar, go to NGUI > Create > 2D UI. This is where we'll create our base NGUI object.

You will now see the "UI Root" object in your hierarchy. This will be the parent of all of the NGUI objects, including the camera used to render the UI, which they've already created for you.

The simplest way to add a button is to add one of the prefabs NGUI provides and customize it to your liking. The button we're going to add is called "Control - Simple Button". You can find it by either searching for "Control" in the Project pane, and selecting it from the items that come up, or by navigating in your Project pane to Assets > NGUI > Examples > Atlases > Wooden. Either way, drag the prefab into the Hierarchy pane. It should come in as a child of "UI Root".

If you hit "Play" now, you'll find you have a nice-looking button that reacts to being hovered over and clicked. Pretty spiffy, but it doesn't really do anything, because we haven't told it to. Let's fix that.

Create a new C# script by clicking "Create > C# script" in the Project pane. Name it "buttonClick". Double-click it to open it in Mono, delete all of the contents of the file, and paste in the following:

using UnityEngine;

public class buttonClick : MonoBehaviour
{
    private int counter = 0;
   
    void OnClick ()
    {
        counter++;
        print ("Clicked " + counter.ToString () + " times.");
    }
}

Drag and drop this script on to the "Control - Simple Button" object in your hierarchy. Whenever an NGUI button is clicked, it calls the "OnClick ()" method, and the code you've placed in that method will execute. Here, we are simply incrementing a counter and displaying the output in the console. If you don't already know, your console output will be displayed at the very bottom of the editor window. You can also view the console in a separate window by going to "Window > Console" or pressing "Ctrl + Shift + C".

A couple of other useful tidbits:

The text on the button is located in a Label under the "Control - Simple Button" object. Select the label and edit the text field in the Inspector to change the text:

If you want to resize the button, don't do so under the "Transform" component in the Inspector! Doing so will lead to ugly, stretched text. Instead, click the "Control - Simple Button" GameObject, and under the UISprite component, change the "Dimensions" values. Make sure that "Box Collider - auto-adjust to match" is checked. This way, whatever you change the image dimensions to, the collider that detects button presses will match.

So now you have a basic button, and you can modify the code to perform any tasks that you may want (exiting the game, saving settings, selecting a level, etc.). You can create several buttons to make a menu as simple or as complex as you need, and move them all around right in the Scene window to create your layout.