Haciendo juegos con Html5

Como crear eventos de tiempo en Phaser

 

En esta ocasion vamos a crear uno de lo eventos mas basicos que podemos usar con este framework con respecto al tiempo, muy util al momento de agregar objetos cada cierto tiempo.


Basicamente lo que realiza la funcion es un loop evento que se va a repetir indefinidamente cada fraccion de tiempo y gracias a Phaser hacer esto es muy sencillo.

Como siempre creamos una instancia de Phaser.Game: 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', 

{ create: create, render: render });

Declaramos nuestras variables: 

var contador = 0,
var texto=0;

A la variable contador la vamos a aumentar cada vez que se repita el evento y con la variable texto vamos a mostrar en pantalla dicho aumento. En la funcion create tenemos: 

function create() {
    game.stage.backgroundColor = '#2255ee';
    texto = game.add.text(game.world.centerX, game.world.centerY, 

'Contador: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });

 texto.anchor.setTo(0.5, 0.5);
    game.time.events.loop(Phaser.Timer.SECOND, actualizaContador, this);
}

Como siempre digo ya vimos unas de las cosas mas importantes de este framework las cuales se usan casi siempre , agregamos un color de fondo, agregamos un texto en el centro de nuestro canvas, dibujamos la palabra Contador:0, tamaño 64 pixeles, Arial, color blanco, alineada al centro, modificamos su anchor para que sea posicionada tomada por su centro. 

Ahora vemos como se crea un evento de tiempo siempre explico de donde sale cada cosa pero solo para saber que elementos usa ya en la practica nos ayuda a resolver algun error mas facilmente. 

Esto es un simple candena me explico usamos la propiedad time de Phaser.Game esta nos permite usar la propiedad de la "clase" Phaser.Time llamada events la cual accede a la "clase" Phaser.Timer que posee un metodo llamado loop el cual recibe dos parametros:

 1.El tiempo que tarda el evento(En este caso un segundo que estan representado como 1000 ms) tambien podemos usar Phaser.Timer.MINUTE que equivale a 60000 ms. 

2.La funcion a llamar o lo que queremos que ocurra cuando termina el evento. La funcion que llama el evento: 

function actualizaContador() {
    contador++;
    texto.setText('Contador: ' + contador);
}

Aqui simplemente actualizamos la variable contador en 1 y a su vez actualizamos el texto que vemos en pantalla. Para terminar por curiosidad vamos a colocar en pantalla el tiempo que tarda el evento la hacemos con la ya conocida funcion render: 

function render() {
    game.debug.text("Duracion del Evento: " + 

game.time.events.duration.toFixed(0), 32, 32);
}

Recuerden que usamos esta funcion y la clase Phaser.Debug pero en proceso de desarrollo para ver que todo funcione bien, usamos la clase debug con su metodo text para mostrar la duracion(duration) del evento(game.time.events) y usamos el metodo toFixed(0) para que el numero quede redondeado. 

Un ejemplo si tenemos el numero 3.4 y lo queremos sin nada despues del punto es decir 3 usamos toFixed(0) y listo.

El Resultado:
 

Hasta la proxima!!!.