🎮Utilitários

Cortar Spritesheet

Corta um spritesheet em frames individuais informando linhas e colunas. Download em ZIP.

Linhas

Colunas

Para que serve?

Um spritesheet é aquela imagem que junta vários frames de animação organizados em grade. O que esta ferramenta faz é separar frame por frame, deixando cada um pronto para usar em CSS sprites, animações 2D e jogos.

Você só precisa dizer quantas linhas e colunas o spritesheet tem. Cada célula vira um frame à parte, que dá para baixar individualmente.

O processamento roda na sua máquina, via Canvas.

Corte um spritesheet em frames

Quem faz jogos costuma guardar vários quadros de animação juntos num só arquivo, o spritesheet. O problema é que, ao usar, muitas vezes você precisa dos frames separados. Esta ferramenta faz esse recorte sozinha, dividindo o spritesheet em quadros individuais.

Você informa quantas linhas e colunas a grade tem, e a imagem é fatiada em todos os frames de uma vez, cada um com seu próprio botão de download. Para quem trabalha com animação 2D, game dev ou só precisa extrair os sprites de uma folha pronta, é um baita atalho.

O spritesheet não vai para servidor nenhum, porque o corte todo acontece no navegador. Carregue, defina a grade e baixe os frames um a um — não há empacotamento em ZIP, então para grades grandes convém usar o download automático do navegador.

Perguntas frequentes

Os frames saem compactados num arquivo ZIP?

Não saem. Cada frame aparece como um item separado na grade de pré-visualização, e o download é um clique por frame: os arquivos vêm nomeados frame-001.png, frame-002.png e assim por diante, numerados da esquerda para a direita e de cima para baixo. Um spritesheet 4×4 significa dezesseis cliques. Não existe botão de baixar tudo de uma vez nem geração de ZIP nesta página.

Meu spritesheet tem espaço entre os quadros. Funciona?

Não como você espera. O corte assume uma grade perfeitamente regular e sem margem: a largura é dividida pelo número de colunas, a altura pelo número de linhas, e pronto. Folhas com 1 ou 2 pixels de separação entre as células, ou com borda externa, saem com todos os frames deslocados, cada um carregando um pedaço do vizinho. Atlas de tamanho variável, com arquivo .json ou .plist de coordenadas, também está fora do alcance — nesses casos, apare as margens num editor antes.

O corte estraga os pixels do pixel art?

Não estraga. O recorte é 1:1, sem reamostragem: cada frame sai com os pixels originais, a suavização do canvas fica desligada e a prévia usa renderização pixelada, então nada aparece borrado. A transparência do PNG é preservada. O único detalhe é a divisão inteira — quando a largura ou a altura não é múltiplo exato do número de colunas e de linhas, os pixels que sobram na borda direita e na inferior são descartados.

Ferramentas Relacionadas

🎨

Ajustar Cor

Clareie, escureça, inverta, desature ou ajuste a saturação de uma cor HEX, RGB ou HSL. Veja o resultado em tempo real com o código da cor resultante.

📍

Mapa de Pontos

Plote coordenadas geográficas (latitude/longitude) em um mapa interativo OpenStreetMap. Adicione marcadores clicando no mapa ou digitando as coordenadas.

🎨

Misturar Cores

Misture duas cores e obtenha a cor resultante. Controle o peso percentual de cada cor. Resultado em HEX, RGB e HSL.

▶️

Gerador de Embed do YouTube

Monta um <iframe> de incorporação do YouTube a partir do ID do vídeo, com dimensões customizáveis.

🕐

Relógio Digital

Relógio digital em tela cheia com hora local em tempo real. Suporta formato 12h e 24h com modo fullscreen.

📐

Expansor de Faixa IPv4 (CIDR)

Expanda blocos CIDR IPv4 (ex: 192.168.0.0/24) em primeiro IP, último IP, broadcast, máscara e total de hosts utilizáveis. Útil para planejamento de rede e firewall. Tudo no navegador.