Animando Elementos

Intervalos con Ticker

CreateJS está diseñado para facilitarnos la vida en la tarea de crear aplicaciones gráficas interactivas, y como toda aplicación de este tipo, es menester que los elementos que se muestren en pantalla puedan cambiar su posición, tamaño, color, etc en un determinado momento o por alguna interacción del usuario o de otros elementos.

Por esta razón, CreateJS cuenta con la clase Ticker, encargada de disparar un evento 'tick' periódicamente en intervalos regulares, ofreciéndonos un palpitar constante muy útil para controlar la velocidad con la que deseamos actualizar el estado de nuestros elementos y sus propiedades.

Ticker es una clase estática, no se inicializa, de modo que lo que tendremos que hacer para empezar a utilizarla simplemente es realizar una rápida configuración.

                createjs.Ticker.setFPS(60); // Configuraremos los fps
            

La clase Ticker se mantendrá disparando un evento 'tick' de manera regular. El siguiente paso será 'escuchar' dicho evento y usarlo para actualizar nuestro Stage. Podremos escuchar el evento con el método on(type, listener).

                createjs.Ticker.on("tick", onTick, this); // onTick será una función que definiremos a continuación
            

Definiremos la función donde realizaremos la actualización periódica:

                
                    var onTick = function (e) { // cada vez que se escuche un 'tick' se llamará a esta función
                        stage.update();
                    };
                
            

Y de este modo el Stage se mantendrá actualizado, esto quiere decir que, cada vez que ocurra un 'tick' se llamará al update(), método con el cual el Stage se encarga de repasar todo su DisplayList (hijos), y los renderizará según sus propiedades (posición, color, escala, etc).

Animando elementos

Crearemos una estructura tal que así:

                
                    var canvas, stage, shape; // variables globales
                    $(document).ready(function(){
                        createjs.Ticker.setFPS(60);
                        createjs.Ticker.on("tick", onTick, this);

                        canvas = document.getElementById('canvas_1');

                        stage = new createjs.Stage(canvas);

                        shape = new createjs.Shape();
                        shape.graphics.beginFill("#f0f").drawRect(0, 0, 60, 30);
                        shape.regX = 30; //la mitad de su ancho
                        shape.regY = 15; //la mitad de su largo
                        shape.x = canvas.width / 2;
                        shape.y = canvas.height / 2;

                        stage.addChild(shape);
                    });

                    var onTick = function(e){ // función de actualización
                        shape.rotation++;
                        stage.update();
                    }
                
            

Vemos que lo único que estamos modificando es la rotación del objeto; y lo estamos haciendo en la función onTick() que es ejecutada periódicamente. Y gracias a stage.update() podemos visualizar los cambios.

Los 'tick' se escucharán siempre y cuando la propiedad Ticker.paused se mantenga a false. Podemos crear un botón para conmutar el valor de dicha propiedad.

                
                    <button onclick="onButtonClicked">Pause</button>
                
            

Además, modificaremos la función onTick() para que sólo actualize si no está pausado.

                var onTick = function(e){ // función de actualización
                        if(!e.paused){ // sólo actualizar si no está en pausa
                            shape.rotation++;
                            stage.update();
                        }
                    }
            

Crearemos una función onButtonClicked() que se encargará de conmutar la pausa del Ticker.

                var onButtonClicked = function(e){
                    createjs.Ticker.paused = !createjs.Ticker.paused;
                };
            

De este modo, cada vez que pulsemos el botón controlaremos el valor del Ticker.paused.

Aquí el código de este sencillo ejemplo:

                
                    canvas = document.getElementById('canvas');
                    stage = new createjs.Stage(canvas);
                    shape = new createjs.Shape();
                    shape.graphics.beginFill("#f55").drawCircle(0, 0, 16); // un círculo de 16px
                    shape.regX = shape_2.regY = 8; // su centro
                    shape.y = canvas.height / 2;
                    stage.addChild(shape);

                    var onTick = function(e){
                        if(!e.paused){// Si no esta en pausa
                            shape.x++; // Aumentar su posición x
                            if(shape.x > canvas.width + 16){ // Si se sale más allá del canvas
                                shape.x = -16; // reubicamos su posición x
                                shape.y = Math.random() * canvas.height; // le cambiamos la y también por un valor aleatorio
                            }
                            stage.update(); // Dibujarlo en pantalla!
                        }
                    }

                    var onButtonClicked = function(e){ // Función llamada desde un Botón Html (gracias al atributo onclick)
                        createjs.Ticker.paused = !createjs.Ticker.paused;
                    };
                
            

Un ejemplo más

Antes de terminar esta entrada me gustaría agregar un ejemplo más. Un poco más interesante usando varios Shape para conseguir un canvas más atractivo.

stars = [];

                        
                            for(var i = 0; i<30; i++){
                                var x, y;
                                x = Math.random() * canvas.width; // Posiciones aleatorias
                                y = Math.random() * canvas.height;

                                star = new createjs.Shape();
                                star.rotation = Math.random() * 360; // una rotación aleatoria
                                star.radius = Math.random() * 3; // esto será el tamaño de la estrella

                                star.graphics.beginFill("#fff").drawPolyStar (0,  0,  star.radius,  5,  5,  star.rotation);
                                star.regX = star.regY = star.radius / 2;
                                star.x = x;
                                star.y = y;

                                stars.push(star); // meter todas las estrellitas en un array
                                stage.addChild(star); // agregarlas al Stage para poder dibujarlas después con .update()
                            }
                        
                    

Y en la función onTick() simplemente aumentaremos sus y's (para que las estrellas vayan de arriba a abajo) y controlaremos cuando se salgan del canvas (reiniciando su posición y)

                
                    var onTick = function(e){
                        if(!e.paused){
                            for(var i=0; i<stars.length; i++){ // actualizaremos todas las estrellitas
                                stars[i].y += 1 / stars[i].radius; // aumentar su y (mientras más grande sea menos aumentará)
                                if(stars[i].y > canvas_3.height + stars[i].radius * 2){ // si se sale del canvas...
                                    stars[i].y = 0 - stars[i].radius * 2; //otra vez para arriba
                                    stars[i].x = Math.random() * canvas.width; //posición x nueva aleatoria
                                }
                            }
                            stage.update(); // renderizar!
                        }
                    }
                
            

Y eso es todo por ahora. La clase Ticker no tiene más. Espero que les haya gustado ^^