Scenes & Transitions

In Flambe, you can create scenes (pages) very easy. You need a Director and some Scene. A Scene is an component, you can add visual elements to it. The Director manages a stack of Entities. Only the front-most entity receives game updates.

This example code just illustrates how Scenes and transitions work, in real world you would extend a Scene or create some kind of Scene creator which adds the visual elements and maybe create some kind of scene manager for this.

If you run this code, you see a splash scene (yellow box) moving to the left and transitioning to the home scene (purple box), which directly slides in.

static private var director:Director = new Director();

public static function main() 
{
	// Wind up all platform-specific stuff
	System.init();
		
	// Very basic page setup. 
	var splash:Entity = new Entity().add(new Scene()).add(new FillSprite(0xffcc00, 800,600));
	var home:Entity = new Entity().add(new Scene()).add(new FillSprite(0xcc00ff, 800,600));
	var game:Entity = new Entity().add(new Scene()).add(new FillSprite(0x00ffcc, 800,600));

	// example listener to see when transition completed on 	
	home.get(Scene).shown.connect(function () { 
		trace("Scene has finished transitioning!"); 
	});

	// Don't forget to add the Director as component somewhere
	System.root.add(director);

	// show first page
	goto(splash);

	// .. directly go to homepage. 
	goto(home);
}
	
static private function goto(sceneEntity:Entity)
{
	// a one second transition from the left, with nice in-out easing
	var transition = new SlideTransition(1, Ease.quintInOut).left(); 

	// scene transition magic over here. Old scenes get disposed when unwinding
	director.unwindToScene(sceneEntity, transition); 
}

Now, you could easily swap the FillSprite with an image or a more complex scene with buttons and animations ..and you can add your game entity in it, of course!

If you feel creative, you can pass the transition as parameter and have different transitions per scene.

More information on Entities and Components

Basic transitions

FadeTransition

Fades the new scene in front of the old scene.

SlideTransition

Slides the old scene off the stage, and the new scene into its place. SlideTransition assumes that the scene sprites are sliding from and to (x=0,y=0). You can make it appear to slide from (x=100,y=100) by nesting your image entity in another entity, and making that the actual scene.

Creating your own transition

The best way to do it, is to look at the code of FadeTransition. It extends TweenTransition, which is a good base. If you look in the update-function, you'll notice it uses interp(olation) function, which internally respects the easing equation. The FadeTransition interpolates the alpha property from 0 to 1, but the Slide transition uses 0 to the width/height of a Sprite.