1

Chapter 4Scenes

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 flowMany 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 CameraCamera 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 textDrawing 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?