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.

The type of transition will be set randomly.

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.Foundation.Scene:

EASE_ROTATION
EASE_SCALE
EASE_TRANSLATION

The anchor will be any of these values defined in CAAT.Foundation.Actor:

ANCHOR_CENTER
ANCHOR_TOP
ANCHOR_BOTTOM
ANCHOR_LEFT
ANCHOR_RIGHT
ANCHOR_TOP_LEFT
ANCHOR_TOP_RIGHT
ANCHOR_BOTTOM_LEFT
ANCHOR_BOTTOM_RIGHT

In example, for an entering scene performing a EASE_SCALE transition, the anchor is the point by which the scene will scaled.

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

These are the default values, and could not be changed by now. This method in final instance delegates the process to easeInOutMethod.

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.Foundation.UI.TextActor().
                                        setFont("200px Lucida-sans").
                                        setText("Scene "+n).
                                        setAlign("center").
                                        setTextBaseline("center").
                                        setTextFillStyle(color).
                                        setOutline(true).
                                        cacheAsBitmap().
                                        enableEvents(false).
                                        addBehavior(
                                            new CAAT.Behavior.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.Foundation.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.Foundation.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