Welcome

Welcome to the Unity GUI Tutorial. This tutorial is for everyone. Im going to try to make it as noob friendly as possible. If you understand logic and know how to learn from examples this tutorial will be very easy for you.

Note: For this tutorial we will be only using JS.

Requirements:
*Unity
*Sense of humor
*No one to bug you
*Comment when your done

Getting Started

The first thing you will want to do is make a new project. When making a new project make sure you know if you want to make a 3D game or a 2D game. For this tutorial we will be using 2D to make sure to set the project for that.

The next thing we want to do is make a new script, attach it to an object, and open it in mono. Sounds like alot but dont worry im here for you. To make a new script right click in the project tab and select Create>Javascript.

Then name your script whatever. Now that you have your script made drag the script on top of the camera to add it to the game.

Now its time to edit your script so we can add little gui bits and shiz. Double click your script in the project tab and it will open the script up in mono for you to edit.

Functions Basics

Once you open the script in mono you should get something that looks like this.

Might look a little confusing at first but ill go through everything.

I will start by explaining a few of the functions.

function Start(). This function will do everything in the function once on the script startup and thats it.

function Update(). This function will run everything inside it once every frame. EX: if you have print("Test") inside it and you run the game at 60fps you will see Test being printed 60 times every sec.

Finally we have function OnGUI(). GUI code can only be inside this function and everything inside is ran once every frame just like the update. This is useful because we can easily update any information we have on our GUI like scores, resources, health, magic power, etc....

Now for our next step we will learn basic GUI code.

Basic GUI

To start lets remove the lines for the function start and the #pragma strict because we wont need them. if you want to learn what #pragma strict is please google it. Your code should look like this so far.

What we want to add is our first gui element. All the basic gui elements are basically the same.

GUI.TYPE(Rect(X, Y, W, H),"Texty Stuffs Or Variables");

WARNING: ALL GUI ELEMENTS MUST BE INSIDE THE OnGUI FUNCTION!

In the next step we will be finally starting to make actual GUI.

Making GUI Babies

For these steps ill be using code tags because typing out code can get kind of annoying.

For our first GUI element we will be making a box that is 300x300 to put our contents in. You don't need a box to put content in, it just looks better.

To start lets add the following code inside the OnGUI function.

GUI.Box(Rect(0, 0, 300, 300),"Baby Making Box");

If you didn't know how to read, follow along or are just lazy here is the code we have so far.

Notice: I indented the code a little. Its a good idea to get use to indenting your code for easier readability for you and everyone.
TIP: You can use Tab to indent once.

function OnGUI(){
	GUI.Box(Rect(0, 0, 300, 300),"Baby Making Box");
}

Really easy to make hey? If not well you will get use to it. Next we will be adding some labels, a button and image.
Next lets add a Label with a position of 0,20, width of 120, and a height of 20 and name it whatever you want.
Lastly lets add a button to the bottom center of the box. Name the button whatever.

Now that you made those gui elements it should look something like this.

Now for the lazy i give you the code we have so far.

function OnGUI(){
	GUI.Box(Rect(0, 0, 300, 300),"Baby Making Box");
	GUI.Label(Rect(0, 20, 120, 20),"whatever you want");
	GUI.Button(Rect(100, 280, 100, 20),"whatever");
}

function Update () {

}

Oh noez the button doesn't do anything O.o! In the next step we will learn about buttons, variables, and how to display them.

Buttons and Variable Stuffs

So we figured out that our button does nothing at all when clicked. We will change that.

Buttons need to be apart of an if statement. An if statement looks like the following.

if(Something){
	Do Something
}

So in order to make our button do something we need to put inside the ( ) that's apart of the if like so.

if(GUI.Button(Rect(100, 280, 100, 20),"whatever")){
	
}

After you add that to your script it should look something like this.

function OnGUI(){
	GUI.Box(Rect(0, 0, 300, 300),"Baby Making Box");
	GUI.Label(Rect(0, 20, 120, 20),"whatever you want");
	if(GUI.Button(Rect(100, 280, 100, 20),"whatever")){
	
	}
}

function Update () {

}

So our button is all setup but it still doesn't do anything. Next we will be making a variable for displaying how many whatever you have.

To declare a variable you would do it like so.

var VariableName : Type;

There are many types of variables and i will list a few.
String - will be able to store text like "Text". mono may correct it and put it as string instead of String. String is the correct one and mono is incorrect so make sure its a capitol S.
int - can store numbers without decimals
boolean - is true or false
Those are the very basic types of variables.

So an actual variable with the type as an int will look like so.

var Whatever : int;

Now for the fun part. We want the button to increase that variable every time its pressed. So in order to add one to the variable every time its pressed we want to do a += 1 to that variable. How do we do this exactly? Well its very simple.

Whatever += 1;

Yes it is that simple. Now that that's done save it and click on the button. Now to see how many times you clicked check out the inspector for the camera you added the script to and you should see this go up every time you click on whatever.

Its cool and all that you can see your variable get increased but we want to make it show in the GUI because the player cannot see the inspector. Now if you are really paying attention i mentioned way above that to display a variable you don't use quotes for a label.

So lets add another label to display whatever right below our other label by about 20 pixels.

GUI.Label(Rect(0, 40, 120, 20),Whatever);

Now try to play test. OMG we got an error. WTF unity i told you to show Whatever.....how damn hard is it to display a fricken variable geee.... WOA there calm down. Its really easy to display it. The reason we cannot display it because its not a string and you can only display strings. You might be thinking "Why didn't we just declare it as a string instead of an int?". Well its not that simple, a string doesnt know what += 1 is because a string is text and not a number. Text works differently than numbers.

So how do we make it display that number as a string? Its actually very very simple. all you do is slap a .ToString() after the variable and done. so lets do that.

GUI.Label(Rect(0, 40, 120, 20),Whatever.ToString());

Now that you got that added you should now see that number go up by 1 every time you click it. If you went click happy and got to 1000 you may have noticed it doesn't say 1,000. to fix that its a simple addition to the () part of the .ToString(). So lets do that.

GUI.Label(Rect(0, 40, 120, 20),Whatever.ToString("#,##0"));

As you can see we added "#,##0" you may be wondering why do we add the 0? The 0 is so when you have nothing it displays 0 instead of nothing lol. If you want to see what it does just replace the 0 with a #.

If you stuck with me for this lovely baby making adventure of whateverness you should now be able to make basic GUI and know a little bit about variables. Next time we will be doing something a little more advanced with buttons, sliders, if statements, and displaying info if certain conditions are met.

Hope you enjoyed this tutorial and if you liked it please hit that like button that no one knows about.

Almost forgot about you lazy peeps XD. Here is the final code if you couldn't follow along :P.

var Whatever : int;
function OnGUI(){
	GUI.Box(Rect(0, 0, 300, 300),"Baby Making Box");
	GUI.Label(Rect(0, 20, 120, 20),"whatever you want");
	GUI.Label(Rect(0, 40, 120, 20),Whatever.ToString("#,##0"));
	if(GUI.Button(Rect(100, 280, 100, 20),"whatever")){
		Whatever += 1;
	}
}

function Update () {

}