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:
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.
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:
El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://googledrive.com/host/0B2Br6oKX-RFNUXBJTEtXTUlqQXc/mouse.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