1. The document describes a tutorial for creating a mobile game called "Run and Jump" using the Stencyl software. It covers attaching pre-shipped behaviors to actors and scenes, implementing custom behaviors using events and logic blocks, and creating game mechanics like jumping, collecting coins, and falling into pits. 2. The tutorial shows how to duplicate existing events to speed up development, define attributes to track the score, draw the score on screen, and troubleshoot issues like resetting the score between attempts. 3. By the end of the tutorial, a complete game is created with running, jumping, coin collection, scoring, and death of the player character when falling into pits or exiting the scene.

1. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 1 Mobile Game App Development
Mobile Game Application
Development with Stencyl
Run and Jump
Tutorial (Part 3)
Title: Actor and Scene Behaviours Duration: 2 hours
Software Required:
Stencyl, Sprite Creator 3, Image Editor (Paint or Photoshop)
Objectives:
1. Attach pre-shipped and downloaded behaviours to actors and scenes.
2. Configure actor and scene behaviours.
3. Implement different, customised behaviours using events and logic
building blocks.

2. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 2 Mobile Game App Development
Attach pre-shipped behaviours (Runner)
In part 2 of this tutorial, we have learnt how to create scenes and customize
them. Now that we have created our actors and placed them in a scene, it is
time to add the game play mechanics to make our game come to life.
1. Dashboard >Actors >Runner >
Behaviours.
2. Click on “Add Behaviour.”
3. Under the “Motion” category,
select “Starting Velocity.”
Click “Choose.”
4. You have just attached the
“Starting Velocity”
behaviour. This behaviour
pushes the Runner at a force
at the initial part of the
scene.
5. Change the speed to “40.”
6. Next, add the “Camera
follow” behaviour under
“Game” category.

3. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 3 Mobile Game App Development
Attach pre-shipped behaviours (Coin)
The coin needs to be set to disappear upon collision with Runner. We shall
add a behaviour to our Coin actor for this collision.
1. Dashboard > Actors > Coin >
Behaviours.
2. Click on “Add Behaviour.”
3. Under the “Rules” category,
select “Die on Collision.”
Click “Choose.”
4. This behaviour allows the
Coin actor to die upon any
collision. There are many
variants of this behaviour.
Actors can be set to die upon
collision with either actor
types, groups or member of
groups.
5. This behaviour has no
parameters to be set.
Attach pre-shipped behaviours (Jump Button)
The Jump button is meant to be the input control for Runner. The Jump
button needs to be anchored on screen and does not follow the camera. We
will add a behaviour for this.
1. Dashboard > Actors > Jump
Button > Behaviours.
2. Click on “Add Behaviour.”

4. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 4 Mobile Game App Development
3. Under the “GUI” category,
select “Anchor to Screen.”
Click “Choose.”
4. This behaviour has no
parameters to be set.
Attach pre-shipped behaviours (Play Button)
The Play Button as the name suggests will be the button that is used to start
the game by switching scene from the Title scene to the Game scene.
1. Dashboard > Actors >Play
Button > Behaviours.
2. Click on “Add Behaviour.”
3. Under the “Game” category,
select “Switch Scene
Button.” Click “Choose.”

5. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 5 Mobile Game App Development
4. Configure the behaviour to
switch scene to the “Game
Scene.”
5. Since the Play button has
only 1 animation, configure
the normal, pressed and
hover animation to the “Idle”
animation.
6. Leave the other options at
default.
Implement custom behaviours (Game Scene)
Now that we are familiar with adding pre-defined behaviours, let us take a
look at the more powerful functions and features of Stencyl which is to
design custom behaviours using
events and logic blocks.
We shall be implementing the game
scene mechanics. First up, let us
design the jumping action for Runner
when a keyboard press is made.
1. Create New>Behaviour>Scene
Behaviour.
2. Key in “Game Scene
Mechanics” and click Create.
3. Add Event > Collisions >
Member of Group

6. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 6 Mobile Game App Development
4. Click on Add Attribute.
5. Name: runner Type: Actor
The parameters within the white box of the event is customisable to its
matching attribute type.
In this case “when Actor hits a Actor group events“, the “Actor” can be
defined as the runner attribute that was created and the “Actor Group” will
be defined as tiles.
The idea behind this is as long as the actor is in contact with the tiles which
in most cases, its feet will be in contact; the Runner will be made to perform
an action which is to jump.
Next let’s create an “If” condition to check that “if the Up button is
pressed,” it will perform an action. Get familiar with the instruction Palette
as this will be heavily utilised in behaviour creation. Mastery of this area
will take your Stencyl level up by a mile!
6. Palette > Flow > Conditions >
Conditionals. Drag the yellow
“if” block and snap it to our
event.
(Notice that the blocks are
like jigsaw puzzles which are
to designed to match the
right size)

7. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 7 Mobile Game App Development
7. User Input > Keyboard
Control. Drag the green
“Control is down” block into
our “If” block.
8. Click on “Control” and select
up.
9. Actor > Motion > Force
10. Drag the second block and
customise it to the following.
Push “runner” “sharply”
towards “270” degrees at
“25” force.
11.Actor > Draw > Animation
Drag the second block and
customise it to the following.
Switch animation to “Jump
Right” for “runner”
12. We will define an
“Otherwise” condition
whereby in any other cases
that the Up button is not
pressed, the actor will be in
the “Run Right” animation.
Flow > Conditions >
Conditionals. Select the
otherwise and drag it below
the entire “if” block.

8. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 8 Mobile Game App Development
13. Right click the switch
animation block and
duplicate. A similar block will
appear. Drag the copy of the
block to the “Otherwise”
block and change its
animation parameter to “Run
Right”. Congratulations you
have completed your first
custom behaviour.
14. Rename the event to a more
meaningful name for easier
troubleshooting or editing in
further revisions.
Double click on the event and
rename it to “Runner Hits
Tiles”
15. Let’s try the behaviour out
by attaching it to our game
scene.
16. Click “Attach Scene”,
select “Game Scene” and

9. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 9 Mobile Game App Development
click OK.
17. Our custom behaviour is
now attached to the Game
Scene.
18. Notice that the runner
attribute that we created
appears in our custom
behaviour. Simply select our
Runner actor as shown.
19. Test game. Press the Up
button and you will notice
your Runner jump while it is
running!

10. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 10 Mobile Game App Development
Duplicating Events in Behaviours
You should get a good feel now on using logic blocks. Let us expand our game
further. In this section, we will take a look at methods to speed up our
development process. One of the most obvious techniques is to duplicate
existing events and blocks that have been created and editing them.
Now we shall duplicate our keyboard event to a mouse/touch event using the
same logic blocks created in our “Game Scene Mechanics” behaviour.
1. Head back to the “Game
Scene” and add the Jump
button right below Runner
overlapping the tiles.
2. Next, head back to our
custom scene behaviour.
Right click on “Runner Hit
Tiles” and duplicate.
3. Now you should see 2 events
in this behaviour.

11. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 11 Mobile Game App Development
4. Next, we will be preserving
the function of the event
with the exception of
changing its input control to a
mouse event.
5. Palette > User Input >
Keyboard & Mouse >
Mouse/Touch
6. Drag the “mouse is down on
actor” block. Simply replace
the “up is down” control with
the mouse controls as shown.
7. Create another attribute.
Name: jumpbutton
Type: Actor
8. Replace the “mouse is down
on actor” with “mouse is
down on jumpbutton”

12. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 12 Mobile Game App Development
9. Go back to the game scene.
Remove the custom behaviour
and add it again. This time
you will be able to see the
jump button attribute as
well.
10. Test game. Click on the
jump button. The runner will
also be able to jump through
the mouse click.
Runner Collides with Coin
We need to add an objective to the game to make it more meaningful and
competitive. The runner will be collecting coins while running to score as
many points as it can. Here, we will be creating a simple event to add points
to the score and play a sound effect when the Runner collect coins.
1. Head back to our custom
behaviour. Create a new
event.
Add Event > Collisions
>Collisions between Type &
Type

13. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 13 Mobile Game App Development
2. Rename the event to “Runner
Hits Coins.”
3. Modify the actor type
parameters to “when a
Runner hits a Coin”
4. Now we shall learn how to
define Game Attributes.
Settings > Attributes >
Create new attribute
5. Create the following
attribute,
Name: currentscore
Type: number
Click OK.
6. Close the custom behaviour
tab and re-open it again
through the dashboard and
select “Runner hits coin”
event.

14. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 14 Mobile Game App Development
This is to ensure that the
game attribute will be
updated.
7. Palette > Attributes > Game
Attributes
Check the getter and setter
blocks for “currentscore”
The getter method is used to
retrieve the latest updated
value of “currentscore”. The
setter method is used to set
“currentscore” to an assigned
value.
8. Drag out 1 of each block the
the grey workspace.
9. Palette > Numbers & Text >
Math > Arithmetic
Drag out the addition block,
“0 + 0”
10. Palette > Sound > Channels
Customise the block to play
the sound file “Minor Item
Collected” on channel “1”
11.Arrange the blocks as shown.

15. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 15 Mobile Game App Development
12. Open the “Coin Actor”.
Under collisions, tick the “Is
a Sensor” property. This
allows collision detection to
take place without letting its
solid properties slow down
our Runner.
13. Add some coins to the
“Game Scene” and test your
game.
Drawing Score
Now hold on a minute, realise that something is missing. Yes that is the
current score that we have set up. The value “currentscore” is being updated
within the game but has not been drawn out on the screen. Let us attempt to
do that now.
1. Dashboard>Font>Create New
Font
Click Create.

16. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 16 Mobile Game App Development
2. Under Font Style, select the
size to be 32 px.
3. Under “Font Color”, select
the color to be white.
4. You have just created a font
in which it can be used to
draw “currentscore”
5. In our custom behaviour, add
a new “When Drawing” event.
6. Let’s use the search feature
in our palette to search for
blocks associated with
“font”. Drag the “set
current font” block to the
workspace.
7. Palette > Drawing > Drawing
Drag the “draw text at x
and y” block to the
workspace.

17. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 17 Mobile Game App Development
8. Palette > Number & Text >
Operations > Text
Drag the “text & text” block
to the workspace.
14. Arrange the blocks as
shown. Use the
“currentscore” getter block.
15. Test the game.
Fall into pit
Our game is almost set up. Let’s try to handle the event whereby Runner
falls into the pits which are defined by the regions created earlier.
1. In our custom behaviour,
create a new “Actor type
enter region” event.
2. Rename the event to “Enter
Region 0”
3. Create 3 region type
attributes and name them as
(region 0, region 1 and
region 2).

18. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 18 Mobile Game App Development
4. Palette > Actor > Properties >
Alive/Dead
Drag the “kill actor” block to
the workspace.
5. Palette > Scene > Game Flow >
Transitions
Drag the “switch scene”
block to the workspace.
6. Arrange the blocks as
shown.Repeat this event
twice for Region 1 and 2.
7. Remove the custom
behaviour from Game Scene
and add it in again. Select
the respective regions.

19. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 19 Mobile Game App Development
Runner exits scene
Let’s have one more event to handle the Runner exiting the scene upon
completing the stage.
Troubleshooting the score
If you play the game more than once, you would realise there is a minor bug
with the score. The score keeps on adding with that of the previous attempt.
Let us use a simple method to troubleshoot this bug.
1. Create a “When Created”
event.
Task
Create an event where the Runner actor type is killed upon exiting scene
and the scene is switched to the title scene. Arrange the blocks as
shown below.

20. MOE Cat-A Elective Stencyl
Institute of Technical Education Page: 20 Mobile Game App Development
2. Simply use the
“currentscore” setter
method and set
currentscore to 0.
Final Touches
Lastly, we would like the game to start from the title scene.
1. Dashboard > Scene
2. Select Title Scene. Mark as
Starting Scene. The default
starting scene will be marked
with a star.
3. Test your game and have fun. You have completed the entire tutorial.
Hope you have learnt a lot from this tutorial series!