Criador de Sprite Sheets: Construtor de Folhas e Atlas Online Grátis
Crie seu próprio criador de sprite sheet
Combine os frames em uma única folha — defina colunas, padding e escala, exporte um PNG e um atlas JSON — ou gere uma folha animada inteira a partir de um único prompt.
Um criador de sprite sheet faz um único trabalho: pegar um conjunto de frames individuais e empacotá-los em uma única imagem em coordenadas conhecidas. Você fornece arquivos PNG, JPG ou WebP, escolhe colunas, padding e escala, e ele retorna um PNG mais um atlas JSON que mapeia cada nome de frame para um retângulo x, y, largura e altura. Esse retângulo é tudo o que seu renderizador precisa para desenhar a célula correta.
O termo abrange duas ferramentas diferentes. Uma é um empacotador: você já tem os frames e quer colocá-los em uma única folha. A outra é um gerador: você escreve um prompt e recebe uma folha completa de personagem animado em um estilo consistente. O construtor de mundos 3D no navegador da Neta Studio dá conta das duas coisas, e a saída entra diretamente em uma cena Three.js sem etapa de conversão.
Crie um sprite sheet a partir dos seus frames
Este é o caminho do empacotamento. Você solta os frames, e a folha é montada de forma determinística: da esquerda para a direita, de cima para baixo, na ordem em que você os forneceu. O primeiro frame ocupa a célula (0,0), o segundo fica uma célula à direita, e assim por diante até a linha encher; nesse ponto, o empacotamento passa para a próxima linha.
A ordem importa mais do que qualquer outra coisa aqui. O empacotador não classifica por nome de arquivo, e não infere grupos de animação a partir dos nomes. Se seus frames forem numerados de frame_1.png a frame_8.png e você soltá-los fora de ordem, a folha exportada fica errada e o atlas JSON vai registrar fielmente a ordem errada. Ordene antes de soltar, ou confira a tira de miniaturas antes de exportar.
A saída são dois arquivos. O PNG é a imagem empacotada. O JSON é um pequeno objeto indexado por nome de frame, e cada valor contém o retângulo e o tamanho de origem. A maioria das engines consegue consumir esse JSON diretamente; se a sua não conseguir, os números são simples o bastante para remapear manualmente.
01
Exporte seus frames como PNG com transparência, ou JPG/WebP se você não precisar de canal alfa. Mantenha todos os frames com as mesmas dimensões em pixels.
02
Solte os frames no empacotador na ordem de reprodução. Verifique se a tira de miniaturas é lida da esquerda para a direita do jeito que a animação deve tocar.
03
Defina o número de colunas. Deixe em automático se quiser uma folha aproximadamente quadrada, ou fixe no número de frames para uma única tira larga.
04
Defina o padding e a escala. O padding adiciona pixels transparentes entre as células; a escala multiplica cada frame por um fator inteiro usando vizinho mais próximo.
05
Exporte o PNG e o atlas JSON juntos. Confira um retângulo no JSON contra a folha visível antes de conectá-lo ao seu renderizador.
Gere um sprite sheet a partir de um prompt
O segundo significado de criador de sprite não tem nada a ver com empacotamento em grade. Você descreve um personagem e recebe uma folha completa de volta — um conjunto completo de poses renderizadas em um único estilo consistente, já dispostas em uma grade. Não há arte de origem para soltar, porque a arte é a saída.
A parte útil é a consistência. Gerar oito direções de um ciclo de caminhada em uma única passada mantém silhueta, paleta e proporções alinhadas entre as células. Gerar cada frame em uma requisição separada não mantém, e o desvio aparece como um personagem que parece mudar de massa entre os frames.
A Neta Studio gera ciclos de caminhada de 8 direções, conjuntos de idle, ataque e conjuração. Agent Sprite Forge é o asset do estúdio que produz essas folhas; você pode soltar uma folha gerada em um mundo no construtor de jogos 3D e controlá-la com o mesmo atlas JSON que o empacotador teria produzido.
- Caminhada de 8 direçõesUma folha cobrindo as oito direções da bússola, de modo que girar o personagem na cena corresponde a uma consulta de linha, em vez de uma nova geração.
- Idle, ataque, conjuraçãoConjuntos de ações separados gerados no mesmo estilo da caminhada, para você alternar entre eles em tempo de execução sem uma quebra de estilo visível.
- Continuidade de estiloDescreva o personagem uma vez e os conjuntos de poses herdam a paleta e as proporções, que é a parte que costuma falhar quando você gera frames um de cada vez.
Colunas, padding, escala e o atlas JSON
Quatro configurações decidem se uma folha é utilizável. Acerte-as na hora de exportar, porque corrigi-las depois significa reempacotar e testar novamente todas as animações que referenciavam as coordenadas antigas.
O atlas JSON é o contrato entre a folha e seu código. Ele armazena, por frame, a posição e o tamanho da célula. Se você mudar a folha e não regenerar o atlas, os sprites amostram a região errada e você obtém uma faixa de frames vizinhos vazando para dentro da célula.
- ColunasFixa quantas células ficam por linha antes de passar para a próxima. Uma tira larga usa colunas iguais ao número de frames; uma grade usa algo mais próximo da raiz quadrada.
- Padding e espaçamentoInsere pixels transparentes entre as células. Isso importa quando seu renderizador amostra com qualquer filtragem, porque os pixels de borda de um frame vizinho podem vazar através de uma fronteira com padding zero.
- EscalaMultiplica cada frame por um fator inteiro usando vizinho mais próximo. Escala não inteira com um filtro suave suaviza as bordas dos pixels e destrói o visual nítido pelo qual você exportou os frames.
- Atlas JSONMapeia cada nome de frame para x, y, largura e altura. Trate a origem como os pés do personagem, não como o canto superior esquerdo da imagem, para que o posicionamento no plano do solo não exija deslocamentos por frame.
O que é um atlas de textura
Um atlas é uma única textura que contém muitas imagens menores, mais uma tabela que descreve onde cada uma fica. Um sprite sheet é o caso comum em que essas imagens menores são frames de animação do mesmo assunto.
A razão pela qual os atlas existem são as draw calls. Vincular uma textura separada por frame força o renderizador a trocar de estado entre cada uma, e as mudanças de estado dominam o tempo de frame quando você tem muitos sprites na tela. Empacotar tudo em uma única textura significa um único bind para o grupo inteiro. A geometria ainda é desenhada por sprite, mas a textura não muda.
O trade-off é que a edição é pouco granular. Mudar um frame significa reempacotar a folha e atualizar o atlas, e qualquer código que guarde um retângulo antigo agora está errado. É por isso que o atlas é exportado como dados, em vez de coordenadas fixas no código. Nosso guia de sprite sheet aborda as decisões de empacotamento com mais profundidade.
Gerador de sprite sheet para RPG, plataforma e isométrico
O layout que você quer é determinado principalmente pelo gênero. RPGs indexam por direção e fase da animação, então uma grade é natural. Jogos de plataforma geralmente executam uma única ação por vez, então uma tira larga é mais simples. Mundos isométricos precisam de dimensões de célula que correspondam à projeção em losango, ou os sprites se sobrepõem.
Escolha o layout antes de definir as colunas e escreva o código de consulta de acordo com esse layout. Adaptar uma grade para indexação baseada em tira é uma mudança mecânica, mas tediosa, e afeta todos os pontos de chamada de animação.
| Gênero | Layout típico | Observações |
|---|---|---|
| RPG | Grade de 4 direções | As linhas são direções, as colunas são frames. Indexe por direção e depois por fase. |
| Plataforma | Tira única larga | Uma ação por folha. A reprodução é um índice linear, sem cálculo de linha. |
| Isométrico | Células em losango | O tamanho da célula deve corresponder à projeção. Use mais padding que o normal para impedir vazamento nas bordas. |
Sprite sheets de personagem
Manter um elenco consistente é a parte difícil quando você tem mais de um personagem. Folhas individualmente plausíveis falham em conjunto quando as paletas desviam, as proporções mudam ou a direção da luz inverte entre personagens na mesma cena.
Gere o conjunto completo de ações de um personagem em uma única passada, em vez de uma ação por vez. A paleta e as proporções se mantêm entre as poses dentro de uma passada; entre passadas, não, e a diferença fica visível no momento em que dois personagens compartilham um frame.
Mantenha o tamanho da célula idêntico para todos os personagens do elenco, mesmo que a arte não preencha a célula. Células uniformes permitem que a cena coloque qualquer personagem em qualquer slot sem uma tabela de deslocamento por personagem. O caso de uso do criador de sprites de personagem explica isso passo a passo para um elenco completo.
Recorte uma folha existente
Se você já tem uma folha e precisa extrair os frames de volta, isso é fatiamento, não empacotamento, e é a operação inversa. O conversor e o animador de GIF cuidam desse caminho — você fornece a folha, define a grade de células ou os limites dos frames e recebe frames individuais.
Duas coisas fazem o fatiamento falhar. Folhas com padding irregular não se dividem igualmente por um tamanho de célula suposto, então meça uma célula conhecida em vez de dividir a largura da imagem pelo número estimado de colunas. Folhas exportadas de um formato com perdas carregam artefatos de compressão ao longo dos limites das células, e esses artefatos ficam visíveis quando as células são separadas e ampliadas.
Entre no mundo ao qual ele pertence
Um sprite é um personagem sem onde pisar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de montar e coloque-a em um mundo pelo qual alguém possa caminhar — uma pequena ilha, um planeta, uma esquina chuvosa. Todos os mundos deste site foram feitos a partir de uma descrição escrita e publicados como uma página que você pode jogar.
Perguntas frequentes
Quais formatos de arquivo posso usar para os frames de origem? +
PNG, JPG e WebP. PNG é o único dos três que carrega um canal alfa de forma confiável, então use-o para qualquer coisa com transparência.
Por que meu sprite sheet fica embaçado quando é ampliado? +
Você escalou por um fator não inteiro, ou o renderizador está aplicando um filtro suave. Escale apenas por números inteiros e defina o filtro de textura como vizinho mais próximo.
Preciso de padding entre os frames? +
Normalmente sim. Com padding zero e qualquer filtragem de textura, os pixels de borda de um frame amostram na célula vizinha, produzindo uma emenda visível durante a animação.
O que o atlas JSON realmente contém? +
Uma entrada por frame, contendo seu x, y, largura e altura na folha. Alguns exportadores também registram o tamanho do frame de origem e a origem, que para personagens normalmente fica nos pés.
Posso mudar o número de colunas depois de exportar? +
Não sem reempacotar. Mudar as colunas move todos os frames na folha, então os retângulos antigos do atlas não apontam mais para as células corretas, e todas as animações que os referenciam quebram.
Qual é a diferença entre um criador de sprite sheet e um gerador de sprite sheet? +
Um criador empacota frames que você já tem em uma grade. Um gerador cria os frames a partir de um prompt — por exemplo, um conjunto completo de caminhada de 8 direções em um único estilo consistente — então a arte é a saída, não a entrada.
Voltar ao Construtor de Jogos 3D
Todos os 31 mundos, jogos e cenas 3D finalizados ficam em uma única página — todos jogáveis.
Comece com um template da biblioteca
Cada asset desta biblioteca é um PNG transparente e pronto para jogos, com um prompt registrado — Biblioteca de recursos de sprite e Sprite sheets grátis, marcados por ação, estilo e tema. Grátis para navegar e baixar.