Skip to main content

Game Builder Blocks - Coding Concepts

This article will provide you with in-depth explanations of the coding concepts taught on the different Game Builder courses.

D
Written by David Burnham
Updated this week

Game Builder allows students to build their own 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:


Loops

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

The instructions inside the loop will be executed in order and repeated once you get to the bottom of the blocks.

Since the loop does not end, blocks can't be attached to the bottom of the loop block.

In the following example, the sprite will step back and forth for as long as the game runs.

Sometimes you may only want a loop to run a specified number of times. In this case, you can use the repeat times block. The block works the same as the loop block, but now it only executes the specified number of times and then continues after the block.

In this example, the sprite will move back and forth 5 times in each direction, then stop.


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 block 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.

For example, if this code block was in a monkey sprite, the score would only increase when the monkey collides with the banana and the monkey Y position is greater than 200. If the monkey collided with the banana and the y position was less than 200, the code would do nothing.

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 block defines two code segments: 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 in the if statement is executed. Otherwise (the answer is no), the code block in the else statement is executed.

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.

For example, if you use an if-else to check the collision of the monkey and banana, now you either add 2 to the score if the y position is greater than 200. If it is not, you add just one. You will never add both the 2 and the 1, but you will always add at least one.

Using the gear button on the if or if-else button, you can extend the statements using else if statements. An else if statement is an alternate condition that will be evaluated if the if statement is not true. If that condition is true, then it will execute the block. Multiple else if statements can be used, but they all need to come before any else statement if you choose to use the 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

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 or a string. A variable is referred to by a name. A variable's value can be changed.

To create a new variable, select Create variable ... from the Variable tab. You will then give the variable a name. Once you create the variable, three blocks will be created in the variable tab.

Variables are unique to a particular sprite or object. You cannot directly access the value of a variable from another sprite.

Blocks

Block Name

Description

Sets the variable to a specific value or equal to another object value.

Changes the variable by a specified value.

Gets the specified variable value.


Set variableName to

The set block allows you to set the variable to a specific value. Notice that this block doesn't have a number value associated with it. That is because variables can be set equal to numbers, but they can also be set equal to other things, such as the value of another variable or a string.

Arguments

Property Name

Values

Use To

variableName

Drop down

If multiple variables are used, this allows you to select the variable to set. It also provides a menu to rename or delete the variable.

Example

This assigns the score variable to a value of 3.

If you want to change the value of the variable, you can assign a different value to it. The new value will override the existing value.


Change variableName by

In addition to reassigning a variable value, you can also increment the variable up by a set amount using the Change by block. That set amount can be either a literal number, or a number saved in a different variable.

Arguments

Property Name

Values

Use To

variableName

Drop down

If multiple variables are used, this allows you to select the variable to set. It also provides a menu to rename or delete the variable.

Example

This changed the score variable by the amount stored in the banana value variable..


variableName

The block that is just the variable name returns the current value of the variable. This value can be used elsewhere in the code.

Example

In this example, when the sprite is clicked, it will step 10 for steps times. If the steps variable is set to 3, the sprite will move 10 three times for a total of 30 steps.


Variables are powerful when used within loops. For example:

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.

You cannot access variables from other sprites directly. Instead, you need to use a function in the other sprite to return the value of the variable you want.

Example

A banana sprite has a specified value stored in the value variable in the banana code. This get value function will return that value.

In the monkey code, you can then use that function block to increase the score by the banana value when the monkey collides with that particular banana.


Comparison Operators

Comparison operators are used to compare between two values and return true (yes) or false (no). You can find the comparison operator block in the Logic and Data tab.

The drop down has the following operators to be used in the Game Builder:

  1. = (equal to)

    1. returns true if the value on the left is equal to the value on the right.

    2. returns false if the values are not equal.

  2. ≠ (not equal to)

    1. returns true if the value on the left is not equal to the value on the right.

    2. returns false if the values are equal.

  3. < (less than)

    1. returns true if the value on the left is less than the value on the right.

    2. returns false if the value on the left is equal or greater than the value on the right

  4. ≤ (less than or equal to)

    1. returns true if the value on the left is less than or equal to value on the right.

    2. returns false if the value on the left is greater than the value on the right

  5. > (greater than)

    1. returns true if the value on the left is greater than the value on the right.

    2. returns false if the value on the left is equal to or less than the value on the right

  6. ≥ (greater than or equal to)

    1. returns true if the value on the left is greater than or equal to the value on the right.

    2. returns false if the value on the left is less than the value on the right

Comparison operators are usually used as the condition in an if statements. 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 200 point bonus, otherwise, 200 point penalty

  • If we collected 4 or more items, change sprite's speed


Boolean Operators

Boolean operators allow you to combine conditions to make more complex conditions. For example, if it is sunny and it is warm, then it is a nice day. The and is used to combine two conditional statements.

The Boolean operator blocks are found in the Logic and Data tab.

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 an if statement.

Example

In this example, the score will only change if both the x position is > 100 and the score is less than or equal to 20.

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.

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 an if statement.

Example

In this example, the game will reset if either sprite's y position goes greater than 400 or the lives variable is less than or equal to 0.

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.

Notice now that only the strawberries get to 3, but the heart still shows.

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 an if statement.

Example

In this example, the sprite will show as long as the lives are not less than or equal to zero. For example, if lives are equal to 3, 3 is not less than 0, the initial expression is false. The not reverses it and it becomes true. Since the entire statement evaluates to true, the sprite will show.

The following table shows the values of the not operator:

condition1

not condition1

true

false

false

true


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.

Functions are also useful to do things that involve multiple objects. For example, if you want a heart to appear when the monkey collects a banana, you can create a function in the heart sprite to display. This function can then be called from any sprite, such as the monkey sprite when it collides with the banana.

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 Turn Left. or, if we have a function that handles all actions when we fail and lose life in the game, we can name it Fail.

Functions are created in a particular sprite using the Object Functions tab section, but can be called from any sprite with the Other Object's Functions tab.

The following blocks are available in the Object's Function tab:

Block Name

Description

Used to define a function that does not return a value.

Used to define a function that does return a value.

Used to return a value if a condition is met.

Function Definition Without Return

A function definition block without a return statement is used to create a function that only executes code. The results of the code are not returned to the original place that called the function. When called, the function will execute the blocks enclosed in the function block.

Example

The Add Score function is defined below. When this function is called, the score counter will be increased by 10.


Function Definition With Return

A function definition block with a return statement is used to create a function that executes code and then returns a value to the original place that called the function. When called, the function will execute the blocks enclosed in the function block and in the end, return a result.

Example

The Increase Score function is defined below. When this function is called, the value variable will be increased by 100 and then the result is returned to the original place where the function was called.


If ... Return

The if ... return statement takes a conditional statement and if it is true, it returns a value. If it is false, the program just continues. If the statement is true and the program returns a value, the function stops running at that point and returns to where it was called.

This statement can be used in either a function with return or a function without return block.

Example

In this example, if the value variable is greater than or equal to 50, then the program will return 50. It will never go past that block and the value variable will not increase. If it is not true, then it will go to the first return statement, increase the value by 5, and then return that new value.


Using Parameters with Functions

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

To use parameters, you use the same function blocks (either the one with a return or the one without). Then you select the gear icon to bring up a menu.

On left of this menu, you can give your variable a name. The default value is x. Once you name your variable, you then drag it to the inputs block. You can add as many as you need, you just need a distinct name for each.

In the block above, two input variables have been created, x pos and y pos. Notice that the function now says with: x pos, y pos. These are the input parameters. You will find the variables listed in the Variables menu.

Example

The distance to banana function takes a monkey and banana x value as the input parameters and sets the distance variable equal to their difference.


Calling Functions

When a function is written, the code is not executed. It is only executed when it is called. The blocks needed to call a function are generated once a function has been created.

To call a function defined in the current sprite, you will find the block in the Object's Function menu. To call functions from other objects, you will find them in the Other Object's Function menu prefaced with the objects name, for example banana.getValue.

Depending on the type of function, you will encounter one of the following blocks.

Block

Description

Function without parameters or a return value. Notice that it will be used in a group of blocks.

Function without parameters but does have return value. Notice that it will be used as a value input into another block.

Function with two parameters and no return value. Notice that the parameters will attach as values to the block and the block will be used in a group of blocks.

Function with two parameters and a return value. Notice that the parameters will attach as values to the block and the block will be used as a value input into another block.

Example

In this example, a function is created to increase the score for each star that is used. That function is then called when the monkey collides with the star.

Notice in the game play how the score increments by an increasing amount each time. First 5, then 10, then 15, and finally 20.


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 block (event handler) should be defined in the code. This predefined block is invoked when the event occurs.

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

Let's review some of the events used.

Keyboard Events

The On Key block (event handler) is called each time a key is pressed on the keyboard. If we want something to happen when pressing the keyboard, we need to define and code the On Key block.

The drop down box defines which key the block will handle, 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:

Swipe Events

The On Swipe block is called each time a touch-screen is swiped. This block allows the user to control behaviors of the sprites or the game by swiping the screen. If we want something to happen when swiping the touch screen, we need to define and code the On Swipe block.

The drop down defines 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:

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 On Click block (event handler) is invoked. If we want something to happen when clicking on a sprite, we need to define and code the On Click block.

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

If you want the sprite to jump when clicked, the code will look like this:

For information on other events, see here.


Relevant Articles:

Did this answer your question?