CAAT.Scene

Timers

Each Scene can have an unlimited number of timers which will run upon its virtual time line. The timers will be backed into a CAAT.TimerTask object instance. It is important to note that timers will be paused when scenes are removed from screen.

Each timer is defined by 5 parameters:

The timer start time, related to scene's time.
The timer duration. How many milliseconds to last until timer expiration
A expiration callback.
A timer tick callback.
A timer cancellation callback.

The timer tick will be called everytime it is in director's frame time. This is suitable for modelling a chronometer in CAAT.

The expiration and cancellation callbacks will be called only once, either on expiration or on cancellation.

The parameters received by the callbacks are:

Scene time when the callback has been generated.
Timertask time when the callback has been generated. This is a value between zero and timer task duration.
The timer task object.

At any moment, the timer task can be set to start at another scene time. This is useful for the situation when the timer task has expired and you'd like to restart it again keeping the same duration.

In this example, you can see two timer task which show a chronometer for elapsed time. One chronometer drawn on every timer tick, and the other upon timer task expiration. When expired, it is being reset to start counting time again. The example has two scenes to demonstrate that timers are per scene, and thus will count and pause independently.


        function createText(director, color) {
            var actor = new CAAT.Foundation.UI.TextActor().
                    setFont("100px Lucida sans").
                    setTextFillStyle(color).
                    setOutline(true).
                    enableEvents(false);

            return actor;
        }

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

        function format(time) {
            var millis = time % 1000;
            time /= 1000;
            time >>= 0;

            var seconds = time % 60;
            time /= 60;
            time >>= 0;

            var mins = time % 60;
            time /= 60;
            time >>= 0;

            var hours = time;

            return '' +
                    (hours > 9 ? hours : '0' + hours) +
                    ' : ' +
                    (mins > 9 ? mins : '0' + mins) +
                    ' : ' +
                    (seconds > 9 ? seconds : '0' + seconds) +
                    '.' +
                    millis;
        }

        function createScene(director, rotated) {

            var scene1 = director.createScene();
            var s1t1 = createText(director, 'red');
            var s1t2 = createText(director, 'green');
            scene1.addChild(s1t1.setLocation(20, 20));
            scene1.addChild(s1t2.setLocation(20, 150));

            // create a timer which runs for ever
            // on every timer tick, update counter.
            scene1.createTimer(
                    0,
                    Number.MAX_VALUE,
                    function (scene_time, timer_time, timertask_instance) {   // timeout
                    },
                    function (scene_time, timer_time, timertask_instance) {   // tick
                        s1t1.setText(format(timer_time));
                    },
                    function (scene_time, timer_time, timertask_instance) {   // cancel
                    }
            )

            var seconds1 = 0;
            scene1.createTimer(
                    0,
                    1000,
                    function (scene_time, timer_time, timertask_instance) {   // timeout
                        seconds1 += 1000;
                        timertask_instance.reset(scene_time);
                        s1t2.setText(format(seconds1));
                    },
                    function (scene_time, timer_time, timertask_instance) {   // tick
                    },
                    function (scene_time, timer_time, timertask_instance) {   // cancel
                    }
            )

            // this timer increases timer count on timeout, and then, resets itself.
            var button = createButton(director, rotated);
            button.mouseClick = function (e) {
                if (!rotated) {
                    director.switchToNextScene(
                            2000,
                            false,
                            true);
                } else {
                    director.switchToPrevScene(
                            2000,
                            false,
                            true);
                }

            }
            scene1.addChild(button);

        }

        function __scene1() {
            var director = new CAAT.Foundation.Director().
                    initialize(700, 300, document.getElementById('_c1'));

            // create 2 scenes to show timers are per scene.
            createScene(director, false);
            createScene(director, true);

            CAAT.loop(60);
        }

        __scene1();