Haciendo juegos con Html5

Agarrando nuestros objetos en Phaser.

En html5 podemos hacer lo que conocemos como hacer drag, que consiste en agarrar a nuestro sprite con el puntero del mouse o en smartphones mediante un evento touch y phaser lo realiza de una forma muy sencilla. Cuando aprendimos a agregar eventos del mouse conocimos propiedades importantes sobre los eventos del mouse y como hacer que nuestro sprite los reconozca, en esta ocasión solo con un nuevo método podemos lograr el objetivo de este tutorial.

Empezemos:

Declaramos nuestra variable donde almacenaremos nuestro sprite.

var bloque;

Cargamos nuestro sprite:

     function preload() {
    game.load.image('_bonus', 'bonus.png');
}

En la function create tenemos:

     function create() {
    bloque = game.add.sprite(200, 200, '_bonus');
    bloque.inputEnabled = true;
    bloque.input.enableDrag(true);
}

Agregamos nuestro sprite, luego permitimos que nuestro sprite puede recibir eventos del mouse pasándole true a la propiedad inputEnabled y además automáticamente nuestro sprite pueda acceder a la clase Phaser.inputHandler, gracias a esto podemos llamar al método .enableDrag(parametro):

bloque.input.enabledrag(true)

Este metodo recibe como parametro un booleano , en este caso le pasamos true asi conseguimos que cuando presionemos click el sprite sea tomado por el centro de lo contrario donde presionemos click en el sprite por esa posicion sera tomado. Hasta la Proxima