Fundo Parallax: Como Desenhar as Camadas do Cenário

Um fundo parallax é um cenário dividido em camadas que se movem em velocidades diferentes quando a câmera anda: as distantes devagar, as próximas mais rápido. O cérebro lê essa diferença como profundidade. Para funcionar na engine, cada camada precisa ser desenhada pensando nisso desde o começo: largura certa, repetição horizontal sem emenda, transparência onde a camada de trás aparece e uma velocidade planejada.

Aqui você desenha as camadas de um fundo parallax de floresta no Aseprite ou no Krita, decide o que vai em cada uma, exporta do jeito certo e monta o mesmo cenário na Godot (com Parallax2D) e na Unity (com um script curto).

Fundo parallax: o que é e por que dá profundidade

Quando você olha pela janela de um carro, a cerca da estrada passa voando, as árvores do campo passam devagar e a montanha no horizonte quase não se mexe. Essa diferença de velocidade é a pista mais forte de distância que o olho usa em movimento. O parallax reproduz o efeito num jogo 2D.

A arte por si só já pode ter profundidade, com perspectiva atmosférica (planos distantes mais claros, menos saturados e puxando para a cor do céu). O parallax soma movimento a essa profundidade. Os dois juntos fazem um cenário 2D parecer ter quilômetros de fundo.

O ponto que muda o jeito de desenhar: cada camada vai se mover sozinha. Então ela precisa ser uma imagem independente, que se repete, e com transparência onde as camadas de trás devem aparecer.

Quantas camadas parallax usar e o que vai em cada uma

Para uma floresta, 5 camadas cobrem tudo:

1. Céu. Gradiente e talvez nuvens. Quase parado. Não precisa de transparência, é a camada de fundo opaca.
2. Fundo distante. Silhueta de montanhas. Poucas cores, valores próximos do céu. Transparente acima da silhueta.
3. Plano médio. Linha de árvores atrás da ação. Transparente acima das copas.
4. Plano jogável. O chão e as plataformas. Normalmente não é parte do parallax: é o tileset ou o cenário principal, que se move junto com o mundo.
5. Primeiro plano. Folhas, galhos e troncos na frente do personagem. Mais rápido que o jogável. Transparente em quase toda a área, para não esconder a ação.

Regra de escolha: cada camada precisa ter uma distância visual clara em relação às vizinhas. Duas camadas de árvores parecidas, com cor e tamanho iguais, em velocidades diferentes, parecem um erro de animação em vez de profundidade. Se elas são parecidas, junte numa só.

Largura, altura e repetição de cada camada

Defina a resolução base do jogo antes. Para pixel art, 320x180 ou 640x360. Para arte pintada em HD, 1920x1080.

Largura. Cada camada que repete precisa ter, no mínimo, a largura da tela na resolução base. Com 320x180, cada camada tem pelo menos 320 pixels. Para camadas com elementos marcantes (uma montanha de formato especial), use 2 ou 3 telas de largura (640 ou 960) para a repetição ficar menos óbvia. Camadas simples, como o céu em faixas, podem ter exatamente uma tela.

Altura. O céu ocupa a tela inteira. As outras camadas podem ser só a faixa que usam: a silhueta das montanhas pode ter 80 pixels de altura numa tela de 180, posicionada na engine. Isso economiza memória e simplifica a edição.

Repetição. A borda esquerda de cada camada continua na borda direita. A silhueta das montanhas na coluna 0 tem a mesma altura da última coluna. Uma árvore cortada na borda direita tem o resto do lado esquerdo.

Movimento vertical. Se o jogo tem câmera que sobe e desce bastante, desenhe as camadas com margem extra em cima e embaixo, ou a borda vai aparecer quando a câmera subir.

Transparência e borda: o que exportar

• Formato: PNG com transparência. Nunca JPG, que não tem canal alfa e cria ruído nas bordas.
• Céu: opaco, sem transparência.
• Demais camadas: fundo transparente. Só os pixels do elemento.
• Borda da silhueta em pixel art: pixels totalmente opacos ou totalmente transparentes. Semitransparência na borda cria um halo quando a engine filtra a textura.
• Borda em arte pintada: pode ter antialiasing, mas pinte sobre uma cor parecida com a da camada de trás. Se você pintar a borda da floresta sobre branco e depois apagar o fundo, sobra um contorno claro que aparece no jogo.
• Uma camada, um arquivo. Nomes que dizem a ordem: bg_0_ceu.png, bg_1_montanhas.png, bg_2_floresta.png, bg_4_frente.png.

Desenhando as camadas no Aseprite ou no Krita

No Aseprite (pixel art).

1. File > New com a largura escolhida (por exemplo, 640x180), RGBA, fundo transparente.
2. Uma camada por plano, na ordem do fundo para a frente.
3. Ligue View > Tiled Mode com repetição no eixo X. O canvas mostra cópias lado a lado e o traço que passa da borda direita continua na esquerda. Desenhe a silhueta das montanhas e da floresta com isso ligado.
4. Para exportar cada camada como arquivo separado, use File > Export > Export As e, nas opções, exporte só a camada desejada, ou esconda as outras camadas antes de exportar. A interface de exportação muda entre versões, então confira as opções de camada na sua.

No Krita (pintado).

1. File > New com 1920x1080 ou a largura de duas telas.
2. Um grupo por plano.
3. Ligue View > Wrap Around Mode. O Krita mostra a imagem repetida em todas as direções, e você pinta sobre a emenda direto.
4. Exporte cada grupo com o plugin Export Layers (Tools > Scripts > Export Layers) ou com o Batch Exporter, que já vêm com o programa (se não aparecerem, ative em Settings > Configure Krita > Python Plugin Manager e reinicie).

Nos dois programas, pinte com as cores de profundidade desde o início: o fundo mais claro e azulado, o plano médio um degrau mais escuro, o primeiro plano quase em silhueta. Para montar a paleta de cada plano em pixel art, o guia de pixel art para jogos mostra as rampas e o número de cores por elemento.

Desenhar as camadas é a metade do caminho. A outra metade é fazer elas conversarem com a câmera, com o tileset do chão, com o personagem e com o ritmo da fase, e é aí que quem está aprendendo sozinho costuma descobrir que a arte bonita no editor treme, emenda ou distrai no jogo. Um curso de arte 2D para jogos ensina a desenhar já sabendo como cada peça vai ser usada na engine.

Montando na engine: Parallax2D na Godot e script na Unity

As duas engines usam convenções opostas para a velocidade, e isso confunde quem passa de uma para a outra.

Na Godot. Da versão 4.3 em diante, o nó recomendado é o Parallax2D. A documentação marca o sistema antigo, ParallaxBackground com ParallaxLayer, como obsoleto e indica o Parallax2D no lugar. Crie um Parallax2D por camada, com um Sprite2D filho contendo o PNG. As propriedades principais:

• scroll_scale: a fração do movimento da câmera. 1 acompanha o mundo, menos que 1 fica para trás (mais longe), mais que 1 passa mais rápido (primeiro plano). Ponto de partida: céu 0,1, montanhas 0,3, floresta 0,6, primeiro plano 1,3.
• repeat_size: o tamanho da repetição. Coloque a largura da camada em pixels no X e 0 no Y. Se o sprite tem escala, use a largura já escalada.
• repeat_times: quantas cópias são desenhadas. Aumente se aparecer buraco quando a câmera der zoom para fora.
• autoscroll: velocidade automática em pixels por segundo, ótima para nuvens que andam sozinhas.

O passo a passo completo, com a pegadinha da escala no Repeat Size, está no guia de parallax background no Godot.

Na Unity. Não há um componente pronto de parallax 2D, então um script por camada resolve. Configure o sprite da camada com Draw Mode em Tiled no Sprite Renderer e largura de 3 vezes a da imagem, para sempre cobrir a tela. Para o modo Tiled funcionar, o sprite precisa ter Mesh Type em Full Rect nas configurações de importação.

Arquivo ParallaxScroller.cs:

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class ParallaxScroller : MonoBehaviour
{
    [SerializeField] private Transform cameraTransform;
    [SerializeField, Range(0f, 1f)] private float followFactor = 0.5f;

    private SpriteRenderer spriteRenderer;
    private float startX;
    private float tileWidth;

    private void Start()
    {
        if (cameraTransform == null)
        {
            cameraTransform = Camera.main.transform;
        }

        spriteRenderer = GetComponent<SpriteRenderer>();
        startX = transform.position.x;
        tileWidth = spriteRenderer.sprite.bounds.size.x * transform.lossyScale.x;
    }

    private void LateUpdate()
    {
        float cameraX = cameraTransform.position.x;
        float distanceMoved = cameraX * followFactor;
        float cameraRelativeToLayer = cameraX * (1f - followFactor);

        Vector3 position = transform.position;
        position.x = startX + distanceMoved;
        transform.position = position;

        if (cameraRelativeToLayer > startX + tileWidth)
        {
            startX += tileWidth;
        }
        else if (cameraRelativeToLayer < startX - tileWidth)
        {
            startX -= tileWidth;
        }
    }
}

Aqui a convenção é invertida em relação à Godot: followFactor diz o quanto a camada acompanha a câmera. 1 fica grudada na câmera (parece infinitamente longe), 0 fica parada no mundo (o plano jogável). Ponto de partida: céu 0,95, montanhas 0,8, floresta 0,5. Para primeiro plano mais rápido que o mundo, este script não serve, porque o fator fica entre 0 e 1. O LateUpdate roda depois que a câmera se moveu, o que evita tremedeira. O tileWidth usa o tamanho do sprite original, não do Sprite Renderer em modo Tiled, porque é a largura de uma repetição. Uma versão mais completa, com eixo vertical e Pixel Perfect Camera, está no guia de parallax na Unity 2D.

Erros comuns: emenda visível e camada que não repete

Emenda visível. Um degrau na silhueta ou uma linha clara a cada repetição. Causas: a arte não foi desenhada com Tiled Mode ou Wrap Around ligado, ou a borda tem pixels semitransparentes. Correção: corrigir a junção com a repetição ligada e deixar a borda opaca.

Camada que não repete. O fundo acaba e aparece o vazio. Causas: largura menor que a tela, repeat_size errado na Godot ou Sprite Renderer sem Draw Mode Tiled na Unity. Correção: largura mínima de uma tela, repeat_size com o tamanho escalado e 3 repetições na Unity.

Halo branco na borda. A camada foi pintada sobre branco e o fundo foi apagado depois. Correção: pintar a borda sobre uma cor próxima da camada de trás.

Primeiro plano tampando a ação. Folhagem grande e opaca na frente do personagem. Correção: primeiro plano em pouca área, nas bordas da tela, e escuro.

Todas as camadas com o mesmo contraste. O movimento sugere profundidade, mas a cor diz que tudo está perto. Correção: perspectiva atmosférica, com cada camada mais clara e menos saturada que a da frente.

Pixel art tremendo. Camadas lentas em posições fracionárias fazem os pixels piscarem. Correção: na Godot, ative o snap de pixels nas configurações do projeto. Na Unity, use a Pixel Perfect Camera e arredonde a posição para a grade de pixels.

Próximo passo

Desenhe uma floresta em 4 camadas (céu, montanhas, floresta, frente) com a repetição ligada no editor, exporte os PNGs e monte numa engine com um personagem andando. Ajuste as velocidades até a profundidade parecer natural na velocidade de corrida do seu personagem, e anote os valores para reusar. Depois, monte a mesma cena na outra engine para fixar as duas convenções.