Voltar para o Blog
Quest Log

SpriteLoop: animação 2D grátis pra personagem de jogo (e como usar na Godot)

Personagem 2D montado com peças separadas de braço, perna e cabeça, cada peça girando e se movendo em torno de pivôs sobre uma timeline de animação

SpriteLoop é uma ferramenta grátis de animação 2D para Windows, Mac e Linux. Veja o que ela faz, pra quem serve, os limites e como usar o resultado na Godot.

Animar personagem 2D sempre teve um pedágio: ou você aprende a desenhar frame por frame no braço, ou você paga por uma ferramenta como Spine ou Spriter pra montar o boneco em peças e animar. Agora apareceu uma terceira via. O SpriteLoop é uma ferramenta de animação 2D grátis, feita pela Balkan Ram Games, que roda em Windows, Mac e Linux e resolve exatamente a parte do meio: você monta o personagem com recortes e anima cada peça, sem gastar nada.

Vi a novidade no gamefromscratch e fui checar. A página oficial fica no itch.io (balkanramgames.itch.io/spriteloop), o download é grátis de verdade, e a proposta é clara. Neste post eu explico o que o SpriteLoop faz, pra quem ele serve, o que ele não faz (que é a parte que ninguém te conta) e como levar o resultado pra dentro de um jogo Godot sem dor de cabeça.

O que o SpriteLoop faz de verdade

O SpriteLoop trabalha com o que se chama de cutout animation, ou animação de recortes. A ideia é simples de entender: em vez de desenhar o personagem inteiro em cada frame, você importa as partes dele já separadas em PNG. Braço, antebraço, mão, cabeça, tronco, perna, cada peça é uma imagem. Depois você anima cada peça no tempo mudando alguns atributos.

Os atributos que dá pra animar são:

  • Posição (mover a peça no espaço)
  • Rotação (girar em torno de um pivô)
  • Escala (aumentar ou diminuir)
  • Inclinação / skew (distorcer a peça na diagonal)
  • Opacidade (fazer aparecer ou sumir)
  • Pivôs (o ponto em torno do qual a peça gira)

E tem o pulo do gato: transformações hierárquicas. Você define que uma peça é filha de outra, e a peça filha segue a peça pai. Se o antebraço é filho do braço, quando o braço gira no ombro, o antebraço acompanha o movimento e ainda pode girar por conta própria no cotovelo. É assim que um braço dobra de forma crível sem você precisar reposicionar cada osso na unha em cada frame.

Você cria vários clipes de animação, cada um com seu próprio frame rate e loop. Ou seja, um clipe "andar" em loop a 12 fps, um clipe "pular" que toca uma vez, um clipe "parado" bem lento. Cada um vira uma animação nomeada que você usa depois no jogo.

Como exportar (e por que isso importa pro seu jogo)

De nada adianta animar se você não consegue tirar o resultado de lá. O SpriteLoop exporta em quatro formatos:

  • Spritesheet (uma imagem única com todos os frames em grade)
  • Sequência de PNG (um arquivo por frame)
  • GIF animado
  • WebP animado

Pra colocar num jogo, os dois primeiros são o que interessam. GIF e WebP servem pra você mostrar a animação num tweet, num devlog ou na página da loja, mas engine de jogo trabalha com spritesheet ou com a sequência de PNG. Guarde essa distinção, porque iniciante costuma exportar GIF, tentar importar na engine e travar sem entender por quê.

Tem ainda um detalhe interessante pra quem já usa outras ferramentas: o SpriteLoop traz um runtime, uma extensão para o motor Defold, com direito a troca de "skin" (você reaproveita a mesma animação com peças de aparência diferente). E vem com exportadores para Krita e Photoshop, então dá pra desenhar as peças lá e mandar direto pro SpriteLoop sem ficar exportando PNG na mão um por um.

Pra quem o SpriteLoop serve

Vou ser direto sobre o público, porque ferramenta grátis atrai todo mundo e nem todo mundo devia usar essa aqui.

Serve muito bem pra: indie e iniciante que quer personagem 2D animado sem pagar assinatura de Spine, protótipo onde você precisa de movimento rápido pra testar sensação de jogo, jogo de estilo mais "cartunesco" ou de recortes (papel recortado, marionete), e pra quem já anima em cutout em ferramenta paga e quer uma opção sem custo pra projeto pequeno.

Não é o ideal pra: quem quer pixel art clássica (isso é outro caminho, quadro-a-quadro, e a ferramenta certa aí é o Aseprite), quem precisa de animação orgânica pesada com deformação de malha (aí o Spine profissional ainda ganha), e quem tem alergia ao visual de recorte, sobre o qual eu falo já já.

Se você ainda está montando seu kit de trabalho, vale cruzar isso com um panorama maior de ferramentas grátis para criar jogos, porque animação é só uma peça do quebra-cabeça.

Próximo nível
Quer aprender isso na prática?

No CursoGame.Dev você sai dos tutoriais soltos e constrói jogos publicáveis, com trilha progressiva, quests práticas e feedback real.

Conhecer a plataforma
+500 alunos4.9/5Garantia 7 dias

O limite honesto: cutout tem "cara" de recorte

Aqui é onde eu paro o discurso de vendedor. Cutout animation tem uma estética própria, e ela é reconhecível. Como você está movendo peças rígidas de imagem, o resultado tem um jeito de "boneco de papel articulado". As peças giram e escorregam, mas cada peça em si não se deforma organicamente. Um braço de cutout dobra no cotovelo como duas tábuas presas por um prego, não como um braço de carne que estica a pele.

Isso não é defeito, é característica. Muitos jogos lindos usam exatamente esse visual de propósito. Mas você precisa escolher esse estilo, não cair nele por acidente. Se a sua referência mental é a fluidez de um personagem de pixel art quadro-a-quadro tipo Metroidvania, ou a suavidade orgânica de uma animação de Spine com malha deformável, o SpriteLoop vai te frustrar, porque ele não faz isso e não promete fazer.

Dito de outro jeito: o SpriteLoop é uma versão grátis e limitada perto de Spriter e Spine. O "limitada" é a palavra-chave. Você troca recursos avançados por custo zero. Pra muita gente esse é o negócio certo. Pra outra parte, não. Se você está em dúvida entre estilos de animação em geral, o post sobre animação de sprite 2D em jogo ajuda a entender quando cada abordagem faz sentido antes de você investir tempo montando peças.

Levando a animação do SpriteLoop pra Godot

Agora a parte prática, que é o motivo real de você estar animando. O caminho mais limpo do SpriteLoop pra Godot 4 é via spritesheet.

Passo a passo, sem enrolação:

  1. No SpriteLoop, exporte o clipe como spritesheet (anote a largura e a altura de cada frame, você vai precisar).
  2. Na Godot, adicione um nó AnimatedSprite2D na sua cena.
  3. No inspetor, crie um novo recurso SpriteFrames.
  4. Dentro do SpriteFrames, use "Add frames from Sprite Sheet", aponte pro PNG exportado e informe quantas colunas e linhas a grade tem. A Godot fatia sozinha.
  5. Nomeie a animação (por exemplo, andar) e ajuste o FPS pra bater com o que você usou no SpriteLoop.

Se você preferiu exportar em sequência de PNG, o processo é parecido: em vez de fatiar um spritesheet, você adiciona os arquivos um a um (ou de uma vez) como frames da mesma animação. O spritesheet costuma ser mais organizado e mais leve, mas a sequência funciona igual.

Pra disparar a animação no código, um exemplo curto em GDScript tipado de Godot 4:

extends AnimatedSprite2D

func _ready() -> void:
    play("parado")

func _physics_process(_delta: float) -> void:
    var direcao: float = Input.get_axis("ui_left", "ui_right")
    if direcao != 0.0:
        play("andar")
        flip_h = direcao < 0.0
    else:
        play("parado")

Repare que play() recebe o nome do clipe que você criou. É por isso que nomear bem as animações no SpriteLoop paga dividendo depois: o nome vira a chave que você chama no jogo. Se você organizar "andar", "pular", "atacar" com clareza lá, o código do lado da Godot fica limpo.

Um detalhe de performance que vale saber cedo: spritesheet único é melhor que dezenas de PNG soltos, porque a engine carrega uma textura só em vez de muitas. Pra personagem com várias animações, exporte tudo de forma organizada e mantenha o padrão de nomes consistente.

Onde o SpriteLoop se encaixa no seu fluxo

Deixa eu amarrar o fluxo completo, porque a ferramenta sozinha não faz jogo. Você desenha (ou consegue) as peças do personagem em PNG separado com fundo transparente. Anima essas peças no SpriteLoop em clipes nomeados. Exporta spritesheet. Importa na Godot como AnimatedSprite2D. Chama pelo nome no GDScript. Fim.

Se a etapa de conseguir as peças te trava, lembre que "peça separada" é só uma imagem recortada. Dá pra desenhar no Krita e mandar direto pelo exportador, dá pra usar asset pronto que já venha em partes, ou dá pra recortar um personagem existente. E se o que você quer no fundo é aprender a produzir a arte, o caminho de como criar sprites para jogos cobre o começo dessa história.

Uma última decisão que muita gente adia: a engine. Este post assume Godot porque ela é grátis, leve e ótima pra 2D, mas se você ainda está escolhendo, vale ler se vale a pena aprender Godot antes de comprometer meses de estudo. Ferramenta de animação você troca fácil. Engine é casamento mais longo.

O próximo passo prático

Chega de teoria. Faça isto hoje: baixe o SpriteLoop na página oficial do itch.io, importe três ou quatro peças bem simples de um bonequinho (um tronco, dois braços, uma cabeça basta), e monte um único clipe de "aceno" com uns dez frames girando o braço no ombro. Exporte como spritesheet, jogue num AnimatedSprite2D da Godot e faça tocar. Vinte minutos, do zero ao personagem se mexendo na tela.

Esse ciclo curto, animar e ver rodando no jogo, é o que separa quem aprende de quem só assiste vídeo. E a melhor parte: dessa vez não custou nada. Aqui no CursoGame.Dev a gente sempre volta pro mesmo princípio: a ferramenta é meio, o jogo é o fim. Monte o aceno, veja funcionar, e siga pro próximo movimento.

Perguntas frequentes

SpriteLoop é grátis mesmo?

Sim. O SpriteLoop é gratuito e roda em Windows, Mac e Linux. Ele é descrito como uma versão grátis porém limitada quando comparada a ferramentas pagas como Spriter e Spine, então não espere todos os recursos de uma suíte profissional. Mas para começar a animar personagem 2D sem gastar nada, cumpre o papel.

Qual a diferença entre SpriteLoop e animação quadro-a-quadro?

O SpriteLoop faz cutout animation, ou animação de recortes: você importa peças separadas do personagem (braço, perna, cabeça) e anima cada uma por posição, rotação, escala, inclinação e opacidade. Quadro-a-quadro é redesenhar o personagem inteiro em cada frame, como no Aseprite. São abordagens diferentes, com resultados visuais diferentes.

Dá pra usar o resultado do SpriteLoop na Godot?

Dá. Exporte a animação como spritesheet ou sequência de PNG e importe na Godot como um nó AnimatedSprite2D com um recurso SpriteFrames. O spritesheet vira os frames da animação, e você toca pelo nome do clipe. Também dá pra exportar GIF e WebP animado, mas para jogo o spritesheet é o formato mais prático.

SpriteLoop substitui o Spine?

Não. O SpriteLoop é uma alternativa grátis e mais simples. O Spine tem rigging esquelético completo com deformação de malha, pesos e recursos avançados que o SpriteLoop não oferece. Para projeto pequeno, protótipo ou quem está aprendendo, o SpriteLoop resolve. Para produção profissional com animação orgânica pesada, o Spine ainda é referência.

Preciso saber desenhar para usar o SpriteLoop?

Você precisa das peças do personagem em PNG separado, com fundo transparente. Se não desenha, dá pra usar assets prontos que já venham em partes recortadas, ou recortar um personagem existente no Krita ou Photoshop, que têm exportadores para o SpriteLoop. Desenhar ajuda, mas o trabalho central da ferramenta é animar, não ilustrar.