Spritesheets en Phaser

En el tutorial anterior vimos como manejar sprites. Quizá te parezca un proceso muy largo una vez tengas cientos o miles de imágenes. Los spritesheets son la solución.

¿Qué son los Spritesheets?

Los spritesheets son imágenes que contienen imágenes más pequeñas en su interior separadas por una distancia común. Esto es un spritesheet:

Phaser soporta spritesheets el uso de spritesheets en muchos lugares. A la hora de cargarlos deberemos especificarlo.

function preload(){
    ...
    game.load.spritesheet("IDdeSpritesheet","img/ArchivoSpritesheet.png",32,32,64,0,0);
    // ID de spritesheet, archivo, ancho de cada imagen, alto de cada imagen, número de imágenes (-1 las buscará automáticamente), espacio en píxeles que hay que dejar de margen al empezar el archivo (margin), espacio en píxeles de separación entre imágenes (spacing)
    ...
}

Cuando queramos usar alguna de las imágenes indivualmente, por ejemplo, cuando creamos un Sprite, debemos especificar el ID del Spritesheet así como el número asignado.

game.add.sprite(100,50,"IDdeSpritesheet",12);

Para contar llamaremos 0 a la imagen situada arriba a la izquierda. Seguiremos hacia la derecha y cuando acabemos la línea bajaremos a la siguiente (igual que si leyésemos un texto).

Creando Spritesheets

Con ImageMagick

Si tienes instalado ImageMagick es fácil generar nuevos spritesheets desde la línea de comandos con montage.
montage ImagenPrimera.png ImagenSegunda.png ImagenTercera.png -tile 4x4 -geometry 128x128+0+0 -background transparent Spritesheet.png
Indicamos las imágenes independientes al principio, con -tile indicamos como van a estar organizadas las imágenes, en este caso la rejilla será de 4 filas y 4 columnas. -geometry indica el tamaño de cada imagen (128 píxeles de ancho y alto). El fondo con -background se asigna a transparente y finalmente indicamos donde vamos a guardar el resultado.

Con GIMP

Con GIMP tendrás que copiar manualmente cada archivo a su lugar correspondiente en un nuevo archivo con las rejillas activadas.

Otros programas

Hay más programas, algunos de pago como TexturePacker o SpriteSheet Packer. Sin embargo hay que tener cuidado pues TexturePacker puede generarnos TextureAtlas en vez de SpriteSheets. Phaser soporta ambos pero no del mismo modo, aquí solo hemos visto los Spritesheets.