Director
Switching Scenes
During execution, the Director class instance exposes a lot of functionality to switch between two given Scenes or to change the current Scene. The following methods will do it:
function setScene( sceneIndex ).
Changes (or sets) the current Director scene to the index specified
as parameter. There will be no transition on scene change.
function switchToPrevScene(time, alpha, transition).
function switchToNextScene(time, alpha, transition).
These methods will switch from the current scene to the previous or next one
respectively. The supplied parameters are:
- time: how much time to take for the switching process. Expressed in milliseconds.
- alpha: wheter alpha transparency fading should be applied to entering/exiting scenes.
- transition: whether to apply transition for the entering and exiting scenes.
function easeInOut( inSceneIndex, typein, anchorin, outSceneIndex, typeout, anchorout, time,
alpha,
interpolatorIn, interpolatorOut ).
This method offers full control over the process of switching between
any given two Scenes.
To apply this method, you must specify the type of transition to apply
for each Scene and the anchor to keep the Scene pinned at.
The type of transition will be one of the following values defined in
CAAT.Scene.prototype:
- EASE_ROTATION
- EASE_SCALE
- EASE_TRANSLATION
- ANCHOR_CENTER
- ANCHOR_TOP
- ANCHOR_BOTTOM
- ANCHOR_LEFT
- ANCHOR_RIGHT
- ANCHOR_TOP_LEFT
- ANCHOR_TOP_RIGHT
- ANCHOR_BOTTOM_LEFT
- ANCHOR_BOTTOM_RIGHT
function easeInOutRandom(inIndex,outIndex,time,alpha).
This method will switch between two given Scene indexes (ie, take away scene
number 2, and bring in scene number 5).
It will randomly choose for each Scene the type of transition to apply and
the anchor point of each transition type.
It will also set for different kind of transitions the following interpolators:
- EASE_ROTATION -> ExponentialInOutInterpolator, exponent 4.
- EASE_SCALE -> ElasticOutInterpolator, 1.1 and .4
- EASE_TRANSLATION -> BounceOutInterpolator
Example
This example show two scenes with a button to switch to next and previous scene. Every time, a different transition will be played. Note that scenes get paused when being removed from screen, and that input won't be enabled until entering scene's transition ends.
// screat an actor with the text Scene1 or Scene2
function createNumber(director, n, color) {
var actor= new CAAT.TextActor().
setFont("200px Lucida-sans").
setText("Scene "+n).
calcTextSize(director).
setAlign("center").
setFillStyle(color).
setOutline(true).
cacheAsBitmap().
enableEvents(false).
addBehavior(
new CAAT.RotateBehavior().
setFrameTime( 0, 20000 ).
setValues( 0, 2 * Math.PI ).
setCycle( true ) );
actor.centerAt( director.width/2, director.height/2 );
return actor;
}
// create an actor with a custom paint method. its behavior resembles that of
// a button.
function createButton(director, rotated) {
var actor= new CAAT.Actor().
setSize( 60, 60 ).
centerAt( director.width - 40, director.height - 40 );
actor.paint= function( director, time ) {
var ctx= director.ctx;
ctx.save();
if ( rotated ) {
ctx.translate( this.width, 0 );
ctx.scale(-1,1);
}
ctx.fillStyle= this.pointed ? 'orange' : '#f3f';
ctx.fillRect(0,0,this.width,this.height );
ctx.strokeStyle= this.pointed ? 'red' : 'black';
ctx.strokeRect(0,0,this.width,this.height );
ctx.strokeStyle='white';
ctx.beginPath();
ctx.moveTo(5,10);
ctx.lineTo(20,10);
ctx.lineTo(15,5);
ctx.moveTo(20,10);
ctx.lineTo(15,15);
ctx.lineWidth=2;
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.stroke();
ctx.restore();
ctx.font= '10px sans-serif';
ctx.fillStyle='black';
ctx.fillText(
rotated ? 'Prev Scene' : 'Next Scene',
3,
45);
};
return actor;
}
// create a background pattern of horizontal and vertical lines
function createPattern(director, color) {
var actor= new CAAT.Actor().
setSize(director.width,director.height).
enableEvents(false);
actor.paint= function( director, time ) {
var i,j,ctx;
if ( this.backgroundImage ) {
this.backgroundImage.paint(director,0,0,0);
return;
}
ctx= director.ctx;
for( j=0.5; j<director.width; j+=20 ) {
ctx.moveTo( j, 0 );
ctx.lineTo( j, director.height );
}
for( i=0.5; i<director.height; i+=20 ) {
ctx.moveTo( 0, i );
ctx.lineTo( director.width, i );
}
ctx.strokeStyle= color;
ctx.stroke();
};
return actor;
}
function __scene1() {
var director= new CAAT.Director().
initialize(800,400,document.getElementById('_c1'));
var scene1 = director.createScene();
scene1.addChild( createPattern(director, '#33f') );
scene1.addChild( createNumber(director, 1, '#33f') );
var button= createButton(director, false);
button.mouseClick= function(e) {
director.switchToNextScene(
2000,
false,
true
)
};
scene1.addChild(button);
var scene2 = director.createScene();
scene2.addChild( createPattern(director, '#f33') );
scene2.addChild( createNumber(director, 2, '#f33') );
var button2= createButton(director, true);
button2.mouseClick= function(e) {
director.switchToPrevScene(
2000,
false,
true
)
};
scene2.addChild(button2);
CAAT.loop(50);
}
__scene1();