Megabite #11 – The Basics and Capabilities of the Unity GUI System

One of the most important things to make note of with the Unity GUI system is that everything within the OnGUI () function will run twice per frame (Correction thanks to AngryAnt via the comments: OnGUI is not run twice per frame. It’s run once per event. By default that is two – one layout event and one repaint event. If, however, you have mouse or key events you’ll get more invocations) .  While you can easily use variables to manipulate the size and position of windows, boxes, buttons, etc., you’ll want to do the calculations for those variables in other places and avoid using loops or complicated formulae within the function.

When it comes to displaying a basic GUI you have a few easy options - GUILayout or manual placement.  Depending on the look you want, you may be able to use either one but with different complexities.

As an example, let’s start off with GUILayout, which attempts to automatically lay out the components of your GUI.

function OnGUI() {
GUILayout.Button(“Here is a test button”);
}

In this simple piece of code, the result is a labeled button on your game screen.  Because we didn’t declare anything about where we wanted to place it or declare a size, it appears in the upper left of the screen and is as long as the text it contains.  Making it do something is as easy as making it into an “if” statement:

function OnGUI() {
if (GUILayout.Button(“Here is a test button”)) {
DoSomething();
}
}

In this case, pressing the button will run the function “DoSomething()”.  To use the manual option for this same thing, let’s set up a test button:

function OnGUI() {
GUI.Button(Rect(0,0,200,50), “This is a test button”);
}

What we’ve done here is manually place the button at screen position x=0 and y=0, which is the upper left just like the other button.  However, we’ve manually set up the width as 200px and set a height of 50px.  Whether you use boxes, buttons, labels, or any other GUI elements, you can manually set them up using:

GUI.[element] (Rect( X-Position, Y-Position, Width, Height ), “(Text here if applicable)”)

Typically I prefer to have this level of control over each element, and it allows for more variables to be easily inserted.  However it does make your code a bit more complicated.  As a result, the majority of the examples here will be focused on using GUILayout.

When placing GUI elements, I often times want to make things resolution independent.  Because you don’t want someone with a 30 inch monitor forced to play your game at 800×600 unless they choose, you can use the default Screen variables to get numbers based on the resolution of the game.  For example:

function OnGUI() {
GUI.Box(Rect ( (Screen.width / 2) – 100, ( Screen.height / 2) – 100, 200, 200), “This is a centered box.” );
}

Now, getting back to doing the same with GUILayout – as you can imagine we do need to tell Unity where to actually draw our box.  The process is very similar to what we’ve just done:

function OnGUI () {
GUILayout.BeginArea (Rect ( (Screen.width /2) – 100, (Screen.height /2) – 100, 200, 200));
GUILayout.Box(“This is a centered box.”, GUILayout.ExpandHeight(true));
GUILayout.EndArea ();
}

By comparison, this may look more complicated than than manual placement, but it allows for easy placement of more elements.  It will always be at your discretion which method you prefer for what scenario.  My best suggestion is to familiarize yourself with both options and all of the available elements in Unity GUI.

Next, we’re going to work with using the GUI for functionality.  This includes text input, sliders, and selecction grids (which work similar to “radio buttons” in HTML).