2D Pixel Perfect: Cómo configurar tu proyecto Unity para juegos retro de 8 bits

Lleve su experiencia de desarrollo 2D al siguiente nivel y explore el conjunto nativo de herramientas 2Dde Unity.

Los juegos retro con mecánicas simples y gráficos pixelados pueden evocar buenos recuerdos para los jugadores veteranos, y al mismo tiempo ser accesibles para el público más joven. Hoy en día, muchos juegos están etiquetados como “retro”, pero se necesita esfuerzo y planificación para crear un título que realmente tenga ese aspecto y sensación nostálgicos. Por eso hemos invitado a la gente de Mega Cat Studios para que nos ayuden a hablar sobre el tema. En esta publicación de blog, cubriremos todo lo que necesitas para crear arte auténtico para juegos estilo NES, incluidas configuraciones importantes de Unity , estructuras gráficas y paletas de colores. ¡Obtén nuestro proyecto de muestra y síguelo!

Mega Cat Studios, de Pittsburgh, Pensilvania, ha convertido la creación de juegos retro de gran precisión en una forma de arte. Tanto es así, que varios de sus títulos también pueden adquirirse en formato cartucho y jugarse en consolas retro como la Sega Genesis.

Las recientes incorporaciones a los flujos de trabajo de Unity lo han convertido en un entorno ideal para crear tus juegos retro. ¡El sistema de mapas de mosaicos 2Dse ha mejorado aún más y ahora admite mapas de mosaicos de cuadrícula, hexadecimales e isométricos! Además, puedes utilizar el nuevo componente Pixel Perfect Camera para lograr movimientos y efectos visuales consistentes basados en píxeles. Incluso puedes llegar al punto de usar la pila de Post Processing para agregar todo tipo de efectos de pantalla retro geniales. Sin embargo, antes de poder realizar cualquier trabajo, sus activos deberán importarse y configurarse correctamente.

Nuestros activos primero necesitan una configuración correcta para ser nítidos y claros. Para cada activo que esté utilizando, seleccione el activo en la vista Proyecto y luego cambie las siguientes configuraciones en el inspector:

• El modo de filtro cambió a 'Punto'
• La compresión se cambió a 'Ninguna'

Otros modos de filtro dan como resultado una imagen ligeramente borrosa, lo que arruina el estilo nítido de pixel art que estamos buscando. Si se utiliza compresión, los datos de la imagen se comprimirán, lo que provocará cierta pérdida de precisión con respecto al original. Es importante tener esto en cuenta, ya que puede provocar que algunos píxeles cambien de color, lo que posiblemente resulte en un cambio en la paleta de colores general. Cuanto menos colores y más pequeño sea el sprite, mayor será la diferencia visual que provocará la compresión. Aquí hay una comparación entre la compresión normal (predeterminada) y sin compresión.

Otra cosa a tener en cuenta es la configuración de Tamaño máximo de la imagen en el Inspector. Si la imagen de tu sprite tiene un tamaño en cualquier eje mayor que la propiedad 'Tamaño máximo' (2048 por defecto), se redimensionará automáticamente al tamaño máximo. Generalmente, esto provocará cierta pérdida de calidad y hará que la imagen se vea borrosa. Dado que algunos hardware no admiten adecuadamente texturas superiores a 2048 en ninguno de los ejes, es una buena idea intentar mantenerse dentro de ese límite.

Arriba, hay un sprite de una hoja de sprites que tenía 2208 en un eje con un tamaño máximo establecido en 2048. Como puede ver, aumentar la propiedad Tamaño máximo a 4096 permite que la imagen tenga el tamaño adecuado y evita una pérdida de calidad.

Por último, al preparar tu sprite o hoja de sprites, asegúrate de configurar el modo de unidad pivote en "Píxeles" en lugar de "Normalizado".

Esto es para que el punto de pivote del sprite se base en píxeles en lugar de un rango suave de 0 a 1 en cada eje de la imagen. Si el sprite no girara con exactitud desde un píxel, perderíamos la perfección del píxel. Se pueden configurar pivotes para sprites en el Editor de sprites, que se puede abrir desde el Inspector cuando tienes un activo de sprite seleccionado.

Con los activos preparados, podemos configurar nuestra cámara para que tenga una calidad de píxeles perfecta. Un resultado con píxeles perfectos se verá limpio y nítido. Los signos reveladores de que el pixel art no se muestra con una resolución de píxeles perfecta incluyen borrosidad (aliasing) y algunos píxeles que aparecen rectangulares cuando deberían ser cuadrados.

El paquete 2D Pixel Perfect se puede importar a través del Administrador de paquetes en Unity. Haga clic en el menú “Ventana” en la barra de herramientas seguido de “Administrador de paquetes”. En la nueva ventana, haga clic en “Avanzado” y asegúrese de haber habilitado “Mostrar paquetes de vista previa”. Seleccione 2D Pixel Perfect de la lista de la izquierda y seleccione instalar en la parte superior derecha de la ventana.

Eso es todo. Ahora está listo para comenzar a utilizar el componente de cámara con resolución de píxeles perfecta.

El componente Cámara Pixel Perfect se agrega y amplía el componente Cámara de Unity. Para agregarlo, vaya a su cámara principal y agréguele el componente Pixel Perfect Camera. Si la opción del componente Pixel Perfect Camera no está allí, siga las instrucciones indicadas anteriormente para importarlo primero al proyecto.

Ahora veamos las configuraciones que tenemos disponibles.

Primero, recomiendo marcar 'Ejecutar en modo de edición' y configurar la relación de aspecto de la pantalla en la vista del juego en 'Aspecto libre' para que puedas cambiar el tamaño de la vista del juego libremente. El componente mostrará mensajes útiles en la vista del juego explicando si la pantalla no es perfecta en términos de píxeles en cualquier resolución determinada.

¡Ahora puedes revisar cada configuración para ver qué hacen y cómo afectan la apariencia de tu juego!

• Píxeles de activos por unidad : este campo hace referencia a la configuración que puede seleccionar en el inspector para cada activo. Como regla general, cada activo que se usará en el espacio mundial del juego debe usar los mismos píxeles por unidad (PPU), y ese valor también deberá colocarse aquí. Si el mundo de tu juego existe como una cuadrícula de mosaicos y sprites, cada uno de los cuales mide 16 por 16 píxeles, un PPU de 16 tendría sentido: cada mosaico de la cuadrícula sería 1 unidad en coordenadas del espacio mundial. Asegúrese de colocar aquí el PPU elegido.
• Resolución de referencia : configure esto en la resolución con la que desea que se visualicen todos sus activos. Si deseas una apariencia retro, esto generalmente significa una resolución muy pequeña. Por ejemplo, la resolución nativa de Sega Genesis es 320x224. Al portar un juego de Sega Genesis, utilizaríamos una resolución de referencia de 320x224. Para un uso general de 16:9, 320 x 180, así como 398 x 224 (si desea mantener la resolución vertical) deberían funcionar bien.
• Textura de renderizado de escala superior : esto hace que la escena se renderice lo más cerca posible de la resolución de referencia y luego se amplíe para ajustarse al tamaño de pantalla real. Dado que esta configuración genera una pantalla completa, la recomendamos si desea una experiencia de pantalla completa con píxeles perfectos y sin márgenes. 'Upscale Render Texture' también afectará significativamente el aspecto que tienen los sprites al rotarlos.

• Ajuste de píxeles (solo disponible con la textura de renderizado de alta escala deshabilitada): con esta opción habilitada, los renderizadores de sprites se ajustarán automáticamente a una cuadrícula de espacio mundial, donde el tamaño de la cuadrícula se basa en el PPU elegido. Tenga en cuenta que esto en realidad no afecta las posiciones de transformación de ningún objeto. Como resultado, aún puedes interpolar objetos entre posiciones de forma fluida, pero el movimiento visual seguirá siendo perfecto y ágil.
• Ejemplo:

• Marco de recorte (X e Y) : recorta la región visualizada del espacio mundial para que coincida exactamente con la resolución de referencia y agrega márgenes negros a la pantalla para llenar los espacios en los bordes de la pantalla.
• Relleno estirado : está disponible si habilita tanto x como y para el marco de recorte. Esto hace que la cámara se adapte a la vista del juego para adaptarse a la pantalla de una manera que preserve la relación de aspecto. Debido a que este escalamiento no ocurrirá solo en múltiplos enteros de la resolución de referencia, provocará que se pierda la perfección de píxeles en cualquier resolución que no sea un múltiplo entero de la resolución de referencia. La ventaja aquí es que, aunque se pierde la perfección de píxeles para muchas resoluciones, no tendrás los márgenes de barras negras y, en su lugar, tendrás una pantalla completamente llena. Tenga en cuenta que, si bien el relleno estirado suele producir desenfoque, no aparece el mensaje de alerta habitual.

Si desea una pantalla perfecta y nítida que funcione para una variedad de casos de uso, le recomiendo:

• Utilice una resolución de referencia que nunca sea mayor que la resolución de la ventana de un reproductor (por ejemplo, 320x180).
• Habilitar o deshabilitar la textura de renderizado de alta calidad
• Habilítelo si utilizará rotaciones fuera de 90, 180 y 270 y si prefiere el efecto visual que tiene en los sprites rotados.
• La textura de renderizado escalada puede generar una imagen sin perfección de píxeles en algunas resoluciones, dependiendo de su resolución de referencia. Experimente con esta y diferentes resoluciones de pantalla usando “Ejecutar en modo de edición” habilitado en el Pixel. Componente de cámara perfecto para determinar si esto es un problema para su resolución. Si puede lograr que esto produzca una imagen con píxeles perfectos en todas las resoluciones de destino, obtendrá la mejor experiencia de píxeles perfectos en pantalla completa.
• Habilite o deshabilite el ajuste de píxeles como prefiera
• Esto es más una preferencia personal que cualquier otra cosa. Sin ajustar, el movimiento es mucho más fluido, pero los píxeles pueden quedar desalineados.
• Habilitar el marco de recorte X y/o Y si no se utiliza la textura de renderizado de alta escala
• Si no puede obtener consistentemente un resultado perfecto en píxeles con una textura de renderizado de alta calidad, recortar X o Y garantizará una imagen perfecta en píxeles para cualquier resolución mayor que la resolución de referencia, pero creará márgenes grandes en los bordes de la pantalla para algunas resoluciones.
• Deshabilitar relleno estirado

Recomendamos configurar la cámara para que esté optimizada para una relación de aspecto de visualización de 16:9, incluida la resolución de referencia si es posible. Al momento de escribir este artículo, la mayoría de los jugadores juegan en monitores 16:9 y con una resolución de 1920x1080. Por ejemplo, la resolución de referencia de 320x180 es 16:9, por lo que no tendrá márgenes de barras negras cuando se reproduzca a 1920x1080 o cualquier resolución que sea un múltiplo par de 320x180, como 1280x720.

En la barra de herramientas de Unity, puedes ir a Editar > Configuración del proyecto > Reproductor y limitar las relaciones de aspecto que admitirá el juego. Si encuentra que una configuración particular funciona tal como desea en la relación de aspecto deseada pero se ve mal en algunas relaciones de aspecto particulares, puede evitar que la ventana tenga esas relaciones aquí. Sin embargo, tenga en cuenta que no todos los usuarios tendrán una configuración de pantalla que funcione bien con sus limitaciones, por lo que esto no se recomienda. En su lugar, habilite el recorte para que estos usuarios tengan márgenes, en lugar de tener que jugar en una resolución que no se adapta a su pantalla.

Ahora que hemos cubierto cómo configurar Unity para obtener arte con resolución de píxeles perfecta, veamos los conceptos básicos para crear ilustraciones para juegos que siguen las restricciones del clásico Nintendo Entertainment System. Esta generación de consolas impone una gran cantidad de restricciones a los artistas que intentan crear una imagen auténtica. Estas restricciones incluyen cosas como las paletas utilizadas y el tamaño y la cantidad de objetos en una pantalla. Además, es importante tener en cuenta que la resolución de referencia es de 256x240 al “apuntar” a esta consola.

Al crear obras de arte genuinas para NES, hay una serie de restricciones que el artista deberá seguir. Algunas de estas serán consistentes sin importar qué consola retro intente emular un artista, mientras que muchas otras son específicas de la propia NES. La primera, y posiblemente la más importante de estas restricciones, tiene que ver con la forma en que se utilizan las paletas de colores en una imagen. La NES es bastante única en lo que respecta a su paleta de colores porque la paleta de colores completa de la consola está codificada en la consola. La NES elige qué colores usar en una imagen enviando una serie de valores al procesador gráfico de la NES, y luego el procesador gráfico devuelve los colores asociados con esos valores. A continuación se muestra una imagen de la paleta de colores de NES:

Estos colores no se pueden cambiar debido a que son parte de la consola. Todos los juegos que has visto para esta consola utilizan combinaciones de estos colores para crear sus imágenes.

Para crear las combinaciones que se utilizan en el juego, se crean subpaletas y se asignan a los sprites del juego o a los elementos de fondo. La NES divide su paleta en subpaletas que pueden asignarse a sprites y fondos. Cada subpaleta incluye un color común que se utiliza en todas las subpaletas y tres colores únicos. Es capaz de cargar cuatro subpaletas para los fondos y cuatro subpaletas para los sprites. En el caso de los sprites, el color común al comienzo de cada subpaleta se trata como transparencia.

Este es un ejemplo de una serie de subpaletas que se utilizan en un juego. La fila superior representa las subpaletas de fondo y la fila inferior representa las subpaletas de sprites. En este ejemplo, se utiliza el negro como color común que se comparte entre todas las subpaletas. Debido a que el color común se trata como transparencia en los sprites, es necesario crear una segunda entrada de paleta negra para las subpaletas de sprites, a fin de poder usarla como un color visible.

Las restricciones en el uso de las paletas se vuelven aún más estrictas a medida que el artista avanza en cómo se utilizan las paletas en el juego. Para explicar esto, es necesario discutir más a fondo cómo las consolas retro almacenan, usan y muestran el arte. Las ilustraciones de cualquier consola retro se almacenan en el juego como mosaicos de 8x8 px. El uso de este enfoque basado en mosaicos permite a los artistas ahorrar espacio reutilizando los mosaicos para diferentes cosas. (Por ejemplo, se pueden reutilizar trozos de una acera y utilizarlos para hacer la cornisa de un edificio). La otra cosa importante a tener en cuenta sobre el almacenamiento basado en mosaicos es que la información de color generalmente no se guarda con los gráficos. Todos los mosaicos se guardan con una paleta monocromática. De esta manera, cada vez que se muestra un mosaico en el juego, se le puede asignar una subpaleta, lo que permite que el mismo mosaico se muestre simultáneamente en la pantalla con diferentes subpaletas. Esto es importante al crear ilustraciones que sean fieles a una consola retro en una plataforma moderna porque afecta la forma en que se asignan paletas a las ilustraciones.

La NES asigna paletas a los sprites y fondos de forma diferente. Asigna subpaletas para sprites mosaico por mosaico. Esto significa que a cada mosaico de 8x8 en un sprite se le puede asignar una de las cuatro subpaletas de sprites.

Los antecedentes, por otro lado, son mucho más restrictivos. Los fondos asignan sus paletas en fragmentos de 16x16. Las asignaciones de subpaleta para el fondo de toda una pantalla se denominan Tablas de atributos. Estas tablas de atributos son la razón por la que la mayoría de las obras de arte retro implican un uso intensivo de segmentos en mosaico repetidos. Estos segmentos tienden a estar compuestos por mosaicos de 16x16 para que encajen perfectamente en una tabla de atributos. A pesar de ser una respuesta a una restricción de hardware, este enfoque de fondos basado en mosaicos de 16x16 terminó siendo una característica definitoria del arte retro y es absolutamente necesario cuando se intenta recrearlo.

Si bien los artistas tienen la libertad de usar diferentes subpaletas para cada mosaico de 8x8 de un sprite, pueden encontrarse en una situación en la que quieran tener una mayor profundidad de color en un sprite que la que ya está disponible. Aquí es donde las capas de sprites pueden entrar en juego. La superposición de sprites consiste simplemente en dividir un sprite en dos sprites separados y luego colocarlos uno encima del otro. Esto permite a los artistas eludir la restricción de una subpaleta por mosaico de 8x8. Hacer esto esencialmente permitirá a los artistas duplicar la cantidad de colores que se pueden usar en una sola área de 8x8. El único inconveniente importante de hacer esto son los límites de representación de los sprites. La NES solo es capaz de mostrar 64 mosaicos de sprites de 8x8 en la pantalla a la vez, y solo 8 mosaicos de sprites en la misma línea horizontal entre sí. Una vez que se alcancen esos números, no se mostrarán más mosaicos de sprites en la pantalla. Es por esto que muchos juegos de NES hacían parpadear los sprites cuando había muchos de ellos en la pantalla al mismo tiempo. De esa manera, solo se muestran ciertos sprites en cuadros alternos. Estos límites son algo que los artistas deben tener en cuenta cuando colocan sprites uno encima del otro porque, si bien duplica la cantidad de colores, también duplica la cantidad de mosaicos de sprites en la misma línea horizontal.

También se pueden realizar capas de sprites con el fondo para evitar los límites de la tabla de atributos. Este truco se utiliza generalmente para imágenes estáticas, como pantallas de historias y retratos de personajes, para darles una profundidad de color mucho mayor. Para lograr esto, el artista dibujaría parte de la imagen como fondo y luego colocaría sprites encima para rellenar el resto.

Para explicar la siguiente gran restricción del NES, primero debemos volver al hecho de que los gráficos se almacenan en mosaicos. Los mosaicos gráficos se almacenan en 256 páginas de mosaicos y los mosaicos de estas páginas no se pueden cargar en VRAM en diferentes ubicaciones, por lo que resulta difícil mezclar y combinar mosaicos de diferentes páginas sobre la marcha. La VRAM de la NES solo es capaz de mostrar 512 de estos mosaicos a la vez. Más allá de esa restricción, divide los mosaicos a la mitad para los sprites y el fondo. Esto significa que sólo es capaz de mostrar 256 mosaicos de sprites y 256 mosaicos de fondo en un momento dado. Esto puede volverse muy restrictivo si el artista desea mostrar una gran variedad de sprites y elementos de fondo.

Para combatir esta limitación, la NES tiene una función que permite al artista dividir cada página en páginas parciales llamadas bancos. Si bien la NES no es capaz de cargar mosaicos individuales desde varios puntos en los datos gráficos, sí es capaz de cargar diferentes secciones de una página en diferentes momentos. Para la mayoría de los juegos, estos bancos serán de 1K o 2K. Un banco de 1K equivale a un cuarto de una página o 64 mosaicos, mientras que un banco de 2K es la mitad de una página o 128 mosaicos. El artista debe decidir si desea reservar el uso de cada tipo de banco para Sprites o elementos de fondo porque es necesario utilizar ambos tipos de bancos. Esto significa que no puedes tener bancos de 1K tanto para los sprites como para los fondos. Una página debe utilizar bancos de 1K y la otra debe utilizar bancos de 2K. En términos generales, la mayoría de los juegos tienden a utilizar bancos de 1K para los sprites y bancos de 2K para los fondos porque los conjuntos de mosaicos de fondo tienden a ser más estáticos y necesitan menos en términos de variedad sobre la marcha.

La utilidad de los bancos de 1K para sprites es bastante significativa. Si el sprite del jugador tiene una amplia gama de animaciones que no caben en una sola página junto con todos los otros sprites que necesitan cargarse, las acciones individuales se pueden guardar en bancos de 1K y luego intercambiar según la acción que esté sucediendo en la pantalla. También permite una mayor variedad de sprites que se pueden usar en una sola área de un juego. Por ejemplo, si el jugador se encuentra con seis tipos diferentes de enemigos en un área de un juego, pero la página de sprites solo permite al jugador y otros tres tipos de sprites, entonces cuando un tipo de enemigo desaparece de la pantalla, el juego puede cambiar uno de los bancos de enemigos por un nuevo tipo de enemigo.

Una de las principales desventajas de usar bancos de 1K para sprites y bancos de 2K para fondos es cómo la NES maneja la animación de fondo. Para animar un elemento de fondo para un juego de NES, el artista debe crear bancos duplicados de los elementos de fondo animados. Cada nuevo banco duplicado contendrá el siguiente fotograma de animación para cada uno de los elementos animados. Luego, estos bancos se intercambian dentro y fuera de uno en uno, como si se tratara de un libro animado, para crear la animación. Si el artista utiliza bancos de media página para los fondos, entonces almacenar todos esos bancos duplicados puede ocupar mucho espacio. Sin embargo, una forma de evitar esto es colocar todos los elementos de fondo animados de todo el juego en un solo banco. Pero eso también deja al artista con la restricción de tener solo 128 mosaicos restantes para los elementos estáticos de cada fondo. Depende del artista decidir el mejor curso de acción a la hora de decidir qué tipo de bancos va a utilizar para su arte.

Muchos juegos de esa época emplean trucos para crear efectos como el desplazamiento de paralaje en el fondo, pero estos también presentan un desafío para los artistas y diseñadores. Si bien las consolas de 16 bits posteriores permitían múltiples capas de fondo, esta no es una opción en la NES. Todos los fondos son una única imagen aplanada. Para crear una sensación de profundidad y capas, se utilizaron diferentes trucos de programación. Para crear un fondo de paralaje, por ejemplo, el desarrollador puede configurar un registro que puede indicar cuándo se está representando una determinada línea horizontal (conocida como línea rasterizada) en la pantalla. Luego pueden usar ese registro para controlar la velocidad y la dirección en que se desplaza la pantalla. Al usar esto, pueden crear una fila horizontal del fondo que se desplaza a una velocidad diferente que el resto del fondo. El truco para los artistas y diseñadores en este punto es tener en cuenta que el fondo sigue siendo una imagen plana. Si una plataforma o cualquier otro elemento que se supone que debe estar “delante” de ese fondo de movimiento más lento se coloca en esa región, entonces también se desplazará más lento que el resto de la imagen. Esto significa que los diseñadores deben tener cuidado de dónde colocan los elementos de fondo en la escena, y los artistas deben crear el fondo de manera que el efecto sea perfecto.

También hay otro truco para los artistas que quieren que uno de sus elementos de fondo aparezca en primer plano. En la NES, los desarrolladores pueden establecer la prioridad de un sprite para que sea menor que cero. Una vez hecho esto, el sprite se mostrará detrás de cualquier píxel de fondo no transparente. Las prioridades de los sprites también se pueden modificar y activar sobre la marcha, lo que permite que ciertos elementos cambien la prioridad de un sprite según sea necesario.

Cuando alguien intenta crear un proyecto que sea auténtico para una consola retro, hay muchas consideraciones técnicas que debe tener en cuenta y que quizás no sean cosas de las que el desarrollo moderno tenga que preocuparse. Debido a la forma en que las máquinas más antiguas procesaban las imágenes y manejaban pequeñas cantidades de espacio para maniobrar con la CPU y la GPU, los diseñadores tenían que pensar de manera creativa para solucionar las limitaciones del hardware. En la era moderna, resulta importante aprender sobre esas limitaciones y las técnicas para poder recrear verdaderamente la apariencia y el diseño de los juegos de esa época. En la próxima publicación, analizaremos las limitaciones de diseño impuestas por la era de los 16 bits, así como el trabajo de Unity necesario para lograr esa verdadera sensación de “televisión antigua”. La guía 2D Pixel Perfect para visuales retro de 16 bits ya está disponible aquí.

---

¿Es tu primera vez diseñando niveles con Tilemap? Explora la creación de mundos en 2D en este tutorial para principiantes en Unity Learn.