Gato em pixel art andando
De GIF para sprite sheet em uma linha de seis quadros: o layout que a maioria das engines lê como uma tira.
Converter GIF em sprite sheet
Solte um GIF animado e receba todos os quadros em uma única sprite sheet PNG, com atlas JSON e animação CSS. Este conversor grátis de GIF para sprite sheet também abre WebP e PNG animados e clipes de vídeo curtos, tudo no seu navegador.
GIF para sprite sheetGrátis · roda no seu navegador
Solte um GIF aqui
GIF, WebP ou PNG animado, ou um clipe curto em MP4 ou WebM. Tudo fica no seu navegador.
- Grátis, roda no seu navegador
- GIF, WebP, PNG e vídeo
- Linhas, colunas e margem
- PNG, atlas JSON e CSS
Exemplos de GIF para sprite sheet
Oito animações feitas para estes exemplos, cada uma transformada em sprite sheet pelo próprio conversor desta página. Abra uma e experimente todos os ajustes.
Pássaro azul batendo as asas
Quatro quadros em uma sprite sheet em potência de dois, 1.024 × 1.024, para as engines que pedem isso.
Tocha tremeluzindo
Seis quadros na metade do tamanho, uma sprite sheet pequena para um jogo de tiles.
Ícone de carregamento
Oito quadros em uma sprite sheet quadrada, pronta para uma animação de carregamento em CSS.
Fantasma flutuando
Quatro quadros em uma coluna, para as engines que reproduzem sprite sheets de cima para baixo.
Ícone de coração batendo
Quatro quadros com 4 px de margem, para as bordas ficarem sempre limpas em relação ao quadro vizinho.
Robô acenando
Quatro quadros em uma linha, com 4 px de espaçamento entre eles.
Chama de foguete
Quatro quadros de uma chama tremeluzindo em uma sprite sheet quase quadrada.
Como fazer uma sprite sheet a partir de um GIF
Três passos, e nada é enviado.
Arraste, cole ou escolha um GIF, WebP ou PNG animado, ou um clipe curto em MP4 ou WebM. Cada quadro é lido no seu aparelho.
Mantenha todos os quadros ou um intervalo, pegue um a cada n, tire os repetidos e depois ajuste as colunas, a margem, o espaçamento e o tamanho do quadro.
Salve a sprite sheet PNG, o atlas JSON com o tempo de cada quadro, uma animação CSS ou os quadros como PNGs em um ZIP.
O que este conversor de GIF para sprite sheet faz de melhor
Seis pontos fortes, de um ciclo de caminhada em pixel art a uma animação de carregamento para a web.
- Animação
GIF, WebP, PNG e clipes curtos
Abra um GIF animado, um WebP ou PNG animado, ou um clipe curto em MP4 ou WebM. Os quadros são lidos como um visualizador os mostra, então quadros de GIF sobrepostos saem inteiros.
Só os quadros de que você precisa
Mantenha um intervalo, pegue um quadro a cada dois ou três e tire os quadros repetidos. O tempo de um quadro pulado vai para o quadro anterior, então a animação mantém a velocidade.
Um layout para cada engine
Uma sprite sheet quase quadrada, uma linha, uma coluna ou o número de colunas que você quiser, com margem, espaçamento e tamanhos em potência de dois, para converter GIF em sprite sheet do jeito que a sua engine lê.
Atlas JSON e animação CSS
O atlas JSON lista o lugar e o tempo de cada quadro no formato que o Phaser e o PixiJS leem; o arquivo CSS reproduz a sprite sheet em qualquer página web.
Tamanho do quadro e pixel art
Reduza os quadros a um quarto ou à metade para sprite sheets menores, ou amplie pixel art 2× ou 4× com pixels nítidos. O tamanho da sprite sheet aparece antes do download.
Grátis e privado
Roda inteiramente no seu navegador: sem envio, sem conta, sem marca d'água, e continua funcionando offline depois que a página carrega.
Guia: sprite sheets limpas a partir de qualquer animação
Cinco dicas rápidas para uma sprite sheet limpa a partir de qualquer animação.
Escolha o layout que a sua engine lê
Uma linha serve para a maioria das ferramentas de animação e para CSS; uma sprite sheet quase quadrada mantém animações grandes dentro do tamanho máximo de textura; uma coluna combina com engines que leem de cima para baixo.
Apare os quadros
Use “Do quadro” e “Até o quadro” para manter um único loop, e “Um a cada” para reduzir pela metade uma animação longa. “Tirar quadros repetidos” remove as pausas que alguns GIFs guardam como cópias.
Margem e espaçamento
Adicione de 1 a 4 px de margem quando os quadros forem redimensionados em um jogo, para as bordas de cada quadro ficarem limpas. O espaçamento abre espaço entre as células para edição.
Fique de olho no tamanho da sprite sheet
O tamanho aparece embaixo da sprite sheet. Para celulares, um tamanho de quadro menor ou mais colunas mantém cada lado dentro de 4.096 px; ative “Tamanho em potência de dois” para as engines que pedem isso.
Use o atlas ou o CSS
Carregue o PNG com o atlas JSON na sua engine para ter cada quadro com nome e tempo. Em um site, vincule o arquivo CSS e dê a classe a um elemento.
Quem transforma animações em sprite sheets
Motivos comuns para converter GIF em sprite sheet.
Desenvolvedores de jogos
Leve GIFs animados e clipes para uma engine de jogo como uma única textura com quadros nomeados.
Web designers
Troque um GIF pesado por um único PNG e uma animação CSS curta.
Criadores de apps e interfaces
Transforme ícones de carregamento e animações de ícones em sprite sheets para apps e interfaces.
Animadores e modders
Reúna todos os quadros de uma animação em uma sprite sheet para editar, compartilhar ou modificar.
Perguntas frequentes sobre sprite sheets
Respostas sobre converter animações em sprite sheets, arquivos e privacidade.
Abra o GIF, escolha os quadros e as colunas e baixe a sprite sheet PNG, além do atlas JSON ou do CSS se precisar.
Sim. Roda inteiramente no seu navegador, sem conta e sem marca d'água.
Não. Sua animação é lida e transformada em sprite sheet no seu aparelho; nada vai para um servidor.
Dá. WebP e PNG animados abrem no Chrome, no Edge e no Safari, e clipes curtos em MP4 ou WebM são lidos a 12 quadros por segundo.
O tempo de cada quadro fica no atlas JSON e no CSS. Quando você pula quadros, o tempo deles vai para o quadro anterior, então o loop dura o mesmo que o GIF.
Uma linha é o mais comum para animações, uma sprite sheet quadrada deixa animações longas compactas, e uma coluna combina com engines que leem de cima para baixo.
O formato JSON hash é lido pelo Phaser, pelo PixiJS e por muitas outras engines e ferramentas; ele lista o nome, a posição na sprite sheet e o tempo de cada quadro.
Dá. “Quadros (ZIP)” salva cada quadro mantido como um PNG próprio, nomeado e numerado em ordem.
Converta seu GIF para sprite sheet agora
Abra uma animação e baixe a sprite sheet dela em segundos, grátis e no seu navegador.
Abrir um GIF