Unity 3D: How to Create a Simple Pop-Up Window with NGUI

Anyone who's read my tutorials knows that I'm a big fan of NGUI. I feel it's the best third-party GUI tool for Unity, but there is a little bit of a learning curve, which is why I've worked out a series of articles on some of the simplest ways to implement oft-needed objects in NGUI. Today, we're going to make a pop-up window.

If you don't already have NGUI, go grab it now (full or free). Also, if you aren't already comfortable with NGUI buttons, you can check out my tutorial here.

Since I just posted an article on linking to a Google Play app to rate it, we'll create a window that does exactly that. Our window will simply ask if the player would like to rate our app, and give them the option to go on the Play Store or close the window. We're also going to make a button that pops up the window, but that is strictly for demonstration.

First, we need to get our GUI set up in the scene. In the toolbar, go to NGUI > Create > 2D UI. This will get us ready to use the NGUI objects.

In your hierarchy, you now have an object called "UI Root." This contains all the base components needed to render the UI, and will be the parent of all of our NGUI objects.

For the window itself, we'll use NGUI's example background object, called "Control - Background". You can search for this in the Project pane, or get it directly at "NGUI/Example/Atlases/Wooden/Control - Background.prefab". Drag it into your scene, right on top of  "UI Root > Camera", making it a child of the Camera object. Your hierarchy will look like this:

This is all we really need for the window itself. You can change the size by clicking the "Control - Background" object and altering "Widget > Size" in the Inspector. You can also select a different sprite by clicking the "Sprite" button in the UISprite properties under the Inspector. If you want a completely different set of images to choose from, select a different atlas by clicking the Atlas button in the UISprite properties under the Inspector.

So we have a basic window, but now we need to add some text. In your toolbar, select NGUI > Create Label.

You want to drag the "Label" object that is created in you scene on to the "Control - Background" object to make it a child of that object, if it isn't already. This way, when you move/hide the pop-up window, the text will move along with it. Also, pay attention to the "Depth" property. You want to make sure the label you just created has a larger Depth number than your window, or your text will be behind it.

Change your label to read what you'd like by changing the "Text" property under the UILabel script in the Inspector. I've gone with "Please rate our app!" Again, we can customize this text in a number of ways, including changing the "Size" property, or selecting a different font by clicking the "Font" button, all under the UILabel script in the Inspector. There are lots of ways to change text; if you're interested, you can check them out here.

So now we have our window and text; next, we need buttons to either rate the app or close the window. Find the "Control - Simple Button" prefab in the Project pane, and drag two of them into your scene, right on top of "Control - Background" to make them both children of the pop-up window, just like we did for the label. Set your depth and position them where you want. Change their text by altering the "Text" property of the Label under each one. Also, give them unique names by selecting each "Control - Simple Button" object and renaming it (either press F2 or right-click and select "Rename"). Here, I've named them separately ("Rate Button" and "Close Button"), and changed their label text to "Sure!" and "No thanks!" We've also played around with the colors a bit.

Now that our window is ready, we're going to use a simple bit of code to open and close it. Keep in mind there are plenty of ways to handle this, but I'm working from what I believe is the simplest point. You can build on this or alter as needed.

First, let's add another button to the scene that will just show and hide the window. Stick this button somewhere, then create a C# script named "TogglePopUp". Double-click on the script to edit it, and paste this into it:

using UnityEngine;
using System.Collections;

public class TogglePopUp : MonoBehaviour
{
    public GameObject popUpWindow;

    void OnClick ()
    {
        if (popUpWindow)
        {
            if (popUpWindow.activeSelf)
            {
                popUpWindow.SetActive (false);
            }
            else
            {
                popUpWindow.SetActive (true);
            }
        }
    }
}

This is a very simple script, but let's go through it quickly. First, we declare a public GameObject. Once we attach this to our button, we'll be able to assign a GameObject to it in the Inspector. This is the object we want to show or hide. Now, we use the OnClick () method to respond to a button press -- this is a default NGUI behavior. Inside OnClick (), we first check to see if the the popUpWindow GameObject has been assigned, because if we try to set anything on that GameObject without assigning it, we'll get an error. The inner if () statement is where all the real logic happens. If the object is active, make it inactive. If it is inactive, make it active.

So drag this script on to the button you're using to toggle the window. Then drag the pop-up window object (in my project it's still called "Control - Background") onto the "Pop Up Window" field under the "Toggle Pop Up" script in the Inspector.

Press Play to run your game. When you click your toggle button, the window should disappear and reappear. This is the basis for your pop-up: your window will be present but inactive when the scene starts. When you need to show it, set it to active. When you need to hide it, set it to inactive again.

Now, combining this tutorial with the button tutorial and the rating tutorial, you can see how to easily build a pop-up window to ask the player to rate your app. Once the player has reached the point where you want to ask for a rating (for instance, after a particular level is finished), you can pop this window up. One button will close the window again, and the other will open your app's store page.