GameSalad

Workbook
Gamesal ad
1
The beneft 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 ames
Have a look at some of the pre-made ames, 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 ames?
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 diferent 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 ame, re-namin them
ready to later create a form of naviation between them all. Perhaps one for a Main Menu
or a Game Over Screen? You could have a scene to identify each level.
2
GameSal ad
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 diferent 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 efects
you can use within your game. This is also empty at the moment, as nothing has been added just yet.
3. Imae Library
Try addin some imaes and sounds into your library from your computer usin the + and
- buttons on the riht of the library. As you bein selectin imaes/sounds you will bein
to see your library row.
Note: These imaes/sounds are not automatically added to your ame, this is just a
library storin imaes that you may use to add into your ame.
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.
GameSal ad
3
A lot of characters in game characters are animated, which means the images is ficking between diferent
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 frst 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 fickering 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 fick 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 animatin your own character, you can find a sequence of imaes that suit your ame
and have a play with the speed that the ame is switchin between imaes. The
movements should look smooth and as if it were actually movin.
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.
4
GameSal ad
5. Character Movement
Ensure your character moves in all four directions: Left, Riht, Up and Down usin either
the arrows on your keyboard or usin W, A, S and D for a 2-player ame.
You can also chane the speed of the movement, default is 300 and ranes 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 fnd 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 ame: Is it to collect items? Is it to manoeuvre throuh your
obstacle within a specified time frame?
This is where we need to consider how we are oin to proress our character throuh
our ame. So far we have a backround 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.
GameSal ad
5
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 efectively 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 fnd
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 Prototypin
Add a new actor to your library, an imae you wish to use to move your character to
collect in your ame effectin your score.
Click your prototype and add a new rule. Dra on a behaviour called Collision
You can chane 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 touchin 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 confdent the code works, but remember once you have made a copy of the prototype
you cannot just change the prototypes code to efect all of the collectables now.
6
GameSal ad
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 frst:
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
Usin the above instructions, try addin your own Score to your Game.
You can chane the formattin and font of the score, add it to your ame screen and test
it usin the Preview button.
Your score should start at 0 and as we have not yet iven our collectables any code to
tell it how to manipulate the score, the score should stay at 0 at this point.
GameSal ad
7
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 Prototypin
The Chane Attribute behaviour is a behaviour enablin the user to set, chane or
increment a value/attribute. As before you can press a and choose which attribute you
wish to edit, in this case ame.Score. Then you can specify what you wish to chane
your attribute to.
You can re-select ame.Score usin the e next to the TO: text box, but before you
press the *reen tick* you can type + followed by the value you wish your character
can achieve by collectin that particular Actor/Collectable.
Below is an example:
Note: Above we are usin a conditional rule that already existed from makin our
collectables destroy on contact with our Main Character.
8
Extended Exerci ses
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.
Usin this knowlede see if you can
confi dentl y add an enemy, that
perhaps shoots across your screen
or randomly appears. You can minus
s c o r e v a l u e s i n s t e a d o f
incrementin and even
d i s p l a y s o me t e x t
when the characters
collide, such as ouch
or -30 points.
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.
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
f o l l o wi n g c o d e
accordingly. This
tells our game to randomly produce the specifed
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.
www.technocamps.com