La técnica "Parallax 7" al estilo Don’t Starve y Diablo

 (simonschreibt.de)
1 puntos por GN⁺ 2023-12-21 | 1 comentarios | Compartir por WhatsApp
  • Incluso en la era de los juegos 2D, cuando el 3D real era difícil, los desarrolladores creaban sensación de profundidad con parallax scrolling y el Mode 7 de SNES, y el Perspective Mode de Diablo 2 muestra ese linaje dentro de un ARPG 2D
  • Don’t Starve construye escenas con sensación tridimensional usando arbustos, árboles y enemigos como assets planos, y Diablo 2 produce una impresión similar en un juego 2D del año 2000 al combinar renderizado del suelo y deformación de sprites
  • El Perspective Mode de Diablo 2 no es un simple efecto de mover sprites, sino que crea una deformación que hace que toda la pantalla parezca inclinada hacia el horizonte, revelando punto de fuga y perspectiva
  • Blizzard dividió los sprites DT1 en fragmentos de 32×32 px y, según el valor de orientation, deformó de forma distinta objetos como muros y cercas para reducir los huecos en la escena
  • Según información publicada después en Gamasutra, Perspective Mode requería una tarjeta gráfica 3D, y generaba profundidad y efecto de parallax rotando, escalando y estirando ligeramente las texturas de mini tiles; su implementación tomó alrededor de 1 a 2 semanas

Primeras técnicas para hacer que 2D se viera como 3D

  • En los años 90, los juegos empezaban a pasar de 2D a 3D, pero incluso antes del 3D real los desarrolladores usaban varios trucos para crear pantallas que parecían 3D
  • Uno de los métodos más representativos era el efecto parallax
    • Según la distancia, algunos elementos se movían rápido y otros más lento para crear profundidad
    • Moon Patrol, de 1982, lograba una fuerte sensación tridimensional solo con varios planos moviéndose a distinta velocidad
  • El Mode 7 de la era SNES no era 3D real, pero manipulaba la textura del suelo para que pareciera una vista con perspectiva
    • Según la explicación de GBA, sin hardware 3D real era posible simular 3D manipulando en cada scanline los valores de escala y desplazamiento
    • Este método se parece más a una manipulación de textura que convierte la altura en sensación de profundidad

Cómo Don’t Starve y Diablo 2 aprovechan assets planos

  • Hoy en día se puede renderizar todo asset en 3D real, pero no todas las escenas necesitan modelos tridimensionales
  • Los arbustos, árboles y enemigos de Don’t Starve son assets planos, pero aun así producen un resultado visual suficientemente atractivo
  • Diablo 2, un ARPG 2D lanzado en 2000, es un caso que recuerda tanto al parallax al estilo Moon Patrol como a la representación de suelo al estilo Mode 7
  • Diablo 2, con la configuración básica, muestra una pantalla puramente 2D
    • No hay perspectiva
    • Tampoco hay efecto parallax
  • Al activar Perspective Mode, los mismos píxeles del suelo ya no quedan continuamente cubiertos por las columnas, y como en Don’t Starve los assets planos parecen moverse dentro de un espacio con profundidad

Cómo se analizó el Perspective Mode de Diablo 2

  • Como casi no había información oficial sobre Diablo 2, se examinó Perspective Mode usando herramientas para extraer y analizar archivos MPQ y DT1
    • MPQ Editor se usó para extraer archivos DT1 desde MPQ
    • DT1 Tools se usó para extraer archivos PCX desde DT1
    • DT1 Tutorial se usó para comprender el formato DT1
  • Perspective Mode no es un efecto simple de desplazar un poco los sprites
    • Al comparar la pantalla con el modo activado y desactivado desde la misma posición, todos los elementos muestran una deformación como si se inclinaran hacia el horizonte
    • Si se pone un patrón cuadriculado en la textura del suelo, la deformación se vuelve más evidente
  • Como la escena está compuesta por muchos fragmentos de sprite, durante la deformación es fácil que aparezcan huecos en los bordes
    • Diablo 2 logra mantener la sensación de perspectiva mientras encaja esos fragmentos entre sí

Fragmentos de 32×32 y valor de orientation

  • Blizzard dividió los sprites en secciones de 32×32 px
    • Parece una optimización para cargar solo la parte de imagen necesaria
    • También parece útil al aplicar deformaciones en Perspective Mode
  • Si se dibujan líneas cada 32 px sobre la textura de una columna, como si fuera un wireframe falso, las líneas verticales parecen apuntar a un punto de fuga profundo bajo el suelo
  • En algunos sprites, el borde inferior parece curvado
    • Si solo se considera la perspectiva, esa curvatura no sería estrictamente necesaria
    • Esa deformación cambia según el ángulo con el que se mira el sprite o según la posición del jugador o la cámara
  • En el formato DT1, los sprites pueden tener un valor de orientation
    • Según la documentación de Paul Siramy, la forma de deformar el sprite puede variar según ese valor de dirección
    • Los ejemplos incluyen direcciones de muros como Left Wall, Upper Wall y Lower-Left corner
  • Los sprites con distinta orientación, como muros o cercas, se deforman de maneras diferentes
    • En algunos casos, los bordes superior e inferior no se curvan y las líneas del borde parecen dirigirse al punto de fuga de la izquierda
    • El juego parece exagerar un poco la deformación para evitar huecos, y los sprites de cercas encajan bien entre sí
    • Si el mismo muro se asigna con un valor de orientation incorrecto, aparecen huecos entre sprites

Información adicional publicada y casos similares

  • Perspective Mode solo podía activarse en Diablo 2 cuando estaba en D3D fullscreen
    • Diablo 2 también soportaba Glide y Software Rendering
    • Se intentó buscar más información en documentación antigua de DirectX, pero sin resultados
  • En una actualización posterior se añadió un enlace relacionado con la distorsión de imagen
    • image aberration se parece mucho a la distorsión visible en el Perspective Mode de Diablo 2
    • No se sabe si los desarrolladores de Diablo 2 realmente usaron eso
  • Un artículo de Gamasutra compartido por Paul Siramy explica de forma más directa cómo se implementó Perspective Mode
    • Para activar Perspective Mode hacía falta una tarjeta gráfica 3D
    • Diablo II usaba una cuadrícula más detallada componiendo tiles grandes en forma de diamante a partir de varios mini tiles también en forma de diamante
    • La textura de cada mini tile se rotaba ligeramente, la tarjeta de video la pintaba sobre dos polígonos y luego se estiraba vertical y horizontalmente para que pareciera más grande o más pequeña según la posición del personaje
    • Los árboles y edificios parecían cambiar de tamaño al acercarse o alejarse, y se desplazaban a distinta velocidad que los objetos del primer plano y del fondo, creando un efecto parallax
    • El ligero parpadeo de algunos objetos se explica como resultado del bilinear filtering de la tarjeta gráfica
    • En Perspective Mode también se ampliaban y reducían personajes, ítems y estructuras como las cabañas y torres del Act I
    • Según la explicación de Dave, se usaron auténticas matemáticas 3D para escalar y estirar un poco la cuadrícula y así generar profundidad
    • La implementación tomó alrededor de 1 a 2 semanas, y requirió alinear muros y manejar iluminación; los artistas también tuvieron que recortar de nuevo objetos y renderizarlos de otra forma
  • En la actualización 3 también se añadió Cultures como otro caso que usó un truco similar de perspectiva 2D

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-12-21
Comentarios en Hacker News

  • Era algo que tenía en mi lista de curiosidades desde hace tiempo, así que por fin puedo tacharlo. Si alguien sabe cómo hicieron el cielo de World of Warcraft y, en menor medida, cómo hicieron el terreno de Warcraft 3, me encantaría saberlo
    Siempre he pensado que el terreno de Warcraft 3 usa marching squares de forma ingeniosa. Llevo más de 10 años con la duda: tiene funciones increíbles como día/noche/nubes/luna/estrellas, se ve hermoso, ligero y parece actualizarse un cuadro sí y otro no, pero aun así se siente muy natural. No parece render-to-texture, es tan suave que no se notan polígonos ni píxeles, y el hecho de que corriera en PCs de 2002 tiene algo de maravilla del arte técnico

  • Sigo jugando D2 gracias a la gente que mantiene Project Diablo 2[1]. El modo de perspectiva se ve realmente hermoso a 144 fps, y cuesta bastante volver a los 30 fps del cliente original de LoD
    Todavía conservo el recuerdo y la nostalgia de bajar las escaleras retorcidas en Pandemonium Fortress y quedar impactado por esos gráficos hermosos, o quizá sería más correcto decir inquietantes
    [1] https://www.projectdiablo2.com/

  • Yo diría que Mode 7 es, en esencia, más parecido a un acelerador 3D primitivo. Renderiza un solo plano de textura con varias transformaciones aplicadas, así que en principio es tan “3D real” como una GPU moderna, solo que muy limitado y con poca precisión

    • No exactamente. Mode 7 solo puede escalar, desplazar y rotar capas en 2D. Por ejemplo, la pelea contra Bowser en Super Mario World es un caso de uso típico: Bowser se mueve y a veces rota, y entre rondas “vuela” con zoom para parecer “3D”
      Los hacks 3D más convincentes venían del coprocesador del cartucho. Juegos como Super Mario Kart usaban un chip adicional para calcular rápidamente nuevos parámetros de Mode 7 para cada scanline, y si cambiabas el zoom y el desplazamiento en cada línea pero dejabas fija la rotación, las líneas de arriba se veían más pequeñas y las de abajo más grandes, dando la sensación de un plano 3D inclinado
      Esta técnica de “cambiar la escala por scanline” es muy distinta de una GPU moderna y tampoco permite transformaciones arbitrarias. Por ejemplo, con ella solo puedes rotar el plano respecto al eje horizontal, no al vertical
    • En realidad se parece más a un pipeline fijo

  • La gráfica por computadora temprana siempre me asombra. Estoy convencido de que, sin las contribuciones de la animación y la computación gráfica tempranas, tanto el software como el hardware estarían varias generaciones más atrás de donde están hoy
    Si ves a NVIDIA, fue casi una casualidad que la misma arquitectura resultara útil para formas tempranas de machine learning e “inteligencia artificial”, pero la empresa en sí se construyó sobre la computación gráfica

    • No exactamente. NVIDIA no previó la IA, pero apostó por el cómputo de propósito general desde muy temprano. Su valor de mercado actual es el resultado de empujar esa visión durante 20 años y ejecutarla bien
    • Antes de eso, áreas como el procesamiento vectorial y SIMD eran más bien territorio de supercomputadoras como las viejas Cray

  • La razón por la que el borde inferior del sprite está tan curvado parece ser que hacía falta para imitar el punto de fuga “debajo” del suelo para sprites verticales. Si tres postes se abren hacia afuera en la parte superior mientras rotan, la parte inferior también debería acompañar un poco, y una simple transformación de inclinación se habría visto rara
    En la escena de 3ds Max, como está puesta de frente en el viewport y además usa una textura cuadrada, probablemente la inclinación se ve aceptable y por eso la diferencia no resalta tanto. En el ejemplo en movimiento, si lo miras de forma más realista, es correcto que los tres postes se separen respecto al punto de vista a medida que se acercan, y el render de 3ds Max no logra mostrar eso bien

  • Este artículo se enfoca en el paralaje en juegos, pero el efecto de paralaje tiene una larga historia en la animación
    La cámara multiplano de Disney y sus predecesoras existen desde hace casi 100 años. Hay muchos trucos para construir escenas con profundidad usando solo imágenes 2D
    https://en.wikipedia.org/wiki/Multiplane_camera

  • El desarrollador parecía bastante satisfecho con el efecto de paralaje, pero no recuerdo haberlo usado realmente. Supongo que, como ya estaba acostumbrado a la configuración por defecto, solo me parecía raro

    • Como los sprites no se renderizaban a escala 1:1, también empeoraba la calidad visual. Desde una perspectiva moderna, donde un poco de 3D ya no sorprende a nadie, creo que incluso se ve peor
    • La pantalla se sentía más “cercana”, así que se veían menos enemigos. Para quien lanzaba hechizos, eso era un problema
    • En ese momento sí daba cierta sensación de 3D cuando el personaje se movía rápido y pasaban muchos objetos que tapaban la vista, como muros o árboles. También recuerdo que algunos renders hacían que la iluminación se viera mejor

  • A este 3D de juegos viejos se le llama “no real”, pero los juegos 3D modernos al final también se muestran en una pantalla plana. Entonces, ¿no serían en el fondo no realmente 3D en el mismo sentido?

    • No necesariamente. Los juegos 3D modernos ponen una cámara en una posición arbitraria y usan álgebra lineal para aplanar el 3D en un espacio de recorte 2D antes de rasterizar. Juegos como D2 solo crean una ilusión 3D con sprites y offsets, y de entrada no tienen un sistema de coordenadas 3D. En estos juegos, además, el movimiento suele estar limitado a dos ejes
      Otra diferencia importante son los sprites prerenderizados. En juegos como Roller Coaster Tycoon o Diablo, los modelos se hacían en computadoras dedicadas y caras, y luego se renderizaban como sprite sheets. Aunque los objetos parecieran 3D, normalmente se distribuían como assets planos. Algunos juegos modernos de pixel art incluso incluyen normal maps junto con sprites 2D para aplicar iluminación dinámica
      El efecto de paralaje en juegos modernos puede implementarse fácilmente solo renderizando objetos planos dentro de una escena 3D, pero los pipelines gráficos de hace 20 años eran muy distintos, así que había que ser mucho más ingenioso para lograr efectos 3D
    • Sí. En el artículo llaman “3D falso” al plano 3D plano implementado con Mode 7, pero el resultado se ve casi igual que un solo polígono con textura aplicada. La diferencia es más bien que la “cámara” solo permite cambios de yaw y pitch, pero no roll
      Eso solo es una limitación de las situaciones 3D que el sistema de Mode 7 puede renderizar; no significa que lo que sí renderiza sea más falso. Al final, todos los métodos de renderizado 3D crean la ilusión de ver objetos virtuales manipulando la cuadrícula de píxeles 2D de la pantalla