Paper Doll Sprite: Personagem Modular que Troca Roupa e Arma

Paper doll sprite é o personagem montado em camadas: um corpo base e, por cima, camadas separadas de roupa, cabelo e arma, todas com o mesmo canvas e os mesmos frames. A engine empilha as camadas e troca só a que mudou quando o jogador equipa um item. A conta que justifica o trabalho: com 5 armaduras, 4 armas e 3 cabelos, desenhar cada combinação completa dá 60 personagens; em camadas, são 12 conjuntos de sprite.

Este tutorial mostra como planejar as camadas, desenhar no Aseprite respeitando a regra que faz tudo encaixar, resolver a ordem da arma por direção, exportar cada camada como sprite sheet e montar o personagem na engine.

Paper doll sprite: o que é e quando vale a pena

O nome vem das bonecas de papel com roupas recortadas que se encaixam por cima do corpo. No jogo, cada "recorte" é uma sprite sheet completa, com todas as animações do personagem, mas contendo só aquela peça.

Vale a pena quando:

• o jogador troca equipamento visível com frequência (RPG, jogo de sobrevivência, criação de personagem);
• existem muitas variações por categoria;
• o personagem tem várias animações, e cada combinação multiplicaria todas elas;
• você quer criar personagens não jogáveis variados combinando peças.

O custo: planejamento antes de desenhar, cuidado com sobreposição (oclusão) e um script na engine para sincronizar. Se você ainda não domina personagem em pixel art, faça primeiro um personagem inteiro com o post sobre criar personagem em pixel art. O paper doll é uma técnica de produção, não de desenho.

Planejando o corpo base e as camadas

Antes de abrir o Aseprite, escreva a lista de camadas, de baixo para cima. Um exemplo para personagem top-down ou de plataforma:

Decisões que você toma aqui:

• Corpo neutro. O corpo base precisa funcionar sob qualquer roupa. Volume de corpo médio, sem detalhes que vazam pela armadura.
• Roupa justa ou larga. Roupa muito larga (capa, saia longa) cobre áreas que outras camadas também desenham, o que gera conflito. Defina uma "silhueta máxima" por camada.
• Cabelo e capacete. Ou o capacete esconde o cabelo inteiro (e o jogo desliga a camada cabelo), ou você desenha uma versão "cabelo curto sob capacete". Decida agora.
• Paleta por camada. Reserve cores para cada tipo de peça. Se a armadura usa a mesma cor da pele, a leitura confunde.

Mesmo canvas, mesmos frames: regra de ouro

Tudo que funciona no paper doll depende de uma regra: todas as camadas têm exatamente o mesmo tamanho de canvas, o mesmo número de frames, na mesma ordem, com as mesmas tags e as mesmas durações.

Se o corpo tem a animação correr com 6 frames de 100 ms começando no frame 5, a camada da armadura também tem correr com 6 frames de 100 ms começando no frame 5. Mesmo que a armadura não mude em algum frame, o frame existe.

No Aseprite, isso é natural: todas as camadas do mesmo arquivo compartilham a mesma timeline. Por isso, a forma mais segura de trabalhar é um arquivo por personagem, com o corpo e todas as variações de equipamento como camadas desse arquivo. Uma armadura nova é uma camada nova (torso_couro, torso_ferro), desenhada em cima dos mesmos frames.

Monte assim:

1. Desenhe e anime o corpo base completo primeiro (todas as tags: parado, correr, atacar, pular). Ajuste duração de cada frame com Frame Properties (botão direito no número do frame).
2. Trave a camada do corpo (cadeado na timeline) para não pintar nela por acidente.
3. Crie uma camada nova para cada peça. Para organizar dezenas de peças, use grupos de camadas (Layer > New > New Group): grupo torso, grupo arma.

Se você ainda se perde na timeline, o post sobre camadas e timeline no Aseprite explica cels, grupos e o painel de frames.

Desenhando roupa e armadura por camada no Aseprite

Com o corpo animado e travado:

1. Selecione a camada da peça e o frame 1 da tag parado.
2. Ligue o onion skin (F3) para ver os frames vizinhos e manter o movimento da peça coerente com o do corpo.
3. Desenhe a peça por cima do corpo, sem apagar nada do corpo. A camada da peça cobre o corpo onde precisa.
4. Avance frame a frame. Em cada frame, a peça acompanha o corpo. Uma técnica que economiza tempo: desenhe a peça no frame-chave de cada animação, copie para os frames seguintes (Ctrl+C e Ctrl+V na cel) e ajuste só o que mexeu.
5. Esconda as outras peças enquanto desenha, mas teste combinações de vez em quando (armadura de ferro com cabelo longo, por exemplo) para pegar conflitos cedo.

O contorno. Cuidado com o contorno onde a peça encontra o corpo. Se a armadura tem contorno escuro de 1 pixel e o braço do corpo também, a junção pode ficar com contorno dobrado. Uma solução comum: a peça desenha o próprio contorno e cobre o contorno do corpo naquele trecho.

Arma e mão: ordem de desenho por direção

A arma é a camada mais difícil, porque muda de profundidade conforme a direção:

• Personagem virado para a direita, segurando com a mão direita (do personagem): a mão da arma fica do lado de quem olha, e a arma fica na frente do corpo.
• Virado para a esquerda: se você espelha o sprite (flip), a arma vai junto e continua na frente. Se o jogo tem sprites desenhados para cada lado, a mão da arma pode ficar atrás do corpo.
• Top-down, olhando para cima: a arma geralmente fica atrás do corpo.
• Top-down, olhando para baixo: na frente.

Por isso o exemplo de camadas tem arma_tras e arma_frente. Em cada frame, a arma é desenhada em uma das duas camadas, e a outra fica vazia naquele frame.

E a mão? Se a mão do corpo aparece por cima do cabo, a camada da arma precisa ter um "recorte" onde a mão fica, ou a mão é desenhada também na camada arma_frente. A solução mais simples, usada em muitos jogos: a mão faz parte da camada da arma.

Até aqui foi arte. Fazer as camadas trocarem dentro do jogo, sincronizadas, sem tremer e sem a arma atravessar o corpo na hora errada, já é arte e engine trabalhando juntas. Esse é o tipo de integração em que quem aprende sozinho costuma travar, porque o erro pode estar no desenho, na exportação ou no script.

Exportando cada camada como sprite sheet separada

Cada peça vira uma sprite sheet própria, com o mesmo layout da sheet do corpo.

Pela janela do Aseprite: File > Export > Export Sprite Sheet. Na seção Sprite, em Layers, escolha a camada da peça. Use o mesmo Sheet Type e as mesmas opções de bordas para todas as camadas (desligue o Trim, para todos os frames manterem o mesmo tamanho e a mesma posição). Em Output, marque JSON Data com Tags. Repita para cada camada. Se quiser tudo de uma vez, a opção Split Layers separa as camadas na saída.

Pela linha de comando, mais prático com muitas peças. A opção --layer exporta só a camada indicada (deixe as camadas visíveis antes de exportar):

aseprite -b --layer "corpo" heroi.aseprite --sheet heroi_corpo.png --data heroi_corpo.json --format json-array --sheet-type rows --list-tags
aseprite -b --layer "torso_ferro" heroi.aseprite --sheet heroi_torso-ferro.png --data heroi_torso-ferro.json --format json-array --sheet-type rows --list-tags
aseprite -b --layer "arma_frente" heroi.aseprite --sheet heroi_arma-frente.png --data heroi_arma-frente.json --format json-array --sheet-type rows --list-tags

Como todas saem com o mesmo layout, o frame 12 de qualquer sheet corresponde ao frame 12 do corpo. Se as sheets ainda são novidade para você, leia o que é sprite sheet e como montar.

Na Unity, importe cada sheet com as mesmas configurações (Sprite Mode Multiple, Filter Mode Point, mesmo Pixels Per Unit e mesmo pivô no Sprite Editor). Crie o corpo com um SpriteRenderer e um Animator, e cada peça como objeto filho com seu próprio SpriteRenderer e um Order in Layer maior que o do corpo. O script abaixo, colocado em cada peça, mostra o frame da peça com o mesmo índice do frame atual do corpo. Arquivo PaperDollLayer.cs:

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class PaperDollLayer : MonoBehaviour
{
    [SerializeField] private SpriteRenderer bodyRenderer;
    [SerializeField] private Sprite[] bodyFrames;
    [SerializeField] private Sprite[] layerFrames;

    private SpriteRenderer layerRenderer;

    private void Awake()
    {
        layerRenderer = GetComponent<SpriteRenderer>();
    }

    public void SetEquipment(Sprite[] newFrames)
    {
        layerFrames = newFrames;
    }

    private void LateUpdate()
    {
        int index = System.Array.IndexOf(bodyFrames, bodyRenderer.sprite);
        bool hasFrame = layerFrames != null && index >= 0 && index < layerFrames.Length;

        layerRenderer.sprite = hasFrame ? layerFrames[index] : null;
        layerRenderer.flipX = bodyRenderer.flipX;
    }
}

Em bodyFrames, arraste os sprites fatiados da sheet do corpo, na ordem; em layerFrames, os da peça. Trocar equipamento é chamar SetEquipment com os frames da peça nova. O LateUpdate roda depois do Animator, então a peça nunca fica um frame atrasada.

No Godot, cada peça é um AnimatedSprite2D irmão do corpo, com um SpriteFrames que tem as mesmas animações e os mesmos frames. Conecte o sinal frame_changed do corpo a uma função que copia animation e frame do corpo para cada peça. A ordem de desenho segue a ordem dos nós na árvore (ou o z_index), e é aí que você alterna arma_tras e arma_frente.

Erros comuns: camada desalinhada, oclusão errada, explosão de frames

• Camada com canvas diferente. Uma peça desenhada em outro arquivo, com 2 pixels a mais de altura. Na engine, ela flutua acima do corpo.
• Trim ligado na exportação. Cada frame da peça fica com um tamanho, e o alinhamento com o corpo se perde.
• Frame faltando numa camada. A armadura tem 5 frames de corrida e o corpo tem 6. No sexto frame, o personagem fica sem armadura ou o índice estoura.
• Oclusão errada. Cabelo aparecendo por cima do capacete, arma atravessando o corpo no frame em que deveria estar atrás.
• Peça que muda a silhueta demais. Uma capa enorme que esconde a leitura das animações. Defina a silhueta máxima no planejamento.
• Explosão de camadas. Separar demais (luva esquerda, luva direita, bota, cinto, ombreira) multiplica sheets e chamadas de desenho. Agrupe o que sempre troca junto.

Quando NÃO usar: poucos equipamentos

O paper doll tem custo fixo: planejamento, exportação de várias sheets e código de sincronização. Ele só compensa quando as combinações são muitas.

Desenhe versões completas quando:

• o personagem tem 2 ou 3 visuais no jogo inteiro (roupa normal, armadura final);
• o equipamento não aparece no sprite (só muda números);
• o estilo pede silhuetas muito diferentes por roupa, que camadas não resolvem bem.

O próximo passo: faça um teste pequeno antes de aplicar no projeto. Um corpo de 32x32 com só a tag parado (4 frames), duas camisas e duas armas. Exporte as cinco camadas, monte na engine e troque as peças em tempo real. Se esse teste encaixar sem tremer, a técnica está dominada e você pode crescer para as outras animações.