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.