Cómo crear 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.

↻

Artículo original de 2014 · revisado en 2026

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.

Phaser clásico · código histórico

Comenzemos:

Creamos una nueva instancia:

JavaScriptCódigo histórico

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

Declaramos nuestras variables:

JavaScriptCódigo histórico

var moneda,animacion;

Cargamos nuestra imagen:

JavaScriptCódigo histórico

function preload() {

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

 };

Creamos nuestra function create:

JavaScriptCódigo histórico

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

JavaScriptCódigo histórico

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:

JavaScriptCódigo histórico

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

JavaScriptCódigo histórico

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

JavaScriptCódigo histórico

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

JavaScriptCódigo histórico

JavaScriptCódigo histórico

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.

!

Demo histórico no disponible

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-RFNazYzTWJVUVA2djg/tween.html.

Contexto actual

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

ADVERTISEMENT

ADVERTISEMENT