Game Builder allows students to build their own games. We have three main courses that teach how to build different types of games:

The courses explain different aspects of game creations - sprites, widgets, adding messages, gravity, etc. Of course, in order to create games, we need to add code. This article will focus on the different coding concepts that are used in the Game Builder courses.

The following concepts are outlined in this article:

Simple Loops
Arrays
For Loops
Conditional Statements (If-Else)
Variables and Properties
Assignment Operators
Comparison Operators
Boolean Operators
Functions
Events

Simple Loops

A simple loop is a block of instructions that are repeated for as long as the game runs.

The instructions inside the loop are indented. To indent code, use the tab key.

Since the loop does not end, any code that is written after the loop will not be reached.

The syntax for using a loop is:

loop
    # do something repeatedly

In the following example, the sprite will step back and forth for as long as the game runs. The sprite will not jump because that code will not be reached.

loop
    @step 100
    @step -100
@jump()

If we want to repeat a code for a specific number of times, we will use the times loop. The code indented will be repeated per the number specified in the times loop.

The syntax for using a times loop is:

t.times =>
    # do something t times

t is replaced with the number of times to repeat the loop.

In the following example, the sprite will step back and forth 3 times and then the sprite will jump.

3.times =>
    @step 100
    @step -100
@jump()

In this example, an endless loop is defined in the tiger sprite and a times loop (3 times) is defined in the monkey sprite.

You can see that the monkey jumps after 3 iterations and the tiger keeps on stepping.

Arrays

An array is a named collection of items. The items have order in the array. These items are accessed by using square brackets - [ ]. To refer to an item in an array, use the array's name and square brackets, inside the brackets write the index number of the item.

The first index is 0. The last index will be the number of items in the array minus 1 (since the first index is 0).

The items in an array can be:

changeable and their values are not unique

The syntax to define an array:

arrayName = [item0, item1, ..., itemN-1]

For example you can define an array:

myArray = [2, 4, 6, 8]

Refer to the first item in the array:

myArray[0] # its value is 2

Refer to the last item in the array:

myArray[3] # its value is 8

You can also define an array of sprites and then show them only at a certain point in the game.

Array definition:

spritesArray = [mySprite0, mySprite1, mySprite2]

Of course, you must have all the sprites in the game, otherwise an error will occur.

Then, you can decide that when clicking on a different sprite, all these sprites will be shown or hidden.

Code to show all sprites:

@onClick = () =>
    for s in spritesArray
        s.show()

Code to hide all sprites:

@onClick = () =>
    for s in spritesArray
        s.hide()

In the below example, clicking on the monkey on the left shows 3 sprites (banana, chocolate and pineapple); clicking on the monkey on the right hides the 3 sprites).

For Loops

A for loop is used to repeat code for all items in an array. It is used when we want to perform the same action on each of the items. The for loop will keep going until the actions are completed on all the items in the array.

The syntax to use a for loop is:

for loop_variable in array_name
    # Your code here

The loop_variable is a name we assign; it can be any name we want.
When the computer executes a for loop, it first replaces loop_variable with the first item in the array and runs the instructions inside the loop for that item. Then, it continues to the second item in the array, and so on. So, the loop will run as many times as the number of items in the array.

For example, suppose we have 4 items (sprite names) in an array called spritesArray.

The items are: monkey, hippo, tiger, porcupine.

We write the following code:

spritesArray = [monkey, hippo, tiger, porcupine]
for sprite in spritesArray
    sprite.step 300

The first time this loop will run, the computer will replace s with the first item - monkey. The actual code that will run is:

monkey.step 300

Then, s will be replaced with the second item - hippo. The actual code that will run is:

hippo.step 300

Then, s will be replaced with tiger. The actual code that will run is:

tiger.step 300

Finally, the last run will be:

porcupine.step 300

In this example, clicking on the star sprite makes all 4 animals move right and clicking on the coin makes them move to the left.

Conditional Statements (If-Else)

Conditional statements are if and if-else statements. They are used for decision making.

Sometimes when writing code, we want something to happen only if a certain condition is met. For example: if I am sick, I will stay in bed.

An if statement defines a code block for the if statement.

The computer checks the condition. If the condition is met (the answer is yes), then the code block of the if statement is executed.

The syntax for an if statement is:

if condition
    # do something

There can be cases when we would want something to happen in case a condition is met, and something else to happen in case it does not. For example: if it rains we will watch TV, otherwise we will go outside and play ball.

An if-else statement defines two code blocks: one for the if statement; one for the else statement. First, the computer checks the condition. If the condition is met (the answer is yes), then the code block of the if statement is executed. Otherwise (the answer is no), the code block of the else statement is executed.

The else statement is optional and will be used only when we want something to happen when the if condition is not met (when it is no).

When using an if-else statement, either the code block of the if statement is executed or the code block of the else statement is executed.

The syntax for an if-else statement is:

if condition
    # do something
else
    # do something else

In the following example every time we click on the monkey a random number is picked (between -50 and 50).

If the number is negative (the if block), the monkey is set below the bricks, otherwise the number is zero or positive (the else block), the monkey is set above the bricks.

Variables and Properties

A variable can be thought of as a container that holds one value at a time. It is a place in the computer’s memory for storing some kind of data.

The value can be any type of data. For example: number, string, or an array. A variable is referred to by a name. A variable's value can be changed.

To assign a value to a variable, use the = symbol.

In the following code:

myVar = 10

myVar is the variable name and 10 is the value assigned to it.
If you want to change the value of the variable, you can assign a different number to it. For example:

myVar = 5

Now the value of myVar is 5.

Variables are powerful when used within loops. For example:

d = 100
t = 90
3.times =>
	@step d
	@setRotation t
	d = d + 50
	t = t + 90

In the example above, d and t are variables. Each iteration, 50 is added to d and 90 is added to t.

The following table summarizes the values of both variables.

Initial value	`d = 100`	`t = 90`
After first iteration	`d = 150`	`t = 180`
After second iteration	`d = 200`	`t = 270`
After third iteration	`d = 250`	`t = 360`

The hedgehog turns a different angle each time and steps a different distance.

Properties of sprites are similar to variables. The difference is that they can be accessed and changed from other sprites as well. In order to define a property of a sprite, use the @ character before the property name.

For example, we define the property isHungry in the monkey code.

@isHungry = yes

Then we can check the value of this property in other sprites, for example in the banana sprite.

if monkey.isHungry
    @destroy

The monkey will "eat" the banana only when it is hungry.

Assignment Operators

Assignment operators are used to assign a new value to a variable or a property.

The following operators are used in the Game Builder:

= (simple assignment)
1. myNum = 10
2. Setting the value of 10 to myVar
+= (add and assignment)
1. myNum += 1
2. adding 1 to the value of myNum
3. equivalent to myNum = myNum + 1
-= (subtract and assignment)
1. myNum -= 1
2. subtracting 1 from the value of myNum
3. equivalent to myNum = myNum - 1

Using the = symbol overrides the value of the variable/property. Using += or -= only adds/subtracts from the value of the variable/property.

Note: when defining a variable, you first need to assign a default value to it, and then you can use the += or the -= operators.

For example, we can have counter widgets where we:

add points each time the monkey collects bananas
- score.value += 50
reduce points when monkey collects chocolate
- score.value -= 50
count the number of bananas collected
- countBananas.value += 1
- countChocolates.value += 1

Comparison Operators

Comparison operators are used to compare between two values and return true (yes) or false (no).

The following operators are used in the Game Builder:

== (equal to)
1. returns true if the value on the left is equal to the value on the right.
2. myVar == 0
3. returns true if myVar is zero and false for any other value.
< (less than)
1. returns true if the value on the left is less than the value on the right.
2. myVar < 0
3. returns true if myVar is negative (less than zero) and false for any other value.
> (greater than)
1. returns true if the value on the left is greater than the value on the right.
2. myVar > 0
3. returns true if myVar is positive (greater than zero) and false for any other value.

Comparison operators are usually used as the condition in an if statements or while/until loops. The computer evaluates the comparison and returns true or false which is the value of the condition.

For example, we can decide on bonus/penalties points or on changing the sprite's settings.

if we collected all items, get 1000 points

if countBananas.value == 10
    score.value += 1000

if we collected less than 5 items, reduce 100 points
```
if countBananas.value < 5
    score.value -= 100
```
If we collected more than 5 items, change sprite's speed
```
if countBananas.value > 5
    @setSpeed 1.5
```

Boolean Operators

Although Boolean Operators are not part of the Game Builder courses, they are an important concept in programming and therefore will be covered in this article.

The following Boolean Operators will be reviewed:

and operator

The and operator combines two conditions. It returns true (yes) when both conditions are true, otherwise it returns false (no).

The and operator can be used in a conditional loop (while/until loop) or in an if statement. The syntax to use the and operator in an if statement is:

if condition1 and condition2
    # do something because both condition1 and condition2 are true

The condition of the if statement consists of two parts: condition1 and condition2. Only when both parts evaluate to true then the condition of the if statement will be true.

The following table shows when the and operator returns true:

condition1	condition2	condition1 and condition2
true	true	*true*
true	false	false
false	true	false
false	false	false

For example, we can check if the value of both counters is 3. If it is, we show the heart sprite.

if countBananas.value == 3 and countStrawberries.value == 3
        heart.show()

You can see below that on the first attempts the time ended and only one value was 3, therefore the heart was not shown. In the second try, both values were 3 and the heart is shown.

or operator

The or operator combines two conditions. When at least one of the conditions is true (yes) - the or condition evaluates to true. Otherwise it is false (no).

The or operator can be used in a conditional loop (while/until loop) or in an if statement. The syntax to use the or operator in an if statement is:

if condition1 or condition2
    # do something because either condition1 is true,
    # condition2 is true or both are true

The condition of the if statement consists of two parts (condition1 and condition2).

When at least one of the conditions is true, the condition of the if statement will be true.

The following table shows when the or operator returns true:

condition1	condition2	condition1 or condition2
true	true	*true*
true	false	*true*
false	true	*true*
false	false	false

For example, we can show the heart sprite if at least one of the counters' values is 3.

if countBananas.value == 3 or countStrawberries.value == 3
        heart.show()

In the below example we see that on the first try one of the values was 3, so the heart was shown. In the second try both of the values were not 3, so the heart is not shown.

not operator

The not operator reverses the result of the condition: true (yes) becomes false (no), and false (no) becomes true (yes).

The not operator can be used in a conditional loop (while/until loop) or in an if statement. The syntax to use the not operator with an if statement is:

if not condition1
    # do something when condition1 is false
else
    do something when condition1 is true

The following table shows the values of the not operator:

condition1	not condition1
true	*false*
false	*true*

Example using the not operator:

if not raining()
    playOutside()
else
    readABook()

In the example above, if it is not raining then play outside. Otherwise, read a book.

Let's look at the example below. The monkey has a property named stillMode. When it is set to no, the monkey should jump and when it is yes, the monkey stands still. A timer runs and changes the value of the property each time it ends. We check in the if statement if not @stillMode in order to make the monkey jump.

if not @stillMode
        @jump()

Functions

A function is a named set of instructions that performs a specific task. The computer will only execute the function when you use it in your code.

You should give a meaningful name to the function to describe what the function does. This will help others easily understand your code. For example, if we have a function that turns a sprite left, we should name it turnLeft(). or, if we have a function that handles all actions when we fail and lose life in the game, we can name it fail().

A function can use parameters, which enable you to use the same code with different values. These values are sent to the function by the other code that calls the function.

The syntax to define a function with no parameters is:

functionName = () =>
    # do something

To use this function, write:

functionName()

The syntax to define a function with one parameter is:

functionName(parameter1):
    # do something and use parameter1

To use this function, write:

functionName(argument)

When argument holds the value to be sent to the function.

If you want to define a function with more than one parameter, use a comma to separate between the parameters.

All the function's code is indented under the function's definition. The first line that is not indented is not part of the function.

Let's define a function that checks which way the monkey should go (right or left). Then we will call the function from each falling sprite.

The function's code:

@stepTo = (sprite) =>
    if sprite.getX() < @getX()
        @step -250
    else
        @step 250

When the sprite reaches the ground (onCollideWithWorldBounds event), we will call the function so that the monkey can get to the sprite.

@onCollideWithWorldBounds = (down) =>
    monkey.stepTo(star)

When the game runs, each time the star reaches the ground, the function stepTo is called and the monkey moves based on where the star sprite is and where the monkey is.

In each of the sprites, the name of the sprite is sent to the function stepTo and replaces sprite. In the above example, sprite is replaced with star. In the following example, sprite is replaced with ball.

@onCollideWithWorldBounds = (down) =>
    monkey.spriteTo(ball)

Events

Events are actions triggered by the user that take place while the code

is running. As a result, events affect what is happening.

Events can be user-generated like pressing a keyboard or moving the mouse; it can be system/game generated like sprite collision or timer ends.

In order for something to happen when an event is triggered, a designated event function (event handler) should be defined in the code. This predefined function is invoked when the event occurs.

When the designated event function is not defined in the code, the event will not trigger any action.

Let's review some of the events used.

Keyboard Events

When the user presses a key on the keyboard, the keyboard event is invoked. In game builder, the function onKey is called. If we want something to happen when pressing the keyboard, we need to define and code the onKey function.

The syntax is:

@onKey = (key) =>
    # Add code here

The parameter key holds the key that was pressed, for example "a". This gives us flexibility to do different things based on the key that was pressed.

A good use of this event would be to control movement of sprites. For example, we can decide that pressing the right arrow key would move the sprite to the right and pressing the left arrow key will move the sprite left.

The code will be:

@onKey = (key) =>
    if key == keyboard.right
        @step 1
    if key == keyboard.left
        @step -1

Swipe Events

When the user swipes a touch screen, the swipe event is invoked. In game builder, the function onSwipe is called. If we want something to happen when swiping the touch screen, we need to define and code the onSwipe function.

The syntax is:

@onSwipe = (direction) =>
    # Add code here

The parameter direction holds the direction of the swipe. This gives us flexibility to do different things based on it.

A good use of this event would be to control movement of sprites. For example, we can decide that swiping to the right the sprite will turn to the right and swiping to the left it will turn left.

The code will be:

@onSwipe = (direction) =>
	if direction == swipe.left
		@setRotation 180
	if direction == swipe.right
		@setRotation 0

The possible values of the parameter direction are:

swipe.down
swipe.up
swipe.left
swipe.right

Note: If you don't have a touch screen, you can use the arrow keys on the keyboard. Pressing the up arrow key is the same as swiping up, pressing the right arrow key is the same as swiping right and so on.

Mouse Click Events

When the user clicks on a sprite the mouse click event is invoked. In game builder, the function onClick is called. If we want something to happen when clicking on a sprite, we need to define and code the onClick function.

The syntax is:

@onClick = () =>
    # Add code here

The function is called when clicking on the specific sprite for which it was defined. If you click anywhere else, nothing will happen (unless another onClick function is defined).

In the below example, when pressing on the right and left arrows, the tiger moves to the right and left. The onClick function is defined in the tiger sprite not defined in the powerUp sprite.

When clicking on the powerUp nothing happens; when clicking on the tiger it jumps.

For information on other events, see here.

Relevant Articles:

Game Builder Guide

Game Builder - Sprites Tab

Game Builder - Widgets Tab

Game Builder - Additional Features