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

En nuestra primera guía 2D Pixel Perfect para juegos retro, te mostramos cómo configurar la herramienta 2D Pixel Perfect y cómo se creaban los gráficos de 8 bits en el pasado. En esta publicación, avanzamos rápidamente hasta la era de los 16 bits. Con la ayuda de Mega Cat Studios, aprenderás a crear arte auténtico para juegos estilo Sega Genesis (o Mega Drive) y Super NES utilizando configuraciones de Unity , estructuras gráficas y paletas de colores.

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

Mega Cat Studios 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.

Antes de sumergirte en esta publicación, te recomendamos que te familiarices con nuestra guía retro anterior, donde cubrimos las configuraciones de 2D Pixel Perfect y cómo recrear gráficos de estilo de 8 bits. Con Unity 2019.2, 2D Pixel Perfect ahora es parte del 2D Renderer, que está en el paquete Lightweight Render Pipeline (LWRP). 2D Pixel Perfect también existe como un paquete independiente (con la misma funcionalidad) para creadores que no usan LWRP. En esta guía, le mostraremos cómo configurar el proyecto en LWRP.

En Unity Hub, haga clic en Nuevo, seleccione 2Dy luego nombre su proyecto.

2. Para importar el paquete 2D Pixel Perfect , haga clic en el menú Ventana en la barra de herramientas y seleccione Administrador de paquetes. En la ventana emergente, seleccione el paquete Lightweight RP , asegurándose de obtener la versión 6.9.0 o superior.

3. A continuación, configurará el Renderizador 2D en el Editor y creará un nuevo Activo de Pipeline. En la ventana Proyecto, haga clic con el botón derecho en la vista Activos y seleccione Crear > Renderizado > Canalización de renderizado ligero > Activo de canalización.

4. En la vista Activos de la ventana Proyecto, cree un nuevo Renderizador 2D haciendo clic derecho y seleccionando Crear > Renderizado > Canalización de renderizado ligero > Renderizador 2D.

5. Seleccione el activo de pipeline que creó. Seleccione Generaly luego cambie el Tipo de renderizador de Renderizador directo a Personalizado.

6. Asigne el renderizador 2D que creó al campo de datos.

7. En la configuración de Gráficos, configure la Configuración de canalización de renderizado programable para usar el nuevo activo de canalización que creó.

Ahora debería estar configurado el renderizador 2D, incluida la cámara 2D Pixel Perfect .

En Unity 2019.2, los Sprites 2D pueden tener un material “Sprite-Lit”, que les permite reaccionar a las condiciones de iluminación 2D. Si no está utilizando luces 2D en su proyecto, asegúrese de tener material que no requiera luces 2D para hacer visibles los Sprites, en cuyo caso puede cambiar el material a "Sprites-Default".

Debes agregar el componente Pixel Perfect Camera a tu cámara principal. Le recomendamos marcar Ejecutar en modo de edición.

La consola Sega Genesis tiene una resolución de 320x224 px (o una cuadrícula de 40x28 mosaicos de 8x8 píxeles). Esa es la versión NTSC. La Super NES tiene una resolución de 256×224 (30x28 mosaicos de 8x8 píxeles) también en su versión NTSC.

Se recomienda utilizar una resolución de altura de 224 px y diseñar activos con 8 PPU para ambos estilos gráficos.

Si necesita un repaso de lo que hace cada opción en el componente Cámara 2D Pixel Perfect , consulte nuestra publicación de blog de juegos retro anterior.

En esta sección, cubriremos el flujo de trabajo para crear ilustraciones que imiten el aspecto de diferentes consolas, como lo hicimos en nuestra publicación del blog de NES. Hay menos restricciones que en un proyecto de 8 bits y más libertad con el color, pero Genesis tiene sus propias limitaciones. También creemos que es importante explicar cómo funciona el hardware original para que puedas aplicar esas limitaciones a tu propio proyecto retro.

Dar el salto de consolas de 8 a 16 bits te da más opciones en hardware más sofisticado. Dicho esto, los principios básicos para realizar grandes ilustraciones para NES siguen siendo válidos. Todos los gráficos todavía se almacenan en mosaicos de 8x8, por ejemplo, y luego se ensamblan en imágenes más grandes, ya sean Sprites o elementos de fondo. Todavía es necesario trabajar dentro de subpaletas limitadas con un color transparente común, aunque 16 bits ofrecen mayor libertad en las paletas en algunos aspectos. Probablemente te aliviará saber que las consolas de 16 bits generalmente no tienen una paleta de colores codificada como sus contrapartes de 8 bits, lo que significa que los colores disponibles se amplían enormemente con respecto a la NES.

A continuación, Genesis cuenta con subpaletas que contienen 15 colores más el color común utilizado para la transparencia de Sprite y la transparencia de capa. Sin embargo, una de las debilidades del diseño artístico para Genesis proviene de las subpaletas. Las subpaletas se pueden asignar libremente a Sprites o mosaicos de fondo, pero Genesis solo permite utilizar cuatro subpaletas a la vez. Debido a esto, los artistas deben tener en cuenta qué colores se utilizan en una subpaleta para poder maximizarlos tanto para el uso en Sprites como en el fondo. Una subpaleta para Genesis generalmente contiene colores que son utilizados tanto por los fondos como por los Sprites para que todo encaje perfectamente.

Para crear para cualquier plataforma de 16 bits, es necesario trabajar con una paleta indexada. Para ello, Gimp puede ser una alternativa de código abierto a Photoshop que permite una gran cantidad de manipulación de paletas indexadas.

Para crear la paleta indexada en Gimp, vaya a Imagen > Modo > Indexado…

Aparece la ventana Conversión de color indexado.

Establezca el número máximo de colores en 15. Puedes utilizar patrones de tramado automático, pero estos tienden a verse mejor cuando se crean manualmente.

Los colores de la imagen ahora están indexados. Esta información se guarda automáticamente con la imagen para que se pueda utilizar el índice de color. Si necesita cambiar el orden de los colores en el índice, simplemente puede hacer clic derecho en el mapa de colores y seleccionar Reorganizar mapa de colores...

Aparece un menú emergente que le permite arrastrar y soltar colores en un nuevo orden.

Un truco popular para crear una mayor profundidad de color es controlar la paleta a lo largo de una línea rasterizada específica, de forma muy similar a como se lograba el desplazamiento de paralaje en la NES. Genesis es capaz de cambiar las selecciones de subpaleta para la ilustración a lo largo de una línea rasterizada específica. Este truco se utiliza frecuentemente para crear la ilusión de que parte de un nivel está bajo el agua. Los colores “subacuáticos” se agregan a una selección de subpaleta completamente separada, y la selección de subpaleta se carga una vez que se representa una determinada línea rasterizada en la pantalla.

En general, las consolas de 16 bits no cargan los mosaicos gráficos de la misma manera que lo hacen las consolas de 8 bits. Las consolas de 8 bits cargarán los Sprites y los mosaicos de fondo por separado y en grandes fragmentos de datos para evitar usar mucha potencia de procesamiento, mientras que las consolas de 16 bits tienen la potencia de procesamiento para una mayor flexibilidad. Pueden cargar e intercambiar mosaicos individuales sobre la marcha, lo que le permite cargar solo los gráficos que necesita cuando los necesita. Esto permite utilizar una mayor variedad de ilustraciones dentro de un solo nivel o pantalla de un juego.

Otro aspecto exclusivo de Genesis/Mega Drive es que los datos de paleta y mosaicos gráficos no son las únicas cosas que se cargan en la VRAM de la consola durante el juego. Esto puede hacer que diseñar arte para la consola sea complicado porque la cantidad de mosaicos gráficos que se pueden cargar en la memoria en un momento dado varía dependiendo de lo que esté sucediendo en el juego. En términos generales, la mayoría de los juegos permiten suficiente espacio para cargar alrededor de 1000 fichas y, si hay un elemento dinámico, las fichas siempre se pueden intercambiar libremente.

Aunque se puede cargar una mayor variedad de mosaicos disponibles en la VRAM a la vez, la mayoría de las veces esa libertad adicional se reserva para los Sprites, para permitir animaciones más variadas y más tipos de Sprites en pantalla a la vez. Esto significa que la filosofía de diseño básica de utilizar segmentos repetidos de mosaicos todavía tiende a usarse mucho en el arte de 16 bits para que el fondo no ocupe demasiado del espacio disponible. Las resoluciones de NES, Genesis y SNES son bastante similares, por lo que los segmentos de 16x16 tienden a ser el punto de partida para este tipo de diseños.

La unidad Genesis/Mega permite que dos capas de fondo estén activas a la vez en la pantalla. Esto significa que los elementos en capas están más fácilmente disponibles para diseñar fondos. Dicho esto, todavía son solo dos capas, por lo que el artista y el desarrollador podrían tener que recurrir a algunos trucos de líneas rasterizadas para crear una mayor profundidad en una escena. Afortunadamente, como todo esto se puede colocar en una segunda capa, los diseñadores tienen la libertad de colocar objetos en primer plano delante del fondo sin romper la ilusión.

Tener una segunda capa también hace que el uso de trucos de prioridad de Sprite para crear objetos en primer plano quede obsoleto. En lugar de tener que cambiar repetidamente las prioridades de Sprite sobre la marcha, ahora puedes simplemente configurar la segunda capa de fondo para que se muestre frente al jugador, aunque las capas más avanzadas aún pueden requerir una manipulación rápida de las prioridades de Sprite. El segundo panel de fondo también cuenta con un subpanel que se puede utilizar para pantallas de visualización frontal (HUD). El subpanel quedará bloqueado en su lugar y nunca se desplazará.

Cuando trabajas con Sprites hay mayor libertad a la hora de dar el salto a 16 bits. La Genesis/Mega Drive te permite tener 80 Sprites en pantalla a la vez y alrededor de 20 en una sola línea horizontal antes de dejar de renderizar nuevos Sprites. Más allá de eso, los Sprites ya no se cuentan como mosaicos individuales de 8x8. Genesis es capaz de generar Sprites individuales compuestos de múltiples mosaicos. Estos pueden ser tan pequeños como una sola baldosa o tan grandes como baldosas de 4x4. Cualquier cosa más grande que eso todavía requeriría hacerlo con múltiples Sprites.

Una de las características definitorias de las obras de arte de la era de los 16 bits es el uso del tramado. Los juegos de aquella época se mostraban en monitores CRT, donde los píxeles en pantalla tendían a mezclarse entre sí. Los artistas aprovecharían este hecho utilizando patrones de tramado en las ilustraciones, de modo que cuando un píxel se mezclaba con otro en un patrón repetitivo, creaba la ilusión de tener más colores de los que realmente estaban disponibles. Hasta el día de hoy, el tramado se usa mucho en el pixel art, a pesar de las mejoras en nuestras pantallas, para mantener una estética precisa.

De las dos principales consolas de 16 bits, la Genesis/Mega Drive muestra sus colores con un contraste mucho mayor. Esto también es algo que debes tener en cuenta al elegir tus subpaletas. Hacer algo con tonos más apagados y apagados no tendrá el aspecto esperado cuando se trate de renderizar la imagen en el hardware. Generalmente, el arte debe crearse con una paleta de colores de alto contraste para que el resultado final se mantenga en línea con la visión original del artista.

Para los proyectos de Super NES, seguimos trabajando con mosaicos/cuadrículas de tamaño 8x8 píxeles, por lo que trabajar con mosaicos repetibles es extremadamente útil. En términos generales, estos serán múltiplos de ocho.

La primera diferencia fundamental entre Genesis/Mega Drive y SNES se refiere a la paleta de colores. Al igual que la Mega Drive, la SNES no tiene una paleta de colores codificada, por lo que puedes elegir sus colores.

Lo complicado del SNES es que utiliza colores de 5 bits por píxel (BPP), que no son muy comunes hoy en día. Puedes solucionar esto usando Gimp para crear ilustraciones, luego puedes simplemente posterizar la imagen a 32 tonos de RGB, lo que equivaldrá a 5 colores BPP, incluso si no guardaste la imagen como tal. Esto permite que los colores de su imagen se muestren con precisión en la consola.

Puedes encontrar esta opción en Gimp en Colores > Posterizar… Aparece una ventana emergente donde puedes establecer los niveles de Posterizar a 32 para crear 5 colores compatibles con BPP.

La siguiente gran diferencia entre los dos sistemas se refiere a la resolución de pantalla. Dado que SNES es el sucesor de NES, ambos sistemas comparten resoluciones de pantalla similares. La resolución interna de la SNES es 256x224. Esto permite que cualquier imagen que se esté procesando se muestre dentro de las zonas seguras de la mayoría de los televisores CRT, por lo que no se cortará ninguna parte de la imagen. Esta resolución nunca cambia, por lo que este será el tamaño de imagen que un artista necesitará usar como referencia.

Esta sección proporciona una referencia rápida de lo que los distintos modos de pantalla tienen para ofrecer.

La diferencia más significativa entre los sistemas es que la SNES puede renderizar gráficos de fondo en siete modos de pantalla diferentes. La SNES es capaz de reproducir un total de 256 colores en pantalla al mismo tiempo en una sola subpaleta en ciertos modos de pantalla. Estos son algunos de los modos de pantalla más populares:

• Modo 1: Este es uno de los modos de pantalla más utilizados para SNES. Cuenta con el mejor promedio de rendimiento de las capacidades de la consola. El modo 1 le permite tener tres capas de fondo, donde dos de ellas tienen su propia subpaleta de 16 colores y la capa final tiene una subpaleta de 4 colores.
• Modo 3: Este modo se utiliza generalmente para imágenes estáticas de gran tamaño, como pantallas de título y pantallas de historias. Cuenta con dos planos de fondo. El primero utiliza una subpaleta completa de 256 colores y el segundo permite una subpaleta de 16 colores.
• Modo 7: Esta fue una de las principales características de la SNES. Como se mostró en la mayor parte del material promocional de la consola, Mode 7 fue la primera vez que una consola doméstica pudo aplicar transformaciones a una imagen en tiempo real, permitiendo escalar, rotar, estirar y sesgar en el plano de fondo. Esto se usó para crear los efectos pseudo-3D que se ven en muchos juegos de carreras y vuelo para SNES.

El plano de fondo único en el Modo 7 se maneja de forma muy diferente a todos los demás modos de pantalla para permitir que estas características funcionen. En primer lugar, solo hay un único plano de fondo de 256 colores con el que trabajar, lo que significa que todos los Sprites deben compartir sus colores con la subpaleta del plano de fondo. A continuación, en lugar de trabajar con el tamaño de pantalla normal de SNES, un plano de fondo de Modo 7 tiene un tamaño de 1024 x 1024 píxeles. Luego se dimensiona y se ajusta para adaptarse a la pantalla según lo desee el diseñador.

Después de la complejidad de los modos de pantalla de fondo, las reglas para los Sprites son relativamente simples. La SNES tiene varios modos de Sprite diferentes, al igual que la Mega Drive, pero con la dura limitación de solo poder usar dos modos de Sprite diferentes durante todo el juego.

Los sprites pueden ser de 8x8, 16x16, 32x32 o 64x64. No sólo eso, sino que los diseñadores deben elegir entre una lista predeterminada de combinaciones de tamaños de Sprites. Los juegos de SNES pueden incluir las siguientes combinaciones:

• 8x8, 16x16
• 8x8, 32x32
• 8x8, 64x64
• 16x16, 32x32
• 16x16, 64x64
• 32x32, 64x64

Estos tamaños quedan “definidos” una vez que los eliges, y todos los Sprites del juego deben ajustarse a ellos. La SNES es capaz de renderizar 32 sprites en una sola línea de trama horizontal a la vez, pero cuenta con un considerable límite de 128 sprites en lo que se puede mostrar en pantalla a la vez. Cualquier cosa más allá de eso no se mostrará en la pantalla.

Los sprites tienen ocho subpaletas de 16 colores con las que trabajar. Al igual que todas las consolas retro, el primer color de cualquier subpaleta es un color común compartido que se usa para la transparencia. La gran cantidad de subpaletas en comparación con las otras consolas cubiertas te da una mayor libertad a la hora de elegir colores para los Sprites. Solo debes tener en cuenta que hay un límite estricto de 256 colores.

Esperamos que hayas disfrutado de esta publicación sobre cómo crear juegos retro de 8 y 16 bits usando 2D Pixel Perfect en la última versión de Unity.

Aún no hemos terminado con 2D Pixel Perfect , ya que la función se verificará para producción en Unity 2019.3 y también será más compatible con Cinemachine 2D.

Cuéntanos cómo va tu propio proyecto 2D Pixel Perfect y no olvides visitar el foro 2D para interactuar con la comunidad de Unity y el equipo de desarrollo 2D.