jueves, 16 de abril de 2015

Spritesheet y Sparrow(xml) Parte 1


El ejemplo del la entrada anterior deja en claro como utilizar un atlas, pero con el método Drawtiles no es muy funcional a gran escala.

Tenemos en este momento la facilidad de importar datos generados por un Atlas de imagenes, pero estamos atascados al querer implementarlas.
Joshua Granick al ver esto (presumo yo) creó una librería llamada Spritesheet, la cual vamos a echar un vistazo ahora.





Necesitamos preparar el terreno antes de estudiar esta librería:


Primero, debemos descargarla del repositorio. Cuando le daba forma a esta entrada, estaban disponibles algunas actualizaciones y nunca viene mal estar al día.




Luego pasamos al código, que si bien es sencillo no está muy documentado que digamos, pero con echar un vistazo nos vamos a encontrar con que es muy intuitiva.


Veamos que hay dentro:




Típica estructura de una librería externa, está compuesta por los paquetes principales (AnimatedSprite, Spritesheet) y luego encontramos dos carpetas: data e Importers.


Comencemos con Importers ya que es lo primero que vamos a utilizar: 4 clases se encuentran dentro:


  • AnimoImporter
  • BitmapImporter
  • SparrowImporter
  • ZoeImporter


AnimoImporter: Permite importar Atlas o imágenes generadas por Animo. Ha quedado medio obsoleto (más que nada por la aparición de Flash en sus comienzos).


BitmapImporter: No requiere que el Atlas vaya acompañado de un archivo con la información de los sprites (xml, Json, etc) generado por el Packer. Visto de otro modo, funciona de manera similar al bucle de carga en el ejemplo de FPS


Solo debemos pasarle ciertos valores. El formato es:


Spritesheet = BitmapImporter.create(Imagen, Columnas, Filas, Ancho, Alto, Ajuste, Escala)


Con toda esa información, la función nos va a devolver una matriz (o array) con las imágenes asignándoles un número (índice) a cada una de ellas a medida que va recorriendo la imagen.

Ejemplo: Supongamos que tenemos el Siguiente Atlas:


La llamada a la función sería algo como:

Spritesheet = BitmapImporter.create(Imagen, 5, 3, 180, 180, 0, 0)

Obviamente tiene un par de inconvenientes el uso de este método. Por un lado, requiere que el Atlas contenga las imágenes del mismo tamaño. Tampoco soporta que las imágenes se encuentren orientadas de forma incorrecta.


SparrowImporter: Nos deja importar nuestro Atlas generado para Sparrow en nuestro proyecto. No hay mucha ciencia detrás, simplemente unos pocos cambios en la forma en que está estructurado el archivo XML que el packer genera. Este es el que vamos a ver en más detalle con un ejemplo.


ZoeImporter: Similar al anterior, pero para importar Atlas generados a partir de una animación en Flash con ZOË que devuelve archivos en formato JSON.



Como con cualquier librería externa, debemos incluirla para que el compilador la encuentre dentro del archivo project.xml


<haxelib name="spritesheet" />




Luego necesitamos importarlas como siempre:




Como se ve en la imagen, vamos a utilizar un Atlas generado para Sparrow en nuestro proyecto y hacemos uso de la librería específica para ello (SparrowImporter). Ello tiene sus pros y sus contras..


Comencemos con las contras (única por ahora): No podemos utilizar la versión libre de Texturepacker para generar el Atlas. Así que tenemos pocas opciones: generamos un archivo XML con un formato “general” y lo convertimos a formato “Sparrow”, o nos buscamos otro packer.


Podríamos, intentar corregir el formato (con código claro) antes de pasarle los valores a SparrowImporter, pero no es la idea por ahora.


Veamos otro Packer llamado Shoebox


Pueden descargarlo desde aquí
Está escrito en Actionscrip y empaquetado con Adobe Air.


Se necesita instalar el runtime de Adobe para que funcione. Los usuarios de windows no tienen mucho problema ya que pueden correr la última versión sin inconvenientes..pero para los que usamos Linux la cosa está un poco más difícil. En mi caso, wine hace el trabajo sin problemas.



Es muy sencillo de utilizar: Simplemente arrastramos las imágenes para generar el Atlas:



Que mostrará una ventana con el resultado. Para exportar en formato Sparrow, debemos presionar el boton Settings y buscar la opción adecuada. No es necesario modificar nada, solo guardar todo como está y listo.








El resultado del Archivo será algo similar a esto:



Pueden ir viendo cómo implementar la librería en el ejemplo que terminaremos de ver en la próxima entrada.