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.
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.
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
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-RFNcTV3aFZQcF9weUk/agarrar.html.
El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de input y eventos, sprites y recursos 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