GameSalad

Workbook
Gamesalad
The benefit of the drag-and-drop approach
to programming is the lack of pressure to
learn a programming languages syntax.
GameSalad provides just that. In addition is
also provides a friendly user-interface,
attractive to both experienced users and
newcomers, as well as the range of assistance
available to users ranging from forums and
help guides, to demo games, example code
and helpful videos.
www.gamesalad.com

1. GameSalad example games

Have a look at some of the pre-made games, how do they work:

Do these use timers?

Do you build up a score?

Do you manoeuvre between levels and screens?

Are they 1-player or 2-player games?

Do you need to collect items or just avoid obstacles or enemies?

When you open GameSalad, a new game is available, you also need to choose a title for your game by going
onto File, Save As and naming it. Once youve saved you can select between the tabs along the left hand
side of the interface, beneath Library. Tabs called Scenes , Layers, Actors, Media, Behaviors
and Tables can be seen here and each leads to different options displayed below.
By clicking on the Scenes tab, you will be able to see a list of scenes in your game. As this is a new game,
there is one scene readily available to you called Initial Scene. Using the + or - buttons on the right of the
library box, you can add or remove as many scenes as you like ready to start programming.

2. Scenes
Have a think about how many scenes you will require in your game, re-naming them
ready to later create a form of navigation between them all. Perhaps one for a Main Menu
or a Game Over Screen? You could have a scene to identify each level.

1
GameSalad
This is the screen that would appear
when you double click on one of
your scenes, this editor allows you to
add Actors, give them behaviours
and begin developing your game.

The black square on the right is the

actual scene you are creating, the
lighter grey band around the box
can be used, but is not visible on
your screen when you upload your
game onto your iPhone for example.

On the left, the screen is split into 2, the top called library and the bottom section, titled Attributes, is
divided into 3 tabs: Game, Scene and Actor. If you select Behaviours, 36 different behaviours appear to drag
onto your code later on. If you select Images this displays your library of images ready to use in your game,
at the moment this is empty because we havent added any. Sounds is also a library, but of sound effects
you can use within your game. This is also empty at the moment, as nothing has been added just yet.

3. Image Library
Try adding some images and sounds into your library from your computer using the + and
- buttons on the right of the library. As you begin selecting images/sounds you will begin
to see your library grow.

Note: These images/sounds are not automatically added to your game, this is just a
library storing images that you may use to add into your game.

In the library, select Actors. Here you

can add your actors into your game and
give them images. You can do this by
dragging an image from a folder opened
in another window onto where it says
drag an image here.

To add your Actor onto your scene you

need to select it from the library and drag
it onto the black square.

2
GameSalad
A lot of characters in game characters are animated, which means the images is flicking between different
instances of the image.
E.g. Your character may looks like he is walking when he moves, it is in fact in a loop changing between 2 or
more images. The characters first leg out stepping forward, another with the other leg behind.

Double click on your main character from

your Actors library, then click on the
button that looks like this

The scene on the right should appear

allowing you to drag in combinations of
behaviors and rules to give your
characters instructions.

To achieve this flickering between images,

there is a behaviour called Animate available in the library in the tab labelled behaviours. If you click on
it and drag it into the section titled backstage, you should see it appear on the right, this is where you can
drag your code to. You must drag in a sequence of images from your image library into the Animate box
and alter the speed of the loop between the images, when you flick back onto your game scene and press
Preview you can see you character in action.The images can be found/added/removed from the Media
tab in the library, using the + and - buttons. These are what you use to drag into your animation sequence.

4. Animate your character

Try animating your own character, you can find a sequence of images that suit your game
and have a play with the speed that the game is switching between images. The
movements should look smooth and as if it were actually moving.

Now that we have animated our main character, we need to tell it to respond when we press our arrow keys
on our keyboard. By doing this our character will be able to move right, left, up and down around the
screen. This is where we introduce rules, meaning something will only happen under a certain condition.
So, with the movement our character will only move left if the left arrow key is pressed, the character will
only move right if the right arrow key is pressed, and so on.

We need to click + Rule button, we need to tell our character the condition: IF Actor receives event
*key*. You must type key and press ENTER. Now you need to press on your keyboard which key you
are programming followed by *is down* (referring to the key being depressed, not the direction).
Underneath that, in do, we need to drag in the command to tell our character to move. We need to use the
Move behaviour, here you can change it depending on the key you press.

3
GameSalad
5. Character Movement
Ensure your character moves in all four directions: Left, Right, Up and Down using either
the arrows on your keyboard or using W, A, S and D for a 2-player game.

You can also change the speed of the movement, default is 300 and ranges between 0
and 500.

Note: You can copy code by selecting the section and pressing the ctrl key and either C to copy or V to
paste. Be careful copying code and not editing all of the content, you may find for example that if you press
the right arrow, left arrow and the up arrow that the character all moves to the right because we forgot to
change that part of the code.

You can also shrink your code to clear up your screen, by using the arrow currently pointing down on the top
line of the rule.

6. Aim of the Game

What is the aim of your game: Is it to collect items? Is it to manoeuvre through your
obstacle within a specified time frame?

This is where we need to consider how we are going to progress our character through
our game. So far we have a background and a character that moves.

Note: Your background can consist of numerous Actors within your world, they will remain static as we
dont have to give them any code instructing them to move. If we dont tell them what to do, they wont do
anything!

You can also add your own full background, this can be achieved by adding an Actor and them extending it
to spread across your black screen. If it goes into the light-grey area then that bit that overlaps will not be
seen on an iPod Screen or in the Preview of the game.

4
GameSalad
Collectables enable our character to move around or through the game gathering items that help add to the
game score. Firstly we need to know a bit about prototyping and how this can effectively save us a lot of
time without having to repeat code potentially hundreds of times.

When we create a new Actor in our GameSalad Project this is stored in the Actors library. You will find
that you can drag numerous copies of that created Actor, this also includes any code. The Actors within the
library (not the versions copied onto your game) are called a Prototypes. It is important to remember that if
you drag on a copy onto your game and alter your prototypes code, it will automatically change them all. By
editing the instance of the Actor will only edit that singular copy.

7. Collectables Prototyping
Add a new actor to your library, an image you wish to use to move your character to
collect in your game effecting your score.

Click your prototype and add a new rule. Drag on a behaviour called Collision

You can change the conditions for the rule to overlaps or collides with *select your main
actor* and you can use a behaviour called Destroy in do which removes the character
when the rules conditions are met (is the main character touching the collectable?).

Add one copy of your prototype into your game and click Preview to test it and see how it works. You can
add more if you are confident the code works, but remember once you have made a copy of the prototype
you cannot just change the prototypes code to effect all of the collectables now.

5
GameSalad
Now we potentially have a method to collect a score throughout our game. We have the items to collect, they
disappear when we touch them but now we need to add an attribute to our game that can be altered and
added to throughout the game.
In the Attributes box of your GameSalad project, there are 3 tabs Game, Scene and Actors. If you click on
Game you can add a new one called Score using the + or - buttons below. This must have an Integer type.
We must add a new Actor and then give it instructions to display the Score attribute - we do not need to give
this an image. Before we add this Actor to our game, remember to give it code first:

We can tell the Actor to Display

Text by dragging that behaviour
into its code. But as you can see
the default text is Hello World!.

By clicking on the e on the right of the text box brings up the following screen, you can select Attributes,
Game and locate the Score attribute.

You can then press the green tick box and begin
editing the format your score will be displayed
within the game.

8. Score Attribute
Using the above instructions, try adding your own Score to your Game.

You can change the formatting and font of the score, add it to your game screen and test
it using the Preview button.

Your score should start at 0 and as we have not yet given our collectables any code to
tell it how to manipulate the score, the score should stay at 0 at this point.

6
GameSalad
Now we need to tell our collectables to add to the score each time they are collected. We can do this by
editing our collectable prototype and add code to tell our game to + to the score.
Note: Remember, if you have already made copies of your collectable, changing your prototype will edit the
ones already placed in your game, but changing the instances wont.

9. Collectables Prototyping
The Change Attribute behaviour is a behaviour enabling the user to set, change or
increment a value/attribute. As before you can press a and choose which attribute you
wish to edit, in this case game.Score. Then you can specify what you wish to change
your attribute to.

You can re-select game.Score using the e next to the TO: text box, but before you
press the *green tick* you can type + followed by the value you wish your character
can achieve by collecting that particular Actor/Collectable.

Below is an example:

Note: Above we are using a conditional rule that already existed from making our
collectables destroy on contact with our Main Character.

7
Extended Exercises
In some games, collectables can randomly appear to be collected and to gather a score, rather than the
character collecting the same set of collectables each time. In the below example, I have used a Timer
behaviour, telling my game to do a certain instruction every few seconds. In that I have used Spawn Actor
behaviour, which created a new actor instance in the scene. For the element of fun in the game you can also
achieve this randomly.
Instead of specifying
a position for the
Actor to be spawned
at, you can select the
e and enter the
following code
accordingly. This
tells our game to randomly produce the specified
Actor in a random location between 0 and the
maximum size of the screen. The code on the left is to
describe the Width location, you must edit this and
enter similar code for the height of the display.

Enemies/Obstacles provide an element of challenge to a game, particularly one with a score that can be
deducted. You can add a new Actor to your inspector, giving it an image to begin creating an enemy within
your game.

10. Enemies and Obstacles

You already know how to randomly spawn Actors, effectively use a Timer (to create a
loop), manipulate attributes and display text.

Using this knowledge see if you can

confidently add an enemy, that
perhaps shoots across your screen
or randomly appears. You can minus
score values instead of
incrementing and even
display some text
when the characters
collide, such as ouch
or -30 points.

8
www.technocamps.com