Haciendo juegos con Html5

           Haciendo animaciones con Phaser

 Nuestros juegos siempre debemos pulirlos llevándolos a su máxima expresión, Phaser nos permite hacer animaciones fluidas gracias a algo llamado Tween , muy usado por muchas librerías de juegos ya que permiten efectos muy llamativos. Existen variedad de métodos Easing como me gusta traducir literalmente seria métodos de suavizado pero digamos que son métodos para pulir, esto nos ayuda a definir curvas movimientos autónomos, predefinidos.
 Comenzemos:



Creamos una nueva instancia:

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

Declaramos nuestras variables:

var moneda,animacion;

Cargamos nuestra imagen:

function preload() {

 game.load.image('_moneda', 'coin.png');

 };

Creamos nuestra function create:

 function create() {
 moneda = game.add.sprite(0, 0, '_moneda');
 

animacion = game.add.tween(moneda).to({ x: 350 }, 2000, Phaser.Easing.Linear.None)
 .to({ y: 250 }, 1000, Phaser.Easing.Quadratic.Out)

 .to({ x: 10 }, 1000, Phaser.Easing.Cubic.Out)

 .to({ y: 0 }, 1000, Phaser.Easing.Quartic.Out)

 .loop()
.start();
};

 

Comenzamos agregando nuestro sprite, luego mediante el metodo game.add agregamos un tween(objeto) que recibe como parámetro el sprite, la clase Phaser.Tween tiene el método .to(propiedad,duración en ms,tipo de Easing) que recibe como primer parámetro la propiedad refiriéndose al sprite en este caso su posición en sus ejes.
 Con un poco de imaginación esto nos quiere decir que podemos modificar una gran cantidad de propiedades (velocidad,posición,alpha,ancho,alto,escala), el siguiente parámetro es la duración por defecto en milisegundos explicado rápidamente esto equivale a la milésima fracción de un segundo 0,0010 segundo entonces si tenemos 2000ms esto equivale a dos segundos, y por últimos el tipo de Easing en este punto ya es cuestión de que juegues con la gran cantidad que existe:

 Phaser.Easing.Linear.None: un movimiento lineal simple.

 Phaser.Easing.Quadratic.Out (k^2): lineal pero un poco mas rápido,un comienzo rápido y al final reduce la velocidad.

 Phaser.Easing.Cubic.Out (k^3): un movimiento lineal mas rápido al final reduce l a velocidad. 

 Phaser.Easing.Quartic.Out(k^4): un movimiento lineal aun mas rápido al final red uce la velocidad.

Esta es la base para agregar un tween, pero también es posible hacer una cadena de ellos solo llamamos al método .to(propiedad) las veces que lo necesitemos para finalizar usamos el método .loop() que repite nuestra animación indefinidamente, y con el método .start() ordenamos que inicie inmediatamente.

Es cuestión de experimentar y buscar el efecto deseado en futuros tutoriales sobre algún juego veremos otros tipos . Hasta la próxima.