Haciendo juegos con Html5

                 Acelerar objetos en Phaser

Despues de un tiempo sin ningun tutorial de phaser volvemos a la carga y no crean que me habia olvidado de el, con respecto al js13k aun no tengo ningun prototipo pero creo que en dos semanas lo puedo hacer y publicar, tambien quiero publicar algunos reportes de mi juego, como va el mercado entre otras cosas ya veremos.

Una de las partes mas complejas de phaser ya las hemos visto asi que si lo asimilaste lo que viene solo sera aplicar conceptos vistos y una gota de creatividad. 


En esta ocasion vamos a mover objetos que sigan al puntero del mouse pero con el sistema de fisica que provee Phaser, lo cual hace este proceso muy sencillo. 

Empezamos: 

Creamos una nueva instancia de Phaser y declaramos las variables:

var sprite,game;
game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo',{preload:preload,create:create,update:update,render:render});

Nada nuevo tenemos las cuatro funciones principales,ahora cargamos la imagen que vamos a utilizar:

function preload(){
game.load.image("_diamante","diamante.png");
};

En la funcion create tenemos:

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = '#0072bc';
    sprite = game.add.sprite(200, 200, '_diamante');
    sprite.anchor.setTo(0.5, 0.5);
    game.physics.enable(sprite, Phaser.Physics.ARCADE);
    sprite.body.allowRotation = false;
};

Primero iniciamos el sistema de Fisica, agregamos un poco de color, agregamos nuestro sprite, configuramos el anchor, activamos la fisica a este sprite, como dicha fisica ha sido activada podemos acceder a la rotacion del objeto mediante la propiedad de body "Permitir rotacion":

allowRotation="false";

En este caso no queremos que lo haga le pasamos "false", en la funcion update es donde ocurre la magia:

function update() {
    sprite.rotation = game.physics.arcade.moveToPointer(sprite, 60, game.input.activePointer, 500);
};

Aqui vemos algo interesante en la propiedad anterior indicaba que no se permitiria la rotacion del cuerpo pero cuidado eso se refiera al body es decir al cuerpo invisible con el cual el sistema comprueba las colisiones y otro tipo de cosas. 

En este caso es la propiedad rotation pero del sprite la cual afecta la rotacion del objeto con un valor en radianes(Angulo),para mover este objeto empleamos el metodo de sistema Arcade moveToPointer(mover a puntero):

game.physics.arcade.moveToPointer(objeto a mover, velocidad, puntero activo, tiempo);

Este recibe como parametro el objeto (el sprite),la velocidad(por defecto es 60),el puntero activo accedemos a el mediante la clase Phaser.Input y la propiedad "activePointer" nos devuelve dicho puntero o el primer click, toque, etc, y el tiempo se refiere a la velocidad que tardaria en llegar el objeto a la posicion del puntero(1000=1segundo). 

 El metodo nos devuelve un angulo en radianes y ademas mueve el objeto a la posicion del puntero activo, para ver como es afectado las propiedades del sprite usamos la funcion render.

function render() {
    game.debug.spriteInfo(sprite, 32, 32);
};

Con el metodo spriteInfo(informacion del sprite) accdemos a las propidades basicas de nuestro sprite. 

Resultado:




Asi logramos un efecto muy cool ,sencillo de hacer y con el cual se han creado juegos comerciales , muy adictivos como el popular Sinuous un juego cuya mision es esquivar puntos rojos. 

Hasta la proxima.