Consejos para elegir la resolución de tus assets de arte 2D
En los eventos de juegos y en línea, la gente a menudo me hace esta pregunta: “Estoy creando un juego 2D en Unity para PC y dispositivos móviles: ¿qué resolución deberían tener mis archivos?” No existe una respuesta sencilla a esta pregunta que cubra todos los casos. Lea esta publicación del blog para tener una mejor idea de cuál es el mejor curso de acción para su proyecto. En los últimos años, hemos estado trabajando en muchas funciones que te ayudarán a crear juegos 2D en Unity: Atlas de sprites, física 2D, una función de mapa de mosaicos para mundos rectangulares, hexagonales o isométricos, la forma de spritebasada en splines, animación 2Dy más.
Unity no expresa el tamaño de un objeto en píxeles y esto puede confundir a los artistas que crean recursos para juegos 2D. “¿Qué tan grandes deben ser?” Como es habitual en el desarrollo de juegos, la respuesta a esta pregunta es “depende”, pero repasemos algunos conceptos que nos facilitarán la decisión.
Nota: Las imágenes de esta publicación del blog utilizan los hermosos recursos 2Dde Asset Store; en este blog utilizamos arte del artista Mikael Gustafsson.
Si eres un artista de píxeles, una advertencia: la mayoría de los consejos de esta publicación no se aplican completamente a tu situación. En los gráficos de pixel art, tienes algo que tiene una resolución extremadamente baja y quieres ampliarlo a 2x, 4x, 8x o tal vez incluso más, su resolución original. Significa que un píxel de tu arte original es ahora un cuadrado de 2x2, 4x4, 8x8 píxeles reales en la pantalla. Entonces, en general, en el pixel art, no necesitas preocuparte demasiado por la resolución de la pantalla, sino que comienzas con tu arte y la sensación que quieres transmitir (vieja escuela, era de NES, era de 16 bits, pixel art "moderno" de mayor resolución, etc.) y lo amplías unas cuantas veces. Unity ahora tiene una solución Pixel Perfect en forma de paquete independiente si usa el RP integrado e incluido en el RP universal y el renderizador 2D. Viene con un componente simple para colocar en la cámara que hará el trabajo duro por usted y se asegurará de que el arte se mantenga nítido y alineado con la cuadrícula de píxeles reales y pequeños en cualquier pantalla. Puede encontrar más información sobre Pixel Perfect enla documentación.
Antes de comenzar a considerar la elección de la resolución, vale la pena recordar que cuando creas tus recursos, es bueno optar por una resolución más alta incluso si en realidad no la necesitas para el arte que va en el juego. Siempre puedes reducir el tamaño del arte, pero no puedes aumentarlo sin perder calidad.
Considere estos escenarios: es posible que necesite imprimir parte del arte para su juego, o desee aumentar el tamaño de un elemento en una pantalla, o desee crear una "versión HD" de su juego para monitores 4K más adelante.
Por estos motivos, mientras trabaja en el arte, considere utilizar archivos de trabajo que tengan el doble de resolución de la que realmente necesita o más, luego redúzcalos antes de incorporarlos a Unity, o utilice configuraciones de importación para reducir su tamaño a medida que se importan al motor.
Las configuraciones de importación también le permiten definir un tamaño máximo y otras configuraciones de compresión por plataforma, por lo que, por ejemplo, puede tener algunos activos en una determinada resolución en PC y solo la mitad en dispositivos móviles, donde el espacio en disco contenido es crucial.
Consejo: Unity ofrece una forma de consolidar varios Sprites en uno a través de Sprite Atlas. 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 configurarlo individualmente para cada sprite en su proyecto.
Al definir el tamaño de los activos, es importante considerar la plataforma o los dispositivos en los que se publicará el juego. La gente tiene dispositivos y pantallas muy diversos y verá su juego en una variedad de resoluciones y relaciones de aspecto.
En general, al momento de escribir este post, si estás publicando para PC estás viendo una gran mayoría de usuarios con 2 resoluciones: mayoritariamente “full-HD” (1920x1080 píxeles, a menudo llamado 1080p) y una buena cantidad de 1280x720 (a menudo llamado 720p). Un pequeño porcentaje de personas también tiene monitores 4K (3840x2160) o monitores Retina en Mac (una MacBook Pro moderna de 15 pulgadas tendría una resolución máxima de 3360 × 2100). ¡Son muchos píxeles para cubrir!
Para los teléfonos, la gama es enorme. Algunos dispositivos antiguos pueden llegar a menos de 720 píxeles verticalmente, pero algunos modernos alcanzarán los 4K.
Consejo: Unity pone a disposición algunas de estas estadísticas en el Panel de operaciones de su ID de Unity. Seleccione un proyecto que tenga Analytics habilitado y podrá ir a Analytics > Información del mercado 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, si bien la resolución real del hardware es muy alta (por ejemplo, 4K), lo que pueden hacer es ejecutarse en una resolución simulada más baja (generalmente la mitad, por ejemplo, Full HD en lugar de 4K), pero luego renderizan imágenes y texto usando el doble de píxeles, de modo que se vean muy nítidos.
Nota: DPI (puntos por pulgada) o PPI (puntos por pulgada o píxeles por pulgada) son nombres diferentes que los distintos fabricantes utilizan indistintamente, pero que, al fin y al cabo, significan lo mismo: cuántos píxeles hay en una pulgada lineal en la pantalla. Tradicionalmente, las pantallas eran de 72 DPI. Hoy en día, las pantallas de alto DPI suelen tener 144 DPI, pero puedes encontrar teléfonos que llegan a tener hasta 400 DPI o más, ya que tienen una gran cantidad de píxeles en pantallas relativamente pequeñas. Algunos ejemplos aquí.
Para estas pantallas, tienes dos opciones. Uno de ellos es intentar ofrecer una experiencia que utilice la resolución 4K en su totalidad. La desventaja es que producir activos compatibles con 4K requiere mucho trabajo adicional. En este caso, ¡no olvides destacarlo 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 su juego utilice el hardware a su máximo potencial.
O bien, puedes “simplemente” diseñar tu juego para que cubra Full HD. En este segundo caso, los usuarios con monitores con mayor DPI no se beneficiarán de la mayor resolución de sus pantallas sino que simplemente verán el juego en Full HD. Esto no es ideal, pero podría estar bien si también estás tratando de mantener el tamaño de la compilación bajo control.
En resumen: debes elegir una resolución máxima a la que aspiras (en función de las cuotas de mercado actuales, ver más arriba) y establecerla como tu objetivo para todo el proyecto. Entonces todos los miembros del equipo podrán tomar decisiones sabiendo eso.
Como mencionamos antes, Unity mide distancias y tamaños en algo que simplemente se llama unidad, no en píxeles. En general, es una buena práctica hacer coincidir 1 unidad de Unity con 1 metro. Por ejemplo, el modelo humanoide promedio está entre 1,7 y 1,8 unidades en este escenario. Esto no es obligatorio, pero garantizará que los juegos con física (tanto 3D como 2D) se comporten correctamente, porque la física en Unity está ajustada para usar 1 unidad por metro. Lo mismo ocurre con la iluminación 3D, donde los parámetros de luz deben mantenerse fieles a la realidad.
En 2D esta escala es menos importante, pero aun así es una buena práctica respetarla si usas física en tu proyecto. Si estás usando un mapa de mosaicos, puede ser bueno mantener una escala de 1 mosaico = 1 unidad, solo por el bien de la 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, 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 gráfica que mide 10 unidades Unity en la vertical. El eje horizontal será sólo 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 una PC o un teléfono Android promedio, con una relación de aspecto de 16:9, puedes simplemente hacer lo siguiente:
10(Tamaño vertical) x 16 / 9 = 17,7(Tamaño horizontal)
Entonces sabemos que con estos ajustes estamos enmarcando un área de aproximadamente 17,7 por 10 unidades. En las Mac (que generalmente son 16:10) será 16 por 10 (por lo que habrá menos visibilidad en la horizontal). En un teléfono 16:9 sostenido verticalmente (por lo que se convierte en 9:16), la misma cámara mostrará solo un área de 5,6 por 10 unidades.
Nota: No repasaremos cómo lidiar con las relaciones de aspecto en esta publicación del blog porque si tu objetivo es crear un juego para diferentes relaciones de aspecto, no solo debes pensar en los gráficos, sino que en general debes realizar muchos ajustes en el juego para asegurarte de que el juego no se juegue de manera diferente en dispositivos con diferentes relaciones de aspecto. Por ejemplo, cualquier juego que se desplaza horizontalmente se beneficiará de una relación de aspecto horizontal más delgada porque el jugador puede ver más de los peligros que se aproximan. A veces es imposible crear un juego que funcione bien en relaciones de aspecto muy diferentes, y la gente usa marcos o barras negras para llenar el espacio negativo que no pueden llenar con el juego.
Al importar gráficos como Sprites, Unity muestra un parámetro llamado Píxeles por unidad (PPU). Ahora que sabemos todo sobre las unidades, esto debería estar muy claro. Expresa cuántos píxeles de tu Sprite caben en una unidad en la escena de Unity cuando el GameObject se escala 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 quinta parte de las 10 unidades en el eje vertical.
Entonces 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 encajan más de 5 veces en la imagen de arriba), lo que significa que estamos usando 175 píxeles de gráficos de origen para renderizar más de 200 píxeles. Lo que significa que vamos a tener una roca un poco borrosa .
Para solucionar esto, tenemos varias soluciones: podemos reducir la roca a aproximadamente la mitad de su tamaño, agrandar el marco de la cámaraa 10.8 (lo que produce un alejamiento) o podemos cambiar el valor PPU del Sprite a 108 (que tiene el mismo efecto de hacer la roca más pequeña en la pantalla). En los tres casos, si queremos que la roca quede crujiente, tendrá que ser más pequeña.
¿De dónde provienen 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, entonces necesitaríamos una cámara de 10.8 porque 10.8x100 equivale a 1080. Esto nos permite cubrir toda la altura de la pantalla. Por el contrario, para calcular un PPU correcto donde el tamaño de la cámara se mantiene en 5, si esperamos cubrir una pantalla Full HD con 10 unidades Unity verticalmente, entonces tenemos 1080/10 = 108. Esta es la cantidad de píxeles que deberíamos incluir en una unidad si no cambiamos el tamaño de la cámara.
Ten en cuenta que mientras trabajas en tu juego, es peligroso mezclar estos flujos de trabajo a medida que avanzas: podrías terminar en una posición en la que algunos gráficos utilizados en la escena incorrecta tengan una resolución demasiado baja y ni siquiera lo hayas notado. Es bueno establecer pautas: un PPU para la mayoría de los activos de su proyecto y un tamaño de cámara típico.
Luego podrás romper las reglas más tarde. Quizás tengas una escena donde la cámara se acerca y se aleja, cambiando el tamaño temporalmente. O tal vez tus elementos de fondo son tan grandes que no puedes permitirte mantener el mismo PPU porque terminarías con texturas enormes. En ese caso, está bien reducir el PPU para esos elementos e importar sprites más pequeños, pero aún así cubrir un área grande de la pantalla con ellos.
Mientras trabajas en Unity, es posible que te preguntes cuál es la resolución que ves a través de la Vista del juego y si es una vista previa precisa de tu arte en la plataforma de destino. La mayoría de las opciones que necesitarás están en el menú desplegable en la parte superior y en el control deslizante junto a él.
Las relaciones de aspecto solo fuerzan una relación específica entre horizontal y vertical, pero harán uso de la resolución actual de la ventana gráfica de tu Game View, que a su vez depende de tu pantalla. Por lo tanto, son buenos para configurar la interfaz de usuario y los objetos en una pantalla, pero no realmente para probar arte. Mientras esté en una relación de aspecto, la casilla de verificación Relaciones de aspecto de baja resolución estará activa si está en una pantalla de alto DPI. Si lo marca, simulará una resolución de pantalla DPI estándar. Las resoluciones fijas, por otro lado, obligan a Unity a renderizar una ventana de ese tamaño exacto. En ese punto, es posible que necesites expandir la Vista del juego o maximizarla para visualizar la vista previa completa. En este contexto, el control deslizante Escala puede hacer que las resoluciones altas encajen en la ventana Vista del juego, pero si estás por debajo de la escala 1x, entonces en realidad no estás viendo esa resolución, sino un nuevo muestreo de la misma. Y no olvides que puedes agregar tus propias resoluciones fijas y relaciones de aspecto al menú desplegable:
Consejo: No olvides que no debes basar tu juicio únicamente en el editor. De vez en cuando, crea una versión del juego (¡o solo del arte!) y míralo en tu dispositivo o pantalla de destino.
Como puedes ver, la resolución de tu arte, el tamaño de la cámara y la pantalla que deseas están todos conectados y no hay un tamaño de píxel o PPU que se adapte a todos los casos. Estudie sus plataformas objetivo, decida una solución e informe a todo el equipo estableciendo pautas. De todas formas, produce arte de mayor resolución, ¡podría ser útil más adelante! Por último, redimensiona a la resolución que necesitas e impórtalo en Unity. Y una última sugerencia. Aunque anteriormente he utilizado el término “ligeramente borroso” como si fuera el fin del mundo y algo que DEBEMOS ARREGLAR ABSOLUTAMENTE, esta no es una regla estricta. Podría ser que en tu juego algunos objetos -a veces- estén bajo resolución. Especialmente si hay muchos detalles minuciosos en la pantalla, tal vez transparencias superpuestas, con algo de niebla, lluvia o posprocesamiento encima. Juega el juego a su velocidad normal. ¿Realmente te das cuenta de que están siendo muestreados nuevamente? Si honestamente no puedes notar la diferencia, entonces tal vez el trabajo extra, el espacio en disco y el procesamiento necesarios para renderizar un sprite de mayor resolución no valgan la pena. Recuerda: ¡los buenos juegos implican grandes concesiones!
Tenemos una lista de lectura con consejos y procedimientos 2D en nuestro blog, no te la pierdas. Si también quieres obtener una visión general de lo que Unity tiene para ofrecer para 2D, puedes comenzar aquí.
Descubre la demo de Unity 2D, Dragon Crashers en este blog
¿Tienes alguna obra de arte 2D increíble en proceso? ¿Tienes curiosidad por nuestras nuevas herramientas 2D? ¡Crea algo fantástico con nuestras nuevas herramientas de animación 2D, Tilemaps, SpriteShape, paquete Pixel Perfect o importador SVG, y únete al Unity 2D Challenge! Soy uno de los jueces y no puedo esperar a ver todas sus brillantes ideas.