Um sprite sheet que parece ok como grade ainda pode pular, deslizar ou engasgar em movimento. Abrir a engine para conferir cada ajuste é lento. Este visualizador reproduz o sprite sheet no FPS que você define, com zoom pixel perfect, onion skin para conferir o espaçamento entre frames, ping-pong para animações idle e reprodução por linha para sprite sheets que guardam várias animações ou direções.
Como usar: Visualizador de Animação
- Solte um sprite sheet (a grade é detectada), vários PNGs de frames ou um GIF animado.
- Corrija linhas e colunas se precisar. Em sprite sheets com várias linhas, escolha uma linha para reproduzir uma única animação ou direção.
- Defina o FPS. A prévia também mostra os milissegundos por frame, que é o que a maioria das engines pede.
- Avance pelos frames com as setas do teclado, ative o onion skin para ver o frame anterior e experimente o ping-pong.
- Dê zoom com escala pixel perfect e troque o fundo para conferir o sprite sobre escuro, claro e verde.
- Exporte um GIF com a mesma velocidade, ping-pong e fundo.
O que você recebe
- Prévia ao vivo de 1 a 60 fps com avanço por frame e atalhos de teclado.
- GIF animado de 1× a 8× com fundo transparente ou sólido, pronto para um devlog ou página de loja.
Com quais engines funciona
- Use o FPS que fica bom aqui como velocidade da animação no Godot (velocidade do SpriteFrames), Unity (Sample Rate), GameMaker (velocidade do sprite) ou Phaser (frameRate).
- A reprodução por linha reflete como a maioria das engines guarda sprite sheets de 4 e 8 direções: uma linha por direção.
Dicas de quem faz jogos com ela
- Ciclos de caminhada costumam ficar bons entre 8 e 12 fps; corridas entre 12 e 16; idles entre 4 e 8.
- O onion skin mostra o frame anterior em azul. Se um membro pula muito entre dois frames, adicione um intermediário.
- Se o personagem desliza, os frames não estão ancorados do mesmo jeito. Fatie de novo com alinhamento pela base no Fatiador de Sprite Sheet.
- Confira também sobre um fundo claro. Contornos escuros que ficam bem no preto podem sumir em mapas escuros do jogo.
Casos de uso
- Conferir o tempo da animação antes de importar em uma engine.
- Revisar sprite sheets de um artista ou de um pacote de assets.
- Fazer um GIF de um sprite sheet para redes sociais ou um pitch deck.
- Comparar lado a lado, linha por linha, as direções de um personagem de 8 direções.
Perguntas frequentes
Como controlo a reprodução pelo teclado?
Espaço reproduz e pausa. As setas para a esquerda e para a direita avançam um frame e pausam.
O que é onion skin?
Ele mostra o frame anterior bem fraco (com tom azul) sob o atual, para você ver quanto cada parte se move entre os frames e identificar saltos.
Dá para reproduzir só uma linha do sprite sheet?
Sim. Quando o sprite sheet tem várias linhas, escolha uma linha para reproduzir só aquela animação ou direção, ou Todas para reproduzir todos os frames em ordem.
Ele aceita GIFs e frames soltos?
Sim. Solte um GIF animado para reproduzir seus frames, ou solte vários PNGs para reproduzi-los na ordem natural dos nomes de arquivo.
Meu sprite sheet é enviado?
Não. A prévia roda inteiramente no seu navegador.
Por que minha animação fica borrada em outros visualizadores?
A maioria dos visualizadores escala com suavização. Este escala por vizinho mais próximo, do mesmo jeito que um jogo de pixel art deve ser configurado, então o que você vê aqui é o que os jogadores veem.