Como recortar uma folha de sprites irregular gerada por IA

Por que folhas de sprites de IA nunca seguem uma grade perfeita

Uma folha de sprites tradicional é criada por uma ferramenta. Um artista desenha quadros com tamanho de célula fixo, e um exportador os organiza em deslocamentos exatos de pixels. Todas as células são idênticas, cada sprite fica em uma caixa conhecida, e o recorte é uma questão de aritmética.

Geradores de imagens não funcionam assim. Modelos de difusão como DALL·E, Midjourney e Stable Diffusion geram uma única imagem contínua. Quando você pede "uma folha de sprites de um cavaleiro caminhando, grade 4x4", o modelo produz algo que parece uma folha de sprites porque viu milhares delas. Ele está imitando o estilo visual de uma grade, não calculando os limites das células. Nada no processo de geração garante que a terceira linha comece exatamente 384 pixels abaixo.

As consequências práticas são consistentes:

• Espaçamento variável. Os espaços entre sprites variam de alguns pixels a algumas dezenas. A variação normalmente se acumula da esquerda para a direita e de cima para baixo, então os quadros do canto inferior direito são os mais problemáticos.
• Tamanhos de sprites inconsistentes. Um personagem no meio de um passo é mais largo que um parado. O modelo desenha cada pose no tamanho que parece adequado, sem ajustá-la a uma caixa uniforme.
• Conteúdo fora do centro. Mesmo quando as células são aproximadamente uniformes, o sprite dentro delas raramente está centralizado, então um recorte correto da grade ainda gera quadros que tremem durante a reprodução.
• Quadros ausentes ou mesclados. Às vezes você recebe quinze sprites em um layout 4x4, ou duas poses que se sobrepõem e parecem uma única massa.
• Dimensões ímpares da tela. Uma saída de 1024x1024 dividida em três colunas resulta em 341.33 pixels. Algum valor precisa ser arredondado, e os erros de arredondamento se acumulam.

Por que o recorte com grade fixa falha

O recorte em grade fixa faz uma suposição: a imagem é uma grade de células iguais. Ele divide a largura pelas colunas, a altura pelas linhas e corta. Quando essa suposição vale, o resultado é perfeito e rápido. Quando não vale, o erro não é um ruído aleatório que você pode ignorar. Cada corte cai no lugar errado, e os erros ficam visíveis justamente da forma que mais importa para a animação.

Um quadro com quatro pixels cortados no topo não é apenas um problema estético. Em uma engine de jogos, os quadros são desenhados no mesmo ponto de ancoragem, então um sprite cujo conteúdo fica quatro pixels mais baixo no segundo quadro do que no primeiro vai saltar visivelmente durante a reprodução. Os jogadores percebem isso como um bug, mesmo que não saibam descrevê-lo. Corrigir manualmente depois, quadro a quadro, custa mais tempo do que recortar corretamente desde o início.

A solução: recorte pelo conteúdo, não pelas coordenadas

Se a grade não consegue indicar onde os sprites estão, os pixels conseguem. Em uma folha com fundo transparente, cada pixel faz parte de um sprite (alfa acima de zero) ou do fundo (alfa zero). Essa única distinção basta para encontrar os sprites sem conhecer a organização previamente.

Como funciona a detecção baseada no conteúdo

1. Confirme que o fundo é transparente. Amostre os pixels dos cantos. Se forem totalmente transparentes, a folha é uma candidata à detecção automática. Se forem brancos ou de uma cor uniforme, a folha precisa passar primeiro pela remoção de fundo.
2. Encontre linhas e colunas vazias. Percorra a imagem e registre quais linhas de pixels não contêm nenhum pixel opaco; faça o mesmo com as colunas. Essas faixas vazias são os espaços entre sprites, onde quer que estejam.
3. Corte no meio de cada espaço de separação. Um espaço de separação é uma faixa, não uma linha. Cortar pelo centro dá a cada sprite vizinho o máximo de espaço livre e tolera um ou dois pixels isolados de antialiasing.
4. Apare cada parte até sua própria caixa delimitadora. Depois que uma parte estiver isolada, reduza-a ao menor retângulo que contém pixels opacos. Isso remove o preenchimento irregular que fazia as células parecerem diferentes.
5. Confira o resultado e repita. A primeira passagem costuma deixar problemas: uma parte ainda contém dois sprites porque eles se encostam, ou tem muito mais espaço vazio que as vizinhas. Analisar novamente a saída e subdividir ou aparar outra vez resolve a maioria desses casos.

É isso que o Magic Slice aba do nosso Recortador de folhas de sprites faz. Ele detecta fundos transparentes, encontra os limites dos sprites pelo canal alfa e executa até três passagens de refinamento, verificando se cada recorte produzido tem preenchimento excessivo ou vários sprites e recortando novamente quando necessário. Uma configuração de sensibilidade baixa, média ou alta controla a intensidade da detecção de limites: aumente quando os sprites quase se tocam e diminua quando um único sprite com partes separadas (um escudo flutuante, um efeito de magia) estiver sendo dividido.

Limites detectados na folha

Dezesseis arquivos, cada um aparado

Se sua folha tem fundo sólido

A detecção de conteúdo precisa de transparência. Se sua folha tiver um fundo branco, preto ou magenta uniforme, passe-a primeiro por um removedor de fundo — o nosso está em /remove-bg e funciona amostrando os pixels dos cantos e limpando todos os pixels suficientemente próximos dessa cor, depois exportando um PNG transparente. Faça isso antes recortar, não depois: remover o fundo uma vez em uma folha é uma operação, enquanto fazer isso em dezesseis quadros separados é ter dezesseis chances de resultados inconsistentes.

Linhas manuais de grade: a alternativa que sempre funciona

A detecção automática falha em algumas folhas, e vale a pena saber quando. Sprites que se sobrepõem ou se encostam não podem ser separados pela varredura de faixas vazias, porque não há faixa vazia. Folhas com sombra projetada ou brilho que ocupa toda a tela não têm nenhuma linha totalmente transparente. Folhas em que um único personagem é composto de partes separadas serão divididas além do necessário.

Para todos esses casos, arraste as linhas manualmente. O Manual e predefinições aba começa com uma grade predefinida entre 2x2 e 6x6 — ou uma quantidade personalizada de linhas e colunas, até 20x20 — e permite arrastar cada linha de grade individualmente para onde ela realmente deve ficar. O fluxo de trabalho é:

1. Escolha a predefinição mais próxima do layout desejado — 4x4 para uma folha de dezesseis quadros, mesmo que o espaçamento real esteja diferente.
2. Arraste cada linha vertical para o espaço de separação à esquerda ou à direita. Trabalhe da esquerda para a direita para sempre ajustar em relação a uma linha que já corrigiu.
3. Faça o mesmo com as linhas horizontais, de cima para baixo.
4. Amplie o quadro mais apertado — normalmente a pose mais larga — e confirme que nenhuma linha o atravessa.
5. Exporte. PNG preserva a transparência e é a opção indicada para sprites; JPG e WebP também estão disponíveis, mas JPG descarta completamente o canal alfa.

O ajuste manual parece lento, mas não é: uma folha de dezesseis quadros tem apenas seis linhas internas, então você faz seis movimentos, não dezesseis recortes. Comparado a abrir a folha em um editor de imagem e selecionar cada quadro, é muito mais rápido.

Preparando os quadros para uma engine de jogos

Depois de obter PNGs individuais, há dois caminhos para a engine: importá-los como quadros avulsos ou empacotá-los novamente em uma folha limpa e uniforme. A escolha depende da engine e do projeto.

Unity

Para quadros avulsos, adicione os PNGs ao projeto e defina Texture Type como Sprite (2D and UI), Sprite Mode como Single. Defina Filter Mode como Point (no filter) e Compression como None para pixel art — filtragem bilinear em um sprite de 32x32 é o que deixa seu aspecto borrado. Defina Pixels Per Unit de acordo com a grade, selecione todos os quadros e arraste-os para um GameObject para que o Unity gere um Animation Clip automaticamente.

Para uma folha empacotada novamente, use Sprite Mode Multiple e o Sprite Editor. Grid By Cell Size só funciona se a folha reempacotada realmente for uniforme — exatamente o que o reempacotamento oferece e exatamente o que a folha original de IA não tinha.

Godot

No Godot 4, adicione um AnimatedSprite2D, crie um novo SpriteFrames recurso, e use Add Frames from Sprite Sheet para uma folha uniforme ou Add Frames from File(s) para carregar os PNGs individuais diretamente. Quadros avulsos são o caminho mais fácil aqui, porque o importador de folhas de sprites espera células uniformes. Para pixel art, defina o filtro de textura como Nearest — por nó em CanvasItem → Texture → Filter ou globalmente por meio de rendering/textures/canvas_textures/default_texture_filter configuração do projeto.

Ancoragem e alinhamento

Essa é a etapa que as pessoas pulam e depois passam uma tarde depurando. Se você aparou cada quadro até sua própria caixa delimitadora, eles agora têm dimensões diferentes, e a engine centralizará cada um na mesma origem. Um personagem cujo braço se estende no segundo quadro parecerá deslizar para trás, porque a largura extra desloca o centro visual.

A solução é preencher cada quadro novamente até um tamanho comum, com o conteúdo posicionado de forma consistente — normalmente centralizado na horizontal e alinhado embaixo na vertical, para que os pés fiquem no chão. Defina o tamanho comum a partir do maior quadro, arredonde para cima até um número conveniente e preencha o restante com transparência. Aparar e depois preencher pode parecer redundante, mas não é: aparar descarta o preenchimento arbitrário do gerador, e preencher reaplica um preenchimento que você controla.

Solução de problemas

A detecção encontrou partes demais

A sensibilidade está alta demais, ou seus sprites têm elementos separados. Diminua a sensibilidade para que pequenos espaços transparentes dentro de um sprite não sejam tratados como intervalos entre sprites. Se isso não ajudar, mude para linhas manuais — um personagem segurando um objeto separado sempre parecerá dois sprites para uma varredura do alfa.

A detecção encontrou poucas partes

Os sprites estão se tocando, ou um brilho fraco atravessa o espaço entre eles. Aumente a sensibilidade primeiro. Se os sprites realmente se sobrepõem, nenhum método automático vai separá-los; gere a folha novamente pedindo explicitamente espaço livre entre os quadros ou recorte manualmente.

1. Sensibilidade muito baixa — poucos limites encontrados

2. Oito arquivos quando eram esperados vinte

3. Motivo: não há uma coluna vazia bem definida entre eles

4. Sensibilidade aumentada — quatro arquivos

Os quadros têm um contorno sutil do fundo antigo

A remoção de fundo deixou pixels semitransparentes nas bordas tingidos pela cor do fundo antigo. Consulte nosso guia sobre PNGs transparentes e bordas brancas para as correções.

A animação treme na engine

Quase sempre é um problema de ancoragem, não de recorte. Confirme que todos os quadros têm as mesmas dimensões e seguem a mesma convenção de alinhamento, e confira o pivô do sprite na engine.

Nada funciona, a folha está desorganizada

Gerar novamente custa pouco. Prompts que melhoram o resultado de forma consistente: peça explicitamente um fundo transparente, peça espaçamento uniforme e tamanho consistente do personagem, solicite menos quadros por folha (uma 3x3 tem muito mais chance de ser utilizável do que uma 6x6) e gere poses individuais separadamente se a animação importar mais que a praticidade.

Perguntas frequentes