run and jump tutorial (part 1) actors

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

Title: Actor Creation and Customisation Duration: 2 hours

Software Required:

Stencyl, Sprite Creator 3, Image Editor (Paint or Photoshop)

Objectives:

1. Create and customize actor animations, motions and physics in the

SDK environment.

2. Test input controls on IDE or test device for game actors.

3. Create and customize actor collision groups and test for collision

response.



Creating the Main Player

After the game design stage in which we covered the game design brief and

storyboarding technique, it is time to start developing our “Run and Jump”

game.Let us begin by creating the main player actor.

1. Launch the Sprite Creator 3 program.

(Desktop\Stencyl Elective Notes\Course Software)

2. Select the gender of your liking.

3. Design the character of your

preference by clicking on images

found on the different tabs.

4. Click File > Save > Male/Female



5. The sprite image is located under the saved folder of Sprite Creator 3.

6. Next, Right click the image and select “Edit.”

7. This will launch the basic image editor on

Windows which is “Paint”.

8. Zoom the image in to 400%. This way, you will be

able to easily crop out the portion that you want.

9. In our case, click on “Select”, highlight

the 3rd row from the top and click on “Crop”.

(Take note that we are only interested in our

player facing right as the player is intended

to run in one way direction to the right.)

10. Next, click on “Resize.” Select pixels. Use the following settings.

(Horizontal: 384 Width: 128 Unselect maintain aspect ratio”)



11. File > Save as > “runner.png”

(Desktop\Stencyl Elective Notes\Run and Jump Tutorial Game)

12. Now, we are ready to use the player sprite created in our Stencyl

game.

Stencyl Overview Stencyl is a very powerful 2D Games Development Environment that lets you

create Flash, iOS and Android games for use on desktop and mobile games.

It includes many pre-defined behaviours that simplifies game creation. At

the same time, it also allows experienced users to create behaviours

themselves for more advanced customisation.

1. Launch Stencyl by going to the Start Menu>All Programs>Stencyl>Stencyl

or simply launch Stencyl from the shortcut on the desktop.



When saving in Stencyl it is important to realise that it attempts to save all the games

you create onto the hard disc of the computer you are using. Always make sure you are

using the same computer each lesson and include your own name in any games you create.

Speak to your course instructor if there is a problem accessing your game.

The Stencyl interface looks like the screen shot below.

Tabs

The tabs at the top of the

interface allow you to have

multiple Actors, Behaviours,

scenes and similar open at

the same time

Dashboard

The Dashboard contains a list of

everything in the game. Clicking on

an item in the dashboard brings up a

list of all of those items in the main

window.

Stencylpedia

The Stencylpedia is a help guide

for using Stencyl. You will find it

is a useful source of information

Main Window

This is where you will edit individual

actors, behaviours, events and

scenes



Creating a new blank game

We are going to make our first Stencyl game.

1. Click on “Click here to

create a new Game”.

2. Select“Blank Game” and click

on Next.

3. Call the game “Run and Jump

<your name>” and select 640

x 480 as the screen size and

click on Create

Note that we have created a blank game. For learning purposes, starting off

from ground zero is better than starting off from a kit as you may learn the

process of adding actors, scene or any behaviours without any aid.



Creating an Actor Type with animation

1. File >Create New> Actor

Type

2. Name the Actor Type as

“Runner” and click Create.

3. Add an animation, “Run

Right” by clicking on the “+”

sign on the bottom left

corner of Stencyl or within

the dotted lines, “Click here

to add an animation.”

4. Add a frame, “Click here to

add a frame. “Then select,

“Choose Image.”



5. Select the runner that you

have created and click

“Open.”

6. Specify the Columns to be

“3.” You will notice that now

your picture is divided into 3

columns. Click “Add”.

Congratulations, you have

added your first animation

which includes 3 frames.

Notice that the images still

have a white background. We

shall attempt to remove it.

7. Select the 1st frame which is

the left most extreme. Click

“Edit Frame” followed by

“Edit Image.”



8. This will launch Stencyl’s in-

built default image editor

known as Pencyl.

9. Select “Magic Wand

Selection Tool” and click on

the white space on the

background of the sprite.

Press the delete button and

you shall notice that the

background now becomes

chequered grey. This

indicates that the

background is now

transparent.

10. Press “Ctrl S” to save and

exit Pencyl and click OK.

11. Repeat Steps 8 to 10 for

the other 2 frames and it will

result in a character

animation with transparent

background.

Task

At this point, you have learnt how to create an animation using frames.

Create another 2 more animations for Runner with 1 frame each. Verify

with your course instructor when completed.

1. Animation Name: Idle Right (Copy Frame 1 of Run Right)

2. Animation Name:Jump Right (Copy Frame 2of Run Right)



Actor Collision Bounds

We will skip the behaviour and events section and revisit them in part 3 of

this tutorial. Next let us take a look at our actor collision bounds.

1. Select the “Collision” tab.

Notice the yellow box which

surrounds the actor. That is

the collision shape.

2. Notice that its width and

height are 64 pixels which

matches the image size.

3. We shall leave its collision

bounds as it is as that is the

best suited shape for the

actor’s current animation.

Challenge

You may attempt to click within the yellow lined collision box and hit the

Delete button. Click the “Add Box” button and add the box to be 64

pixels just as it was before. Feel free to experiment with other shapes.



Physics

Next, let us define the Physics for Runner.

1. Select the “Physics” tab. You

should be at the “General”

sub tab.

2. By default,

actor is set to move

normally

Rotation and gravity set to

“Yes”

3. Select “Rotation” to “No” as

we do not want our actor to

rotate upon any collision or

motion.

4. Set friction to be 0.15 under

“Material”.

Actor Collision Groups

Lastly, let us define the collision group for Runner. Collision groups are

important as actors in the same group are set to hit a defined set of groups.

For example our Runner is set to collide with tiles and coins.

1. Select the “Properties” tab.

Click “Edit Group.”

2. There are 5 default groups

and all newly created actors

fall under the “Actors” group.



3. Click on “Actors.” Notice

that the “Actors” group is

set to collide with “Tiles”

and “Actors” as highlighted

in green.

4. Next, click “Create New.”

Create a new group called

“Runners.” Click “Create.”

5. Set “Runners” group to

collide with Tiles.



6. After setting the “Runners”

and “Collectibles” groups,

click “OK”.

7. Note out for a common

mistake here. What we have

done is simply to create the

groups.

We have not selected Runner

to be in the “Runners” group.

Select the dropdown menu

and click on “Runners.” Now

that should do.

Task

Create another collision group called “Collectibles.”

Set this group to collide with “Runners.”

Verify with your course instructor when completed.

Task

At this point, you should be already familiar with adding and customizing

actors. Take what you have learnt and add other actors that are

required for this tutorial as shown in the table on the next page. Verify

with your course instructor when completed.



Actor Name Animation

Name

Image Name Physics Collision

Group coin Idle coin.png Move?: normal

Rotation?: No

Gravity?: No

Collectibles

jump button Idle jump button.png Move?: normal

Rotation?: No

Gravity?: No

Actors

play button Idle play button.png Move?: Cannot

Move

Rotation?: No

Gravity?: No

Doodads

credits button Idle credits

button.png

Move?: Cannot

Move

Rotation? : No

Gravity? : No

Doodads

instruction

button

Idle instruction

button.png

Move?: Cannot

Move

Rotation? : No

Gravity? : No

Doodads

Course Instructor Signature: ____________________