Haciendo juegos con Html5

Agregando eventos del mouse en Phaser

En este tutorial aprenderemos a agregar eventos del mouse en phaser y comprobaremos una vez mas lo sencillo que nos hace todo, para esto aplicaremos conceptos vistos y conoceremos unos nuevos. Declaramos tres variables: 
Bloque: nuestra imagen.
Texto:la string que agregaremos.
Contador: Inicializada en cero,será actualizada cada vez que se presione click.
A todas nuestras imágenes podemos activarles unas serie de eventos, en esta oportunidad será un evento del mouse que se activara cuando hagamos click sobre ella, entonces veamos el código:

bloque = game.add.image(game.world.centerX, game.world.centerY,"_bonus");
bloque.anchor.set(0.5);
bloque.inputEnabled = true; 
bloque.events.onInputDown.add(actualiza, this);
texto=game.add.text(game.world.centerX, game.world.centerY-100,contador+'',
{ fill:'#ccffcc'});  

Primero tenemos algunos conceptos vistos, agregamos una imagen , modificamos el anchor de la textura a la mitad, y nos encontramos con:

bloque.inputEnabled = true; 

Toda nuestra imágenes tienen esta propiedad la cual por defecto tiene una valor “false”, asi que le pasamos el valor “true” para activarlo y asi pueda recibir estos eventos, ahora si podemos hacer lo siguiente.

bloque.events.onInputDown.add(actualiza, this);

mediante la propiedad “events” podemos accede a la clase Phaser.Events que es la responsable de suscribir y enviar algo que pase con nuestra imagen, como lo que queremos que suceda algo cuando se presione click sobre ella agregamos el evento onInputDown la cual es una señal, Phaser no dice:.
“ Phaser usa la clase Phaser.Signal para emitir una señal y asi permitir la comunicación entre objetos en lugar de eventos”
Esto es una característica muy potente con esto podemos pasar todo tipo de parámetro tambien podemos suscribir un evento sin necesidad de darle un nombre clave tal como se haría en modelo de comunicación por eventos, para hacer esto usamos el método: .add(callback, contexto(this: apunta al objeto es decir a nuestra imagen)); agregamos un texto y le pasamo nuestra variable contador que equivale a “0”. Por ultimo tenemos el callback que será llamado cada vez que se haga click:

function actualiza (){
contador+=1;
texto.setText(contador);
};

Primero aumentamos el contador en uno cada que se ejecute la función y luego actualizamos el contenido de nuestro texto con el método setText que recibe como parámetro nuestra variable contador, el resultado:
Hasta la proxima.