Username or E-mail
Password (Forgot?)
New? Sign Up
Join or Sign In
Forums Stencylpedia Stencyl TV Translations Go Pro - Plans & Pricing Download Stencyl


Switch to Book Layout

1: Getting Started

  • Getting Started
  • Crash Course
  • Crash Course 2
  • StencylForge

2: Building Logic

  • What is a Behavior?
  • Creating a Behavior
  • Attributes
  • Game Attributes
  • Attribute Types
  • Events
  • Our Behaviors

3: Actors

  • What are Actors?
  • Animations
  • Motion & Forces
  • Physics
  • Controls
  • Collisions & Groups
  • Killing vs. Recycling
  • Tweening
  • Effects
  • Chapter 3 Challenge

4: Scenes

  • Scene Basics
  • The Camera
  • Tilesets
  • Regions
  • Drawing Text & HUDs
  • Changing Scenes
  • Music, Sounds & Channels
  • Backgrounds
  • Customizing Actors
  • Chapter 4 Challenge

5: Game Mechanics

  • Saving
  • Pausing
  • 3rd Party Services
  • Web Requests

6: Advanced Topics

  • Get/Set Attributes
  • Custom Events
  • Blending Modes
  • Lists
  • Custom Blocks
  • Continuous Collisions

7: Testing & Tuning

  • Testing Games
  • Optimizing Performance 1
  • Optimizing Performance 2

8: The Last 10%

  • Flash Publishing
  • Standalone Apps
  • iOS App Store
  • Chrome Store
  • Making Money

M1: Mobile - Intro

  • Getting Started
  • Testing on your Device
  • Flash -> iOS Guide

M2: Mobile - Basics

  • Atlases
  • Drawing Text
  • Retina Display
  • Accelerometer
  • Joystick
  • Universal Games

M3: Mobile - Services

  • iAds
  • Game Center
  • In-App Purchases

M4: Mobile - Publishing

  • Debugging
  • Publishing to the App Store
  • Optimizing Performance
  • Promoting your Game

A: Troubleshooting

  • Showstoppers
  • General FAQ
  • iOS FAQ
  • The 90% Memory Warning
  • Recovering Broken Games
  • Can't Export to SWF
  • Reloading Documents
  • Generating Logs
  • Flash Security Settings
  • How to Report Bugs

B: How-To Guides

  • Importing Assets
  • Scene Designer
  • Code Mode
  • Font Editor
  • Pencyl (Image Editor)
  • Tile Editor (Shapes)
  • Game Cleaner

C: Reference

  • Glossary
  • Block Reference
  • Useful Shortcuts
  • Stencyl API

D: Resources

  • Stencyl TV
  • Abigayl's Guides
  • Giving Critiques
  • Creating Extensions
  • Translating Stencyl
  • Credits

3.0 Drafts (In Progress)

  • What's New in Stencyl 3.0?
  • Setup (Android)
  • Setup (Desktop)
  • Setup (iOS) - Concepts
  • Setup (iOS) - Mac
  • Setup (iOS) - Windows
  • Testing iOS on Windows
  • iOS Troubleshooter

  • Mobile App Scaling
  • Full Screen Mode
  • Simple Physics
  • Backgrounding an App

  • iOS App Store
  • Mac App Store
  • Windows Store
  • Google Play
  • HTML5

  • Android Ads
  • Android Purchases (WIP)
  • 4" Form Factor (iPhone 5)
  • Mobile Input
  • Mobile Features

  • Extending the Engine
  • iOS / Android Extensions
  • Developing the Official Extensions
  • Developing the Engine

  • iAds (Revised)
  • Game Center (Revised)
  • iOS Purchases (Revised)
  • Atlases (Revised)
  • Drawing Text (Revised)
  • Joystick (Revised)
  • Accelerometer (Revised)
  • Sounds (Revised, WIP)
  • Debugging (Revised, WIP)
  • iOS Performance (Revised)
Level: Beginner

Changing Scenes

As we described in the Scene Basics section, scenes control a game’s flow and can be thought of as various states in a game that you transition between, like a story.

stencyl-scene-flow-diagram


Contents

  • How To: Changing Scenes
  • Gotchas
  • Transitions
  • Example: Enter Door, Switch Scene
  • Example: Level Selector


How To: Changing Scenes

Changing a scene involves 3 parts.

  • What scene you want to go to next (or reload the same scene)
  • The exit transition
  • The entry transition


Use the following blocks (Scene > Game Flow) to perform a scene change.

stencyl-design-mode-switch-scene-blocks

(If it isn't apparent, a reload will "switch" to the current scene)

 

Gotchas

1) Resist the temptation to perform 0 second transitions. Instead, go with a low number such as 0.01, for stability.

2) You cannot perform multiple scene changes at the same time. Once a scene change is in progress, it must reach completion before another scene change is initiated. Any new requests for scene changes will be ignored.


Transitions

Stencyl supports 7 different kinds of transitions for scene changes. Transitions are the visual effects applied

  • Fade
  • Blinds
  • Bubbles
  • Spotlight
  • Blur
  • Box
  • Crossfade

You can preview all of these transitions in the following demo.

stencyl-switch-scene-demo

Note: Mobile games currently support just Fade Out and Fade In. They’ll support all transition types in Stencyl 2.5.

 

Example: Enter Door, Switch Scene

In this simple example, we’ll make the hero enter the cave once he steps into the cave’s door, represented by a Region.

I opted to use a “Actor Type Enters Region” event and placed a Region over the door to detect entry.

stencyl-design-mode-switch-scene-using-door


Example: Level Selector

Building a Level Select screen is common to many games. Here’s a simple and elegant way to make one in just a couple blocks.

stencyl-design-mode-level-selector-example

Download the Project

- Unzip and stick the project into your Games directory as "Level Selector Demo"

- Don't know where your Games directory is? Click the "View Games Directory" button at the bottom of the Welcome Center (the first screen you see after opening Stencyl)

 

The Concepts

To pull this off, I’ll use the “get scene with name” block (Scene > World). This block returns a scene, given a name.

stencyl-design-mode-get-scene-name-block

Now, I can drag this block into our regular scene switch block. You knew you could do that, didn’t you?

stencyl-design-mode-switch-scene-drag-block

Our goal is to make a simple behavior that we can reuse. To pull off a clean Level Select, our scenes have to have a predictable naming scheme. How about we just give each level a number as a name, starting from 1?

stencyl-assigning-level-names

If we do that, we can then pass a Number Attribute into the “get scene with name” block, and it will magically switch to the scene with that “name”

stencyl-design-mode-switch-scene-get-scene-names

 

The Implementation: Creating the Buttons

Putting this all together, here’s a behavior that creates 5 Level Select buttons in a row, spaced apart by 100 pixels.

Mini-Challenge: You should extend this, so that it wraps over and starts a new line upon hitting the 6th button)

stencyl-design-mode-create-scene-switching-buttons

Note: The "for Last Created Actor, set ..." block is a special block that sets the value of a different Behavior's attribute.

In this case, we're effectively telling the block what Scene it's associated with, otherwise it wouldn't know which Scene to switch to and what to draw.

To learn about setting (and getting) Attribute values from outside their own behavior, we've got an article on that
.

 

The Implementation: The Buttons' Logic

Each Level Select button contains 2 Events and a single Number Attribute (called “SceneNumber” that tells the button what scene it should represent in the Level Select.

1) One event that draws the button.

stencyl-design-mode-draw-button

2) One event that switches the scene when the button is pressed.

stencyl-design-mode-switch-scene-on-mouse-click

That's it! If you’d like to play further this with example, download it above.

 

Summary

  • Scenes are the states in a game.
  • Changing scenes involves an exit transition and entry transition.
  • You can only perform one scene change at a time.


Challenge: Actor’s Position in “Next” Scene

In Zelda, when Link walks off the edge of a room, he naturally appears at the “right” spot in the next room.

For example, if he steps off the right side of a room, he will usually appear at the left side of the next room.

This turns out to be a challenge because you need to reposition your hero, based on where he came from before.
Fortunately, there’s a block that can help you out (Scene > Game Flow).

stencyl-design-mode-get-scene-name-block

Use this block to implement a generic, reliable system for placing an actor at the “right” spot, much like the Zelda game does.



Last Updated: 2012-05-13 by Ceric

15815 have read this article
Disclaimer: The Stencyl Team does not actively monitor comments on articles. If you're seeking help for your game, please ask a question on the forums. Thanks!
8 Comments
rogerbordini
Hey guys, I need to do exactly the same "Actor’s Position in `Next` Scene" as in Zelda. Please, anyone knows how to do that?
0 2 weeks, 3 days ago
Bathrobeman
When i change scene, the tiles (but not the actor) in the next scene are invisible. I tried everything but it doesnt help. plzz help me!!!!!!

PS.: My game is a platform game

0 6 months ago
MrRoboman4321
@JamesJanzen I do. Make it so 'Set(LockedLevels) to FarthestOpenLevel on'.
0 6 months, 3 weeks ago
JamesJanzen
I'm going to attempt to make locked levels, through quite a few "if" blocks. I'm just wondering if there's an easier way than "if LEVELCOMPLETE = true, level animation = unlocked" and so on..?
0 7 months, 3 weeks ago
Zafq
I actually want to add a Level Select scene where the future scenes are locked untill you beat the scene before it...Tips?
0 9 months, 1 week ago
Phillament
This is really helpful so far, thank you for sharing! I noticed an error in the challenge section though, the 'Get scene with name' block is said to be in Scene > Game Flow, when it is actually in Scene > World. At least it is in my version of Stencyl. Thought I'd point it out just in case.
0 11 months, 4 days ago
MDuru80
I thought the "SceneNumber" was a game Attribute but it was just an Attribute! So now I completely understand them now.
0 11 months, 2 weeks ago
MDuru80
Well done Ceric!!
0 11 months, 3 weeks ago



Commenting Guidelines

Sign In to Comment

Make Games

  • What is Stencyl?
  • Roadmap
  • Pricing

Play

  • Arcade
  • Showcase

Community

  • Forums
  • Chat
  • Translations

Help

  • Stencylpedia
  • Stencyl TV

About Us

  • Blog
  • Contact Us
  • Press
  • Privacy
Follow Stencyl on Twitter



© 2013 Stencyl, LLC.