Conversor de imagem e vídeo para sprite sheet — frames PNG para um atlas de jogo

Um conversor de imagem para sprite sheet recebe uma sequência de frames PNG — ou um vídeo curto — e os empacota em um único atlas que você pode entregar a uma engine de jogo. No Neta Studio a conversão roda inteiramente no seu navegador: sem fila de upload, sem ida e volta ao servidor, nenhum arquivo sai da sua máquina. Você solta uma pasta de PNGs numerados ou um único MP4, define colunas, linhas, tamanho da célula e remoção de fundo, e exporta uma folha com um manifesto JSON correspondente.

As partes que realmente quebram não são o empacotamento. São a ordenação (frame_10 ordenando antes de frame_2), o padding (filtros amostrando a célula vizinha e produzindo uma franja) e o tamanho da célula (uma folha cujas dimensões não são divisíveis pela grade, de modo que a última coluna fica cortada). Esta página cobre cada um desses pontos de forma concreta, além de como extrair frames de um vídeo e como verificar o resultado animando dentro de um mundo 3D real.

Solte imagens ou um vídeo

A primeira tela tem um alvo de soltar e dois caminhos. Solte uma pasta ou uma seleção múltipla de frames PNG, WebP ou JPG e a ferramenta trata a entrada como uma sequência de imagens ordenada. Solte um único arquivo de vídeo — MP4, WebM ou MOV que o navegador consiga decodificar — e a ferramenta muda para o caminho de extração, onde você escolhe uma taxa de amostragem e ela extrai frames pelo caminho WebCodecs ou por um elemento de vídeo oculto como alternativa.

Os dois caminhos chegam ao mesmo editor: uma grade de células à direita, uma coluna de configurações à esquerda e uma pré-visualização ao vivo que percorre a folha no lugar. Nada é gravado em disco até você pressionar exportar. A decodificação acontece na thread principal para imagens estáticas e em um worker para vídeo, então um clipe 4K mantém a interface responsiva, mas uma sequência de 300 frames PNG bloqueia brevemente a renderização enquanto decodifica.

Se a soltura for rejeitada, o motivo é quase sempre um de três: o codec do vídeo não é decodificável no seu navegador (comum com HEVC em MOV), as imagens têm dimensões incompatíveis, ou a contagem de frames excede o orçamento de células para a grade que você definiu. A ferramenta nomeia o arquivo que falhou em vez de descartá-lo silenciosamente.

Como criar uma sprite sheet a partir de frames PNG

A ordenação é a primeira decisão e a ferramenta pode errá-la se seus nomes de arquivo forem inconsistentes. O comparador padrão divide cada nome de arquivo em trechos de texto e numéricos e os compara, de modo que walk_0001.png … walk_0048.png fica na ordem correta e walk_1.png … walk_48.png também. Se seus frames forem nomeados por timestamp ou por um UUID, a ordem de classificação é arbitrária — renomeie primeiro, ou arraste para reordenar a faixa de miniaturas antes de empacotar.

Confira a contagem de frames com o que você espera da animação. Um loop de idle de 12 frames e um ciclo de caminhada de 24 frames parecem idênticos em uma grade de miniaturas em tamanhos pequenos. Abra a pré-visualização, avance até a última célula e confirme que é o frame que deve preceder o primeiro ao reiniciar o loop — é nesse frame que um loop costuma parecer quebrado.

Todo frame deve ter a mesma largura e altura. O empacotador usa as dimensões da primeira imagem e rejeita qualquer arquivo subsequente que difira. Se o seu exportador adicionou uma borda de 1px ao recortar, ou gerou um sprite em uma âncora diferente, esses frames são os discrepantes e devem ser corrigidos na origem em vez de preenchidos aqui.

Converter um vídeo em sprite sheet

A extração de frames de vídeo tem um número que determina se o resultado é utilizável: a taxa de extração. Vídeo normalmente é 24, 30 ou 60 fps; animação de sprite raramente precisa disso. Um clipe de 30 fps amostrado a 30 fps ao longo de três segundos produz 90 células e um atlas desnecessariamente grande. Amostrar o mesmo clipe a 12 fps produz 36 células e, para a maioria dos movimentos de personagem, reprodução indistinguível.

Escolha a taxa de extração a partir da taxa de reprodução pretendida da animação, não da fonte. Se o sprite for rodar a 12 fps no jogo, extraia a 12 fps. Se você planeja retemporizá-lo, extraia a 24 e descarte células alternadas na engine — você mantém a opção, ao custo de uma folha maior.

O tamanho da célula vem das dimensões do vídeo após qualquer escala que você aplicar. Um clipe 1920×1080 escalado para 480×270 gera células de 480×270. Mantenha a proporção da fonte; uma escala não uniforme distorce cada frame e nenhuma configuração de padding corrige isso. Quando o vídeo tem tarjas (letterbox), recorte as barras antes da extração em vez de removê-las depois, porque um sujeito em movimento pode tocar a cor da barra.

PNG para sprite: transparência e padding

Mantenha o canal alfa. A maioria dos problemas de empacotamento relatados remonta a um conversor que achatou RGBA para RGB na exportação, o que transforma todo pixel transparente em preto ou branco, dependendo do preenchimento da tela. Nesta ferramenta a tela de exportação é criada sem fundo opaco, então um PNG com fundo removido ou já pré-removido mantém seu alfa durante o empacotamento.

O padding existe porque a filtragem de textura amostra fora da célula. Na borda de um sprite, um filtro bilinear ou trilinear lê os pixels da célula vizinha e os mistura, produzindo uma franja de 1px que muda de cor conforme o sprite adjacente. Um padding transparente de 2px ao redor de cada célula impede que o filtro alcance o exterior. Os valores de padding são gravados no manifesto, para que a engine possa deslocar as UVs pelo padding ao ler o atlas.

Dimensões de folha em potências de dois não são mais exigidas pela maioria das engines, mas ainda ajudam em hardware e em pipelines antigos que as pressupõem. Defina colunas e linhas de modo que (célula + 2 × padding) × colunas e (célula + 2 × padding) × linhas resultem em 256, 512, 1024, 2048 ou 4096. Se a sua grade não dividir uniformemente, a última linha ou coluna fica cortada ou preenchida com espaço vazio — a ferramenta mostra as dimensões finais da folha ao vivo, para que você veja isso antes de exportar.

Detecção automática do tamanho da célula

A ferramenta lê o tamanho da célula a partir da fonte. Para uma sequência de imagens, ela usa as dimensões do primeiro frame que decodifica; para um vídeo, usa as dimensões de saída após a escala. Esse valor é preenchido no campo Tamanho da célula e usado para calcular a grade padrão, de modo que uma pasta de frames 64×64 abre com células de 64×64.

Substitua esse valor quando a margem transparente ao redor do seu sujeito for maior que o próprio sujeito. Um sprite exportado com padding generoso produzirá células majoritariamente vazias, e o atlas fica maior do que precisa. A configuração de corte encontra a caixa delimitadora dos pixels não transparentes em todos os frames e recorta para a união — não por frame, porque o corte por frame faz o sprite tremer conforme anima.

Substitua esse valor no sentido oposto quando os frames forem inconsistentes. Se a sequência mistura 64×64 e 66×66 porque uma passagem de exportação adicionou um contorno, a detecção de tamanho de célula trava no primeiro arquivo e os demais são escalados ou rejeitados. Corrija a fonte. Não existe tamanho de célula que torne frames incompatíveis corretos.

Veja animar em 3D

Uma sprite sheet só está correta se ela roda. The Cyclops' Island é um mundo jogável no Neta Studio que usa personagens em estilo sprite, e é a forma mais rápida de verificar um atlas em movimento — ande com um personagem pela cena, observe o ponto de loop, veja se as franjas de padding aparecem quando a câmera se afasta e a filtragem entra em ação.

Se você preferir montar o teste por conta própria, o construtor de jogos 3D permite soltar o PNG exportado e seu manifesto em uma cena e controlar o deslocamento de UV por um temporizador. Defina o tempo de frame com a taxa de extração que você escolheu e a animação roda na velocidade pretendida. Se parecer errado aqui, vai parecer errado na sua engine, e a causa é quase sempre o valor de célula ou de padding do manifesto.

Mini World é o sandbox menor se você só quer um plano com a folha sobre ele e uma câmera que você pode orbitar, o que muitas vezes basta para detectar uma remoção de fundo ruim na borda do sprite.

Mais ferramentas gratuitas

O conversor fica ao lado de três ferramentas que compartilham o mesmo editor e formato de exportação. Uma folha feita em uma abre em outra sem conversão.

GIF to sprite sheet recebe um GIF animado e extrai seus frames. Os atrasos dos frames de GIF são por frame, então a ferramenta os lê e informa a taxa de reprodução efetiva da folha em vez de assumir uma taxa constante. Sprite sheet to GIF faz o caminho inverso: escolha um intervalo de tempo sobre as células e exporte um GIF animado com um atraso de frame escolhido, útil para compartilhar um loop sem enviar um PNG. O animador de sprites recebe uma folha e um manifesto e a reproduz em um canvas com controles de velocidade, direção e loop, para que você verifique o tempo dos frames antes de comprometer-se com uma engine.

Cada ferramenta exporta o mesmo formato de manifesto. Largura da célula, altura da célula, colunas, linhas, padding e a lista ordenada de frames — de modo que uma folha que começa no extrator de vídeo e termina no animador carrega os mesmos números do início ao fim.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a em um mundo pelo qual alguém pode caminhar — uma ilha pequena, um planeta, uma esquina de rua chuvosa. Cada mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.