El pipeline 3D de Dead Cells, paso a paso

El pipeline, como lo describió su artista

En enero de 2018 Thomas Vasseur, durante un año el único artista de Dead Cells en Motion Twin, escribió “Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells” para Gamasutra, hoy Game Developer. Los pasos eran:

1. Primero, una hoja de modelo en pixel art. Dibujó una hoja 2D básica del personaje y después construyó el personaje y su esqueleto en 3D encima, en 3ds Max, y lo exportó como FBX.
2. Modelos muy simples. Con un personaje de solo unos 50 píxeles de alto en el juego, no merecía la pena dedicar tiempo a un modelo 3D detallado.
3. Renderizar pequeño, sin antialiasing. Un programa propio renderizaba la malla a un tamaño muy pequeño y sin antialiasing, lo que da el aspecto pixelado.
4. Animar con fotogramas clave, como en 2D. Los ataques se hacían de pose en pose: primero se ajustaban los tiempos de las claves con el menor número posible de fotogramas, y solo después se añadían intermedios antes o después de una clave, nunca entre las claves.
5. Exportar cada fotograma con un mapa de normales. Cada fotograma se guardaba como PNG con su mapa de normales, para que el juego pudiera iluminarlo con un shader toon sencillo.

Por qué funcionó

El deep dive explica los motivos con claridad. No hacía falta redibujar cada fotograma. Una misma animación se podía reutilizar en varios modelos. Una pieza de armadura se añadía acoplándola al modelo 3D, no redibujando cada fotograma en que aparecía. Se reutilizaban modelos y piezas antiguos para crear monstruos nuevos, lo que él llama el truco más útil del flujo de trabajo, con cientos de horas ahorradas.

Sobre todo, repetir una toma salía barato. Cuando los programadores del juego cambiaban el tiempo de un ataque o ralentizaban un arma, él movía las claves en la línea de tiempo y volvía a renderizar. Con animación dibujada a mano, el mismo cambio exigiría redibujar, y a menudo simplemente no se hacía.

Haz lo mismo con Pixor

El renderizador de Dead Cells era propio y nunca se publicó. Pixor es una app aparte que cubre los mismos pasos para cualquier modelo que tengas, rigged en Blender, descargado de Mixamo o tomado de la biblioteca gratuita.

Cámara lateral. En el paso Escena, haz clic en la cámara Sur en el Esquema y pon Juego en Plataformas: una vista lateral mirando a la derecha, un solo lado, espejado para la izquierda. Sube el ancho y el alto a 64 o 96 píxeles para un personaje con arma; la guía de tamaños de sprite ayuda a elegir.

Renderizar pequeño y nítido. Pixor dibuja cada fotograma sobre la propia cuadrícula de píxeles del sprite, sin bordes con antialiasing por defecto (--aa 0) y con colores limitados a las rampas de la paleta, una sola escala de píxeles por metro para todos los fotogramas y un pivote fijo en un píxel, para que el personaje no se desplace.

Un aspecto, no solo un render pequeño. Dead Cells se apoyaba en su iluminación y en un shader toon. En el paso Estilo, el preset selout da bandas de luz, rampas con desplazamiento de tono y contornos selectivos, con bandas que se mantienen estables de un fotograma a otro para que una carrera no parpadee.

De pose en pose. En el paso Asset, Fotogramas conservados del nodo Sprites conserva ese número de fotogramas inteligentes, elegidos entre las poses del clip, cada uno mantenido hasta el siguiente. Ese es el corte de pose en pose: se quedan los extremos del movimiento y se van los intermedios suaves.

Mapas de normales. Añade el mapa de normales a la exportación (--export normal), o el kit de luz (--export light-kit), que ilumina el sprite a partir de sus normales en Godot, Unity o GameMaker mientras cada píxel iluminado sigue en su propia rampa de color. Consulta la iluminación fiel a la paleta.

Armaduras y armas. Un accesorio se une a un hueso: una espada en una mano, un casco en la cabeza (--prop sword.glb:hand.r). Todos los clips lo llevan.

Reutilizar animaciones. Los clips de otros archivos con el mismo esqueleto se añaden con --anim, o como archivos llamados model@clip.fbx junto al modelo. Los clips de la biblioteca de movimiento, lib:idle, lib:walk, lib:run, lib:attack y el resto, están ajustados a un esqueleto humanoide, así que un personaje nuevo tiene carrera y ataque antes de que animes nada.

Desde la línea de comandos

El caballero de arriba, como lo haría un script de build:

pxr render knight.glb --preset selout --camera platformer --size 96 \
  --clip lib:run --clip lib:attack --smart-frames 8 --export png,json,normal

Y la repetición de toma: cambia las claves del clip en tu herramienta 3D, o aquí el número de fotogramas, y ejecuta la misma línea otra vez. Cada fotograma sale a la misma escala y con el mismo pivote, así que la hoja nueva encaja donde estaba la anterior. La misma línea sobre una carpeta de modelos (pxr batch models/ --camera platformer --size 96) da a todo un reparto el mismo aspecto.

Después, retoca

Los fotogramas de Dead Cells se terminaban en 3D. Si quieres detalles dibujados a mano encima, Pixor escribe archivos .aseprite con una etiqueta por acción, y un nuevo render conserva las capas que pintaste; consulta retocar y volver a hornear. La historia de la técnica, de los años 90 a hoy, está en sprites prerrenderizados.