As of late 2021, we are in the process of updating Stencylpedia and fixing up outdated & broken content. Thanks for your patience!

99,991

Views

Beginner

Level

6

Comments

Scene Basics

by Jon (Updated on 2015-10-20)


Looking instead for a guide on how to use our Scene Designer?

Contents

  • Introduction
  • Scenes and Game Flow
  • Tiles
  • Layers
  • Coordinates
  • Boundaries

Introduction

Scenes are a game's worlds or levels. Scenes are where everything in a game takes place. This article talks about the fundamental concepts of Scenes.

Scenes Control a Game’s Flow

Think about a game such as Super Mario Bros. When you play through the first level and reach the flagpole at the end, there’s a brief victory sequence, and then Mario proceeds to the next level.

Sometimes, scenes aren’t levels at all. Even a main menu itself can be a scene.

Title Screen

Putting this together, scenes can be thought of as various states in a game that you transition between, like a story.

Storyboard

Switching Scenes

Switching scenes is described later in this chapter, but in short, use the following blocks to switch scenes. (under Scene > Game Flow).

Switching Scene Blocks

Switching scenes involves an "outgoing" transition (such as a fade out), the scene you are switching to, and then an "incoming" transition (such as a fade in).

Tiles

What are the building blocks of a scene? The scene’s terrain or “land” is typically made up of Tiles.

Tileset

Much like the tiles on your kitchen counter or bathroom, Tiles in a game are uniformly sized pieces of land that conform to a grid. That is to say...

  • Every tile is the same size.
  • Tiles are spaced equally apart - by the tile size.

Why are tiles a great way to build levels? Imagine that you’re building an action game such as this:

Reaching Finality

It would be impractical to create separate sprites for each land mass. After a while, you’d run out of space trying to pre-render all of that!

Tiles are a cheap, reusable way of creating worlds. You’ll find that with tiles, virtually any kind of land form can be re-created with ease. Using this tileset...

Tileset

We can make a rich landscape out of this.

Landscape

Tiles need not be square. You can define tiles as triangles and any kind of convex polygon in order to support slopes and other complex forms of terrain.

Sloped Tiles

What if my game isn't a fit for tiles?

What if you’re building a game where tiles are inappropriate, as pictured below? You’re able to define custom terrain to satisfy this use case.

Icarus

(Not a tile-based game, use the Custom Terrain tool!)

Custom Terrain

Importing Tilesets

For information on how to import tiles and work with our Tile Editor, read our article on that.

Layers

What if you want some parts of the scene to draw on top of other parts? For example, you may want a guarantee that the player draws in front of the game’s scenery.

Layer Example

A Layer is a group of both Actors and Tiles that are drawn at the same time. In this way, Layers provide you a flexible yet simple way to determine what order things are drawn in.

To take the example above, here’s the breakdown of what’s on which layer.

Layer Breakdown

Scenes can have an arbitrary number of layers. There’s no limit and no performance hit to having more layers as opposed to fewer.

Managing Layers

Use the Layers Pane inside the Scene Designer to manage layers. You can create, remove, rename and re-arrange layers using this interface.

Layers Pane

Switching Layers

Sometimes, you’ll want to change what layer an Actor is on. To do this, use the following blocks. (under Actor > Draw)

Switch Layer Blocks

When sending an Actor to a particular layer, specify the Layer’s ID. You can find this inside the Layers Pane inside the Scene Designer.

Layers Pane

Coordinates

Every element inside a Scene has a position. This position consists of an X (horizontal) and Y (vertical) component and corresponds to the top left corner of that element.

(0,0) is the top left most point in the scene.

Coordinates

A higher X value moves you towards the right, while a higher Y value moves you towards the bottom.

Boundaries

Every scene has boundaries (a size) that you define when you first create the scene. These boundaries control how far the Camera can travel and how far Tiles can extend.

Bounds

Although actors can go beyond a scene’s boundaries, actors that are not designated as always active will “freeze” upon doing this.

Imagine boundaries to be like the limits of a level in a Mario level. Going beyond certain bounds is either not permitted (left & right) or leads to death (off the bottom).

Summary

  • Scenes control the flow of a game, like a storyboard.
  • Tiles are equal-sized building blocks. They define the terrain.
  • Layers group together tiles & actors in order to control drawing order.
  • (0,0) is top left in our coordinate system.
  • Scenes have boundaries (a size) that define how far actors and terrain can be placed.
Print Article Edit Article How to Edit an Article
Disclaimer: Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

6 Comments

TheRealPandaKing
When I try to run my game to test it the whole scene doesn't show up on my flash player. When I try to make the window bigger it just shows black. I have tried running it on browser and it still doesn't work. When running on the Windows platform Stencyl tells me that there is a problem, my sounds are mp3 not OGG. Can anyone fix this?

3 8 years, 10 months ago
Horiszto
I seem to have a problem with the coordinates. My scene is a 320*480 portrait, but when I set an actor's position in the Inspector to 160*240 (to have it in the center), it goes a bit to the bottom right. If I want it to appear centered, I have to set it's position to 120*160, which is causing some problems. Does anyone know a solution for this?
-2 9 years, 3 weeks ago
jgcthatsme
Is it common or uncommon to have an animated background with 480 frames? Can I even do that? This is for an OSX game (not mobile). And if not, is there a way to import an image sequence as my background. It isn't created to loop, so once it gets to 480th frame, thats it...... Please advise. Thanks.
-1 10 years, 8 months ago
Stencyller
Cant fined the color dropdown

-1 11 years, 2 weeks ago
maddy
ya its good!!
-1 12 years, 5 months ago
purewater156
okay, get it... it sounds complicated, though.
-1 12 years, 6 months ago

Sign In to Comment