Scenes & Transitions

## Making scenes In Flambe, you can create scenes (pages) very easy. You need a [Director](https://aduros.com/flambe/api/flambe/scene/Director.html) and some [Scene](https://aduros.com/flambe/api/flambe/scene/Scene.html). 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.

A good example on how to use Scenes in a game, take a look at the Shmup demo The scenes are split up into different classes, each with a static create() function.

The following example code illustrates how Scenes and transitions work, in the real world you would organize the scenes in a different way.

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.

var _director:Director;

public static function main() 
{
	// Wind up all platform-specific stuff
	System.init();

	new Main();
}

public function new()
{
	// Don't forget to add the Director as component somewhere
	System.root.add(_director = new Director());

	// show first page
	goto(getSplashScene());

	// .. directly go to homepage. 
	goto(getHomeScene());
}

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); 
}

function getSplashScene()
{
	return new Entity()
		.add(new Scene())
		.add(new FillSprite(0xffcc00, 800, 600));
}

function getHomeScene()
{
	var entity = new Entity()
		.add(new Scene())
		.add(new FillSprite(0xcc00ff, 800, 600));
	
	// example listener to see when transition completed on 	
	entity.get(Scene).shown.connect(function () { 
		trace("Scene has finished transitioning!"); 
	}).once();

	return entity;
}

function getGameScene()
{
	return new Entity()
		.add(new Scene())
		.add(new FillSprite(0x00ffcc, 800, 600));
}

Now, you could easily swap the FillSprite with an image or decorate the scene container with more entities with buttons, animations and of course your game 🎲

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

More information on Entities and Components

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.

Also check out the flambe.scene package in API docs