Category: GUI

This week we have been making our main menu screens for our 2D game.  In order to set the theme for our game we need to be able to customize our GUI.

Here is how to set up your custom GUI:

  1. We start by creating a GUI Skin in Unity by going to the project panel and clicking on create>GUI Skin.  A GUI Skin allows you to fully customize all GUI elements in your game such as fonts, colors, sizes, and textures.
  2. In your script where you are doing the OnGUI function, make a variable to hold the new GUI Skin.
    • var customSkin:GUISkin;
  3. Then put this command at the top of the OnGUI function.
    • GUI.skin = customSkin;
  4. Now go back to Unity and click on the object that has the script which contains your OnGUI function.  You will see a variable in the Inspector called customSkin.  Drag your GUI Skin from the project panel to the box in the inspector next to customSkin.  This will tell your script to use this skin for all your GUI elements.
  5. Click on the GUI Skin in the project panel and look in the inspector.  You will see listed all the GUI elements and controls that are available.  When you select one you will see all the settings for that element.  You can now change them and see the changes in your GUI.

Now you can pick fonts and colors for all your text and change the background textures of your buttons and other controls.

The Graphical User Interface, otherwise known as GUI, is one of the ways we get and give information to the player.  This includes things like: text, input boxes, buttons, labels, windows, scroll bars, and many more.

All GUI Instructions are handled by a built in Unity function called OnGUI.

OnGUI

OnGUI runs twice per frame.  The first time it runs it is looking for input (mouse click, keyboard, etc…).  The second time it runs it is updating the graphical output and resolving input.

Example:

function OnGUI( )

{

GUI Instructions here.

}

There are many different GUI items that we can use.  These can be found in the Scripting Reference Guide and in the Users Guide.  We are going to look at labels, textfields, and buttons in this post.

GUI Labels

A label is just text that you want to display in your game.

Here is how you make a label:

GUI.Label(Rect(10,20,100,20), “This is a Label.”);

This has to be typed into the OnGUI function.  First you tell the computer you want a label by typing “GUI.Label”. Then you need to define a rectangle for the label by using the Rect command.  In the parenthesis you put four numbers.  The first number is the location of the top left corner of the rectangle on the x axis.  Unity starts with x equal to 0 on the left edge of the screen.  The next number is the location of the top left corner of the rectangle on the y axis.  Unity starts with y = 0  at the top of the screen.  So the coordinates 0,0 are at the top left corner of the screen.  The next (third) number is the width of the rectangle.  The forth number is the height of the rectangle.

In our example above the rectangle for our label would be located with its top left corner at 10x, 20y, width100, height20.  This would make a label at the top left of the screen.  For a good explanation and examples of this click here.

After the rectangle you put the text you want the player to see in quotes.  Our example above would display “This is a Label.” to the player.

 GUI Buttons

To make a clickable button we add the following code to our OnGUI function:

if(GUI.Button(Rect(150,150,90,45),”Click Me”))

{

Do instructions if button is clicked;

}

We need to do this inside an if statement because a button returns a true when it is clicked and a false if it is not clicked.  If it is clicked the if statement will run it’s code to do whatever we wanted the button to do.

Again we need to define a rectangle to position and size the button.  The button above would be located at 150x, 150y and be 90 pixels wide and 45 pixels high.  The words on the button in our example would be “Click Me”.

For more on buttons click here.

Input Textfields

To make an area where the player can enter text you add a TextField control.

You would first make a String variable to hold the information.

var textFieldString:String = “Type Here”;

Then in your OnGUI function you would type this:

textFieldString = GUI.TextField (Rect (25, 25, 100, 30), textFieldString);

This will display the current text stored in the textFieldString and overwrite it with the new text entered by the player.

For more on GUI TextFields and controls click here.