Scenes are where the gameplay takes place in a game. Scenes control the story flow and usually include a prologue, title screen, menu screen, levels, and credits. Scenes contain tiles, layers, coordinates, and boundaries. Tiles make up the terrain, layers determine drawing order, coordinates specify position, and boundaries restrict the game area. The camera follows and zooms onto the player. Text is drawn using fonts and the heads-up display draws information like health permanently on the screen. Timers can be created to track elapsed time by incrementing a variable each second in a draw event.

1. Chapter 4
Scenes
mrbash.com| stencyl development

2. Lesson Objectives
• Define each scene basics namely tiles, layers,
coordinates and boundaries.Scene Basics
• Explain the behavioral control of the camera
view.Camera View
• Describe the features of Heads Up Display
(HUD) within the game.HUD

3. Scenes and game flow
Scenes are basically where all the game play
takes place in.
Scenes control the story flow of a game.
Scenes usually take the form of the following,
1. Prologue
2. Title screen
3. Menu Screen
4. Levels
5. Credits

4. Scenes and game flow
Many scenes are put together in to form
the entire game.
An overview of scenes in a game can be
created using storyboarding technique.
Scenes possess different customizable
parameters.
Title Scene
Menu
Scene
Stage 1 Stage 2
Stage 3 End Scene

5. Scene basics
Tiles
The terrain or
land.
Layers –
Different
groups of
actors and
tiles placed
together.
Coordinates
Position of a
game
element in a
scene.
Boundaries
Scene size.

6. Scene basics
(Tiles)
Refer to a scene’s terrain or land.
Usually a platform for game actors to step on.
Similar to real world tiles such as floor, bathroom,
wall and kitchen tiles.

7. Scene basics
(Tiles)
Uniform in size (default: 32 pixels)
Can be arranged according to grids.
Tiles are spaced out equally according to tile size.

8. Scene basics
(Tiles)
Benefits of using tiles
1. Easily re-usable for creating game stages
and levels.
2. Not a need for creating different actors
for different land terrain.
3. Same set of tiles can be used to easily
set a wide variety of maps

9. Scene basics
(Layers)
Layers define the group of actors and tiles
that are drawn together.
Need for layers arise when certain actors or
tiles need to be on top of another.
Determines the order of drawing game actors
or tiles.

10. Scene basics
(Managing Layers)
The layers pane in the scene designer is used to
manage scenes layers.
Layers can be created, removed, renamed and re-
arranged using the layers pane.
A layer is specified by its name and layer ID.

11. Coordinates are basically referring to the position (x , y) of
an actor in a scene.
X coordinate – horizontal
Y coordinate – vertical
Coordinate of the top left most point of a scene is (0 , 0)
Increasing x coordinate moves an actor towards the right
Increasing y coordinate moves an actor towards the bottom
Scene basics
(Coordinates)
(0,0) X
Y

12. Scene basics
(Boundaries)
Boundaries refers to the initial scene size
upon creation of a scene.
Scenes size is defined in terms of tiles or
pixels.

13. Scene basics
(Boundaries)
Boundaries control how far the camera
can travel.
Boundaries control and how far tiles can
extend.
Boundaries also restrict game play areas
for actors.

14. The Camera
Camera zooms in on the current gameplay
revolving around the main player.
Not all game scenes take place within a single
screen.
The need of a camera arises when extending
beyond a single screen.

15. The Camera
(Scrolling)
Scrolling of the camera takes place when the camera view screen extends beyond 1
screen.
Instances when scrolling happen are side scrolling games.
Scrolling zooms in on the visibility of a screen.

16. The Camera
(Camera follow player)
Camera of a game usually follows the player.
There is not a need to re-invent the wheel as a
this pre-defined behaviour is included.

17. The Camera
(Moving the camera)
2 code of blocks associated with moving the
camera,
1. Set the camera’s (x,y) position.
2. Set the camera to follow the centre point of
an actor.

18. The Camera
(Off screen actors)
Actors become inactive as they gets off screen.
It is as if they stop in time and stop simulating.
In instances where an actor is required to be
active, the following block of code always keeps
an actor in the state of simulation.

19. Drawing text
Drawing text on the game scene is essential to
any game.
Text displays real time information in a game such
as the number of lives, hp, mp and others.
HUD (Heads Up Display) provides a graphical
display information as the uppermost layer above
everything else.

20. Drawing Text
(Fonts)
Fonts are used for styling of text.
Font options are similar to almost any text editor.
Include options such as its text size, colour, font
type and stroke.

21. Drawing Text
(Creating Fonts)
File > Create New > Font
Key in the name of the font for example, “Score
Font”.
This will launch the font editor.

22. Drawing Text
(Creating Fonts)
TTF (True Type Fonts) are used for the creation of
fonts.
3 default TTF are included within Stencyl.
Any TTF that is available within you computer OS
or downloaded off the internet may be used.

23. Drawing Text
(Draw Event)
The drawing of a text can be initialised by using
the “Draw Event”
An event or a behaviour containing the “Draw
Event” with the following block of codes can used
to draw text with the font that is created at
specified coordinates.

24. Drawing Text
(HUD)
A HUD is a statistical dashboard that displays
information regarding the game.
A HUD defies the camera view and permanently
anchors itself on the game scene.
A HUD is a separate layer from the actual
gameplay.

25. Drawing Text
(Draw Timer)
Create a new behaviour called “Draw Timer.”
File > Create New > Scene Behaviour
Within the behaviour, add a number attribute
called “seconds.”

26. Drawing Text
(Draw Timer)
Add a “Every N Seconds” Event such as the
following.
Basically what this block of code does is to
increment the value of “seconds” by 1 for
every second.
Next, using the draw event learnt earlier, the
attribute of time is being drawn on the
scene using the following block of codes.

27. Questions?