A técnica “Parallax 7” ao estilo Don’t Starve e Diablo

 (simonschreibt.de)
1 pontos por GN⁺ 2023-12-21 | 1 comentários | Compartilhar no WhatsApp
  • Mesmo na era dos jogos 2D, quando 3D real era difícil, desenvolvedores criavam sensação de profundidade com rolagem parallax e o Mode 7 do SNES, e o Perspective Mode de Diablo 2 mostra essa linhagem dentro de um ARPG 2D
  • Don’t Starve cria cenas tridimensionais mesmo tratando arbustos, árvores e inimigos como assets planos, enquanto Diablo 2 combina renderização de chão e deformação de sprites em um jogo 2D de 2000 para produzir uma impressão semelhante
  • O Perspective Mode de Diablo 2 não é um simples efeito de deslocar sprites: ele cria uma deformação em que a tela inteira parece inclinada em direção ao horizonte, revelando ponto de fuga e perspectiva
  • A Blizzard dividiu os sprites DT1 em pedaços de 32×32 px e tentou reduzir lacunas na cena deformando objetos como paredes e cercas de forma diferente conforme o valor de orientation
  • Segundo informações depois publicadas na Gamasutra, o Perspective Mode exigia uma placa gráfica 3D; ele criava profundidade e efeito parallax ao girar, escalar e esticar levemente texturas de mini tiles, e sua implementação levou cerca de 1 a 2 semanas

Técnicas iniciais para fazer 2D parecer 3D

  • Nos anos 1990, os jogos começaram a migrar de 2D para 3D, mas, mesmo antes do 3D real, desenvolvedores usavam vários truques para criar telas que pareciam 3D
  • Um método clássico é o efeito parallax
    • Elementos diferentes se movem em velocidades diferentes conforme a distância, criando sensação de profundidade
    • Moon Patrol, de 1982, produzia uma forte sensação tridimensional apenas fazendo vários planos se moverem em velocidades distintas
  • O Mode 7 da era SNES não era 3D real, mas manipulava texturas de chão para fazê-las parecer uma tela com perspectiva
    • Segundo explicações sobre o GBA, mesmo sem hardware 3D real, era possível simular 3D ajustando valores de escala e deslocamento a cada scanline
    • Essa abordagem se aproxima de uma manipulação de textura que transforma altura em uma impressão de profundidade

Uso de assets planos em Don’t Starve e Diablo 2

  • Hoje é possível renderizar todos os assets em 3D real, mas nem toda cena precisa de modelos tridimensionais
  • Os arbustos, árvores e inimigos de Don’t Starve são assets planos, mas produzem um resultado visualmente bastante atraente
  • Diablo 2 é um ARPG 2D lançado em 2000 e é um exemplo que remete ao mesmo tempo ao parallax de Moon Patrol e à representação de chão ao estilo Mode 7
  • Com as configurações padrão, Diablo 2 é uma tela puramente 2D
    • Não há perspectiva
    • Também não há efeito parallax
  • Ao ativar o Perspective Mode, os mesmos pixels do chão deixam de ficar continuamente cobertos por pilares, e os assets planos passam a parecer se mover dentro de um espaço com profundidade, como em Don’t Starve

Como o Perspective Mode de Diablo 2 foi analisado

  • Como há poucas informações oficiais sobre Diablo 2, o Perspective Mode foi examinado com ferramentas para extrair e analisar arquivos MPQ e DT1
    • MPQ Editor foi usado para extrair arquivos DT1 de MPQs
    • DT1 Tools foi usado para extrair arquivos PCX de DT1
    • DT1 Tutorial foi usado para entender o formato DT1
  • O Perspective Mode não é um efeito simples de mover sprites pouco a pouco
    • Ao comparar a tela com o modo ligado e desligado na mesma posição, todos os elementos mostram uma deformação como se estivessem inclinados na direção do horizonte
    • Ao inserir um padrão xadrez na textura do chão, a deformação fica mais evidente
  • Como a cena é composta por muitos pedaços de sprites, é fácil que surjam lacunas nas bordas durante a deformação
    • Diablo 2 mantém uma tela com perspectiva mesmo encaixando esses pedaços

Pedaços de 32×32 e valores de orientation

  • A Blizzard divide os sprites em partes de 32×32 px
    • Isso parece ser uma otimização para carregar apenas as partes necessárias da imagem
    • Também parece útil ao aplicar deformações no Perspective Mode
  • Ao desenhar linhas em intervalos de 32 px na textura de um pilar, como se fosse um wireframe falso, as linhas verticais parecem apontar para um ponto de fuga nas profundezas do chão
  • Em alguns sprites, a borda inferior parece curvada
    • Considerando apenas perspectiva, essa curvatura não seria necessariamente exigida
    • Essa deformação muda conforme o ângulo de visão do sprite ou a posição do jogador/câmera
  • No formato DT1, um sprite pode ter um valor de orientation
    • Segundo a documentação de Paul Siramy, a forma como um sprite é deformado pode variar conforme o valor de direção
    • Os exemplos incluem direções de parede como Left Wall, Upper Wall e Lower-Left corner
  • Sprites com direções diferentes, como paredes ou cercas, são deformados de maneiras distintas
    • Em alguns casos, as bordas superior e inferior não se curvam, e as linhas de borda parecem apontar para um ponto de fuga à esquerda
    • O jogo parece exagerar um pouco a deformação para evitar lacunas, e os sprites de cerca se encaixam bem entre si
    • Se a mesma parede for definida com um valor de orientation incorreto, surgem lacunas entre os sprites

Informações adicionais publicadas e casos semelhantes

  • O Perspective Mode só podia ser ativado em Diablo 2 em tela cheia D3D
    • Diablo 2 também oferece suporte a Glide e Software Rendering
    • Houve uma tentativa de encontrar mais informações em documentos antigos do DirectX, mas sem resultado
  • Em uma atualização posterior, foi adicionado um link sobre distorção de imagem
    • image aberration parece muito semelhante à distorção vista no Perspective Mode de Diablo 2
    • Não se sabe se os desenvolvedores de Diablo 2 de fato usaram isso
  • Um artigo da Gamasutra compartilhado por Paul Siramy traz uma explicação mais direta de como o Perspective Mode foi implementado
    • Para ativar o Perspective Mode, era necessária uma placa gráfica 3D
    • Diablo II usa uma grade mais detalhada, compondo tiles grandes em formato de diamante a partir de vários tiles pequenos também em formato de diamante
    • A textura de cada mini tile é girada levemente, e a placa de vídeo a aplica sobre dois polígonos; depois ela é esticada vertical e horizontalmente para parecer maior ou menor conforme a posição do personagem
    • Árvores e construções parecem mudar de tamanho ao se aproximar ou afastar, rolam em velocidades diferentes de objetos em primeiro plano e em segundo plano e criam um efeito parallax
    • O leve brilho em alguns objetos é explicado como resultado do bilinear filtering da placa gráfica
    • Personagens, itens e até estruturas como cabanas e torres do Act I são ampliados e reduzidos no Perspective Mode
    • Segundo a explicação de Dave, a sensação de profundidade foi criada com matemática 3D real, escalando e esticando ligeiramente a grade
    • A implementação levou cerca de 1 a 2 semanas e exigiu alinhamento de paredes e tratamento de iluminação; os artistas precisaram recortar novamente os objetos e renderizá-los de outra forma
  • Na atualização 3, Cultures também foi adicionado como um exemplo de uso de truques semelhantes de perspectiva 2D

Leituras relacionadas

1 comentários

 
GN⁺ 2023-12-21
Comentários do Hacker News

  • Era algo que estava na minha lista de curiosidades havia muito tempo, então agora posso riscar. Se alguém souber como o céu de World of Warcraft foi feito e, em menor grau, como o terreno de Warcraft 3 foi feito, seria ótimo compartilhar
    Sempre achei que o terreno de Warcraft 3 parecia usar marching squares de forma inteligente. Tenho curiosidade sobre isso há mais de 10 anos: os recursos como dia/noite/nuvens/lua/estrelas são incríveis, bonitos, leves e parecem ser atualizados a cada dois frames, mas ainda assim ficam muito naturais. Não parece render-to-texture, é suave a ponto de não dar para ver polígonos nem pixels, e o fato de rodar em computadores de 2002 tem algo de maravilha da arte técnica

  • Ainda jogo D2 por causa do pessoal que mantém o Project Diablo 2[1]. O modo de perspectiva fica realmente lindo em 144fps, e é bem difícil voltar aos 30fps do cliente original de LoD
    Até hoje tenho a lembrança e a nostalgia de descer as escadas sinuosas em Pandemonium Fortress e ficar impressionado com aqueles gráficos lindos e talvez até perturbadores
    [1] https://www.projectdiablo2.com/

  • Vejo o Mode 7 essencialmente como algo próximo de um acelerador 3D primitivo. Ele renderiza um único plano de textura com várias transformações aplicadas, então, em princípio, dá para dizer que é tão “3D de verdade” quanto uma GPU moderna, só que muito mais limitado e com menos precisão

    • Não é bem assim. O Mode 7 só permite escalar, mover e rotacionar camadas em 2D. Um caso de uso clássico é a luta contra o Bowser em Super Mario World, em que o Bowser se move e às vezes gira, e entre as rodadas “voa” em algo parecido com 3D por meio de zoom
      Os hacks 3D mais convincentes vinham de processadores auxiliares no cartucho. Jogos como Super Mario Kart usavam um chip extra para calcular rapidamente novos parâmetros de Mode 7 para cada scanline, e ao mudar a escala e a translação em cada linha, mas manter a rotação, as linhas de cima ficam menores e as de baixo maiores, criando a sensação de um 3D inclinado
      Essa técnica de “mudar a escala a cada scanline” é bem diferente de uma GPU moderna e não corresponde a transformações arbitrárias. Por exemplo, com essa técnica só dá para rotacionar o plano em torno do eixo horizontal; não dá para rotacionar em torno do eixo vertical
    • É bem mais próximo de um pipeline fixo

  • Os primórdios da computação gráfica sempre me impressionam. Tenho certeza de que, sem as contribuições da animação inicial e da computação gráfica, tanto software quanto hardware estariam várias gerações atrás do que estão hoje
    Quando olho para a NVIDIA, parece quase uma sorte que a mesma arquitetura tenha servido para as formas iniciais de machine learning e “inteligência artificial”, mas a empresa em si foi construída em cima da computação gráfica

    • Não exatamente. A NVIDIA não previu a IA, mas investiu em computação de propósito geral desde muito cedo. O valor de mercado atual é resultado de ter sustentado essa visão por 20 anos e executado bem
    • Antes disso, coisas como processamento vetorial e SIMD pertenciam mais ao mundo de supercomputadores antigos, como os da Cray

  • O motivo de a borda inferior dos sprites ser tão curvada provavelmente era a necessidade de imitar um ponto de fuga “abaixo” do chão para sprites verticais. Se três estacas se abrem para fora no topo ao girar, a parte de baixo também precisa acompanhar em alguma medida, e uma transformação simples de inclinação teria ficado estranha
    Na cena do 3ds Max isso talvez não tenha ficado evidente porque ela estava posicionada de frente para a viewport e com uma textura quadrada, então a inclinação parecia aceitável. Em um exemplo em movimento, olhando de forma mais realista, faz sentido que as três estacas se afastem em relação ao ponto de vista conforme se aproximam, e o render do 3ds Max não mostra isso muito bem

  • O artigo foca na paralaxe em jogos, mas o efeito de paralaxe tem uma longa história na animação
    A câmera multiplano da Disney e suas predecessoras existem há quase 100 anos. Há vários truques para compor cenas com profundidade usando imagens 2D
    https://en.wikipedia.org/wiki/Multiplane_camera

  • O desenvolvedor parecia bastante satisfeito com o efeito de paralaxe, mas não me lembro de tê-lo usado na prática. Acho que eu já estava acostumado com a configuração padrão e ele só parecia estranho

    • Como os sprites não são renderizados em escala 1:1, isso também piora a qualidade visual. Do ponto de vista atual, em que um pouco de 3D já não impressiona mais, acho até que fica pior
    • A tela parecia mais “próxima”, então dava para ver menos inimigos. Para quem usava magias, isso era um problema
    • Na época, dava mesmo uma sensação de 3D quando o personagem se movia rápido e muitos objetos de oclusão, como paredes ou árvores, passavam pela tela. Também lembro de alguns efeitos de iluminação parecerem melhores em certos renders

  • As pessoas dizem que o 3D desses jogos antigos “não é de verdade”, mas os jogos 3D modernos também acabam sendo exibidos em uma tela plana. Então, nesse sentido fundamental, eles também não seriam 3D de verdade?

    • Não necessariamente. Jogos 3D modernos colocam uma câmera em uma posição arbitrária e usam álgebra linear para achatar o 3D em um espaço de recorte 2D antes da rasterização. Jogos como D2 apenas criam uma ilusão 3D com sprites e offsets, sem sequer terem um sistema de coordenadas 3D de fato. Nesses jogos, o movimento normalmente também fica limitado a dois eixos
      Outra diferença importante é o uso de sprites pré-renderizados. Em jogos como Roller Coaster Tycoon ou Diablo, os modelos eram feitos em computadores dedicados caros e depois renderizados como sprite sheets. Mesmo que os objetos parecessem 3D, geralmente eram distribuídos como assets planos. Alguns jogos modernos de pixel art até incluem normal maps junto com sprites 2D para aplicar iluminação dinâmica
      O efeito de paralaxe em jogos modernos pode ser implementado facilmente apenas renderizando objetos planos dentro de uma cena 3D, mas os pipelines gráficos de 20 anos atrás eram muito diferentes, então era preciso ser muito mais engenhoso para obter efeitos 3D
    • Sim. O artigo chama o plano 3D achatado implementado com Mode 7 de “3D falso”, mas o resultado parece quase idêntico ao de um polígono com uma única textura mapeada. A diferença é só que a “câmera” permite variar yaw e pitch, mas não roll
      Isso é apenas uma limitação dos tipos de situações 3D que o sistema Mode 7 consegue renderizar, não significa que o que ele renderiza seja mais falso. No fim, toda forma de renderização 3D manipula a grade de pixels 2D da tela para criar a ilusão de estar vendo objetos virtuais