viernes, 3 de abril de 2015

Atlas, Xml y Packers (Parte 2)


Hemos generado un Atlas y también nuestro archivo de marcadores con toda la información. Veamos cómo implementarlo. Es importante conocer como es la estructura de un archivo generado en este lenguaje (xml). Los métodos que utiliza Haxe para manipularlos pueden crear confusión a primera vista si no se entiende bien su arquitectura o como los datos son almacenados.







Con Haxe tenemos dos alternativas para manipular archivos XML:

La primera es la clase XML, que incluye varios métodos de lectura, escritura, formateo, etc. Trabajar con ella es muy sencillo, pero debido a que está pensada para construir o generar y validar documentos de este tipo, necesitaríamos de más código para su uso.

Nosotros por ahora solo vamos a leer archivos generados por otras aplicaciones y no nos interesa modificar absolutamente nada. Más adelante, cuando veamos cómo generar código html dinámicamente veremos algunos ejemplos.

La segunda opción es la llamada Fast (rápido en inglés). Esta clase trabaja con una arquitectura  jerárquica más intuitiva y simple. Se la llamó de esa forma (Fast) por su fácil utilización y no porque accede a los métodos más rápidamente o tenga un código más eficiente.

Entonces: Abrimos un proyecto nuevo en OpenFL y alojamos nuestros “Assets” que son el Atlas (imagen) y el código xml. Por lo general, todo lo que no sean estrictamente imágenes, deberían de alojarse en una carpeta distinta, pero bueno..esto es un pequeño ejemplo. De todas formas, es buena práctica hacer que cada cosa esté en su lugar.



Vamos a utilizar las librerías de xml, así que en un principio deberíamos de importarlas a nuestro proyecto como siempre:

import haxe.xml.Fast;

Luego, y como ya vimos varias veces, asignamos nuestros assets a objetos.

y comenzamos a trabajar con el archivo xml:

Lo primero que necesitamos es pasar el archivo por el analizador sintáctico que está dado en este caso por la función “parse”.

var contenido = Xml.parse(archivo);

Luego pasamos el contenido analizado a la función Fast:

var fasta = new Fast(contenido.firstElement());

Asimismo, posicionamos el puntero en el primer elemento que se encuentre (firstElement). Para nuestro caso, el primer elemento es <TextureAtlas>...</TextureAtlas>

Luego y por medio de un bucle, recorremos todos los nodos que se encuentren dentro:
(k_dato in fasta.elements)



Básicamente eso es todo. Dentro del mismo bucle pasamos esos valores al rectángulo que captura nuestro tile..lo agregamos..ya lo vimos antes.

El archivo XML que TexturePacker genera, guarda a su vez un poco más de información (que no utilizamos aquí) En los comentarios se puede ver una referencia de los mismos:


pX => Punto de rotación (Pivot) con respecto al ancho de la imagen (x)
pY => Punto de rotación (Pivot) con respecto al largo de la imagen (y)
oX => La esquina X del offset (Si la Imagen se ha recortado)
oY => La esquina Y del offset (Si la Imagen se ha recortado)
oW => Ancho original (si la imagen ha sido recortada)
oH => Alto original (si la imagen ha sido recortada)
r =>  Es 'y' si la imagen está rotada


Se puede ver que el ejemplo es sencillo, pero no importa el tamaño del atlas va a funcionar de todas formas. Incluso si los Tiles son de diferente tamaño.

Para terminar, veamos el código que muestra la secuencia:



No es lo ideal en una situación real..De hecho, afectaría terriblemente al rendimiento. Vamos a ver como se soluciona en las próximas entradas.

Pueden ver el código completo en Git