Como recortar um tileset a partir de uma única imagem

Tileset versus folha de sprites: por que a exigência é maior

Uma folha de sprites contém imagens independentes. Se um quadro de um ciclo de caminhada estiver um pixel fora do centro em relação ao seguinte, ninguém percebe — cada quadro é desenhado separadamente, e pequenas variações de posição parecem movimento natural. Um tileset é diferente. Cada tile é colocado borda a borda com seus vizinhos em uma grade, repetidamente, por uma fase inteira. Um desalinhamento de um pixel em um único tile não fica restrito a ele; repete-se em cada emenda em que esse tile aparece, e em uma textura de chão ou parede formada por tiles isso pode significar dezenas de emendas visíveis causadas por um único corte ruim.

Essa é toda a restrição de design de um tileset: as emendas precisam ser invisíveis, o que significa que as bordas precisam ser exatas no nível do pixel, o que significa que a imagem de origem precisa de uma grade real e identificável antes de você cortar qualquer coisa.

Escolhendo o tamanho dos tiles

Se você está extraindo tiles de um recurso existente de outra pessoa, o tamanho do tile normalmente já é definido pela arte — conte quantas vezes um motivo repetido (um tijolo, um tufo de grama, uma tábua de piso) aparece ao longo da largura da imagem e divida. Se está definindo o tileset por conta própria, a partir de uma imagem de referência ou uma folha de texturas gerada, tamanhos comuns são 16×16, 32×32 e 48×48 pixels.

• 16×16 parece pixel art retrô clássica. Não há margem para excesso de detalhes — cada tile precisa comunicar seu material (grama, pedra, água) em pouquíssimos pixels, o que é uma habilidade artística por si só.
• 32×32 é o padrão moderno mais comum. Espaço suficiente para textura e sombreamento, sem precisar de precisão de subpixel para ficar claro em níveis normais de zoom.
• 48×48 e acima são adequados para jogos com tiles maiores na tela ou arte mais pictórica, em que você quer detalhes visíveis de textura, não um visual chapado de pixel art.

Seja qual for a escolha, mantenha-a consistente em todo o tileset e, idealmente, em todos os tilesets do projeto. Tamanhos misturados de tiles obrigam você a redimensionar a arte durante a execução — reintroduzindo exatamente os problemas de desfoque que pixel art tenta evitar — ou manter vários sistemas separados de grade no editor de fases.

Identificação do deslocamento quando a grade não começa em zero

Essa é a etapa que confunde as pessoas. Você sabe que o tile tem 32px, então recorta em 0, 32, 64, 96… e os tiles saem cortados ao meio, com uma textura de parede que é principalmente piso em uma linha e principalmente parede na seguinte. A grade real do tileset não começa no canto superior esquerdo da imagem — ela está deslocada por alguns pixels, muitas vezes porque a imagem de origem tem uma borda, uma margem restante de uma captura de tela ou um preenchimento adicionado na exportação.

Para encontrar o deslocamento, amplie a imagem até o nível dos pixels e procure um detalhe repetido — uma linha de argamassa entre tijolos, uma sombra na base de um tile de grama, um brilho na borda superior de um tile. Meça a coordenada em pixels em que o detalhe aparece pela primeira vez e confira se ele se repete a cada N pixels em que N é o tamanho do tile. Se a primeira linha de argamassa está em x = 6 e a seguinte em x = 38, o deslocamento é de 6 pixels e o tamanho estimado de 32 está confirmado. Aplique o deslocamento aos dois eixos independentemente; deslocamentos horizontal e vertical não têm relação, e a imagem pode facilmente ter um sem o outro.

Tiles sem espaço e o problema de vazamento de cor

Folhas de sprites costumam ter espaços transparentes entre os quadros. Tilesets geralmente não — os tiles encostam diretamente uns nos outros, sem espaço, porque isso permite que se repitam sem emendas quando posicionados. Isso tem um efeito colateral quando o tileset está em uma engine: vazamento de textura, no qual uma faixa do tile vizinho aparece na borda do tile colocado.

O vazamento de cor acontece pela forma como as GPUs amostram texturas. Quando um tile é desenhado em um tamanho que não corresponde exatamente a 1:1 em pixels — ligeiramente redimensionado ou em uma posição subpixel da câmera —, o renderizador amostra uma mistura do pixel da borda do tile com o que está diretamente ao lado dele na textura original, que é o tile vizinho. A solução não é adicionar um espaço na imagem original, o que quebraria o encaixe dos tiles; é usar filtragem point/nearest para não haver interpolação que cause vazamento, ou fazer a engine extrudar automaticamente uma borda de um pixel durante o empacotamento ou a importação. Tanto o Sprite Atlas do Unity quanto o importador de TileSet do Godot têm uma opção de espaçamento ou extrusão exatamente para isso — ative-a em qualquer tileset que será redimensionado ou movido para posições não inteiras.

Removendo tiles duplicados

Depois de recortar a grade inteira, é comum obter vários tiles com pixels idênticos ou quase idênticos — um tile simples de grama pode aparecer quatro vezes em uma folha de referência porque a arte original o repetiu para dar equilíbrio visual. Manter duplicatas não é exatamente errado, mas aumenta o recurso do tileset, dificulta examinar a paleta de tiles no editor de fases e significa que alterações no "tile de grama" precisarão ser aplicadas em vários lugares depois.

Uma maneira simples de encontrar duplicatas sem inspecionar dezenas de quadradinhos: calcule o hash dos dados brutos de pixels de cada tile e compare os hashes. Tiles com hash idêntico têm pixels idênticos e podem ser reunidos em um só com segurança. Quase duplicatas — um tile que difere por um pixel recolorido, como uma tocha acesa e uma apagada — terão hashes diferentes e exigem uma decisão humana sobre serem tiles realmente distintos ou variantes que vale a pena manter separadas de propósito.

Importando para uma engine

Unity: Tile Palette

Importe o tileset recortado como Sprite com Sprite Mode definido como Multiple, recorte-o no Sprite Editor usando Grid By Cell Size com o tamanho do tile e depois abra Window → 2D → Tile Palette, crie uma nova paleta e arraste os sprites recortados para ela. A partir daí, os tiles são pintados diretamente em um componente Tilemap na cena. Se você já recortou os tiles em PNGs individuais fora do Unity, pode pular completamente a etapa do Sprite Editor e arrastar a pasta de PNGs diretamente para uma paleta.

Godot: recurso TileSet

Crie um recurso TileSet em um nó TileMapLayer e, na origem Atlas, adicione a imagem do tileset recortado com o tamanho do tile correspondente. O importador do Godot também oferece configurações de Separation e Margin na origem do atlas, que atendem a folhas com um pequeno espaço entre tiles, em vez da organização sem espaços descrita acima. Se sua origem não tinha espaços e você vê vazamento de cor na área de visualização do editor, ative a opção de preenchimento da textura do atlas, que duplica os pixels das bordas internamente para que a amostragem nunca alcance um tile vizinho.

Uma ordem prática de operações

1. Identifique o tamanho do tile contando um elemento repetido ao longo da imagem.
2. Encontre os deslocamentos x e y localizando onde o primeiro tile realmente começa.
3. Recorte nessa grade — uma ferramenta no navegador com linhas de grade arrastáveis torna isso uma etapa visual e verificável, em vez de um cálculo às cegas.
4. Compare os tiles por hash e reúna duplicatas exatas.
5. Importe para a engine com espaçamento ou extrusão ativados se os tiles forem renderizados em escala ou posição não inteira.

Perguntas frequentes