Sprite Sheet com Padding: Por Que Aparecem Linhas no Jogo

As linhas finas que aparecem entre tiles e na borda de sprites são texture bleeding: a engine lê, sem querer, pixels do quadro vizinho na sprite sheet. O conserto na arte é sprite sheet padding (espaço entre quadros) combinado com extrude (repetir a borda de cada quadro em 1 pixel). O conserto na engine é filtro sem interpolação, mipmaps desligados em 2D e câmera em posição de pixel inteiro. Na maioria dos jogos, você precisa dos dois lados.

Este post explica a causa com um tileset 16 x 16 de exemplo, mostra o antes e o depois, e configura cada peça: export do Aseprite, Tiled, Unity e Godot. Se você ainda não monta folhas, comece pelo post sobre sprite sheet, que explica grade e células.

Por que aparecem linhas entre tiles no jogo

Monte um chão com um tileset de grama 16 x 16 numa folha sem espaço entre tiles. No editor, com zoom em número inteiro, está perfeito. Rode o jogo, mova a câmera devagar, e de vez em quando aparece uma linha de 1 pixel entre dois tiles, piscando. Às vezes clara, às vezes escura, às vezes da cor do tile de terra que estava ao lado na folha.

A linha aparece por três motivos, que podem agir juntos:

1. Filtro de textura bilinear. Ao desenhar um pixel na borda do tile, a engine mistura o pixel da borda com o vizinho na textura. Se o vizinho é de outro tile, a cor dele entra.
2. Mipmaps. Versões reduzidas da textura, usadas quando o objeto aparece menor. Na versão reduzida, os pixels de tiles vizinhos já foram misturados entre si.
3. Coordenada fracionada. Câmera ou objeto em posição como 10,37 em vez de 10. O arredondamento da coordenada de textura cai a meio caminho entre dois texels e, em alguns quadros, pega o vizinho.

O terceiro é o motivo pelo qual pixel art com filtro Point (sem interpolação) ainda pode mostrar linhas: o filtro está certo, mas a posição fracionada faz a engine escolher o texel do lado.

Texture bleeding: o pixel vizinho vazando para o seu tile

Pense na folha sem padding:

| grama | grama | terra |

A borda direita do segundo tile de grama encosta na borda esquerda do tile de terra. Qualquer leitura meio pixel para fora da grama pega terra. Num chão todo de grama, aparece uma linha marrom entre dois tiles.

Agora com padding de 2 pixels transparentes:

| grama |  .  .  | grama |  .  .  | terra |

A leitura para fora da grama pega transparência. A linha marrom some, mas pode aparecer uma linha transparente (o fundo atrás aparece por um instante). Melhorou, não resolveu.

Com extrude de 1 pixel:

| g grama g | g grama g | t terra t |

Cada tile tem a borda repetida para fora. A leitura para fora da grama pega grama. É isso que resolve.

Sprite sheet padding: border, shape e inner padding

As ferramentas de empacotamento usam três tipos de padding, e os nomes confundem:

No Aseprite, a interface chama o shape padding de Spacing; na linha de comando, a opção é --shape-padding. O border padding e o inner padding têm os mesmos nomes nos dois (--border-padding e --inner-padding).

Para sprites de personagem com bastante transparência em volta, 2 pixels de Spacing costumam bastar. Para tiles, que encostam um no outro no jogo e têm desenho até a borda, o padding sozinho deixa a linha transparente. Tiles pedem extrude.

Extrude: repetir a borda do tile em vez de deixar vazio

Extrude copia a última linha e a última coluna de pixels de cada quadro para fora dele. Um tile 16 x 16 passa a ocupar 18 x 18 na folha, com o desenho original no meio.

O tile continua sendo lido como 16 x 16 pela engine; o anel extra só existe para ser lido por engano. Quando a engine erra meio pixel, ela pega a cópia da própria borda, e o erro fica invisível.

Antes e depois no mesmo tileset de grama 16 x 16, câmera se movendo em velocidade lenta com filtro bilinear:

• Sem padding: linhas marrons intermitentes onde a grama encosta em terra na folha.
• Com padding de 2 e sem extrude: linhas escuras ou transparentes intermitentes.
• Com extrude de 1: chão contínuo.

O mesmo acontece com frames de personagem quando a folha é filtrada: sem extrude, o contorno ganha uma linha fina da cor do frame ao lado.

Configurar padding e extrude no export do Aseprite

Se o tileset foi desenhado como uma imagem só (uma grade de tiles 16 x 16), primeiro transforme cada tile num frame:

1. Abra o tileset e use File > Import Sprite Sheet.
2. Width e Height: 16. Confira a grade sobre a imagem e importe. Cada tile vira um frame.

Agora exporte com proteção:

1. File > Export > Export Sprite Sheet (Ctrl+E).
2. Layout: By Rows, Fixed # of Columns com o mesmo número de colunas do tileset original (8, por exemplo).
3. Borders: marque Extrude. Deixe Spacing em 0 se quiser só a borda repetida, ou em 2 para garantir distância extra.
4. Output: PNG e, se a engine vai ler, JSON Data com as posições exatas.
5. Exporte e abra a folha com zoom: cada tile deve aparecer com a borda duplicada para fora.

Anote a geometria resultante, porque a engine precisa dela para fatiar: com extrude de 1 pixel, o primeiro tile começa 1 pixel para dentro da borda (margem 1) e de um tile para o próximo há 2 pixels de borda repetida (espaçamento 2), mais o Spacing que você tiver definido. Confira medindo na folha antes de configurar a engine.

Em Pixelorama e LibreSprite, a exportação de sprite sheet tem opções de espaçamento; se a sua versão não tiver extrude, o TexturePacker e o Free Texture Packer têm extrude, ou você faz no Aseprite pela linha de comando com --extrude.

Corrigir linhas entre tiles é um daqueles problemas que roubam uma tarde inteira porque a causa está dividida entre arte e engine. Quem produz a arte sem saber como ela vai ser lida na engine repete o erro em todo tileset novo.

Aprender a arte já pensando no destino (tamanho, grade, padding, filtro) faz o tileset entrar no jogo limpo da primeira vez.

O lado da engine: filtro Nearest, mipmaps e câmera em posição fracionada

Tiled. No diálogo de novo tileset baseado em imagem, informe Tile width e Tile height (16), Margin (1 com extrude) e Spacing (2 com extrude, mais o Spacing do Aseprite). A documentação do Tiled cita justamente tilesets com bordas extrudadas para evitar bleeding como caso de uso de margem e espaçamento. Para alterar depois, edite o tileset e use Edit na propriedade Image.

Unity. Na textura da folha: Filter Mode em Point (no filter) para pixel art, Compression em None e Generate Mip Maps desligado (em Advanced). No Sprite Editor, Slice > Grid By Cell Size com Pixel Size 16 x 16, Offset 1, 1 e Padding 2, 2 para a folha extrudada. Se você usa Sprite Atlas, ele reempacota os sprites com Padding próprio (padrão de 4 pixels) e tem Alpha Dilation para espalhar a cor da borda nos pixels transparentes. Para câmera, o componente Pixel Perfect Camera do URP trava a renderização em pixels inteiros.

Godot. Na importação da textura, deixe Mipmaps > Generate desligado para 2D (a documentação recomenda só ligar se o projeto se beneficiar, como câmera que se afasta muito) e mantenha Fix Alpha Border ligado. O filtro de textura em 2D é definido no CanvasItem, com um padrão nas configurações do projeto: Nearest para pixel art. No TileSet, a fonte de atlas tem Margins e Separation para fatiar a folha extrudada, e a opção Use Texture Padding, ligada por padrão, que gera internamente uma borda de 1 pixel em cada tile. Ou seja, na Godot o tileset sem extrude costuma funcionar; o extrude ajuda quando a mesma folha vai para outra engine. Para posição, as configurações de snap 2D do projeto (em Rendering > 2D) arredondam transforms e vértices para pixel.

Erros comuns: padding sem extrude e atlas recompactado pela engine

Padding sem extrude em tiles. A linha muda de cor (de marrom para transparente), mas continua. Tiles precisam de extrude.

Fatiar a folha extrudada como se fosse 16 x 16 colado. A grade escorrega e cada tile mostra a borda do vizinho. Use margem e espaçamento.

Atlas da engine desfazendo o seu trabalho. O Sprite Atlas da Unity reempacota os sprites com o padding dele. Se o padding do atlas for 0 ou muito baixo, as linhas voltam. Confira o Padding do atlas e o filtro dele.

Compressão de textura. Formatos comprimidos trabalham em blocos de pixels e misturam cores de tiles vizinhos. Para pixel art, compressão desligada ou de alta qualidade.

Zoom não inteiro. Escala de 1,5x numa pixel art faz alguns pixels virarem 2 e outros 1, e aumenta o risco de linha. Use escalas inteiras ou o Pixel Perfect Camera.

Mipmaps ligados por padrão em textura de sprite. Desligue em 2D, a não ser que a câmera se afaste muito.

Próximo passo

Pegue o seu tileset atual, exporte uma versão com extrude no Aseprite e configure margem e espaçamento na engine. Mova a câmera devagar por um chão de 20 tiles e procure linhas. Se o tileset ainda está para ser desenhado, o post sobre desenhar tileset no Aseprite mostra como planejar os tiles, e o de Sprite Atlas na Unity cobre o lado do atlas em detalhe.