Tags de Animação no Aseprite: Idle, Walk e Ataque

Quando você começa a animar no Aseprite, o instinto é criar um arquivo por animação: um .aseprite pro idle, outro pro walk, outro pro ataque. Funciona no começo, mas vira um pesadelo de manutenção quando o personagem cresce. As tags de animação no Aseprite resolvem exatamente isso. Elas deixam você guardar idle, walk, run, ataque e o que mais precisar dentro de um único arquivo, com cada bloco de frames marcado e nomeado, e exportar todas de uma vez como animações separadas que a engine entende. Este guia mostra como criar, nomear e exportar essas tags do jeito que economiza tempo de verdade.

A ideia central é simples: um personagem é uma coisa só, então ele deveria viver num arquivo só. Se o corpo, a paleta ou a silhueta mudam, você conserta num lugar e todas as animações acompanham. Tag é o que torna isso possível sem embolar tudo numa timeline gigante e sem nome.

O que são frame tags no Aseprite

Uma frame tag é um rótulo colado a um intervalo de frames da timeline. Nada mais que isso: você diz que os frames 1 a 4 são o idle, os frames 5 a 12 são o walk, e assim por diante. Visualmente, a tag aparece como uma barrinha colorida acima da régua de frames, cobrindo exatamente o intervalo que ela marca.

O que torna a tag útil não é o visual, é o que ela carrega junto. Cada tag guarda três coisas:

• O intervalo de frames que pertence àquela animação
• O nome que você deu, como idle ou attack
• A direção de playback, que define a ordem em que os frames tocam

Esses três dados viajam com o arquivo. Quando você exporta, eles vão junto no JSON, e é isso que permite a engine reconstruir cada animação sem você precisar anotar manualmente "o walk começa no frame 5". O Aseprite já sabe, porque você contou pra ele uma vez.

Vale entender a diferença entre tag e a timeline crua. Sem tags, uma timeline de 20 frames é só uma sequência linear: dá play e ela toca do 1 ao 20 em looping, misturando idle, walk e ataque numa salada sem sentido. Com tags, você isola cada trecho. Dá pra dar play só no walk, editar só o attack, e cada um se comporta como uma animação independente, mesmo morando na mesma faixa de frames. Se você ainda está montando a base do seu personagem antes de animar, o passo a passo de canvas, camadas e timeline está no guia de Aseprite para jogos.

Como criar uma tag na timeline

O fluxo é rápido depois que entra no dedo. Primeiro, garanta que a timeline está visível apertando Tab. Agora:

1. Na régua de frames (a fileira com os números, no topo da timeline), clique no primeiro frame da animação e arraste até o último. Isso seleciona o intervalo.
2. Com o intervalo selecionado, clique com o botão direito em cima da seleção.
3. Escolha New Tag no menu.

Um diálogo abre pedindo o nome e a direção. Preencha, confirme, e a barra colorida da tag aparece cobrindo aqueles frames. Se preferir menu a atalho de mouse, o caminho Frame > Tags > New Tag faz a mesma coisa.

Um detalhe que confunde quem está começando: as tags podem se sobrepor e conviver. Você pode ter uma tag attack cobrindo os frames 13 a 18 e, se um dia quiser, uma tag attack_full cobrindo 13 a 24 que inclui o ataque mais a recuperação. O Aseprite empilha as barras em níveis diferentes pra você enxergar as duas. Na prática você raramente precisa disso, mas é bom saber que existe, porque explica por que as barras às vezes aparecem em linhas separadas.

Pra ajustar uma tag depois de criada, é só arrastar a borda dela na régua pra esticar ou encolher o intervalo, ou dar clique duplo na barra pra reabrir o diálogo de propriedades e mexer no nome, na cor ou na direção.

Nomeando idle, walk, run, attack e hurt

Nome de tag não é decoração. Ele vira o identificador da animação na engine, então bagunça aqui vira bagunça lá na frente. Vale adotar uma convenção e nunca sair dela.

O padrão que a maioria dos projetos usa, e que eu recomendo, é nome curto, minúsculo e em inglês, sem espaço nem acento:

• idle: personagem parado, respirando
• walk: caminhada
• run: corrida, quando ela é diferente da caminhada
• attack: golpe principal
• hurt: recebendo dano
• death: morrendo
• jump e fall: subida e descida do pulo, quando separadas

Por que inglês, num blog em português? Porque as engines, os plugins de importação e praticamente toda a documentação do mundo usam esses nomes. No código da Godot você vai escrever play("walk"), e ter a tag com o mesmo texto elimina uma camada inteira de tradução mental e de bug. Acento e espaço complicam ainda mais, porque alguns pipelines não lidam bem com eles no nome da animação. ataque_forte funciona; Ataque Forte é pedir problema.

Se o personagem tem variação por direção, o mais limpo é sufixar de forma consistente: walk_down, walk_up, walk_side. O importante é escolher um formato e repetir. Quando você tiver quarenta tags espalhadas por dez personagens, essa consistência é o que deixa o projeto navegável.

Direção de playback: forward, reverse e ping-pong

Toda tag tem uma direção, e ela define em que ordem os frames tocam quando aquela animação roda. O Aseprite oferece algumas opções, e escolher a certa às vezes economiza frames desenhados.

Forward é o padrão. Toca do primeiro frame ao último e, em looping, volta pro primeiro. Serve pra maioria das coisas: idle, walk, run, attack. É a que você vai usar quase sempre.

Reverse toca de trás pra frente, do último ao primeiro. Útil pra reaproveitar uma animação. Se você tem um open de um baú, dá pra criar o close como uma tag reverse sobre os mesmos frames, sem redesenhar nada.

Ping-pong toca do primeiro ao último e depois volta ao primeiro, alternando o sentido a cada ciclo. É perfeito pra movimentos que oscilam de forma suave, como um idle de respiração, uma plataforma flutuante subindo e descendo, ou um brilho que pulsa. O ganho aqui é concreto: uma respiração ping-pong de 4 frames dá a mesma sensação de uma forward de 8, porque a volta reaproveita os frames do meio. Metade do trabalho de desenho pro mesmo resultado.

Há ainda a variação ping-pong reverse, que começa a oscilação pelo fim, útil em casos específicos de sincronia. Você define a direção no diálogo da tag, tanto na criação quanto depois pelo clique duplo. Uma observação: essa direção é uma propriedade da tag, então dá pra ter no mesmo arquivo um idle em ping-pong e um walk em forward sem conflito nenhum.

Como cada tag vira uma animação na exportação

Aqui está o pulo do gato, o motivo de todo esse trabalho de organização valer a pena. Na hora de exportar, as tags viram animações separadas automaticamente, e você não precisa recortar nada na mão.

Vá em File > Export Sprite Sheet. As opções que importam pra tags:

• Sheet type: By Rows costuma ser o mais fácil de ler, com cada linha agrupando frames. Packed economiza espaço mas exige o JSON pra saber onde cada frame caiu.
• Na aba Output, marque a imagem PNG e ative o JSON Data.
• Ainda em Output, na seção Meta, marque Tags. Esse é o passo que muita gente esquece, e sem ele o JSON sai sem os intervalos das animações.

Com isso, o Aseprite gera um PNG com todos os frames e um JSON que lista cada tag com o frame inicial, o frame final e a direção. A engine lê esse JSON e reconstrói idle, walk e attack como animações distintas, cada uma apontando pro pedaço certo do sheet.

Dá pra fazer o mesmo pela linha de comando, o que é ouro quando o projeto cresce e você quer a exportação dentro do pipeline de build:

aseprite -b player.aseprite --sheet player.png --data player.json --list-tags --format json-array

O -b roda sem abrir a interface, --sheet gera o PNG, --data gera o JSON e --list-tags inclui as tags com o intervalo de cada animação. Coloque isso num script que varre a pasta de arquivos e você nunca mais exporta na mão. Se quiser o caminho completo desse sheet até a engine, com o passo a passo de importação, veja como exportar sprite sheet do Aseprite para a Godot.

Nomenclatura que bate com o AnimatedSprite2D da Godot

Na Godot 4, o nó que consome esse sprite sheet animado é o AnimatedSprite2D, que guarda as animações num recurso SpriteFrames. Cada animação dentro do SpriteFrames tem um nome, e é aí que a disciplina com os nomes das tags paga dividendos.

Se a sua tag no Aseprite se chama walk, o ideal é que a animação no SpriteFrames também se chame walk. Com isso, trocar de animação por código fica direto e legível, usando o mesmo texto dos dois lados:

extends CharacterBody2D

@onready var sprite: AnimatedSprite2D = $AnimatedSprite2D

func _physics_process(_delta: float) -> void:
    if velocity.length() > 0.0:
        sprite.play("walk")
    else:
        sprite.play("idle")

func atacar() -> void:
    sprite.play("attack")

Repare que os nomes passados pro play() são exatamente os nomes das tags. Nenhuma tabela de tradução, nenhum if mapeando "a animação 2 é o walk". A tag walk do Aseprite virou a animação walk no SpriteFrames e virou a string "walk" no código. Essa cadeia sem emenda é o objetivo de nomear bem desde o Aseprite.

Existem plugins de importação de .aseprite pra Godot que fazem essa ponte sozinhos: eles leem as tags do arquivo e criam as animações no SpriteFrames já com os nomes certos, incluindo a duração de cada frame. Quando o fluxo manual começar a incomodar, vale procurar um na Asset Library. Mas mesmo sem plugin, se você montou o SpriteFrames na mão espelhando os nomes das tags, o resultado no código é idêntico. Pra quem quer aprofundar animação por estado e máquina de estados dentro da engine, o melhor curso de Godot cobre o caminho de controlar essas animações com a lógica de movimento do personagem.

Fechando

Tag de animação é uma daquelas coisas que parecem detalhe e mudam o jeito de trabalhar. Um arquivo por personagem, com idle, walk, run, attack e hurt marcados por tags bem nomeadas, é um artefato autocontido: fácil de editar, fácil de exportar e fácil de importar. A direção de playback economiza frames em animações que oscilam, e o cuidado com os nomes em inglês, minúsculos e sem espaço, faz a ponte pro AnimatedSprite2D da Godot ser quase automática.

O exercício pra fixar é curto. Pegue um personagem, mesmo um bonequinho de 16x16, e monte três tags num arquivo só: um idle de 2 frames em ping-pong, um walk de 4 frames em forward e um attack de 3 frames em forward. Exporte com Tags marcado, abra o JSON e veja os três intervalos listados. Quando bater o olho e entender aquela lista, o conceito virou seu.