HD-2D: Pixel Art em Cenário 3D (o Estilo de Octopath)

HD-2D é o estilo visual que a Square Enix popularizou com Octopath Traveler (2018): personagens em pixel art 2D vivendo num cenário 3D, com luz e sombra em tempo real, profundidade de campo forte que deixa o cenário com cara de maquete, bloom nas fontes de luz e vinheta nas bordas. A combinação funciona porque mantém o charme do sprite e entrega a profundidade e a atmosfera do 3D.

Aqui você entende cada camada que forma o estilo, monta um protótipo com um sprite do Aseprite numa cena 3D simples (com o passo a passo na Unity e no Godot) e vê os desafios que fazem esse visual ser caro para um time pequeno.

HD-2D: o que define o estilo de Octopath Traveler

Uma nota sobre o nome: a Square Enix registrou pedidos de marca para os termos "HD-2D" e "HD2D" na Europa e no Japão em janeiro de 2019. A marca cobre o nome, não a estética: qualquer estúdio pode fazer pixel art em cenário 3D, mas não deve chamar o próprio jogo de HD-2D.

Além de Octopath Traveler, a empresa usa o rótulo em Octopath Traveler II, Triangle Strategy, no remake de Live A Live e nos remakes HD-2D de Dragon Quest (III, e I e II). Octopath Traveler foi feito na Unreal Engine 4, como contou o produtor Masashi Takahashi no material de divulgação da Epic Games.

Os elementos que definem o visual:

1. Personagens e objetos-chave em pixel art. Sprites com resolução baixa, poucos frames, filtro sem suavização.
2. Cenário modelado em 3D, muitas vezes com texturas também em pixel art ou de resolução baixa.
3. Luz e sombra em tempo real. Tochas, sol, janelas. As sombras dos sprites caem no chão 3D.
4. Profundidade de campo. Primeiro plano e fundo desfocados, com o meio nítido. Junto com câmera inclinada de cima, dá o efeito de miniatura (tilt-shift).
5. Pós-processamento. Bloom nas luzes, vinheta nas bordas, correção de cor.

Nenhum desses elementos é novo sozinho. O estilo vem de combinar todos, com cuidado para o 3D não engolir o pixel art.

Sprites 2D em mundo 3D: billboard e escala

O sprite é um plano (um quad) na cena 3D com a textura do personagem. Duas decisões técnicas:

Billboard. O plano precisa ficar virado para a câmera, senão some quando a câmera gira. O billboard mais usado nesse estilo gira só no eixo vertical (Y): o sprite acompanha a câmera para os lados, mas não deita quando a câmera olha de cima. Isso mantém o personagem "de pé" no chão.

Escala. Defina quantos pixels do sprite equivalem a uma unidade do mundo 3D. Se o personagem tem 32 pixels de altura e deve medir 1,6 unidade, cada pixel vale 0,05 unidade. Use a mesma escala para todos os sprites, para os pixels terem o mesmo tamanho na tela. Misturar sprites com escalas diferentes é o erro que mais denuncia o efeito.

Para entender a base de tamanho de sprite e paleta antes disso, o guia completo de pixel art para jogos cobre o essencial.

Iluminação, sombras e profundidade de campo

Sprites recebendo luz. Para o personagem ficar mais claro perto da tocha, o material do sprite precisa ser iluminado (lit), não "unlit". Com alpha cutout (recorte por transparência), o sprite também projeta sombra no chão.

Sombras. A sombra de um plano fino visto de lado some. Truques usados: sombra projetada só com luz vindo de cima, ou uma "blob shadow" (uma elipse escura no chão sob o personagem), que funciona bem em pixel art.

Profundidade de campo. É o efeito que mais vende o estilo. Configure o foco na distância do personagem, com desfoque forte no primeiro plano e no fundo. Combinado com uma câmera inclinada para baixo e campo de visão estreito (lente "teleobjetiva"), o cenário parece uma maquete fotografada de perto.

Pós-processamento: bloom, tilt-shift, vinheta

• Bloom: faz as áreas muito claras (fogo, janelas, magia) brilharem para fora. Use limiar alto para só as luzes fortes brilharem; se o personagem inteiro brilha, o pixel art borra.
• Tilt-shift: é o nome do efeito de miniatura; na prática, é a profundidade de campo com faixa de foco estreita e horizontal.
• Vinheta: escurece as bordas da tela e puxa o olho para o centro.
• Correção de cor: um ajuste de temperatura por cena (quente na vila, frio na caverna) unifica sprites e cenário.

Esses efeitos ficam na câmera, não nos sprites. A arte continua sendo pixel art limpa.

Entender as camadas é a parte fácil. Montar o efeito de verdade junta quatro áreas: pixel art, modelagem, configuração de engine e pós-processamento. Cada uma tem as próprias armadilhas, e é exatamente nessa integração que quem estuda sozinho costuma travar por dias num detalhe de filtro ou de escala.

Prototipando: sprite do Aseprite em cena 3D simples

1. O sprite no Aseprite. Canvas 32x48, personagem de pé, com os pés tocando a linha de baixo (pivô nos pés). Uma animação parada de 2 a 4 frames. Exporte em File > Export > Export Sprite Sheet (Ctrl+E), com Sheet Type Horizontal Strip e sem Trim, para todos os frames terem o mesmo tamanho.

2. O cenário no Blender. A versão disponível no site oficial em outubro de 2026 é o Blender 5.2.2 LTS. Monte blocos simples: um chão, algumas casas com cubos e telhados com prismas, uma árvore com cilindro e esfera low poly. Para texturas em pixel art, no Shader Editor, mude a interpolação do nó Image Texture de Linear para Closest, que mantém os pixels nítidos. Exporte em glTF 2.0 (File > Export > glTF 2.0), que Unity (com o pacote glTFast) e Godot leem bem. O post sobre Blender para desenvolvimento de jogos cobre modelagem e exportação com mais detalhe.

3a. Na Unity (URP 3D). Importe a sheet com Texture Type Sprite (2D and UI) ou Default, Filter Mode Point (no filter) e Compression None. Crie um Quad (GameObject > 3D Object > Quad) e um material Universal Render Pipeline/Lit com a textura, Alpha Clipping ligado e threshold em 0,5. O Quad do personagem recebe luz e projeta sombra. Para o efeito de câmera, crie um Global Volume (GameObject > Volume > Global Volume), adicione os overrides Bloom, Depth Of Field (modo Bokeh, foco na distância do personagem) e Vignette, e ligue a opção Post Processing na câmera. O script abaixo faz o billboard só no eixo vertical. Arquivo SpriteBillboard.cs:

using UnityEngine;

public class SpriteBillboard : MonoBehaviour
{
    [SerializeField] private bool lockVertical = true;

    private Camera mainCamera;

    private void Start()
    {
        mainCamera = Camera.main;
    }

    private void LateUpdate()
    {
        if (mainCamera == null)
        {
            return;
        }

        Vector3 forward = mainCamera.transform.forward;

        if (lockVertical)
        {
            forward.y = 0f;
            if (forward.sqrMagnitude < 0.0001f)
            {
                return;
            }
            forward.Normalize();
        }

        transform.rotation = Quaternion.LookRotation(forward, Vector3.up);
    }
}

O Quad padrão da Unity é visível pelo lado -Z; alinhando o eixo Z do Quad com a direção da câmera, a face visível fica virada para ela. Rodar em LateUpdate garante que a câmera já se moveu naquele frame.

3b. No Godot 4. Crie um Sprite3D com a textura do personagem. No Inspector, em Flags, defina Billboard como Y-Billboard, ligue Shaded para receber luz e escolha Alpha Cut Discard para o recorte projetar sombra. No mesmo grupo Flags, defina Texture Filter como Nearest. O Pixel Size define a escala (0,05 para o exemplo de 32 pixels em 1,6 unidade). Para animação, use AnimatedSprite3D. Os efeitos ficam num WorldEnvironment (Glow faz o papel do bloom) e no recurso Camera Attributes da câmera, que tem desfoque de distância perto e longe para a profundidade de campo. A vinheta pede um shader simples de tela.

Desafios: sprites de 8 direções e câmera

Direções do personagem. Se a câmera gira livre ao redor do personagem, ele precisa de sprites para várias direções (4 ou 8), escolhidos conforme o ângulo entre a câmera e para onde ele olha. Oito direções multiplicam o trabalho de animação. Por isso muitos jogos nesse estilo usam câmera com rotação limitada e personagens com poucas direções.

Ângulo de câmera. Câmera muito de cima achata o sprite (ele é um plano vertical). Câmera muito baixa mostra que o sprite não tem volume. Teste o ângulo cedo e mantenha numa faixa estreita.

Consistência de resolução. Textura do cenário com muito mais resolução que o sprite faz o personagem parecer recortado e colado. Mantenha as texturas do cenário em resolução próxima (ou com detalhe controlado).

Sprites e objetos 3D no mesmo espaço. Um sprite atravessando uma parede 3D ou cortado por uma mesa denuncia o truque. Ajuste colisores e a ordem de desenho.

Desempenho. Profundidade de campo e bloom custam em hardware fraco e celular. Teste no alvo.

Quando NÃO usar: escopo de jogo solo

HD-2D é caro. Exige pixel art bem feita, modelagem 3D, iluminação de cena e pós-processamento afinado, cada um com o mesmo cuidado. Para quem trabalha sozinho, vale perguntar:

• O jogo precisa de câmera 3D, ou a profundidade pode ser simulada com parallax em 2D?
• Quantas cenas existem? Cada cena 3D iluminada é um trabalho de cenografia.
• Você domina as duas pontas (pixel art e 3D), ou uma delas vai segurar o projeto?

Se a resposta pende para "não", um jogo 2D com camadas de parallax, luz 2D e um pouco de pós-processamento entrega boa parte da atmosfera com muito menos custo. O post sobre arte 2D ou 3D para jogo indie ajuda a fazer essa escolha com calma.

O próximo passo: monte o protótipo deste post com uma cena só, um personagem de 32x48 com animação parada e uma tocha. Ajuste profundidade de campo e bloom até o personagem continuar nítido e o cenário parecer maquete. Se em uma tarde você chegar nesse ponto, o estilo cabe no seu projeto; se não, você descobriu isso antes de investir meses.