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.
(DesktopStencyl Elective NotesCourse 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”
(DesktopStencyl Elective NotesRun 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: ____________________

Run and jump tutorial (part 1) actors

More Related Content

What's hot

Similar to Run and jump tutorial (part 1) actors

Run and jump tutorial (part 1) actors