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.
Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.
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 clasePhaser.Debug pero en proceso de desarrollo para ver que todo funcione bien, usamos la clasedebug 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:
El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://ad904fc586a0b149f2329851c2becc48faecdd13.googledrive.com/host/0B9AohO0VxFJLbzZyay02UUQ4b1k/eventos.html.
Hasta la proxima!!!.
El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de input y eventos sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.
No comments:
Post a Comment