Haciendo juegos con Html5

Como usar shoeBox para hacer spriteSheet

ShoeBox es una herramienta que nos da una mano en temas de UI(user interface) la interfaz de usuario, sprites, animaciones etc.. Esta herramienta es la que uso para hacer las animaciones , tipos de letras que uso en phaser. Una de las técnicas para optimizar nuestros juegos para que este cargue rápido y mas fluido es tomar nuestras imágenes y agruparlas en una sola a esto se le conoce como spritesheet (tira de imagenes), luego para usarlas es sencillo cada una se encuentra en una posición exacta dentro de una única textura, esto representa una gran ayuda no es lo mismo cargar una animación de 20 imágenes una por una que cargar todas en una sola, lo primero será descargar la aplicacion ShoeBox, debes tener instalado Adobe Air en tu computador, luego iniciamos nuestra aplicación y estaremos aquí:

 













Observamos varias pestañas la que nos interesa en esta ocasión se llama Sprites, esta herramienta es muy practica solo neceistamos arrastrar la imágenes que usaremos a la casilla que vamos a usar, para este ejemplo tengo estos tres sprites:

Luego las seleccionas en el orden que corresponda en este caso tengo una en estado normal, estado volando, estado muere, las arrastramos:

Al soltarla dentro el cuadro se nos abre un ventana:

Aquí podemos ver nuestras imágenes y como va a quedar , presionando en “settings” se nos desplega una serie de opciones

donde podemos modificar cosas como el nombre con que exportara el archivo por defecto se llama sprite, detalles técnicos del archivo final, para trabajar con Phaser nos sirven dos tipos de archivos .json o xml, lastimosamente esta herramienta no exporta archivos .json pero yo lo configure manualmente para que pueda hacerlo no es tan dificil pero eso es algo que explicare en otra oportunidad, nos dirigimos a la opción que dice Template y seleccionamos la que dice Starling, Sparrow:

y presionamos “apply”(aplicar) , presionamos click derecho sobre ella para que se cierre y luego hacemos click en la ventana de nuestro sprite donde dice “save” (guardar): El resultado es un archivo xml con su respectiva imagen:

Podemos abrir el archivo en nuestro editor:

tenemos un archivo xml básico, la versión , el tipo de codificación esta es necesaria porque en navegadores como firefox sin esto nos arroja error, la ruta de la textura , las subtexturas cada imagen con su nombre,su posición en “y”, ancho,etc.

 Con esto ya podemos usar esta genial herramienta pero para usarlo con Phaser aun tenemos que modificarlos pero lo veremos en otra ocasión. Hasta la Proxima.