Category: Scripting

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.

Flow Charts

Flow charts are the first of a three step process to take an idea and turn it into code.  The flow chart helps us to organize and think through the idea.  The picture below shows several of the common shapes we use in flow charts and what they represent.

Flow Chart 3rd periodWe hook these shapes together with connector lines and arrow to form the chart.  This allows us to organize our idea into steps and to put those steps in the right order so our programing logic will work.

Pseudocode

The second step of taking an idea and turning it into code is to write pseudocode.  Pseudocode is a combination of English and   code.  Pseduo means false or fake.  So this is writing out lines of code that aren’t 100% correct.  The idea here is to take the flow chart and write pseudocode for each of the shapes.  This brings you one step closer to the real code.

Writing the Code

This is the third step of taking your idea and turning it into code.  Now that you have arranged and thought through your idea using the flow chart and written out the pseudocode, you can go to the computer and type in the real code.  You can now look up the specific commands and syntax needed to make the pseudocode into real code.

Functions

Functions are a way we can save some typing while scripting.  If we have a set of commands we want to use in several places in our program we make a function out of them and then we can call that function to run it’s code.

Defining a Function

Here is how we define a function:

We start with the key word “function” followed by a space.  Then we give our function a name (remember that you can’t put spaces in your function name).  The name should start with a capital letter.  After the name we put a set of parenthesis.  This completes the function definition.

Example:

function AnyName()

{

Put your commands here between the { }.  The brackets define a block of code so the computer knows what belongs in the function.

}

The parenthesis are where we can pass information to a function.  These pieces of information are called arguments.

Here is how we set up our arguments:

function AddNumbers(number1:int, number2:int)

We declare two temporary variables in the parenthesis.  Now we can catch the information sent to the function when it is called.

Calling a Function

A function will not do its commands until it is called.  To call a function you type it’s name.

Example:

AnyName( );

Here we called the function AnyName.  AnyName will now run it’s commands.  When all commands are done running the computer will go to the next line after the function call.

If the function we are calling has arguments, we need to send the information it is looking for when we call it.

Example:

AddNumbers(10, 50);

We just called the function AddNumbers and sent the two numbers it is looking for by putting them in the parenthesis.

AddNumbers will store this information in the temporary variables we declared (number1 and number2).

Returning Information From a Function

If we want the function to return some information we use the command “return” followed by the information we want to send back.

Example:

function AddNumbers(number1:int, number2:int)

{

return number1 + number2;

}

In this example we capture two numbers in the variables number1 and number2.  We then return the sum by adding them together and using the return command.

If we are expecting information back from a function call we need to have a variable to store it in.

Example:

var answer:int = AddNumbers(10, 50);

In this example we declared a variable “answer” and then set it equal to the function call to AddNumbers.  AddNembers will take the two arguments (10 and 50), add them together, and return the sum (60).  This result will be stored in the answer variable.

Functions are a very useful tool to reuse a block of code over and over again in our programs.  Mastering them is essential to becoming an effective programmer.

Conditional Statements are what we use in computer programing to build our game/program logic.  We are basically having the computer ask question and then taking action based on the answers.

If Statements

A conditional statement starts with the key word “if” followed by parenthesis.  In the parenthesis we place a condition that the computer can evaluate as true or false.  If the condition is true then the computer will do the instructions in the code block below the if statement.  If the condition is false the computer will skip the instructions in the code block.

Example of if statement:

if(health > 0)
{

print(“The player is alive”);

}

health  > 0 is the condition.  If health is > 0 then the computer will do the instruction in the code block defined by the { }

If the condition is false – health is not > 0 then the print statement will be skipped.

Else

If I want the computer to do something if the condition is false, I have to use an else statement.

Example:

if (health > 0)

{

do some stuff

}

else

{

do some other stuff

}

Now if health is not > 0 the instructions in the if statement will be skipped and the instructions in the else statement will be done.

 Compound Conditional Statements

A Compound Conditional Statement is when we have more than one condition to test.

If we want our condition to have several conditions be true to run then we use “&&”.  This means and to the computer.

Example:

if(health > 0 && ammo > 0)

{

shoot weapon;

}

In this example we would need both conditions (health > 0 && ammo > 0) to be true to shoot the weapon.

If one of the conditions is false, then we will not shoot the weapon.

If we want to do something if one of several conditions is true, then we would use “||” which means or to the computer.

Example:

if(meleeWeaponEquiped || rangedWeaponEquipped)

{

attack enemy

}

In this example if one or more of the conditions are true, then we will attack the enemy.  If all conditions are false then we won’t attack enemy.

To define our game logic, we need to arrange several conditional statements to direct the computer.  This can get really complex, so it helps to write it down and think it through before you try to type it in the computer.

Today we will continue to lean about variables.

To assign a value to a variable you use the “=” sign.

Example:  health = 100;

To assign a value to a String variable you must use quotes.

Example:  playerName = “Fred”;

Many times we need to look up the value stored in a variable and change it.  An example of this is updating health in our game.  To do this you would need to do the following steps:

  1. Look to see how much health you have.
  2. Look at how much damage the player just took.
  3. Compare health available to amount of damage – if you have more health then damage you live.
  4. Subtract the amount of damage from health and store your new health in your health variable.

In this example you see the need to do some math with your variables.  We are going to learn today how to add, subtract, multiply, and divide our variables.

Mathematical Operations

Lets first define a variable for our health.

var health:int = 100;

Let say that we just took 10 damage and need to update the value stored in the health variable.  Here’s how we do it:

health = health – 10;

What this does is sets our health variable equal to health (which has a current value of 100) minus 10 (for a new value of 90).  So now the value stored in health is 90.

We can write this command in a shorter way.

health -= 10;

This is the same as writing health = health – 10;

It’s the same with subtraction, multiplication, and division.  We can write it out or use the short way.

Examples:

health += 10;      (Adds 10 to the current value of health)

health *= 10;      (Multiplies health by 10 and stores the new value in health)

health /= 10;      (Divides health by 10 and stores the new value in health)

  There is an even shorter way of subtracting or adding one to a variable.

Example:

health – -;     (Subtracts 1 from health)

health ++;    (Adds 1 to health)

We are very often subtracting or adding one to a variable – so they developed this short way of writing it to save the programmer time.

Remember the computer follows the order of operations so when you are doing more than one mathematical operation in an equation you have to write it correctly.  See order of operations.

Today we will start our journey into the exciting world of javascript.

Javascript is a widely used programming language that we will use this year as we learn to make games in Unity.  Scripting is a necessary skill for all game designers.  If you understand how the computer works, you can design better games.

We are going to start out learning all about variables.

Variables are storage containers for all the information we need to keep track of in our games.  They allow us to store a piece of information and then retrieve it later.

There are many types of information we can store.  We will look at the four most used ones.  They are:

  • integers (int)- store positive and negative whole numbers.
  • floats (float)- store decimal numbers
  • Strings (String)- store text
  • booleans (boolean)- store a true or false value

To use a variable in your program you first have to declare it.  This is usually done at the very top of your script.

Here is how you declare a variable:

var variableName:variableType;

  • We start with the key word “var” – the computer knows when it sees this word that we are defining a new variable.
  • next we give our variable a name – we can name it whatever we want.  Example:  health
  • after the name we put a colon “:” then we put the variable type.  Example: int
  • we end our line of code with a semicolon “;”  This tells the computer that this is the end of this instruction.

Here is how I would declare a variable to store our players health.  Health is going to be a whole number between 0 and 100

var health:int;

If I want to assign a value to my variable at the time I create it all I have to do is set it equal to something.

Example:  var health:int = 100;

health now holds the value 100.

We will look at examples of all four types of variables in class and you will type them in to your own script to see how they work.

 

Please fill out this form to complete the turn in process for your Gamestar Mechanic game:  Gamestar Game Info