Jogos / Imagens
Criador, cortador e animador de sprite sheets
Organize imagens em um sprite sheet ou atlas de texturas, divida um sheet em frames separados e anime-os. Salve PNGs, metadados JSON hash, classes CSS, arquivos ZIP ou um GIF animado sem enviar suas imagens.
Criador, cortador e animador de sprite sheets: Criar combina imagens PNG, JPG e WebP e frames de GIF decodificados em um sheet organizado em grade, linha, coluna ou com empacotamento. Células uniformes se ajustam à maior imagem, com alinhamento central ou inferior central, preenchimento, espaçamento e dimensões opcionais em potência de dois. Cortar divide por quantidade de células ou tamanhos em pixels, ou detecta ilhas separadas por transparência ou por uma cor de fundo definida como chave. Você pode excluir retângulos, ignorar células vazias e aparar as bordas transparentes antes de salvar um ZIP ou enviar os frames para Animar. Animar reproduz um intervalo de frames selecionado a 1–60 FPS, em ordem de loop ou pingue-pongue, com zoom de pixels e onion skin opcional. Salva um GIF ou uma faixa horizontal de PNGs. Comece pelo criador de pixel art se precisar desenhar seus frames primeiro. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Jogos e festas
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
Organize os quadros em uma sheet para o seu jogo.
Células uniformes usam o maior quadro, mais preenchimento em todos os lados. O espaçamento separa as células.
Adicione quadros para começar. Você também pode fatiar uma sheet em Cortar e enviar os quadros para cá.
Suas imagens e exportações permanecem neste navegador. Use os arquivos salvos no seu próprio projeto de jogo.
Sprite sheets e atlases de textura
Uma sprite sheet armazena vários quadros de animação ou imagens de jogo em uma única imagem. Uma grade regular descreve cada quadro pela posição de sua célula. Um atlas de textura pode usar retângulos de tamanhos diferentes e precisa de coordenadas que descrevam cada imagem. A documentação do AtlasTexture do Godot (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) explica como uma região de um atlas é usada como textura.
O alinhamento pelo centro inferior mantém os pés de um personagem na mesma linha de base em todos os quadros. Prateleiras compactadas preservam as dimensões originais de cada imagem e evitam a rotação. O dimensionamento para potência de dois adiciona pixels não utilizados à direita ou na parte inferior; ele não redimensiona sua arte. PNG mantém a transparência alfa completa, enquanto GIF tem menos cores e apenas transparência de um bit.
Coordenadas de hash em JSON
A exportação de hash em JSON usa os nomes dos quadros como chaves dentro de frames. Cada entrada tem um retângulo do quadro com x, y, w e h, um sourceSize, um spriteSourceSize e sinalizadores rotated e trimmed. As coordenadas contam os pixels a partir do canto superior esquerdo da sheet. O objeto meta registra o nome do arquivo de imagem e o tamanho total da sheet. O carregador de atlas JSON hash do Phaser (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) descreve esse formato de quadros nomeados.
Faça com que as exportações usem os limites originais da imagem, e não os limites das células com preenchimento, mantendo trimmed e rotated como false. O recorte pode exportar uma lista separada dos retângulos selecionados. Remova as bordas transparentes apenas quando quiser recortes precisos; deixe essa opção desativada para preservar as células regulares de animação e seu registro. Compare os retângulos salvos com o importador do seu mecanismo antes de usar o atlas em um projeto.
Como usar
- Escolha Criar, Cortar ou Animar; cada modo tem um link que você pode salvar nos favoritos.
- Adicione frames ou um sheet e ajuste o layout, a grade de corte ou as configurações da animação.
- Visualize o resultado e baixe os arquivos para o seu projeto de jogo.
Privacidade e limitações
Seus arquivos permanecem no navegador. Nada é enviado.
Ferramentas relacionadas
Perguntas frequentes
Devo usar uma grade ou um atlas de texturas empacotado?
Uma grade dá a todos os frames o mesmo tamanho de célula e facilita o corte ou a importação como uma animação regular. Um sheet empacotado coloca frames de tamanhos diferentes em fileiras para economizar espaço. Os frames empacotados não são girados e precisam dos retângulos JSON exportados ou de configurações de região equivalentes no seu mecanismo de jogo.
Por que usar preenchimento, espaçamento ou extrusão das bordas?
Texturas filtradas podem amostrar pixels vizinhos e criar linhas de cores, um efeito chamado bleeding de textura. O preenchimento deixa espaço dentro de cada célula; o espaçamento deixa um intervalo entre as células. Esta ferramenta adiciona pixels transparentes ou da cor de fundo, não pixels copiados das bordas. A extrusão repete as cores das bordas de um sprite na sua margem; use as configurações de textura do seu mecanismo ou um empacotador de atlas com extrusão se o seu projeto precisar disso, especialmente com mipmaps.
Como importo o sheet no Godot, Unity ou Phaser?
No Godot, use regiões do sheet como texturas de atlas ou frames de animação. No Unity, trate a imagem como vários sprites e corte uma grade regular ou defina os retângulos. O Phaser pode usar um spritesheet regular ou um atlas JSON hash. Mantenha o PNG e o JSON juntos. As configurações de importação variam: escolha a filtragem por vizinho mais próximo para pixel art nítida, verifique a transparência e as dimensões das células e confirme se os nomes dos frames e o formato JSON são adequados ao seu projeto.
Quais são os limites de transparência e temporização do GIF?
O GIF aceita no máximo 256 cores na paleta e uma entrada de paleta transparente, portanto os pixels são totalmente transparentes ou opacos. Alpha abaixo de 50% se torna transparente; os demais valores de alpha se tornam opacos. Escolha uma cor matte para mesclar bordas suaves. Os atrasos dos frames são arredondados para 10 ms, com mínimo de 20 ms, portanto 60 FPS não pode ser representado exatamente. O GIF exportado se repete continuamente; o pingue-pongue adiciona os frames de retorno sem repetir as extremidades.
Meus arquivos saem do navegador?
Não. A leitura das imagens, a organização dos sheets, a detecção de ilhas e a criação das exportações acontecem no seu dispositivo. Sheets grandes e animações longas precisam de mais memória. Um aviso aparece acima de 400 frames ou 8.192 pixels em um dos lados. Os limites de trabalho são 1.000 frames importados, 16.384 pixels por lado e 64 milhões de pixels por imagem ou exportação de animação.
Ferramenta grátis · no seu navegador execuções · não precisa de conta