Extrator de Sprites

Drop files here or click (max 12 MB)

Solte uma imagem acima para começar a extrair sprites.

Sobre Extrator de Sprites Online

Precisa transformar uma folha de sprites ou imagem estática em sprites individuais? Este Extrator de Sprites detecta automaticamente as regiões dos sprites, corta-os de forma limpa (com opções de aparar e preenchimento) e exporta PNGs transparentes prontos para uso. 🚀 Ideal para projetos Scratch, protótipos de jogos 2D, atividades em sala de aula e jogos independentes. Funciona muito bem com pixel art, elementos de UI, ícones e personagens.

Por Que Usar Este Extrator de Sprites?

  • Detecção automática de sprites baseada em transparência e limiares configuráveis
  • Recorte limpo com opção de aparar bordas transparentes ao redor de cada sprite
  • Controle de preenchimento, alinhamento (centro/inferior) e tamanho de saída uniforme opcional
  • Preserva transparência (canal alfa) para exportações PNG – ideal para tilemaps e personagens
  • Galeria visual de todos os sprites detectados para inspeção rápida antes do download
  • Exportação ZIP no lado do cliente usando JSZip, mantendo nomes de arquivo e ordem dos sprites estáveis
  • Amigável ao Scratch: transforme rapidamente uma única folha de sprites em múltiplos figurinos ou recursos
  • Perfeito para reutilizar recursos entre engines (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ Como Extrair Sprites de uma Folha de Sprites for sprite-extractor

1

1. Solte sua imagem

Arraste e solte uma folha de sprites ou imagem na área de soltura, ou clique para escolher um arquivo. Para melhores resultados, use PNG com fundo transparente ou alto contraste entre sprites e fundo.

2

2. Execute a detecção automática

A ferramenta envia uma representação leve da sua imagem para um endpoint de detecção, que calcula caixas delimitadoras para cada sprite baseadas em transparência e tamanho mínimo. As caixas são sobrepostas na sua imagem para que você possa ver rapidamente o que será exportado.

3

3. Ajuste as opções de extração

Ajuste preenchimento, fundo transparente vs cor sólida, corte de bordas transparentes, alinhamento (centro ou inferior) e largura/altura de saída uniforme opcional. A ferramenta reconstrói cada tela de sprite de acordo.

4

4. Visualize os sprites

Navegue pela galeria de sprites gerados. Cada prévia é construída no cliente usando uma tela fora de tela e pode ser renomeada ou descartada dependendo das opções da interface.

5

5. Baixe PNGs ou um ZIP

Exporte sprites PNG individuais ou baixe um único arquivo ZIP contendo todas as prévias atuais. O ZIP é construído no lado do cliente usando JSZip, e os nomes dos arquivos seguem um padrão sequencial como <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, etc.

Especificações Técnicas

Detecção & Caixas Delimitadoras

A fase de detecção é executada em um endpoint de backend dedicado e retorna caixas delimitadoras limpas que o cliente usa para construir os sprites finais.

AspectoComportamentoNotas
Endpoint de detecçãoPOST /api/sprite-extractor/inspectAceita um URL de dados e opções de detecção, retorna um array de caixas de sprites.
Entradas de detecçãotolerância, limiarAlfa, larguraMínima, alturaMínimaAjuste esses parâmetros na interface para ignorar ruídos pequenos ou capturar apenas sprites significativos.
Forma da caixaRetângulos alinhados ao eixoCada <code>SpriteBox</code> contém <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> nas coordenadas da imagem de origem.
Tratamento de transparênciaConsciente do alfaPixels transparentes contribuem para decisões de corte/aparamento, mas podem ser preservados na saída.
Tratamento de errosFallbacks graciososSe a detecção falhar, a ferramenta exibe um erro legível e não quebra a interface.

Corte, Aparamento e Alinhamento

Uma vez que as caixas são conhecidas, toda a renderização dos sprites é feita no navegador usando canvas HTML.

EtapaImplementaçãoDetalhes
Corte inicialdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Cada sprite é primeiro cortado da imagem original para um canvas temporário.
Aparamento transparenteescaneia o canal alfa via getImageDataA ferramenta escaneia pixels para calcular a caixa delimitadora mínima não transparente quando o aparamento está ativado.
Preenchimentoconfigurável 0–256 pxO preenchimento é aplicado ao redor do sprite aparado ou cortado para reduzir artefatos de borda em motores.
Alinhamentocentro / baseSprites podem ser centralizados ou alinhados à base (útil para personagens em pé sobre uma linha de base).
Tamanho de saída uniformeopcional larguraSprite / alturaSpriteQuando ativado, todos os sprites são renderizados em um canvas de tamanho fixo para padronizar animações.
Fundotransparente ou cor sólidaMantenha a transparência total ou preencha o canvas com uma cor RGBA de fundo escolhida.

Desempenho e Limites

Projetado para uso interativo no navegador.

ParâmetroComportamento TípicoNotas
Tamanho máximo de entrada~10 MB de imagemArquivos maiores ainda podem funcionar, mas carregarão/detectarão mais lentamente.
Contagem de spritesaté ~400 spritesContagens muito altas são possíveis, mas a renderização da prévia e a criação do ZIP levarão mais tempo.
Formato de exportaçãoPNG dentro de um ZIP (Blob)O ZIP é gerado inteiramente no lado do cliente usando JSZip.
Operações de canvasRecorte e desenho por spriteDepende da API de canvas 2D do navegador; o desempenho escala com a resolução e a contagem.

Alternativas de Linha de Comando

Para folhas de sprites massivas ou pipelines automatizados, você pode combinar ferramentas de CLI como ImageMagick com scripts.

Linux / 🍎 macOS

Recorte de grade uniforme com ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Corta uma grade regular de 64×64 em arquivos PNG individuais.

Compactar todos os sprites

zip sprites.zip sprite_*.png

Empacota todos os sprites gerados em um único arquivo.

Windows (PowerShell + ImageMagick)

Recorte baseado em grade

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Igual ao anterior, usando a CLI <code>magick</code> no Windows.

Casos de Uso Práticos

Desenvolvimento de Jogos 2D

  • Extrair quadros de animação de personagens de uma folha de sprites para Godot, Unity 2D, Phaser ou Construct.
  • Isolar elementos de UI (botões, ícones, barras de vida) de um mock-up de design.
  • Dividir tilesets em tiles individuais para editores de nível.
// Exemplo Godot: carregar múltiplos quadros\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch e Projetos em Sala de Aula

  • Transformar uma única folha de sprites em múltiplos figurinos para um personagem do Scratch.
  • Preparar pacotes de assets temáticos (animais, planetas, ícones) para oficinas de programação.
  • Permitir que os alunos projetem folhas de sprites em uma ferramenta de desenho e depois as extraiam para o Scratch.
// Pseudocódigo estilo Scratch para animação simples\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Pixel Art e Bibliotecas de Assets

  • Divida folhas antigas de pixel art em uma biblioteca pesquisável de sprites individuais.
  • Extraia apenas os recursos que você precisa de pacotes comerciais ou de código aberto grandes.
  • Normalize o preenchimento e o alinhamento entre sprites de diferentes fontes.

❓ Frequently Asked Questions

❓A detecção de sprites é totalmente automática?

A ferramenta realiza detecção automática baseada em transparência e limites configuráveis (tolerância, limite alfa, largura/altura mínima). Em muitos casos, ela "simplesmente funciona", mas para folhas complexas, você pode precisar ajustar opções ou executar uma segunda passagem.

📏O extrator altera minha imagem original?

Não. Sua imagem original permanece intocada. A ferramenta apenas a lê em uma tela na memória, recorta regiões em novas telas e, em seguida, exporta novos sprites PNG.

🎯Posso controlar o preenchimento e o alinhamento?

Sim. Você pode configurar o preenchimento (em pixels), escolher entre um fundo transparente ou sólido, ativar o corte de bordas transparentes e alinhar os sprites centralizados ou alinhados na parte inferior dentro da tela de saída.

🔒Minhas imagens são armazenadas no servidor?

A etapa de detecção envia sua imagem (como uma URL de dados) para um endpoint dedicado para calcular as caixas dos sprites, mas os próprios sprites são construídos e compactados no seu navegador. O serviço é projetado para processamento transitório, não para armazenamento de longo prazo. Como sempre, evite usar ferramentas de terceiros para recursos que devem permanecer estritamente privados.

🧊A transparência será preservada nos sprites exportados?

Sim. Por padrão, a tela de saída é deixada transparente e seus sprites mantêm seu canal alfa. Você pode opcionalmente escolher uma cor de fundo sólida se o seu mecanismo de destino preferir recursos opacos.

Pro Tips

Best Practice

Use uma pequena quantidade de preenchimento (2–4 px) ao redor de cada sprite para evitar vazamento de bordas ao dimensionar ou girar no seu mecanismo.

Best Practice

Nomeie os sprites de forma consistente (ex.: <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) para simplificar as importações de animação e a programação.

Best Practice

Em ambientes de sala de aula, comece com folhas de sprites muito simples (poucos sprites grandes, fundo claro) para que os alunos vejam resultados imediatos.

Best Practice

Mantenha o ZIP exportado junto com os arquivos de origem do seu projeto para que você possa facilmente regenerar ou ajustar animações posteriormente.

Additional Resources

Scratch Wiki – Sprites
Documentation
Documentação do Godot – Animação de Sprites 2D
Documentation
Manual do Unity – Sprites 2D
Documentation

Other Tools