Escogiendo la resolución de tus assets en 2D.
En los eventos y por redes sociales, la gente a menudo me hace esta pregunta: “Estoy haciendo un juego 2D en Unity para PC y dispositivos móviles: ¿Qué resolución deberían tener mis assets?” No hay una única respuesta a esta pregunta que cubra todos los casos. Lee esta publicación del blog para tener una mejor idea de cuál es el mejor metodo para tu proyecto.
En los últimos años, hemos estado trabajando en muchas características que nos ayudan a crear juegos en 2D con Unity: Sprite Atlassing, Físicas 2D, Tilemap para mundos rectangulares, hexagonales o isométricos, la Sprite Shape basada en Spline, Animación 2D, y más.
Unity no expresa el tamaño de un objeto en píxeles y esto puede confundir a los artistas que están creando assets para juegos 2D. “¿Qué tan grandes deben ser?” Como es habitual en el desarrollo del juego, la respuesta a esta pregunta es “depende”, pero repasemos algunos conceptos que facilitarán la decisión.
Nota: Las fotos en esta publicación del blog muestran los bellos recursos 2D Forest Pack del artista Mikael Gustafsson.
Si eres un artista de PixelArt, una advertencia: la mayoría de los consejos en esta publicación no se aplican completamente a tu situación. En los gráficos de PixelArt, cualquier cosa que tiene una resolución extremadamente baja, y quieres ampliarlo a 2x, 4x, 8x o incluso más, de su resolución original. Significa que un píxel de su arte original ahora es un cuadrado de 2 × 2, 4 × 4, 8 × 8 píxeles reales en la pantalla.
Así que, en general, en PixelArt, no tiene que preocuparse demasiado por la resolución de la pantalla, sino que comienza por su arte y la sensación que desea transmitir (píxel “moderno” de la vieja escuela, la era NES) y lo escalas un par de veces.
Unity ahora tiene una solución Pixel Perfect en forma de paquete. Viene con un componente simple para poner en la cámara que hará el trabajo duro por ti y asegurará que el arte se mantenga nítido y alineado con la cuadrícula de píxeles reales en cualquier pantalla.
Puedes encontrar más información sobre el paquete Pixel Perfect en la página de documentación del paquete Pixel Perfect en GitHub.
Reduciendo, no subiendo
Antes de tomar una decisión sobre la elección de la resolución, vale la pena recordar que cuando esté creando sus recursos, es bueno obtener una resolución más alta, incluso si no lo necesitas para el arte que se incluye en el juego. Siempre se puede reducir el arte, pero no se puede ampliar sin perder calidad.
Considera estas situaciones: es posible que necesites imprimir algunas de las ilustraciones para tu juego, o que desees aumentar el tamaño de un elemento en una pantalla, o que desees crear una “versión HD” de tu juego para monitores 4K más adelante.
Por estas razones, mientras trabajas en el arte, ten en cuenta en usar archivos de trabajo que tengan el doble de la resolución que realmente necesitas o más, luego bájalos antes de llevarlos a Unity o usa la configuración de importación para reducir su tamaño a medida que se importan en el motor.
La configuración de importación también te permite definir un tamaño máximo y otras configuraciones de compresión por plataforma, por lo que, por ejemplo, puede tener algunos recursos en una cierta resolución en el PC y solo a la mitad en dispositivos móviles, donde el espacio en disco contenido es crucial.
Consejo: Unity ofrece una manera de consolidar varios Sprites en uno a través de Sprite Atlases. Además de ser una forma de ahorrar espacio de textura, los atlas también ofrecen una forma unificada de controlar el tamaño máximo en lugar de tener que establecerlo individualmente para cada sprite en su proyecto.
Definiendo la resolución de su plataforma(s)
Al definir el tamaño, es importante considerar la plataforma o los dispositivos en los que se publicará el juego. Las personas tienen dispositivos y pantallas muy diferentes y verán tu juego en una variedad de resoluciones y relaciones de aspecto.
En general, al momento de escribir esta publicación, si estas publicando para PC, estas viendo a una gran mayoría de usuarios con 2 resoluciones: en su mayoría “full-HD” (1920 × 1080 píxeles, a menudo llamada 1080p) y una buena Reparto de 1280 × 720 (a menudo llamado 720p). Un pequeño porcentaje de personas también tiene monitores 4K (3840 × 2160) o monitores Retina en Mac (un MacBook Pro moderno de 15 pulgadas tendría una resolución máxima de 3360 × 2100). ¡Eso es un montón de píxeles para cubrir!
Para los teléfonos, la gama es enorme. Algunos dispositivos antiguos pueden bajar a menos de 720 píxeles verticalmente, pero algunos modernos serán de hasta 4K.
Consejo: Unity hace que algunas de estas estadísticas estén disponibles en el panel de control de operación de su ID de Unity. Selecciona un proyecto que tenga Analytics habilitado, y podrá ir a Analytics> Market Insights y ver las estadísticas agregadas. Steam también ofrece un servicio similar en esta página.
Con Retina (una marca registrada de Apple) y otras pantallas modernas de alto DPI, mientras que la resolución real del hardware es muy alta (por ejemplo, 4K), lo que pueden hacer es ejecutar una resolución simulada más baja (generalmente la mitad, por ejemplo, full-HD en lugar de 4K), pero luego representan imágenes y texto con el doble de píxeles, para que aparezcan muy nítidos.
Nota: DPI (puntos por pulgada) o PPI (puntos por pulgada, o píxeles por pulgada) son nombres diferentes que se usan indistintamente por diferentes fabricantes, pero al final del día, significan lo mismo: muchos píxeles comprimidos en una pulgada lineal en la pantalla. Tradicionalmente, las pantallas eran 72 DPI. En la actualidad, las pantallas de alto DPI suelen ser de 144 DPI, pero puede encontrar teléfonos que cuentan con hasta 400 DPI o más, ya que contienen una gran cantidad de píxeles en pantallas relativamente pequeñas. Algunos ejemplos aquí.
Para estas pantallas, tienes dos opciones. Uno es apuntar a ofrecer una experiencia que use la resolución 4K en su totalidad. La desventaja es que la producción de assets compatibles con 4K requiere mucho trabajo adicional. ¡En este caso, asegúrate de resaltarlo en tus materiales de marketing! (“Una hermosa experiencia en 4K” … etc.). A los propietarios de consolas como PS4 Pro y Xbox One X, que son compatibles con 4K, les encantará el hecho de que tu juego esté utilizando el hardware a su máxima potencia.
O bien, puede “simplemente” diseñar su juego para cubrir Full-HD. En este segundo caso, los usuarios con monitores de DPI más altos no se beneficiarán del aumento de la resolución de sus pantallas, sino que simplemente verán el juego en Full-HD. Eso no es lo ideal, pero podría estar bien si también está tratando de mantener bajo control el tamaño de la compilación.
Entonces, la conclusión es: debe elegir la resolución máxima a la que apunta (según las cuotas de mercado actuales, ver más arriba) y establecerla como objetivo para todo el proyecto. Todos en el equipo podrán tomar decisiones sabiendo eso.
Medidas en una escena de unidad
Como mencionamos anteriormente, Unity mide distancias y tamaños en algo que simplemente se llama una unidad, no en píxeles. En general, es una buena práctica hacer coincidir 1 unidad Unity con 1 metro. Por ejemplo, el modelo humanoide promedio entre 1.7 y 1.8 unidades en este escenario. Esto no es obligatorio, pero asegurará que los juegos con física (tanto en 3D como en 2D) se comporten correctamente, porque la física en Unity está sintonizada para usar 1 unidad por metro. Lo mismo ocurre con la iluminación 3D, donde los parámetros de luz están destinados a permanecer fieles a la realidad.
En 2D, esta escala es menos importante, pero sigue siendo una buena práctica respetarla si estas utilizando la física en tu proyecto. Si estas utilizando un Tilemap, puede ser bueno mantener una escala de 1 azulejo = 1 unidad, solo por simplicidad.
Ahora que hemos repasado las unidades, pasemos a la cámara. Las cámaras 2D de Unity (ortográficas) tienen un parámetro llamado Tamaño (Size) que, cuando se duplica, indica cuántas unidades está encuadrando esta cámara en el eje vertical.
Con un tamaño de 5, tenemos una ventana que mide 10 unidades Unity en la vertical. El eje horizontal solo será una consecuencia de esto, ya que no sabemos qué relación de aspecto tendrá la pantalla del usuario. Pero es fácil de calcular: en tu PC promedio o teléfono Android, con una relación de aspecto de 16: 9, puedes hacerlo:
10 (Tamaño vertical) x 16/9 = 17.7 (Tamaño horizontal)
Así que sabemos que con estas configuraciones, estamos enmarcando un área de aproximadamente 17.7 por 10 unidades. En Mac (que generalmente son 16:10) será de 16 por 10 (por lo tanto, menos visibilidad en la horizontal). En un teléfono de 16: 9 sostenido verticalmente (para que se convierta en 9:16), la misma cámara mostrará solo un área de 5.6 por 10 unidades.
Nota: No veremos cómo lidiar con las relaciones de aspecto en esta publicación del blog, porque si quieres crear un juego para diferentes relaciones de aspecto, no solo debes pensar en los gráficos, sino que en general debes hacerlo. Muchos ajustes de juego para asegurarte de que el juego no se juegue de manera diferente en dispositivos con diferentes proporciones. Por ejemplo, cualquier juego que se desplace horizontalmente se beneficiará de una relación de aspecto horizontal delgada porque el jugador puede ver más de los peligros. A veces es imposible hacer un juego que funcione bien con relaciones de aspecto muy diferentes, y las personas usan marcos o barras negras para llenar el espacio negativo que no pueden llenar con el juego.
Introduce píxeles por unidad
Al importar gráficos como Sprites, Unity muestra un parámetro llamado Píxeles por unidad (PPU). Ahora que sabemos todo acerca de las unidades, esto debería ser muy claro. Está expresando cuántos píxeles de tu Sprite caben en una unidad en la escena de Unity cuando el GameObject tiene una escala de 1,1,1.
Digamos, por ejemplo, que tengo el Sprite de una roca de 218 por 175 píxeles, y configuro los píxeles por unidad en 100, una vez que arrastre ese Sprite en la escena, mi GameObject por defecto será de 2.18 por 1.75 unidades, ocupando aproximadamente una tercera de la vertical de mis 5 unidades-camara.
Así que tomemos una pantalla Full-HD como nuestra resolución de prueba. La vertical es de 1080 píxeles y la roca es menos de una quinta parte de la pantalla (puedes ver cómo las rocas descoloridas caben más de 5 veces en la imagen de arriba), lo que significa que estamos distribuyendo 175 píxeles de gráficos en más de 200 píxeles. . Lo que significa que vamos a tener una roca ligeramente borrosa.
Para solucionar esto, tenemos varias soluciones: podemos escalar la roca a aproximadamente la mitad del tamaño, hacer que el marco de la cámara sea más grande a 10.8 (que produce un alejamiento), o podemos cambiar el valor de PPU del Sprite a 108 (que tiene el mismo efecto de hacer la roca más pequeña en la pantalla).
¿De dónde vienen el tamaño de la cámara y el valor de PPU? ¡Fácil! Para el tamaño de la cámara, si importamos nuestros gráficos a 100 PPU, necesitaríamos una cámara 10.8 porque 10.8 × 100 es igual a 1080. Esto nos permite cubrir toda la altura de la pantalla. Por el contrario, para calcular una PPU correcta donde el tamaño de la cámara se mantenga en 5, si esperamos cubrir una pantalla Full-HD con 10 unidades Unity verticalmente, entonces tenemos 1080/10 = 108. Este es el número de píxeles que deberíamos estar rellenando en una unidad si no cambiamos el tamaño de la cámara.
Haz la regla, rompe la regla
Ten en cuenta que mientras trabajas en su juego, es peligroso mezclar estos flujos de trabajo a medida que avanza: puede terminar en una posición en la que algunos gráficos utilizados en la escena incorrecta tienen una resolución demasiado baja y ni siquiera te diste cuenta. Es bueno establecer pautas: una PPU para la mayor parte de los assets en tu proyecto y un tamaño de cámara típico.
Luego podrás romper las reglas más tarde. Tal vez tengas una escena donde la cámara se acerca y aleja, cambiando el tamaño temporalmente. O tal vez sus elementos de fondo son tan grandes que no puede permitirse mantener la misma PPU porque terminaría con enormes texturas. En ese caso, está bien reducir la PPU para esos elementos e importar sprites más pequeños, pero aún así cubrir una gran área de la pantalla con ellos.
Vista previa de su juego
Mientras trabajas en Unity, puede que se pregunte cuál es la resolución que está viendo a través de Game View y si es una vista previa precisa de su arte en la plataforma de destino.
La mayoría de las opciones que necesitaras están en el menú desplegable en la parte superior y en el control deslizante al lado.
Las relaciones de aspecto solo obligan a una relación específica entre horizontal y vertical, pero harán uso de la resolución actual de la ventana de visualización de Game View, que a su vez depende de su pantalla. Así que son buenos para configurar UI y objetos en una pantalla, pero no realmente para probar arte.
Mientras estés en una relación de aspecto, la casilla de verificación “Relación de aspecto de baja resolución” estará activa si te encuentras en una pantalla de alta resolución de DPI. Si lo marca, simulará una resolución de pantalla estándar de DPI.
Las resoluciones fijas, por otro lado, obligan a Unity a representar una ventana de ese tamaño exacto. En ese momento, es posible que necesites ampliar su vista de juego o maximizarla para visualizar la vista previa completa. En este contexto, el control deslizante escala puede hacer que las altas resoluciones se adapten a la ventana de la vista del juego, pero si va por debajo de la escala 1x, entonces realmente no está viendo esa resolución, sino un remuestreo de la misma.
Mira este video para ver un ejemplo práctico de tamaños en una pantalla Retina:
Y no olvides que puedes agregar tus propias resoluciones fijas y relaciones de aspecto al menú desplegable:
Sugerencia: No olvides que no debes basar tu juicio solo en el editor. De vez en cuando, crea una versión del juego (¡o solo de la técnica!) Y échele un vistazo a su dispositivo o pantalla de destino.
Algunas notas finales
Como puedes ver, la resolución de tu arte, el tamaño de la cámara y la pantalla a la que deseas ir están conectados y no hay un tamaño de píxel o PPU que se adapte a todos los casos. Estudia sus plataformas de destino, decide una resolución e informa a todo el equipo haciendo pautas. Entonces, crea arte de alta resolución de todos modos, ¡podría ser útil más tarde! Finalmente, cambia el tamaño a la resolución que necesita e impórtalo en Unity.
Y una sugerencia final. Incluso si anteriormente utilizabas los términos “un poco borrosos” como si fuera el fin del mundo y algo que DEBERÍAMOS ARREGLAR, esto no es una regla difícil. Puede ser que en tu juego algunos objetos, a veces, estén resueltos. Especialmente si hay muchos detalles minuciosos en la pantalla, tal vez transparencias superpuestas, con algo de niebla, lluvia o posprocesamiento en la parte superior. Juega el juego a su velocidad normal. ¿Realmente te das cuenta del hecho de que están siendo re-muestreados?
Si honestamente no puedes notar la diferencia, tal vez el trabajo extra, el espacio en disco y el procesamiento necesarios para representar un sprite de resolución más alta no valgan la pena. Recuerda: ¡los buenos juegos hacen grandes compromisos!
#Unity2DChallenge
¿Tienes algún arte 2D asombroso en las obras? ¿Tienes curiosidad por nuestras nuevas herramientas 2D? ¡Haz algo genial con nuestras nuevas herramientas de animación 2D, Tilemaps, SpriteShape, el paquete Pixel Perfect o el importador SVG, y únete al Unity 2D Challenge! Soy uno de los jueces y no puedo esperar para ver todas sus ideas brillantes.
Notas
Recuerda que este articulo es una adaptación al castellano de este post del blog oficial de Unity3D para los hispanohablantes que no entienda el Inglés.
