Como importar uma folha de sprites no Godot

Importando a textura para o projeto

O Godot importa recursos monitorando o sistema de arquivos. Copie seu PNG para qualquer lugar dentro do diretório do projeto, e ele aparecerá no painel FileSystem com um .import arquivo criado junto dele. Você nunca edita esse arquivo à mão; muda as configurações no painel Import e pressiona Importar novamente.

Antes de qualquer coisa, cuide da filtragem, porque ela é a configuração mais perceptível para pixel art. No Godot 4, o filtro de textura fica no nó, e não na importação, em CanvasItem → Texture → Filter. Defina como Nearest e as bordas definidas dos pixels continuam definidas. Configurar isso por nó logo fica trabalhoso, então mude o padrão do projeto: Project Settings → Rendering → Textures → rendering/textures/canvas_textures/default_texture_filter → Nearest. Todo CanvasItem mantido em Inherit então o utiliza.

Enquanto estiver no painel Import, deixe Mipmaps desativado para sprites 2D desenhados perto do tamanho original, e observe que o Godot 4 comprime texturas em formatos de VRAM apenas quando você escolhe VRAM Compressed. O padrão Lossless modo é o desejado para pixel art; a compressão de VRAM introduz exatamente os artefatos de blocos que ficam mais evidentes em arte de cores chapadas.

Método 1: AnimatedSprite2D e SpriteFrames

Esse é o caminho para qualquer coisa que tenha animação, e é por onde a maioria dos projetos deve começar. AnimatedSprite2D é um nó que contém um SpriteFrames recurso — uma coleção nomeada de animações, cada uma sendo uma lista ordenada de texturas com um valor de quadros por segundo e uma opção de repetição.

1. Adicione um AnimatedSprite2D à sua cena.
2. No Inspector, clique no Sprite Frames propriedade e escolha Novo SpriteFrames. Um painel SpriteFrames será aberto na parte inferior do editor.
3. Renomeie a animação padrão de default para algo significativo — walk, idle. Você fará referência a essas strings no código.
4. Adicione quadros com um dos dois botões da barra de ferramentas: Adicionar quadros de folha de sprites (o ícone de grade) ou Adicionar quadros de arquivo(s) (o ícone de arquivo).
5. Defina os FPS da animação e a opção de repetição; depois reproduza-a no painel para conferir os tempos antes de conectar qualquer código.

Adicionar quadros de folha de sprites

Selecionar o ícone de grade abre uma caixa de diálogo em que você escolhe o PNG e descreve sua organização: Horizontal e Vertical contagens, além de Separation e Offset se a folha tiver margens ou espaços entre células. A prévia é atualizada ao vivo, e você clica nas células desejadas, na ordem desejada. Shift + clique seleciona um intervalo.

Vale conhecer dois detalhes. Primeiro, a ordem de seleção vira a ordem dos quadros, então clicar em células fora de sequência gera uma animação que também é reproduzida fora de sequência. Segundo, essa caixa de diálogo presume uma grade uniforme, exatamente como Grid By Cell Count do Unity. Ela não tem nenhum modo de detecção de conteúdo — não há equivalente ao recorte Automatic do Unity. Se a grade não for real, essa caixa de diálogo não pode corrigi-la.

Adicionar quadros de arquivo(s)

Selecione vários PNGs individuais e eles se tornarão quadros na ordem em que o Godot os classifica, que é alfabética. Complete os nomes dos arquivos com zeros à esquerda — walk_01.png por meio de walk_12.png — ou o quadro 10 fica imediatamente depois do quadro 1. Esse caminho é o mais fácil de acertar, e é por isso que recortar previamente uma folha em arquivos costuma ser o fluxo mais simples especificamente no Godot.

Método 2: regiões de AtlasTexture

Um AtlasTexture é um recurso que aponta para uma região de uma textura maior e se comporta como uma textura independente em qualquer lugar em que o Godot aceite uma. Você cria um definindo qualquer propriedade de textura como Novo AtlasTexture, atribuindo a folha ao seu atlas propriedade e digitando o region retângulo (x, y, width, height).

Esta é a opção mais flexível e mais manual. Ela se destaca quando os sprites necessários estão em posições arbitrárias, quando vários nós precisam de partes diferentes de uma textura ou quando você gera as regiões a partir de dados no código:

• Um tema de interface que extrai partes nine-patch e ícones de uma única textura compartilhada.
• Um tileset ou catálogo de itens em que um script cria AtlasTextures a partir de um manifesto JSON exportado junto com a folha.
• Sprites estáticos pontuais para os quais criar um arquivo separado parece exagero.

O filter_clip propriedade merece atenção: ativá-la impede a textura de amostrar fora de sua região, corrigindo uma faixa fina do sprite vizinho que vaza para uma borda.

Método 3: hframes e vframes no Sprite2D

Um simples Sprite2D tem três propriedades que permitem ler uma folha sem nenhum recurso extra: hframes, vframes, e frame. Defina hframes como 4 e vframes como 4, e o Godot divide a textura em uma grade 4×4; definir frame como um índice de 0 a 15 exibe essa célula.

É a abordagem mais leve e anima de forma simples a partir de uma faixa do AnimationPlayer no frame propriedade, ou com algumas linhas em _process. Para uma folha exportada por uma ferramenta, isso realmente é tudo de que você precisa.

Por que folhas irregulares atrapalham as três opções e o que resolve

Todos os métodos acima compartilham uma suposição: você consegue descrever a folha aritmeticamente. Add Frames from Sprite Sheet exige contagens. hframes/vframes exigem contagens. AtlasTexture exige retângulos explícitos, que você pode definir corretamente, mas apenas medindo cada um à mão.

Folhas de geradores de imagem quebram essa premissa. Ao receber um pedido de "ciclo de caminhada 4×4", um modelo produz algo parecido com uma grade porque viu milhares de grades, não porque calculou os limites das células. O espaçamento varia alguns pixels por coluna e o desvio se acumula da esquerda para a direita; os tamanhos dos sprites mudam com a pose; o conteúdo fica fora do centro da suposta célula. Defina hframes como 4 e a primeira coluna parece correta, a segunda fica ligeiramente cortada e a quarta corta o personagem.

A solução confiável é parar de descrever a folha e começar a lê-la. Em um fundo transparente, cada pixel é sprite (alfa acima de zero) ou fundo (alfa zero), e as linhas e colunas totalmente transparentes entre os sprites marcam os limites reais, onde quer que estejam. Corte no meio de cada um desses espaços, apare cada parte até seu próprio conteúdo e terá quadros individuais que não dependem de uma grade presumida.

É isso que a aba Magic Slice do nosso Recortador de folhas de sprites faz, com algumas passagens de refinamento para detectar partes que ainda contêm dois sprites ou preenchimento excessivo. Exporte os resultados como PNGs individuais e carregue-os com Adicionar quadros de arquivo(s). Quando a detecção automática tem dificuldades — sprites encostados, um brilho que atravessa toda a tela, um personagem com partes separadas —, a aba Manual e predefinições permite arrastar cada linha da grade para o espaço de separação correto, o que significa seis movimentos para uma folha de dezesseis quadros.

Se sua folha tem fundo sólido em vez de transparência, passe-a pelo remoção de fundo primeiro. Fazer isso uma vez na folha inteira é uma operação e um resultado consistente; fazer em dezesseis quadros separados depois é ter dezesseis chances de divergência.

PNGs individuais versus uma folha

Na maioria dos projetos 2D, a diferença nas chamadas de desenho não é o gargalo, e a praticidade dos arquivos individuais vence. Se chegar a um ponto em que a troca de texturas importa, a solução é empacotar os quadros prontos em um atlas como etapa de build, em vez de criá-los desde o início como uma mega-folha recortada manualmente.

Perguntas frequentes