Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Unity
Gamedevelopment

Usando una Textura Atlas para Optimizar Tu Juego

by
Length:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Tiempo. Meses. Quizá años. Has pasado tu tiempo (mucho tiempo) para crear tu juego. Pequeño o grande, no importa. Es tu juego, y ahora quieres compartirlo con todo el mundo-y quizá llegar a ser famoso y rico*. Es perfecto: el arte es bueno, y estás muy orgulloso de tu idea dentro del juego. Tu juego.

Pero hay un último problema que tu juego debe resolver antes del lanzamiento. No, no un problema sencillo. El problema: la velocidad de los fotogramas de tu juego es baja. Muy baja. Y ello significa sólo una cosa: necesitas encontrar una manera de arreglarlo. Debes. Y no tienes idea de cómo.

No te asustes: hay un truco sencillo que te puede ayudar. Se llama una "Texture Atlas".

* Si llegas a ser rico gracias a éste artículo, por favor recuérdame. ¡Muchas gracias!

¿Qué es un Texture Atlas?

Si te estás planteando el desarrollo de un video juego 3D por primera vez, comenzarás a descubrir que los gráficos 3D están compuestos de varias partes: mallas 3D, texturas, sistemas de partículas, y muchos otros elementos que normalmente son dibujados en la pantalla 30 veces por segundo (en el argot: 30 fps) durante el proceso de renderizado, haciendo el mundo del videojuego variado y vivaz.

Aunque no lo creas, los primeros videojuegos 3D que yo ví en mi vida no tenían ninguno de éstos elementos. Se componían sólo de líneas que formaron objetos o elementos en prototipo 3D.

Elite - Masterpiece by David Braben and Ian Bell

Escribir ésto definitivamente me hace sentir viejo.

Regresando a nosotros (de hecho, a tí) y a las cosas importantes, hoy hablaremos sobre las texturas de la interfaz de usuario (UI de aquí en adelante) y, por extensión, sobre todas las texturas en el juego.

En un juego 3D, la UI es generalmente formada de elementos 3D (como planos o cuadros) con texturas.

Mencionamos antes el proceso de renderizado: es la operación por la cuál los elementos en la memoria son dibujados físicamente en la pantalla. Está entre los procesos más complejos y caros que ocurren en un juego 3D en tiempo real. Luego, cualquier expediente a reducir el tiempo tomado por éste proceso es bienvenido; menos tiempo pasado en la fase de renderizado significa una mayor velocidad de fotogramas por segundo (es decir, si alcanzas los 60 fps puedes renderizar la imagen dos veces y luego pensar en desarrollar tu juego también para VR), o más elementos en pantalla ( y entonces un juego más rico, más animado, más bello).

Uno de los medios utilizados para reducir la duración del proceso de rendedrizado es un Texture Atlas: no es más que una imagen que contiene muchas texturas.

A Texture Atlas with some UI elements

Cómo Funciona un Texture Atlas

Nota: Como se mencionó en el párrafo previo, éste artículo discutirá el Texture Atlas aplicada a la UI. Sin embargo, muchos de los conceptos explicados aquí también pueden aplicarse a modelos 3D y sus texturas.

Un Texture Atlas, dijimos, es una colección de texturas dentro de una sola imagen.

Un Atlas es generalmente asociado con un descriptor de archivo, que le indica al juego dónde una textura está (en ciertas coordenadas x y y), para tomarlo.

Dependiendo del sistema que usarás para generar y gestionar el Atlas, tendrás más o menos opciones, como la distancia entre las imágenes que lo componen (reduciendo el riesgo de artefactos en los extremos de la textura, causado por dos elementos encimados), o la capacidade de rotar los elementos para optimizar el espacio dentro del Atlas (más espacio optimizado significa más imágenes dentro del mismo Atlas).

Diferentes Formas de Crear una Textura Atlas

Hay diferentes formas de crear un Atlas. Un completo entorno de desarrollo generalmente permite el manejo interno del Atlas; también hay muchas herramientas externas que proporcionan muchas opciones adicionales.

La elección de qué sistema utilizar obviamenete depende de tus preferencias personales. Aquí explicamos dos de ellos: Sprite Packer, interno para Unity, y TexturePacker (una herramienta independiente, por una tarifa).

Sprite Packer

Para abrir Sprite Packer, elige del menú Window > Sprite Packer.

El manejo es realmente fácil: el botón Pack es usado para crear uno o más Atlas (depende del número de tus imágenes y de la dimensión del Atlas que quieres usar).

Ahora puedes seleccionar una imagen para ver dónde está en el Atlas. Si agregas o remueves imágenes de tu proyecto, debes usar el botón Repack, para actualizar el Atlas.

Para configurar el Sprite Packer, puedes elegir del menú Edit > Project Settings > Editor, aquí puedes deshabilitar el Atlas, activarlo sólo para el juego creado, o habilitarlo siempre.

Para más información sobre Sprite Packer, puedes consultar la guía oficial.

Sprite Packer - Unity

Texture Packer

Texture Packer es una herramienta independiente usada para gestionar Atlas.

Puedes añadir uno o más directorios de tu proyecto y Texture Packer creará el Atlas.

Después de eso, puedes elegir el formato de datos para la exportación. Como puedes ver, existe también la opción "JSON for Unity". Ésto signiica que puedes exportar tu Atlas para tu proyecto Unity. Pero, para usarlos juntos, debes instalar una extensión del editor gratuita desde la tienda de recursos.

Para más información sobre Texture Packer, puedes consultar la guía oficial.

Texture Packer - Mac version

¿Por qué es importante utilizar un Texture Atlas?

¿Por qué es tan importante recabar múltiples imágenes en una sola?

Regresemos por un momento al proceso de renderizado: si cada elemento de la UI tiene una textura separada, es dibujada con una "llamada al dibujo" separada. Ésto significa que si en nuestra interfaz tenemos el ícono de corazones (representando la energía del jugador) y el ícono de las monedas recabadas, tendremos dos llamadas a dibujo.

Cada llamada a dibujo toma algún tiempo para completarse, haciendo el proceso de renderizado más y más largo. Si hay cinco elementos UI, en lugar de dos como en el ejemplo de arriba, hay cinco llamadas a dibujo.

¿Comenzaste a darte cuenta del punto?

Más llamadas a dibujo -> más tiempo durante la fase de renderizado -> menos fps - > juego con un velocidad de fotogramas por segundo menor (con alguna caídas de cuadros) o menos elementos en la pantalla (entonces visualmente pobre).

Desperdiciar llamadas a dibujo de ésta manera, a menos que haya razones especiales, realmente no tiene sentido, especialmente para la UI.

De hecho, todas las texturas en un Atlas serán renderizadas juntas, en un sólo paso.

In Unity you can check your draw calls by the Stats button in Play Mode

Conclusión

En conclusión, especialmente si estás desarrollando un juego en una plataforma dónde el desempeño es realmente importante (como una plataforma móvil):

  • Debes prestar atencion al número de llamadas a dibujo: más llamadas a dibujo significa un tiempo de renderizado superior (y un tiempo de renderizado superior significa el riesgo de tener una velocidad de fotogramas por segundo baja).
  • Generalmente, cada objeto con una diferente textura puede generar una sola llamada a dibujo (es una declaración genérica: hay algunas excepciones, especialmente en el caso de objetos 3D).
  • Una forma de reducir el número de llamadas a dibujo es usar un Texture Atlas.
  • Un Texture Atlas es básicamente una textura grande con un grupo de diferentes texturas.
  • Todos los objetos que usan el misma Texture Atlas generan una solo llamada a dibujo.
  • Especialmente para las texturas de UI, el uso de un Texture Atlas es una necesidad para mejorar el desempeño de tu proyecto.

Y... que la fuerza te acompañe. Y tu código. Siempre.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.