Pinguim andando
Seis quadros em uma linha, todos sobre a mesma linha do chão.
Criar sprite sheet: todas as imagens em um PNG
Criar sprite sheet leva segundos: solte seus quadros PNG, ícones ou itens de jogo e receba uma grade organizada ou um layout compacto, com atlas JSON ou XML, sprites CSS e um GIF animado. Este gerador de sprite sheet grátis roda no seu navegador, então nada é enviado.
Criar sprite sheetGrátis · roda no seu navegador
Solte suas imagens aqui
PNG, WebP, JPG, GIF ou AVIF, quantas precisar. Tudo fica no seu navegador.
- Grátis, roda no seu navegador
- Layout em grade ou compacto
- JSON, XML e CSS
- Aparar, margem, potência de dois
Exemplos de sprite sheets para jogos e sites
Oito conjuntos de imagens feitos para estes exemplos, cada um transformado em uma sprite sheet por este sprite sheet maker. Abra um para testar cada ajuste.
Efeito de explosão
Oito quadros em uma grade quadrada, da faísca à fumaça.
Ícones de app
Nove ícones de tamanhos diferentes, aparados e bem compactados.
Itens de jogo em pixel art
Oito itens compactados a 200% com pixels nítidos.
Ícones de frutas para CSS
Seis ícones em uma linha, prontos como sprites CSS para uma página web.
Figurinhas espaciais
Seis figurinhas em três colunas, em uma sprite sheet com tamanho em potência de dois.
Morcego voando
Quatro quadros em uma coluna, para engines que leem de cima para baixo.
Peças de xadrez
Seis peças de alturas diferentes, compactadas com atlas XML.
Como criar sprite sheet
Três passos, e nada é enviado.
Arraste, cole ou escolha arquivos PNG, WebP, JPG ou GIF, quantos precisar. Ordene por nome ou arraste para mudar a ordem.
Use uma grade de células iguais para quadros de animação ou junte imagens de qualquer tamanho bem compactadas. Ajuste o aparo das bordas, a margem, o espaçamento e o tamanho.
Salve a sprite sheet PNG com atlas JSON ou XML, sprites CSS para um site ou as imagens como GIF animado.
O que este gerador de sprite sheet faz de melhor
Seis pontos fortes, de um ciclo de caminhada a uma página inteira de ícones para a web.
ImagensGrade ou compacto
Uma grade de células iguais mantém os quadros de animação em ordem; o layout compacto encaixa imagens de qualquer tamanho na menor sprite sheet que encontrar.
Aparar bordas transparentes
As bordas vazias ficam de fora para economizar espaço, e o atlas guarda o tamanho original e o deslocamento de cada imagem, para nada sair do lugar no seu jogo.
Um atlas para cada engine
O atlas JSON usa o formato hash que o Phaser e o PixiJS leem; o atlas XML usa o formato Sparrow e Starling, lido por muitos frameworks de jogos.
Sprites CSS para sites
Uma classe por imagem, com tamanho e posição, para a página carregar uma imagem só em vez de dezenas.
Prévia da animação e GIF
Reproduza as imagens em ordem na taxa de quadros que você definir e salve tudo como GIF animado para compartilhar ou testar.
Grátis e privado
Este gerador de sprite sheet roda inteiramente no seu navegador: sem envio, sem conta, sem marca d'água, e funciona offline depois que a página carrega.
Guia: sprite sheets que combinam com a sua engine
Cinco dicas rápidas para uma sprite sheet limpa.
Nomeie os arquivos em ordem
Arquivos chamados walk_1, walk_2 … walk_10 ficam na ordem certa com “Ordenar por nome”, porque os números são lidos como números; arraste qualquer imagem para mudá-la de lugar.
Grade para animação, compacto para conjuntos
Use uma grade quando os quadros precisam manter o mesmo tamanho e a mesma posição; compacte ícones, itens e tiles de tamanhos diferentes para economizar espaço.
Apare e mantenha os deslocamentos
Aparar deixa a sprite sheet menor, e as engines que leem o atlas colocam cada imagem de volta no lugar. Para uma grade simples lida pelo tamanho da célula, deixe “Aparar bordas transparentes” desligado.
Margem contra vazamento nas bordas
Adicione 1 a 2 px de margem ou espaçamento quando a sprite sheet for redimensionada ou filtrada, para que as imagens vizinhas nunca apareçam nas bordas.
Fique de olho no tamanho da sprite sheet
O tamanho aparece embaixo da prévia. Mantenha cada lado em até 4.096 px para celulares e ative tamanhos em potência de dois para engines que pedem isso.
Quem usa um gerador de sprite sheet
Motivos comuns para juntar muitas imagens em uma só sprite sheet com um sprite sheet maker.
Desenvolvedores de jogos
Junte personagens, efeitos e itens em uma única textura, com atlas para a engine.
Desenvolvedores web
Combine ícones em uma imagem só com sprites CSS para reduzir o número de requisições.
Artistas de pixel art
Organize quadros de animação e exporte uma sprite sheet limpa em 2× ou 4×.
Modders e animadores
Monte sprite sheets com atlas XML ou JSON para mods, ferramentas e programas de animação.
Perguntas frequentes sobre sprite sheets
Respostas sobre como montar sprite sheets, formatos de atlas e privacidade.
Adicione suas imagens, escolha o layout em grade ou compacto e baixe a sprite sheet PNG com o atlas ou o CSS de que você precisa.
Sim. Roda inteiramente no seu navegador, sem conta e sem marca d'água.
Não. Suas imagens são lidas e organizadas no seu aparelho; nada vai para um servidor.
A grade dá a cada imagem uma célula do mesmo tamanho, ideal para animação. O compacto encaixa imagens de tamanhos diferentes o mais junto possível, ideal para ícones e itens.
JSON para Phaser, PixiJS e a maioria das engines web, XML para frameworks no estilo Sparrow e Starling, e CSS para páginas web.
Não. O atlas guarda o tamanho original e o deslocamento de cada imagem, então as engines que o leem desenham cada quadro no lugar certo.
Dá. Abra o GIF em “GIF para sprite sheet”, que lê cada quadro com o seu tempo e coloca todos em uma sprite sheet.
Até 1.000 imagens no computador e 400 no celular, em uma sprite sheet de até 16.384 px em cada lado.
Criar sprite sheet agora
Adicione suas imagens e baixe uma sprite sheet em segundos, grátis com este gerador de sprite sheet no seu navegador.
Adicionar imagens