Como usar stickman stick para animações simples e eficientes
A maioria das pessoas que entra nesse universo fica presa em loops de importação de bibliotecas pesadas e depois se pergunta por que a animação trava no navegador. Eu passei uns dois anos lidando com isso antes de finalmente encontrar uma abordagem que funciona de verdade. O stickman stick é basicamente uma técnica de animação vetorial leve onde você desenha personagens feitos de linhas e círculos e os anima quadro a quadro. Não é nada de outro mundo, mas o que a maioria dos tutoriais não te conta é a parte prática de como organizar o projeto para ele não virar bagunça depois de algumas dezenas de quadros.
Instalação e primeiros passos com stickman stick
Você começa baixando o pacote. O repositório principal fica no GitHub e o download direto do arquivo ZIP é mais rápido do que clonar com Git se você só quer testar. Descompacte na pasta do seu projeto, abra o index.html no navegador e pronto, tem o canvas rodando. O primeiro erro que todo mundo comete é tentar animar tudo de uma vez. Comece com um único membro. Um braço. Veja como a interpolação funciona no framework antes de adicionar pernas, cabeça e torso. O stickman stick vem com um sistema de bones embutido que segue uma hierarquia pai-filho, então o que você anima no ombro afeta o antebraço inteiro. Isso é útil mas também é a principal causa de braços aparecendo em lugares impossíveis quando você esquece de ajustar o pivot point.
Aqui vai algo que ninguém comenta: o sistema de interpolação linear dele é útil para movimentos suaves, mas para animações de ação rápida como socos ou chutes, o resultado fica artificial. O que eu faço nesses casos é desligar a interpolação nos eixos X e Y e deixar só a interpolação de rotação. Usa-se o método setInterpolation() passando 'none' para os eixos lineares e 'linear' apenas para o ângulo do osso. O movimento fica mais seco, mas parece genuinamente mais dinâmico.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Exportando e integrando em projetos maiores
O stickman stick exporta em JSON e SVG, mas o formato JSON é o que realmente importa se você quer integrar com engines como Phaser ou Godot. A exportação é feita pelo comando exportScene(), que gera um arquivo com a pose final de todos os ossos e os keyframes interpolados entre eles. Um problema específico que eu encontrei e demorei pra resolver foi a escala. O framework trabalha em coordenadas de canvas padrão, mas quando você exporta e importa num projeto Phaser, a escala muda drasticamente porque o Phaser usa pixéis como unidade base e o stickman stick usa uma unidade abstrata. A solução foi multiplicar todos os valores de posição exportados por 2.5 antes de injetar na cena do Phaser. Sem esse ajuste, o personagem fica minúsculo ou gigante dependendo da resolução do projeto alvo.
Também vale mencionar que o suporte a importação de sprites para texturas de fundo existe, mas é limitado a PNGs simples. Se você tentar carregar um sprite sheet com mais de 64 quadros, o navegador pode travar dependendo da RAM disponível. Eu já vi isso acontecer em máquinas com 8GB de RAM rodando Chrome com 40 abas abertas. O workaround é reduzir o sprite sheet para no máximo 32 quadros e dividir em lotes se precisar de mais.
Pegadinhas que custaram horas do meu tempo
O sistema de colisão do stickman stick é básico demais para qualquer coisa que envolva combate ou plataforma. Ele usa bounding box retangular, o que significa que um personagem deitado e um de pé vão ter caixas de colisão completamente diferentes mesmo sendo o mesmo modelo. Se o seu jogo precisa de precisão, use máscaras de colisão manuais definidas por polígonos simples. Não confie no default. Outro ponto: a documentação original não menciona que o loop de animação padrão usa requestAnimationFrame sem throttle. Em telas de 120Hz ou 144Hz, isso significa que seu stickman stick vai renderizar duas ou três vezes mais rápido do que o esperado se você não ajustar o delta time manualmente. Basta dividir o delta por 2 no caso de 120Hz ou por 3 para 144Hz, ou melhor ainda, fixar o framerate em 60fps com um multiplicador simples no início do seu loop.
O projeto não tem mais manutenção ativa desde meados de 2024. O repositório ainda funciona, os exemplos compilam e rodaram perfeitamente num projeto meu de dezembro de 2025, mas Issues e pull requests não são respondidos. Se você precisa de funcionalidades avançadas como IK inverso ou física de tecidos, vai ter que implementar sozinho ou recorrer a bibliotecas como Matter.js pra física e construir a animação por cima. Para a maioria dos casos — protótipos rápidos, animações para vídeos explicativos, joguinhos simples — o stickman stick ainda é uma das ferramentas mais diretas que existem. Se o seu objetivo é algo mais ambicioso, considere começar com ele pra validar a ideia e depois migrar pro que for necessário quando o projeto crescer.
