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

  • EASE_ROTATION
  • EASE_SCALE
  • EASE_TRANSLATION
The anchor will be any of these values defined in CAAT.Actor.prototype:
  • 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.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();