Cómo crear spritesheets en Phaser

Existen muchas forma de pulir nuestros juegos con el fin de darle un acabado muy profesional y atractivo para la vista, hacer animaciones de nuestros objetos ya sea explosiones, saltos,etc. es una de ellas.

↻

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

Para lograrlo en Phaser necesitamos de el programa ShoeBox la cual uso ya que es gratis y muy comoda ya la hemos configurado previamente, ahora solo es cuestion de tomar las imagenes que vamos a usar y crear los archivos necesarios explicado en como usar ShoeBox  .

Recuerda que puedes abrir la consola de javascript y tomar todas las imágenes, código, de los ejemplos al final de cada tutorial, pero también las puedes descargar ya mostré varios sitios donde los puedes obtener.

Como siempre creamos una nueva instancia:

JavaScriptCódigo histórico

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

Creamos nuestra variable:

JavaScriptCódigo histórico

var animal;

Cargamos nuestros archivos:

JavaScriptCódigo histórico

function preload() {
    game.load.atlas('volando','sprites.png', 'sprites.json');
};

En esta ocasion lo hacemos mediante el metodo game.load.atlas(nombre clave,"ruta imagen","ruta archivo json").

Que es una Textura Atlas?

Una textura Atlas es similiar a un sprite sheets ya que ambas son imagenes agrupadas en una sola, la textura atlas tiene un archivo adicional llamado "atlas" que define las posiciones en sus ejes, tamaños de nuestra imagen; pero una de las grandes ventajas radica en que los sprite sheets todas las imagenes tienen un tamaño igual:

Mientras que en este tipo de formato nuestras imágenes en la textura su tamaño puede variar:

Tomada de:jesseFreeman

Luego tenemos en la funcion create:

JavaScriptCódigo histórico

function create() {
game.stage.setBackgroundColor(0x22aaff);
animal = game.add.sprite(300,100,'volando');
animal.animations.add("volar");
animal.play("volar",10,true);
  game.add.tween(animal).to({ y: 300 }, 3000, Phaser.Easing.Quadratic.In)
   .to({ x: 20 }, 2000, Phaser.Easing.Quadratic.In)
   .to({ y: 20 }, 2000, Phaser.Easing.Quadratic.In)
   .loop()
   .start();
};

Colocamos un color a nuestro fondo pero esta vez esta lo hago de una forma diferente usando el metodo .setBackgroundColor(color) de nuestro Stage,agregamos nuestro sprite.

Para agregar un animacion resulta muy sencillo usamos la propiedad de nuestro sprite animations(animaciones) y mediante su metodo .add(nombre_clave)"agregar" agregamos una nueva animacion solo debemos pasarle al metodo un nombre con la cual vamos a identificar esa animacion.

Para usar esa animacion lo hacemos con el metodo .play(nombre_clave,velocidad de reproduccion, repetir)"reproducir", luego agrego un Tween  para un que nuestro insecto realize un pequeño movimiento.

Como  podemos apreciar de una forma muy practica y facil logramos crear una animacion muy fluida todo gracias a nuestro compañero Phaser.

Hasta la proxima.

!

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://c78912e3130b943112395ca0db95a06ee3e4328c.googledrive.com/host/0B2Br6oKX-RFNRnlGbm9uaUVfSWM/animaciones.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