• Create An Account
• Purchases
• Shopping Cart

In our second UI tutorial we will be taking another look at Unity's GUI functions, in the previous tutorial "Game Start Screen" we created a working game menu, in this tutorial we will be returning to Unity GUI's and looking at different UI components.

Starting Out

To start off, create a new project and add an empty GameObject (GameObject -> Create Empty). The new game object will appear in the Hierarchy, rename it to GUI.

If you followed the previous UI tutorial you will know that the GUI is a script and we need an object for the script to be attached to in order for the script to be executed when we run the game. So we create a placeholder object (the game object we just created) and will assign the script to this object.

The next step is to create the script which will contain our GUI code. So in the Project Library go to: "Create -> JavaScript". This will create a new script, which we will call "GameGUI".

Now select the GUI component in the Hierarchy and then go to: "Component -> Scripts" and select "GameGUI" from the list (thats the script we just created). This has applied the GameGUI script to the GUI game object. Now when we run the game, the GUI script will be executed.

Now save the scene (call it whatever you like) and run the game by pressing the "Play" button. You will see a blank, blue screen, nothings appearing, because we haven't created anything yet... obviously.

The GUI Script Shell

To create a GUI within Unity we need to use a function called OnGUI(), which is like a main() function that is executed automatically. The OnGUI() function is specific to user interfaces. We also want a variable that will hold a reference to the GUI Skin and a Skin initializer so that our GUI components can be customized to look however we want them.

The combination of these two things will be our "UI Framework" if you like. So lets create it now.

Open the "GameGUI" script in the script editor by double clicking it in the Project library and remove the default code and replace it with the following code:

var mainmenuSkin : GUISkin;

function OnGUI ()
{
    GUI.skin = mainmenuSkin;

}

This code will serve as our GUI shell or "framework", all of our GUI code, which will create and place GUI components and define how they function will go after the GUI.Skin declaration and the }.

Now we will add four variables to our OnGUI function, add them after the GUI.skin statement:

var ScreenX : int = 10;
var ScreenY : int = 10;
var areaWidth : int = 500;
var areaHeight : int = 500;

When we create GUI components, we encapsulate them in holders, which we position on the screen. So if we wanted a button in top left of the screen, we would create a container and position it x pixels from the left and y pixels from the top. We would also define the height and width of the container.

ScreenX is the position on the X axis that the container will be drawn from.
ScreenY is the position on the Y axis that the container will be drawn from.
areaWidth is the width of the container we will create to hold the components.
areaHeight is the height of the container we will create to hold the components.

For the purposes of this tutorial we are creating a 500x500 container that is in the top left of the screen and will place various components in that container.

So lets draw the container, add the following code below the varibles to create the container:

GUILayout.BeginArea (Rect (ScreenX, ScreenY, areaWidth, areaHeight));

GUILayout.EndArea();

Throughout this tutorial, each component we create will go between the BeginArea and EndArea we just added to the script.

Creating Buttons

Buttons will be a common component to add to GUI's, adding a button is easy, just place the following code between our BeginArea and EndArea statements.

if(GUILayout.Button ("Exit Game"))
{
    Application.Quit();
}

This statement will do two things, one it will create the button with the text "Exit Game" but will also execute the code between the { and } when it is pressed. In this case the button will shut the game application down (you need to build a standalone distribution for this to work as the game is playing in the editor otherwise).

Printing Text to the Screen

How about if we want to print text to the screen. Below where we created out button, add the following line of code:

GUILayout.Label("This is a message");

This will print the words "This is a message" to the screen below the button if you play the game.

Creating Boxes

We can also create visible boxes which will hold components:

GUILayout.Box("The box contains a message");

This will create a box with the text "The box contains a message" in it.

Horisontal/Vertical Slider

For this component you need a global variable for it to function, so up at the top where we created our first variable add the following:

var slidervalue : int = 0;

Now add the following code after our box statement:

slidervalue = GUILayout.HorizontalSlider(slidervalue, 0, 10);

A quick explanation of this one, slidervalue has to = the GUILayout as the slidervalue variable is updated as the slider moves, it also has to be passed first within the function. The second value passed is the minimum value and the third is the maximium value.

If you save and play, you will be able to move the slider, however it will move in segments. This is because slidervalue is an integer which is a whole number. Change slidervalue to a float (which can have decimal values) by changing "int" to "float" in the variable declaration at the top of the script and try it again. The slider will now move smoothly.

You can also create a VerticalSlider in the same way:

slidervalue = GUILayout.VerticalSlider(slidervalue, 0, 10);

That concludes our initial Unity GUI tutorial which covers the most basic components of Unity GUI's.