Unity: Starting your First Project (Part 3)

Posted: November 22, 2011 in Uncategorized

This is the third part in a four part series about starting your first project in Unity. This post will focus on GUI programming, and more specifically, a simple state based system. GUI programming is a rather broad topic, and so I will not be going over the more advance topics. I will not be going over similar topics like GUI styles, but rather the scripting involved with GUIs. There are many good GUI tutorials online, and there are even  a few on the Unity3D website!

State Based System:

This is a system (sometimes referred to as a Finite State Machine) where a program (or machine!) operates differently, depending on the different states it could be in. This type of system for a menu is perfect, for it allows us to neatly and efficiently show different screens and menu items depending on the state.

This system can be very simple, or rather complex depending on how complex your game is, but they all have certain similarities. They all depend on some variable or value that represents some state. Sometimes its an enum, sometimes a boolean, and sometimes an int. In my example, I will be using a boolean value. Before we get into a

GUI in Unity

Unity takes a step away from the normal GUI model in a very unique but elegant form. Instead of the general pattern or setting up some sort of GUI element, than setting up some sort of listener for it, and acting on events. Instead, Unity combines the creation of the GUI element, with its listener. Using an if statement, you can both check if, say, a button is being clicked. GUI elements are reserved to execution in an OnGUI() function. this function is called every cycle (like Update) and you should put all GUI related code here. Consider the following:

//All of this takes place in an OnGui() function
if (GUI.Button (new Rect(50,50,70,20) "Ok!")) {
//create a button
//if its pressed, we go into this code block
print("You pressed me!");


Other GUI elements (like Boxes and labels) can simply be created without any if statements, like so:

GUI.Box (new Rect(150,150,300,500), "Box text. Use new lines \n to go to new lines!");
GUI.Label (new Rect(150, 700, 300, 300, "Label Text");

Introducing states to this model is trivial. All we need to do is keep track of the right variables. I will show an example with two states, but you can add more states at your leisure.

var MainState = true;
var OtherState = false;

function OnGui(){
 if (MainState){
 //we are in the main state.
 //show button to go to other state
 if (GUI.Button (new Rect(50,50,100,20) "Other State!")) {
 MainState = false;
 OtherState = true;
 else if (Other State){
 //we are in the main state.
 //show button to go to other state
 if (GUI.Button (new Rect(50,50,100,20) "Main State!")) {
 MainState = true;
 OtherState = false;

As you can see, we use two variables, MainState, and OtherState, that we use to keep track of what state we are on. We could alternatively use an enum, 1 value for every state, and have one variable which we change the value of once. This way, we don”t have to remember to set every other state to false. However, this assumes that we only want one state active at a time. There are some times (like when we are showing the user an alert style message) where we don’t need or want to remove other GUI elements, like the main GUI toolbar, or something of equal importance.

To end this article, I will also provide the code for a helper function I have been able to make good use of. It basically returns a rectangle that can be used in a GUI function call centered in the middle of the screen.

function Center(w:float,h:float){
 //halve height and width
 var h2 : float = h/2;
 var w2 : float = h/2;

 var x : float = ScreenCenter.x - w2;
 var y : float = ScreenCenter.y - h2;
 //print (x + " " + y);

 return new Rect(x,y,w,h);

Click here to see the final entry in this four part series: http://wp.me/p1AGMt-5K

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s