Run and jump tutorial (part 2) scenes

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 2)
Title: Scene Parameters Duration: 2 hours
Software Required:
Stencyl, Sprite Creator 3, Image Editor (Paint or Photoshop)
Objectives:
1. Create tile sets, regions and backgrounds to be used within a mobile
game.
2. Implement sound effects within a mobile game to enhance game play
experience.
3. Implement change of scene and transitions to be used within a mobile
game.

Creating the Game Scene
In part 1 of this tutorial, we have learnt how to create actors and customize
them. Now, we shall assign our actor, Runner a location which are the stages
where the game play will take place.
1. File > Create New > Scene
2. Name the Scene as “Game
Scene”.
3. Set the size.
Width: 100 tiles
Height: 15 tiles
4. Select the Background Color to be
Black. Click “Create”
5. A blank scene is now created as
shown below.

Creating the Tile set
Now that the scene is created, we shall next create a tile set. Tiles enable
our actors to stand on platforms without which, our actor would either fall
off the screen or dangle in mid-air in the game scene. Beautiful readymade
tile sets can be easily downloaded from StencylForge. However, for learning
purpose we shall be creating a tile set from scratch.
(Your course instructor shall perform a demonstration on how to do create a
simple tile using an image editor.)
1. File > Create New > Tiles
2. Name the Tile set as
“Custom Tiles”.
3. Click on “Choose Image”.
4. Select the “Green Custom
Tile.png” image. Click “Add”
5. Change Tile size to
32 by 32 pixels. Click “Apply.”

Add tiles to design map
Now that we have our tile set, let us use the tiles to create a simple
platform to design our map.
1. Let’s head back to our game
scene. Dashboard > Scene >
Game Scene
2. The tile that you have
created is now available on
the “Palette” under “Tiles.”

3. Click on the tile and drag it
along the bottom part from
one end of the scene to the
other extreme end
horizontally. We shall use 3
layers of tiles for a start.
4. The tiles are set in place. Let
us position our actor standing
on the tiles on the left of the
screen.
5. Select “Runner” from the
palette.
Ensure that the “Snap to
Grid option” is selected.
Place the actor on the left
side of the screen.

6. The end result will look as
shown in the picture below.
You may test your game at
this point.
Adding regions for pitfalls
After adding the platform tiles, we would like to create regions to act as
pitfalls for our Runner to die if he falls in it. Regions are basically draw able
selected areas on the map in which events can take place. We will be
creating 3 regions (pitfalls) for this section.
1. Take a look at the bottom
right of Stencyl, you will
notice real time X and Y
coordinates of the mouse
cursor.

2. Place your cursor on the
scene at approximately this
coordinate (640,384)
3. Highlight an area of 4 by 3
tiles. Hit the delete button.
4. The area should now be
empty. Next, click on the
“Add Region (box)” button
found on the left toolbar.
5. Click and drag the cursor on
the empty area which you
have just deleted. You should
see “Region 0” being created.

Physics (Gravity)
Let’s create some artificial gravity in our game to make our game more
realistic. Runner shall respond to that gravity.
1. Click on the “Physics”tab for
the Game Scene.
2. Here you will notice gravity
for both horizontal and
vertical.
3. In the normal case, gravity is
always vertical. In our case,
we will make use of both.
4. Both gravity are set to 0 by
default. Vertical gravity of
85 will simulate real world
gravity.
5. Set the horizontal gravity of
value (25) to the right.
Task
Add another 2 regions, Region 1 and Region 2 of 4 by 3 tiles area at
the following coordinates.
Region 1 – (1472, 384)
Region 2 – (2368, 384)

6. Set the vertical gravity of
value (85) to down.
7. You should see something like
this.
Adding Background
Currently, we have added a black background for the game scene. Let’s make
our game scene nicer by adding a background. You may use your own picture
or downloaded from StencylForge.
1. Click on the StencylForge
icon.

2. Select “Backgrounds.”
3. Select “Blue Backgrounds.”
Click download.
4. Once the background is
downloaded, click “Attach
Scene.”
5. The background is now
attached to the scene.
6. Click the “Show Background
Button” and save the game.

Adding Sound
Besides background, StencylForge also has free sound resources which can
be used as the background music or sound effects for our game.
1. Click on the StencylForge
icon.
2. Search for the following
sound clips.
 Minor Item Collected
 Jump Sound
 Gameplay Music
3. Dashboard > Sounds
Check that the 3 sounds have
been downloaded.
Adding Sound Behaviour
Now that we have our sound resources, let’s add some background music to
the game.
1. Click on Scene> Game >
Scene > Behaviors.

2. Click “Add behaviour.”
3. A window will appear to
display all the behaviours
available in the library.
4. Select Game >Background
Music. Click “Choose.”
5. You have added your first
game behaviour. Within the
“Background Music”
behaviour, select “Gameplay
Music” from the drop down
list for “Music to Play.”
6. Save and test your game.
You should be able to hear
the music play in the
background.

Adding the Title Scene
Congratulations, you have completed Part 2 of this tutorial on Scenes.
Move on the next part on behaviours.
Task
Create the title scene with the following parameters.
Background: Title Background
Actors: Play Button, Instruction Button, Credit Button,
Create a duplicate of “Runner”. Name it “Title Runner”
Remove all behaviours and switch off the gravity.
Your scene should look as shown below.

Run and jump tutorial (part 2) scenes

More Related Content

What's hot

Similar to Run and jump tutorial (part 2) scenes

Run and jump tutorial (part 2) scenes