De 3D a pixel art: la guía completa

Dibujar a mano un personaje en ocho direcciones, con ciclos de caminar, correr, atacar y morir, supone muchísimos fotogramas. Para un equipo pequeño puede ser el mayor coste artístico de un juego. Renderizar esos fotogramas a partir de un modelo 3D es una vieja respuesta a ese problema. Esta guía cuenta de dónde salió la idea, por qué funciona, qué sale mal y cómo conseguir sprites que parezcan pixel art y no un render encogido.

Una breve historia de los sprites prerrenderizados

En 1994, Rare lanzó Donkey Kong Country en la Super Nintendo. Sus personajes y escenarios se modelaron y renderizaron en estaciones de trabajo de Silicon Graphics, y luego se redujeron a los pequeños sprites y los colores limitados de la consola. No se parecía a nada más del sistema, y demostró que un pipeline 3D podía alimentar un juego 2D.

A finales de los noventa, los sprites prerenderizados se hicieron comunes en PC. Diablo (1996), Fallout y Fallout 2, StarCraft y Age of Empires usaban unidades y personajes renderizados desde 3D, a menudo en muchas direcciones, porque un modelo se puede girar gratis y un dibujo no.

La técnica volvió de otra forma con Dead Cells (2018). Motion Twin animó sus personajes en 3D y los renderizó como pequeños fotogramas de pixel art, y describió el proceso en el artículo de Gamasutra (ahora Game Developer) de 2018 “Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells”. El objetivo era el mismo que en 1994: que un equipo pequeño consiguiera una animación fluida y coherente sin dibujar cada fotograma.

Puedes leer más en Sprites prerenderizados.

Por qué renderizar desde 3D

Hay tres razones que salen una y otra vez.

• Todas las direcciones. Una vez que existe un modelo, un lado nuevo es solo otra cámara. Cuatro, ocho o dieciséis direcciones cuestan el mismo esfuerzo de configurar.
• Animación coherente. Las proporciones del personaje se mantienen iguales en cada fotograma y en cada lado. Los sprites dibujados a mano se desvían; un esqueleto no.
• Los cambios salen baratos. Cambia el color de la armadura, el tamaño del sprite o la paleta y vuelve a renderizar. Con hojas dibujadas a mano, un cambio de última hora supone repintar cientos de fotogramas.

El precio es que un render normal no parece pixel art. Reduce un render con sombreado suave y obtendrás bordes blandos, degradados turbios, cientos de colores casi idénticos y píxeles que parpadean de un fotograma a otro. El resto de esta guía trata de cerrar esa brecha.

Qué hace que se lea como pixel art

El pixel art tiene menos que ver con la baja resolución y más con el control. Cada píxel es una decisión. Un render toma millones de pequeñas decisiones que no pediste, así que el trabajo consiste en recuperar esas decisiones.

Una sola escala de píxel

Todo en el juego debería compartir un mismo tamaño de píxel. Si un árbol se dibuja a una escala y un personaje con el doble de detalle, el desajuste salta a la vista. Los artistas de pixel art llaman mixels a los tamaños de píxel mezclados. En un pipeline 3D la solución es una única escala de píxeles por metro: un caballero de dos metros siempre mide el mismo número de píxeles, y una caja a su lado está en proporción. En Pixor, por eso, fija unos Píxeles/m en las cámaras: de forma predeterminada, cada cámara ajusta su sprite a su propio tamaño.

Un pivote fijo

Si los pies del personaje caen en un píxel distinto en cada fotograma, el sprite tiembla en el juego aunque la animación sea buena. El pivote, normalmente entre los pies, debe quedar en el mismo píxel en cada fotograma y cada lado. Pixor fija el pivote a un píxel en todos los fotogramas y lados.

Paletas limitadas y rampas

Los sprites hechos a mano usan pocos colores, organizados en rampas: una breve sucesión de oscuro a claro para cada material. Pocos colores hacen que las formas se lean con claridad a tamaños pequeños. Un render tiene que reducirse a una paleta, no solo a menos colores elegidos al azar.

Desplazamiento de tono

Las buenas rampas no solo se oscurecen; cambian de tono a medida que avanzan, normalmente más frías en la sombra y más cálidas en la luz. Esto es el desplazamiento de tono, y es buena parte de lo que hace que el pixel art parezca pintado y no agrisado.

Contornos selectivos y líneas limpias

Una línea negra alrededor de todo va bien para algunos estilos, pero muchos artistas colorean el contorno según la forma que rodea: más oscuro en el lado de la sombra y más claro, o ausente, en el lado iluminado. Eso es el selout. Las líneas deberían tener un píxel de ancho, sin esquinas en «L» dobles, y las partes finas como hojas de espada y bastones deberían quedarse como líneas limpias de un píxel en lugar de romperse. Más en Contornos.

Sin píxeles sueltos y sin parpadeo

Los píxeles aislados que no pertenecen a ninguna forma parecen ruido. En animación, el problema peor es el parpadeo: un píxel o una línea que aparece durante un fotograma y desaparece en el siguiente. Un render produce ambos constantemente, porque cambios diminutos en el modelo empujan los valores justo por encima o por debajo de un umbral.

Sin tramado accidental

El tramado puede ser un estilo deliberado. Si se usa, el patrón debe quedarse fijo en la superficie mientras el modelo se mueve, no deslizarse sobre ella como una mosquitera.

El pipeline, paso a paso

Esta es la cadena habitual, y dónde encaja Pixor en cada paso.

1. El modelo

Sirve cualquier modelo, con rig o estático. Pixor lee glTF y GLB, FBX (incluidas las descargas de Mixamo), OBJ y archivos .vox de MagicaVoxel. Los modelos más sencillos, con formas claras y materiales diferenciados, dan mejores sprites que los muy detallados; el detalle más pequeño que un píxel se perderá de todos modos.

2. Una cámara por lado

Cada dirección es una cámara que mira al modelo. Los juegos de desplazamiento lateral necesitan una; los juegos cenitales e isométricos usan anillos de 4 o 8. La inclinación importa tanto como la dirección: una vista lateral, una de tres cuartos, una isométrica 2:1 y una cenital encajan con juegos distintos. En Pixor cada lado es una cámara, en anillos de 4, 8 o 16, o en cualquier ángulo que elijas.

3. El G-buffer

En lugar de renderizar directamente una imagen terminada, renderiza la información que necesitas: el color plano de cada píxel, la dirección hacia la que mira su superficie (normales), su distancia a la cámara (profundidad) y a qué parte o material pertenece. Esto se llama G-buffer. Cada paso posterior trabaja a partir de él, y eso es lo que hace controlable todo lo demás. Las imágenes de la parte superior de esta página muestran el color, las normales y la profundidad de un cofre, y el sprite terminado.

4. Luz en bandas

El sombreado suave se convierte en unas pocas bandas planas: luz, tono medio, sombra. El pixel art suele usar de dos a cuatro. Lo difícil es mantener las bandas estables cuando el modelo se mueve, para que el borde de una banda no salte de un lado a otro sobre una superficie que apenas ha girado. Pixor sombrea en 1 a 4 bandas y mantiene una banda hasta que la superficie ha girado claramente.

5. Líneas

A partir de la profundidad, las normales y los ids de las partes se pueden encontrar la silueta, los bordes interiores entre partes y los pliegues donde una superficie se dobla. Cada uno se puede dibujar de forma distinta: oscuro, de color o nada en absoluto. Pixor trata las líneas de silueta, interiores y de pliegue como tipos separados, cada uno con su propio ajuste de contorno selectivo, las dibuja de un píxel de ancho sin esquinas en L y conserva las partes finas como líneas de un píxel.

6. Paleta

Cada banda de cada material se asigna a un color de una rampa. Puedes dejar que la herramienta construya las rampas a partir de los colores del modelo o imponer una paleta fija compartida por todo el juego. Pixor construye rampas con desplazamiento de tono para cada material, y puede usar una paleta automática, una de las siete integradas, un archivo .hex de Lospec o .gpl de GIMP, o una paleta sacada de una imagen. Escribe PNG indexados y tiene modos de consola para los límites de color de Game Boy, NES, PICO-8, TIC-80 y C64.

7. Limpieza

La última pasada elimina los píxeles sueltos y las líneas que aparecen solo durante un fotograma. Esa es la diferencia entre una hoja que parece hecha a mano y una que parece un vídeo. Pixor hace esta limpieza como una etapa propia.

8. La hoja

Los fotogramas se empaquetan en una hoja, normalmente una fila por acción y lado, con datos que le dicen al motor dónde está cada fotograma.

En Pixor, cada una de estas etapas es un nodo del grafo de Estilo, así que puedes ver y cambiar cualquiera de ellas. Un aspecto que te guste se puede guardar como kit y reutilizar en todo un proyecto. Los presets integrados (clean, selout, retro4, flat y wireframe) son puntos de partida.

Elegir tamaños y direcciones

El tamaño es ante todo una decisión de diseño. Un sprite más pequeño se lee mejor en una multitud y es más barato de retocar; uno más grande muestra más personalidad. Como guía aproximada:

• 16 px va bien para tiles, objetos y personajes muy pequeños.
• 32 px es una altura de personaje habitual en juegos de vista cenital y de plataformas.
• De 48 a 64 px deja espacio para caras, equipo y animación expresiva.

Elige una escala de píxeles por metro que dé a tu personaje principal la altura que quieres, y deja que todo lo demás la siga. Muestra el juego a múltiplos enteros (2×, 3×, 4×) para que cada píxel del arte sea un cuadrado limpio en pantalla. Tamaños de sprite lo trata con más detalle.

En cuanto a direcciones: un lado para los juegos de desplazamiento lateral (voltéalo para el otro sentido), cuatro para los juegos cenitales sencillos, ocho para la mayoría de los juegos de acción y estrategia, dieciséis para cosas que giran con suavidad, como los vehículos.

Animación

Una animación 3D tiene una pose para cada instante. Una animación de pixel art tiene un puñado de fotogramas, y los fotogramas se eligen, no se muestrean de forma uniforme.

Extremos de la pose y duraciones

Los fotogramas que más importan son los extremos: la pose de contacto de una caminata, la cima de un salto, el momento en que golpea una espada. Una buena animación de sprites los conserva y los mantiene un poco más, y descarta los intermedios que no aportan nada a tamaños pequeños. Los fotogramas espaciados por igual suelen parecer flotantes. Los fotogramas inteligentes de Pixor eligen los extremos de las poses y los mantienen.

Menos fotogramas, fotogramas más limpios

Un ciclo de caminar de seis u ocho fotogramas es más que suficiente a 32 píxeles. Más fotogramas significan más ocasiones de parpadeo y más trabajo de retoque. Pixor mide el parpadeo a lo largo de una animación.

Conseguir animación

Puedes animar el modelo tú mismo, usar los clips que traía (o en archivos de clips separados) o retargetear clips de otro rig. Pixor también tiene una biblioteca de movimientos con acciones sencillas (reposo, caminar, correr, saltar, atacar, recibir golpe, morir) y movimientos de objeto (giro, flotar, vaivén, pulso) para accesorios y objetos recogibles.

Retocar a mano

Un render te da fotogramas coherentes. No te da el criterio de un artista. La mayoría de los buenos resultados salen de renderizar una base limpia y luego corregir los fotogramas que importan: una cara más clara, una silueta más fuerte en el fotograma del ataque, un brillo en la hoja.

Aseprite es la herramienta habitual para esto. Pixor exporta archivos .aseprite con una etiqueta por cada acción y lado. Cuando cambias el modelo o los ajustes y vuelves a renderizar, las capas pintadas a mano se quedan en sus fotogramas, así que los retoques no se pierden al volver a hornear. Consulta Aseprite.

Exportar a motores

Los motores quieren fotogramas más metadatos. Destinos habituales:

• Hojas de sprites en PNG con un archivo JSON que enumera los fotogramas, las acciones y los lados.
• SpriteFrames de Godot para proyectos de Godot.
• GIF o APNG para vistas previas, páginas de tienda y publicaciones en redes sociales.
• Mapas de normales y de profundidad si tu motor ilumina sprites 2D.

Pixor exporta todo esto. Como el renderizado es determinista, el mismo modelo y los mismos ajustes siempre dan los mismos píxeles, así que las hojas se pueden reconstruir en cualquier momento sin sorpresas. Consulta Exportaciones y el manual de exportación.

Pruébalo

Pixor es una aplicación de escritorio para Windows y Linux que hace cada uno de los pasos anteriores, sin conexión y sin cuenta. No contiene IA generativa: renderiza tu modelo con los ajustes que eliges. Cuesta $19.99 una sola vez, con todas las actualizaciones gratis. Empieza por Cómo funciona, echa un vistazo a la biblioteca para ver sprites renderizados así, o lee el manual para ver todos los ajustes.