Silly Salmon
Section 1
2
The next game you're going to build is a game named Silly
Salmon. Silly Salmon is a game designed for a mobile device,
but is still playable on desktop. The player controls a Salmon
that is swimming upstream and must avoid obstacles. It's an
infinite scrolling game where the Salmon can move between
three lanes, and jump or dive below water to avoid the
obstacles.
3
The game features points that accumulate for the further you
get. The player also collects coins in the game that can be
spent on power-ups. The coins and power-ups are stored
between game sessions and loaded during the next gameplay
session.
The controls will consist of swiping left or right to move
between lanes, or up and down to jump or go underwater
respectively. On a desktop theses controls will be triggered by
clicking and then releasing the mouse button as you fling the
mouse in one of the directions.
4
Objective 1 - Project Setup and Adding Objects
Before you start, read the section objectives below. These
objectives will be completed at the end of this section.
● Set up the game and add the starting objects.
● Add the events for the Salmon's controls
● Make the land pieces move to make the Salmon appear to
be swimming upstream
5
Project Setup and Adding Objects
The first thing you'll need to do is to get your project setup.
Start a New empty project and Name it Silly Salmon. Set the
Window Size to 720, 1280.
6
Rename Layout 1 to Game and set its Layout Size to 720,
1280. Rename Event Sheet 1 to esGame.
Go to the Layers Bar and add three new layers to the layout.
Rename to the layers to the following, in top-down order:
HUD, Obstacle, Game, Background.
7
For the game to appear to be moving you're going to keep the
Salmon at the same Y value and move the other objects down
the screen. This will give the appearance of the river moving.
The only objects you'll add to the Background at this time are
land pieces that will appear on the left and right of the
screen.
Make the Background layer your active layer and go to the
Game layout.
8
Add a new Sprite object to the game and name it LandLeft.
Click on the bottom left of the layout to bring up the image
editor.
In the image editor click the Open button and from the
provided assets select the land file. Click the Image Points
tool in the left toolbar and set the Origin to Bottom-Left.
9
With the LandLeft object selected set its Position to 0, 1280.
This will position the object along the left edge of the layout.
Add another Sprite object and name this one LandRight. Click
the bottom right of the layout and bring up the image editor.
In the editor Open the land for this object as well.
10
With the image imported, click the Mirror button in the top
toolbar to flip the image.
Set the Origin to the Bottom-right. Add a new image point and
set it to Top-right. Close the imaged editor when this is done.
11
Quiz Time
What button in the image editor can flip the image
horizontally?
12
Quiz Time
What button in the image editor can flip the image
horizontally?
13
With the LandRight object
selected set its Position to
720, 1280 so the object sits on
the right edge of the layout.
Next, go to the Layers Bar and
make the Game layer the
active layer. Add a new Sprite
object to the project and
name it River. Click in the
middle of the layout to insert
the object.
14
In the image editor Resize the canvas to a Width of 480 and
Height of 1280.
Select the Fill tool and in the Color Palette set the following
values: Red - 18, Green - 143, Blue - 236. Fill the image with
this blue color.
15
Ensure the Origin is in the middle of the object and close the
editor. In the Properties Bar set the Position to 360, 640.
Right above the Position property is the Opacity property, set
its value to 50. This will make the object more transparent
and allow you to see the Salmon through it so it appears
underwater.
16
Now add another Sprite object and name it Salmon. Click in
the middle of the layout to add the object.
In the image editor Open the Salmon file. Close the image
editor when the image has been imported.
You'll later add animations to the Salmon object but for now you'll use a single
image for testing.
17
Set the Position of the Salmon object to 360, 900.
Add the Bullet behavior to the Salmon object. You'll use this
behavior in your events to control the Salmon's movements. In
the Bullet properties set the Speed to 0 and Set angle to No.
18
Next you'll add some instance variables to the Salmon. These
variables will be used to store the position of the start and
end of a screen touch (or click). You'll use these values to
determine the direction of the swipe to make the appropriate
movement with the Salmon. You'll also add a variable to store
which "lane" the Salmon is currently in.
19
In the Properties Bar add the following Instance variables:
TouchX_Start, TouchY_Start, TouchX_End, TouchY_End. These
will all be Numbers with an Initial value of 0.
20
Next add another instance variable named Lane. This will be a
Number with an Initial value of 2.
You set the initial value to 2 here since there will be three
lanes, numbered 1-3, and the Salmon will start in the middle
lane.
21
The next object you'll add will be a lane marker. This will be
an invisible object that the Salmon will use to find the lanes.
Add a new Sprite object and name it LaneMarker. Click to the
left of the Salmon and bring up the image editor.
22
In the image editor Resize the canvas to a Width and Height
of 20. Use the Fill tool to make the image Red. Make sure the
Origin is in the Middle of the object and close the editor.
23
Set the Position of the object to 200, 900.
You'll be adding three instance of this object, one for each
lane, so you'll need to add an instance variable to store the
lane number. Add an instance variable named LaneNumber
and set its Initial value at 1.
24
Create another instance of the LaneMarker object and set its
Position to 360, 900. Change the value of its LaneNumber
variable to 2.
Create one last instance of the LaneMarker object at Position
520, 900. Change its LaneNumber value to 3.
25
The last thing you'll want to do is reduce the size of all the
LaneMarker objects. This will allow the Salmon to stop at a
more precise location each time it enters a lane.
Click on LaneMarker in the Objects Bar to select all the
instances of the object. In the Properties Bar change the Size
to 4, 4.
26
Objective 2 - Salmon Controls
With your layout objects set up, you're ready to add the
controls for the Salmon. You'll use the touch controls to
detect the position of where a touch will begin and end, and
use those position to calculate how the salmon should move.
In order to use the touch controls you'll need to add the
Touch object to the project. Use the Projects or Objects Bar
to add the Touch object.
Click here to learn more about the Touch Object.
https://www.scirra.com/manual/119/touch
27
When the object has been inserted go to the esGame event
sheet. Add a new group to the sheet and name it
TouchControls. Add a Description to the group that says
Events that calculate the touch controls and Salmon
movements.
28
Add a sub-event into your group that uses the Touch object
and the On Nth touch start condition.
Construct is able to detect multiple touches which allows to
create specific events for specific touches. In this case you'll
create events for the first touch only. Set the Touch number
parameter to 0 and click Done.
The touch number is a zero-based index meaning the first touch will be 0, the
second will be 1, and so on.
29
At the beginning of the touch you'll want to set the X and Y
positions to the Touch_Start variables on the salmon. Add an
action to the sub-event that uses the Salmon object and the
Set value action in the Instance variables section.
In the Parameters window set Instance variable to
TouchX_Start and the Value to Touch.AbsoluteX to get the X
position of the touch.
30
Add another action to the event that will set the Salmon's
TouchY_Start to Touch.AbsoluteY.
31
This is all you'll need to set for when the touch starts. Before
you add the events for when the touch ends you'll wanted to
add your first global variable to the game. This will be a
variable that will store a value to indicate when the game is
over.
Add a Global variable to the game named GameOver, leave
the Type to Number and set its Initial value to 0. When the
game ends this value will change to 1, while 0 will indicate
the game is still being played.
32
Now that you have the GameOver variable added you'll add a
sub-event to the TouchControls group to test if the variable is
still set to zero.
Add a new sub-event onto the TouchControls group that uses
the System object and the Compare variable condition. In the
Parameters window make sure Variable is set to GameOver,
Comparison to Equal to, and Value to 0.
33
Next, add a sub-event onto the GameOver equals 0 sub-event
that uses the Touch object and the On Nth touch end
condition. You'll want to detect when the first touch ends so
make sure the Touch number parameter is set to 0 and add
the event.
34
To make sure that the touch event is a swipe and the player
simply just didn't tap the screen, you'll add a condition onto
the touch end that will test the touch speed.
Add a new condition onto the touch end that uses the Touch
object and the Compare touch speed condition. In the
Parameters keep the Touch index as the 0 touch, change
Comparison to Greater or equal, and set Speed as 20.
The Speed of 20 px/sec was found to be a good
base for the speed of a swipe through testing.
35
With the conditions set to detect the Touch end you'll want to
set the Salmon's variables for Touch_End. Add an action onto
the event that will set the Salmon's TouchX_End variable to
Touch.AbsoluteX and another that will set TouchY_End to
Touch.AbsoluteY.
36
Now that you'll have the X and Y position variables set for
when the touch starts and ends you'll want to calculate the
difference between the start and end position. This will serve
two purposes, first you can use this to find if the swipe is up
or down, or if the swipe was left or right. Since the swipe will
not be exactly horizontal or vertical you can calculate if the
swipe goes more of one way then the other.
37
The second purpose for the difference calculation is the figure
out exactly which direction the swipe went. After figuring out
if it is horizontal or vertical swipe you can find out if the
swipe will fire either the left, right, up, or down actions.
The first thing you'll need to do to calculate, is to add local
variables to store the value of the difference. Add a local
variable to the touch end event. Do this by right clicking on
the event, going to Add, and selecting Add local variable.
38
Add a local variable named Xdiff and another named Ydiff.
They will both be Numbers with an Initial value of 0.
39
With the variables created you can now add the events to set
them. Add an action that uses the System object and will set
Xdiff to Salmon.TouchX_End - Salmon.TouchX_Start.
Add another another that will set Ydiff to Salmon.TouchY_End
- Salmon.TouchY_Start.
40
This image shows the start
and end touch position of
swipes if they start at the
Salmon and then swipe up,
right, down, or left.
41
In the image here the
calculated Xdiff and Ydiff are
shown using the values from
the previous images. This may
give you an idea of how you
can use these values to detect
and set the actions for each
direction.
Refer back to this image when creating the events if you
ever need clarification on how these values are used.
42
With the X and Y difference values being calculated you can
now set the events to detect a vertical or horizontal swipe.
Add a sub-event onto the touch end event that uses the
System object and the Compare two values condition.
Set the First value parameter to abs(Xdiff) and the
Comparison to Greater than. Set the Second value to abs
(Ydiff).
43
This event will detect if there is a horizontal swipe. By using
the absolute values of the differences you can calculate that
the swipe was more horizontal (X value) than it was vertical
(Y value).
To help keep your events organized add a comment to this
event that reads Horizontal swipe.
44
For a vertical swipe your Ydiff will be greater than the Xdiff.
Instead of adding another comparison event you can simply
add an Else event, since if the swipe isn't horizontal it must
be vertical.
Right click on the horizontal swipe event and go to Add and
select Add 'Else'. Add a comment to the Else event that reads
Vertical swipe.
45
With the events set to detect either a vertical or horizontal
swipe you're now ready to set the specific movement events.
You'll first set the horizontal movement events.
Add a sub-event onto the Horizontal swipe event that will use
the System object and the Compare variable condition. Set
the Variable parameter to Xdiff and the Comparison to
Greater than. Keep Value at 0 and add the event.
46
An Xdiff greater than 0 will indicate a swipe to the right, so
add a comment to the sub-event that reads Move right.
When the Salmon moves right it will move to the next lane to
the right. Since the Salmon will move lanes you'll want to
change its Lane variable. Add an action to the sub-event that
will add 1 to the Salmon's Lane variable.
47
To create the actual movement you'll use the Bullet behavior
that was added to the Salmon. Add an action that will use the
Salmon object and the Set speed action in the Bullet section.
Set the Speed parameter to 350.
48
Quiz Time
What is the shortcut key to make a comment?
● M
● S
● Y
● Q
49
Quiz Time
What is the shortcut key to make a comment?
● M
● S
● Y
● Q
50
Next, you'll need to indicate the direction the Salmon will
move. Add another action to the event that uses the Salmon
object and this time select the Set angle of motion action in
the Bullet section. Set the Angle parameter to 0.
51
Since there are only 3 lanes you'll want to set it so the Salmon
won't try to go into a fourth lane. To do this add another
condition onto the event that uses the Salmon object and the
Compare instance variable condition.
In the Parameters window set Instance variable to Lane,
Comparison to Not equal to, and Value to 3.
52
Now when there is a swipe to the right and the Salmon isn't in
lane 3, so in lane 1 or 2, it will move to the next lane to the
right. Next, you'll need to add an event for the Salmon to the
move to the left. This will done on another sub-event onto
the Horizontal swipe event.
53
On Your Own
● Add a sub-event for when Xdiff is less then 0 and the Lane
variable is not 1
● Add an action that will subtract 1 from the lane
● Add the two actions that will move the Salmon to the left
at an angle of 180
● Add a comment that says Move left for this event.
54
On Your Own Example
It should look like this when you’re done.
55
With the left and right movement events set up, run the
layout and test these events. You'll see that if you click and
drag the mouse then release the mouse button the game will
treat this as a swipe and move the Salmon. But, you'll also
notice that the Salmon won't stop in the next lane but keep
moving.
To fix this you'll need to add an event that will detect when
the Salmon is in the lane indicated by its Lane variable.
56
Add a new sub-event off of the GameOver equals 0 event.
Select System as the object and the Pick by comparison
condition under the Pick instances section.
In the Parameters window set Object to LaneMarker,
Expression to LaneMarker.LaneNumber, Comparison as Equal
to, and Value to Salmon.Lane.
57
With the event set to pick your LaneMarker you'll want to add
a sub-event that will test if the Salmon is in the lane. To do
this you'll test the X position of the Salmon for if it's within a
certain range of the X position of the LaneMarker. You'll need
to use a range of values for a couple reasons.
58
First, and most importantly, while moving the X position of
the Salmon will be a decimal value. If you set it to test if the
X positions are equal it will be near impossible that the two
values will ever be exactly equal. Second, since the Salmon
will be moving at 350 pixels per second there will be times
that the X position can move over a range of values. You'll set
the range to be large enough to "catch" the Salmon when it
reaches the LaneMarker, but still small enough so the
movement between lanes is noticeable.
59
Add a sub-event to the event that picked the LaneMarker. Use
the System object and the Is between values condition under
the General section.
Set the Value parameter to Salmon.X, Lower bound to
LaneMarker.X-6, and Upper bound to LaneMarker.X+6.
60
This will give you a 12 pixel range where the Salmon will stop.
To stop the Salmon add an action that will use the Salmon
object and the Set speed action in the Bullet section. Set the
Speed to 0 and this will stop the Salmon.
61
If you run the layout again you'll find that this time the
Salmon will stop when it reaches the desired lane.
Next, you'll set up the events that will control when the
Salmon will go up or down, or in this case jump or go further
under water. These movements won't actually change the
position of the Salmon but will set animations on the Salmon
to make it appear to do these actions. Since you haven't set
the animations of the Salmon yet, you'll add a text display
that will show when one of these events has been fired.
62
The first thing you'll want to do to add the vertical swipe
controls is to add a testing text object. Go to the Game
layout and add a new Text object and name it TxtTest. Click
at the top of the layout to add the object.
Since this object will just be used in testing you won't change
any of the properties.
63
Next go to the Else event that detects a vertical swipe and
add a new sub-event. Use the System object and test if the
Ydiff variable is Less than 0.
This event will indicate a swipe up so add comment that
simply reads Jump.
64
Add an action to this event that uses the TxtTest object and
the Set text action to have the text read "Jump".
65
Next, add another sub-event to the Else event, this one
testing if Ydiff is Greater than 0. Add a comment that reads
Down.
Now add an event that will set the text of TxtTest to "Down".
66
You can now run the layout and you'll see that along with
moving left and right, your game will detect the up and down
swipes as indicated by the text changing.
Next you'll add the events for the left and right land pieces.
These events will move the land objects down to give the
illusion of the Salmon moving upstream.
67
Objective 3 - Moving the Land
In order the set up the events that will cause the land objects
to move you'll first need to add a new global variable. This
variable will store the speed of the game, which will increase
the longer the game is played.
Add a new Global variable and name it GameSpeed. Keep it as
a Number and set its Initial value to 350.
68
Next add a new event to the game for On start of layout.
Move this event to the top of your event sheet.
With the event added, add two action to the event. One will
set the GameOver variable to 0 and the other to set the
GameSpeed variable to 350.
69
Also on the start of layout event you'll add actions that will
set the movement of the Land objects. In order to do this
you'll first have to add the Bullet behavior the the objects.
Use the Objects Bar to select the LandLeft and LandRight
objects and add the Bullet behavior to each. For each object
set the Set angle property of the Bullet behavior to No.
70
Now that the objects have the Bullet behavior add two
actions to the start of layout event that will Set the angle of
motion for the LandLeft and LandRight Bullet behavior to 90.
71
With the angle set you can now set the speed of the Bullet
behavior. Add two actions to the start of layout that will Set
the speed of the Bullet behavior of the Land objects to
GameSpeed.
72
If you run the layout now you'll see that the land object will
move downward at the same speed, giving the appearance of
the Salmon moving. You'll also see that the objects will
eventually move off screen leaving empty space on the sides
of the river. You can fix this by creating new land objects that
will replace the objects when they move off screen.
73
Add a new group to the event sheet and name it
LandMovement. Add a description that reads Sets the
movement and creation of the left and right land objects.
74
You'll create the events for the LandLeft object first and then
for LandRight. The first event you'll want to create will be the
event that will create a new LandLeft object. The new Land
object will be created when the Y position of the first object
goes off screen. You'll also add a condition that will only
create a new object when there is only one object of that
type present. This will prevent more then two land objects of
each type from being created.
75
Add a sub-event onto the LandMovement group that uses the
System object and the Compare two values condition. Set the
First value to LandLeft.Y and the Comparison to Greater or
equal.
For the Second value parameter set it to ViewportBottom(0).
ViewportBottom will return the Y value of the bottom edge of
the layer, in this case the Background, or 0, layer.
76
Next, add a condition onto the new sub-event that will use
the System object and the Compare two values condition.
This time set the First value to LandLeft.Count and keep
Comparison as Equal to. Set the Second value to 1.
77
Now you can add the action to create the new Land object.
Add a new action that uses the LandLeft object and the
Spawn another object action.
In the Parameters window select LandLeft as the Object. Set
the Layer to 0 so the object is on the Background layer and
set the Image Point to 1 so the image will be created at the
top of the previous LandLeft object.
78
Just like you did for the start of layout event, you'll need to
add the event actions that will set the Bullet behavior when
new Land objects are created.
Add a new sub-event to the LandMovement group that uses
the LandLeft object and the On created condition.
79
Add the two actions onto this sub-event for LandLeft that will
set the Angle of motion of the Bullet behavior to 90 and its
Speed to GameSpeed.
80
If you the run the layout now you'll see that two instances of
LandLeft will go by and move off the bottom of the screen. To
make sure more instances of the object are created you'll
need to destroy the instances when they are completely off
the bottom of the screen.
Normally you could use an inverted Is on screen condition to
destroy objects off the screen, but since the objects are off
the screen when they are created you'll have to use another
condition.
81
Add a new sub-event to the LandMovement group that uses
the LandLeft object and the Compare Y condition. Set the
Comparison parameter to Greater than and Y co-ordinate to
LandLeft.Height*2.
Add an action onto this sub-event that will Destroy the
LandLeft object.
82
Now if the run the layout again you'll find that the LandLeft
objects will keep appearing indefinitely.
To get the LandRight object to do the same will be much
more simple as all you'll need to do is copy the events for
LandLeft and replace the object.
83
Back on the event sheet select all three sub-events in the
LandMovement group by selecting the first sub-event, holding
the Shift key, and then select the last event. With the 3
events selected, hold the Ctrl key and then click and drag the
events until a black line appears below the last event. When
this line appears release the mouse to copy the events.
84
With the three new copied events select right click on one of
them and select Replace object. In the Pick an object window
that appears select LandRight and click Ok. Every LandLeft in
the events is now changed to LandRight.
You can now run the layout and see that both land object will
continuously move down the screen.
85
Play the game!
https://s3.amazonaws.com/stemfuse_games/gameit/silly_salmon/section1/index.html