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

En nuestra primera guía de 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 aquella época. 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 de estilo Sega Genesis (o Mega Drive) y Super NES utilizando la configuración de Unity , las estructuras gráficas y las paletas de colores.

Lleva tu experiencia de desarrollo 2D al siguiente nivel y explora el conjunto de herramientas 2D nativas de Unity .

Mega Cat Studios ha convertido la creación de videojuegos retro de gran precisión en una forma de arte. De hecho, tanto es así que varios de sus títulos también se pueden adquirir en formato de cartucho y jugarse en consolas retro como la Sega Genesis.

Antes de adentrarte en este artículo, te recomendamos familiarizarte con nuestra guía retro anterior , donde hablamos sobre la configuración de 2D Pixel Perfect y cómo recrear gráficos de estilo 8 bits. Con Unity 2019.2, 2D Pixel Perfect ahora forma parte del renderizador 2D , que se encuentra en el paquete Lightweight Render Pipeline (LWRP). 2D Pixel Perfect también existe como paquete independiente (con la misma funcionalidad) para creadores que no utilizan LWRP. En esta guía, le mostraremos cómo configurar el proyecto en LWRP.

En Unity Hub, haz clic en Nuevo, selecciona 2D y, a continuación, asigna un nombre a tu proyecto.

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

3. A continuación, configurarás el renderizador 2D en el editor y crearás un nuevo recurso de canalización. 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 con el botón derecho y seleccionando Crear > Renderizado > Canalización de renderizado ligero > Renderizador 2D .

5. Seleccione el activo de canalización que creó. Seleccione General y, a continuación, 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 los ajustes de la canalización de renderizado programable para que utilicen el nuevo recurso de canalización que ha creado.

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 utilizas luces 2D en tu proyecto, asegúrate de tener un material que no requiera luces 2D para que los Sprites sean visibles; en ese caso, puedes cambiar el material a "Sprites-Default".

Debes añadir el componente Pixel Perfect Camera a tu cámara principal. Recomendamos marcar la opción "Ejecutar en modo de edición".

La consola Sega Genesis tiene una resolución de 320x224 píxeles (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 los elementos gráficos con 8 PPU para ambos estilos gráficos.

Si necesitas repasar la función de cada opción en el componente 2D Pixel Perfect Camera, consulta nuestra entrada anterior del blog sobre juegos retro .

En esta sección, vamos a explicar el flujo de trabajo para crear ilustraciones que imiten el aspecto de diferentes consolas, tal como hicimos en nuestra entrada del blog sobre la NES . Si bien existen menos restricciones que en un proyecto de 8 bits y mayor libertad con el color, la Genesis también 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 las consolas de 8 bits a las de 16 bits te brinda más opciones en un hardware más sofisticado. Dicho esto, los principios básicos para crear excelentes ilustraciones para la NES siguen siendo válidos. Todos los gráficos se siguen almacenando en mosaicos de 8x8, por ejemplo, y luego se ensamblan en imágenes más grandes, ya sean Sprites o elementos de fondo. Aun así, es necesario trabajar con subpaletas limitadas que comparten un color transparente común, aunque los 16 bits ofrecen mayor libertad en las paletas en algunos aspectos. Probablemente te alegrará saber que las consolas de 16 bits generalmente no tienen una paleta de colores predefinida como sus contrapartes de 8 bits, lo que significa que los colores disponibles se han ampliado enormemente con respecto a la NES.

A continuación, Genesis cuenta con subpaletas que contienen 15 colores, además del color común utilizado para la transparencia de los sprites y la transparencia de las capas. Sin embargo, una de las debilidades del diseño artístico para Genesis reside en las subpaletas. Las subpaletas se pueden asignar libremente tanto a los Sprites como a los mosaicos de fondo, pero Genesis solo permite utilizar cuatro subpaletas a la vez. Por ello, los artistas deben tener en cuenta qué colores se utilizan en una subpaleta para poder optimizar su uso tanto en los sprites como en los fondos. Una subpaleta para Genesis generalmente contiene colores que se utilizan tanto para los fondos como para los Sprites con el fin de que todo encaje a la perfección.

Para crear contenido 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 manipulación de paletas indexadas.

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

Aparece la ventana de Conversión de color indexada.

Establezca el número máximo de colores en 15 . Puedes usar patrones de tramado automáticos, pero suelen verse mejor cuando se crean manualmente.

Los colores de la imagen ya 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 haga clic con el botón derecho en el mapa de colores y seleccione Reorganizar mapa de colores...

Aparece un menú emergente que te permite arrastrar y soltar los colores para reordenarlos.

Un truco popular para conseguir una mayor profundidad de color consiste en controlar la paleta a lo largo de una línea de trama específica, de forma similar a como se conseguía el desplazamiento parallax en la NES. Genesis es capaz de cambiar las selecciones de subpaleta para la ilustración a lo largo de una línea de trama específica. Este truco se utiliza con frecuencia para crear la ilusión de que parte de un nivel está bajo el agua. Los colores "submarinos" se añaden a una selección de subpaleta completamente independiente, y dicha selección de subpaleta se carga una vez que se renderiza 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 las consolas de 8 bits. Las consolas de 8 bits cargan los sprites y los mosaicos de fondo por separado y en grandes bloques de datos para evitar consumir mucha potencia de procesamiento, mientras que las consolas de 16 bits tienen la potencia de procesamiento necesaria para una mayor flexibilidad. Pueden cargar e intercambiar mosaicos individuales sobre la marcha, lo que te permite cargar solo los gráficos que necesitas cuando los necesitas. Esto permite utilizar una mayor variedad de elementos gráficos dentro de un mismo nivel o pantalla de un juego.

Otro aspecto exclusivo de Genesis/Mega Drive es que los datos de mosaicos gráficos y paletas no son lo único que se carga en la VRAM de la consola durante el juego. Eso puede dificultar el diseño gráfico para la consola, ya que 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 general, la mayoría de los juegos permiten suficiente espacio para cargar aproximadamente 1000 fichas, y si hay algún 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 parte del tiempo esa libertad adicional se reserva para los Sprites, para permitir animaciones más variadas y más tipos de Sprites en pantalla simultáneamente. Esto significa que la filosofía de diseño básica de usar segmentos repetitivos de mosaicos todavía tiende a usarse mucho en el arte de 16 bits para que el fondo no ocupe demasiado espacio disponible. Las resoluciones de la NES, la Genesis y la SNES son bastante similares, por lo que los segmentos de 16x16 suelen ser el punto de partida para este tipo de diseños.

La Genesis/Mega Drive permite tener dos capas de fondo activas simultáneamente en la pantalla. Esto significa que los elementos en capas están más fácilmente disponibles para el diseño de fondos. Dicho esto, sigue siendo solo dos capas, por lo que el artista y el desarrollador podrían tener que recurrir a algunos trucos con líneas rasterizadas para crear mayor profundidad en una escena. Por suerte, como todos esos elementos pueden ir en una segunda capa, los diseñadores tienen libertad para colocar objetos en primer plano delante del fondo sin romper la ilusión.

El hecho de tener una segunda capa también hace que el uso de trucos de prioridad de sprites para crear objetos en primer plano resulte obsoleto. En lugar de tener que cambiar repetidamente las prioridades de los Sprites sobre la marcha, ahora simplemente puedes configurar la segunda capa de fondo para que se muestre delante del jugador, aunque las capas más avanzadas aún podrían requerir una manipulación rápida de las prioridades de los Sprites. El segundo panel de fondo también incluye un subpanel que puede utilizarse para pantallas de visualización frontal (HUD, por sus siglas en inglés). El subpanel permanecerá bloqueado y no se desplazará.

Cuando se trabaja con sprites, existe una mayor libertad al dar el salto a los 16 bits. La Genesis/Mega Drive te permite tener 80 Sprites en pantalla a la vez y unos 20 en una sola línea horizontal antes de que deje de renderizar nuevos Sprites. Además, los Sprites ya no se cuentan como fichas individuales de 8x8. Genesis es capaz de generar sprites individuales compuestos por múltiples mosaicos. Pueden tener un tamaño que oscila entre una sola baldosa y cuatro baldosas (4x4). Cualquier cosa más grande que eso aún requeriría crearla a partir de múltiples Sprites.

Una de las características que definen el arte de la era de los 16 bits es el uso del tramado. En aquella época, los juegos se mostraban en monitores CRT, donde los píxeles en pantalla tendían a mezclarse entre sí. Los artistas aprovechaban este hecho utilizando patrones de tramado en sus obras, de modo que cuando un píxel se fundía con otro en un patrón repetitivo, creaba la ilusión de tener más colores de los que realmente estaban disponibles. A día de hoy, el tramado se sigue utilizando 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 mucho mayor contraste. Esto es algo que también debes tener en cuenta al elegir tus subpaletas. Si se utilizan tonos más apagados y apagados, el resultado final no será exactamente el esperado al renderizar la imagen en el hardware. En general, las obras de arte deben crearse con una paleta de colores de alto contraste para que el resultado final se mantenga fiel a la visión original del artista.

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

La primera diferencia fundamental entre la Genesis/Mega Drive y la SNES tiene que ver con la paleta de colores. Al igual que la Mega Drive, la SNES no tiene una paleta de colores predefinida, por lo que puedes elegir los colores.

Lo complicado de la 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 la ilustración y luego simplemente puedes posterizar la imagen a 32 tonos de RGB, lo que resultará en 5 colores BPP, incluso si no guardaste la imagen de esa manera. Esto permite que los colores de la imagen se muestren con precisión en la consola.

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

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

Esta sección ofrece una referencia rápida de las funciones que ofrecen los distintos modos de pantalla.

La diferencia más significativa entre ambos sistemas es que la SNES puede renderizar gráficos de fondo en siete modos de pantalla diferentes. La SNES es capaz de mostrar un total de 256 colores en pantalla simultáneamente en una única subpaleta en determinados 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 la SNES. Ofrece el mejor rendimiento promedio de las capacidades de la consola. El modo 1 permite tener tres capas de fondo, dos de las cuales tienen su propia subpaleta de 16 colores, y la última capa tiene una subpaleta de 4 colores.
• Modo 3: Este modo se utiliza generalmente para imágenes estáticas de mayor tamaño, como pantallas de título y pantallas de historias. Cuenta con dos planos de fondo. La primera utiliza una subpaleta completa de 256 colores, y la segunda permite una subpaleta de 16 colores.
• Modo 7: Esta era una de las características principales de la SNES. Se mostró en la mayor parte del material promocional de la consola; el Modo 7 fue la primera vez que una consola doméstica pudo aplicar transformaciones a una imagen en tiempo real, permitiendo escalar, rotar, estirar e inclinar el plano de fondo. Esto se utilizó para crear los efectos pseudo-3D que se ven en muchos juegos de carreras y de vuelo para SNES.

El plano de fondo único en el Modo 7 se gestiona de forma muy diferente a todos los demás modos de pantalla para permitir que estas funciones operen. 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 la SNES, el plano de fondo del Modo 7 tiene un tamaño de 1024x1024 píxeles. Luego se ajusta su tamaño para que se adapte a la pantalla según las preferencias del diseñador.

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

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

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

Una vez que eliges estos tamaños, quedan "fijos" 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 tiene un considerable límite de 128 sprites en lo que se puede mostrar en pantalla a la vez. Todo lo que vaya más allá de eso no se mostrará en pantalla.

Los sprites tienen ocho subpaletas de 16 colores con las que trabajar. Al igual que en todas las consolas retro, el primer color de cualquier subpaleta es un color común que se utiliza para la transparencia. La gran cantidad de subpaletas disponibles, en comparación con las demás consolas analizadas, te brinda mayor libertad a la hora de elegir los colores para los Sprites. Solo tienes que tener en cuenta que existe 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.

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

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