La semana pasada comenzamos con una introducción al tema: Como recortar una imagen en fragmentos para poder utilizarlas de forma separada y así optimizar un poco el rendimiento de nuestra aplicación.
También nos ahorrarnos líneas y líneas de código..pero como se generan estas sábanas de gráficos? existe algún método para hacernos las cosas aún más sencillas? Veamos..
Un Atlas como vimos, es un conjunto de imágenes que se alojan en un archivo en común. Existen varios tipos, pero por lo general se los divide en dos grupos: Los atlas de texturas y los atlas de sprites. Obviamente se pueden combinar ambas cosas.
Es muy común también en una aplicación de gran tamaño o que utilice muchos gráficos, dividirlos en secciones para poder optimizar de esta forma el uso de hardware (Una imágen, dependiendo del hardware, sistema operativo o plataforma, incluso el lenguaje utilizado, puede llegar a ocupar en algunos casos casi el doble o más de su tamaño en memoria una vez leída o cargada desde el archivo).
Supongamos por un momento que terminamos de dibujar estas 4 imágenes con nuestro editor favorito:
Por lo que hemos visto hasta ahora, sería lógico de pensar que podemos:
- Calcular las dimensiones (superficie) que necesitamos para alojarlas en un atlas.
- Abrir un nuevo archivo con las dimensiones calculadas.
- Pegar la secuencia de imágenes.
No estaría mal..medio arcaico? y Sí. Pero, históricamente hablando, en algún momento se hizo de esa forma.
Podemos imaginarnos los problemas y complicaciones que este método trae aparejados a gran escala sin mucho esfuerzo. (Ni hablar, cuando en el proyecto intervienen varias personas: programadores por un lado, animadores, diseñadores gráficos y artistas por el otro..etc).
Además, está el código, que en este caso, al ser las 4 y del mismo tamaño, es relativamente sencillo (como ya vimos anteriormente).
Ahora bien: Estamos asumiendo que nuestro atlas sólo contempla una secuencia de imágenes que van a ser utilizadas por un solo objeto (y en este caso particular, una determinada condición).
Qué pasaría si, por ejemplo, nuestro personaje debe asumir diferentes posturas:
- Esperando una acción (por parte del jugador).
- Caminar a la izquierda
- Caminar a la derecha
- Saltar o comer..o lo que nos imaginemos.
En un principio deberíamos dibujar los cuadros que cada acción va a tener en su conjunto y agregarlos al atlas obviamente:
Luego se nos presenta el problema de querer separar esas imágenes en conjuntos mediante el uso de algoritmos:
Podríamos tener una secuencia de 4 para una acción(idle), otra secuencia de 5 (caminar izquierda), caminar derecha..etc..
Existen varias formas de encarar el problema:
La primera y más obvia es ver el archivo y escribir el código separando en funciones o secciones dependiendo de las acciones. (en el pasado, los artistas entregaban junto con el o los Atlas, una planilla de referencia o una impresión, detallando cada imagen y algunos atributos como por ejemplo su tamaño para que el programador no tuviera que encargarse de ello).
Por otro lado, y con un proyecto más grande podríamos; hipotéticamente hablando, ingresar todos los datos de las imágenes en un archivo de texto e ir extrayendo la información para alojarlas en un array o pasar esos valores a las funciones que se encargan de construir nuestros objetos sprite.
Sin embargo, seguimos arrastrando el problema de fondo. Si hay que modificar una imagen, hay que modificar el atlas y seguramente nuestro archivo con la información.
Ahí es donde entran en juego ciertas aplicaciones que nos van a ayudar con estos problemas:
Se las denomina Empaquetadores (Packers en inglés) y realizan exactamente lo que nosotros estamos buscando: Generar un Atlas por un lado, y un archivo con la información de cada imagen por el otro.
Existen varios. Dentro de los más populares se encuentran:
TexturePacker: https://www.codeandweb.com/texturepacker
ShoeBox: http://renderhjs.net/shoebox/
Zwoptex: http://zwopple.com/zwoptex/
Sprite Sheet Packer: http://spritesheetpacker.codeplex.com/
y deben de existir cientos más.
Con esta guia voy a utilizar el primero de ellos (TexturePacker). La versión gratuita nos alcanza por el momento como para comenzar a ver de qué se trata.
Una vez instalado, nos encontraremos con una pantalla de inicio similar a esta:
Generamos un nuevo proyecto <XML>
Aparecerá una ventana similar a esta donde arrastramos nuestras imágenes a la zona gris, o utilizamos el botón Add. Una vez cargadas en el programa, aparecerán en la solapa izquierda.
Luego tenemos que ingresar las dos rutas de acceso:
La opción en Rojo es para generar el archivo <XML> (más abajo vemos que es).
La opción en Verde apunta a la carpeta donde se va a generar el Atlas (imagen grande)
Las demás opciones no hace falta que las toquemos por ahora.
Una vez hecho esto, simplemente presionamos el botón de Publicar y listo.
Si todo salió correctamente nos aparecerá una ventana emergente con un resumen de lo hecho por el programa.
Además, veremos que en la carpeta de destino nos encontraremos con 2 archivos nuevos:
El atlas por un lado:
El archivos de parámetros por el otro:
Observando la imagen del archivo xml, podrán ya ir haciéndose una idea de cómo viene la mano para el próximo capítulo..o no?
No hay comentarios.:
Publicar un comentario