Run and jump tutorial (part 3) behaviours

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.



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.



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.


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.




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.


3. Under the “Game” category,

select “Switch Scene

Button.” Click “Choose.”



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



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. 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.



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



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!



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.



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”



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



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.



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.



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.



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.



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).



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.



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.



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!

Run and jump tutorial (part 3) behaviours

Entertainment & Humor

Transcript of Run and jump tutorial (part 3) behaviours