Back to blog
Tutoriais

Tokens Animados para Mesa Virtual: WebM, Loops e o Que Cada VTT Aceita

Como criar tokens de RPG animados que realmente funcionam no Foundry, Roll20 e Owlbear Rodeo — os formatos que cada um aceita, por que o loop perfeito importa, e a contenção que mantém o mapa legível.

Tokens Animados para Mesa Virtual: WebM, Loops e o Que Cada VTT Aceita

Existe um momento específico que vale a pena arquitetar. O grupo passou duas horas lutando contra círculos estáticos. Aí a porta no fim do corredor se abre, você solta um token no mapa, e ele está respirando — uma aura pulsando devagar em volta, brasas se soltando pelas bordas.

Ninguém na mesa comenta a tecnologia. Só endireita a postura.

É para isso que serve um token animado. Não é decoração — é pontuação. Aqui está como fazer um que funcione e, mais importante, como não estragar o efeito usando-o em tudo.

Por que o token estático continua sendo o padrão certo

Comece pelo argumento contrário.

Uma mesa virtual é uma superfície de leitura. Os jogadores a varrem o tempo todo para responder três perguntas: onde eu estou, onde estão os inimigos, o que mudou desde o meu último turno. Movimento sequestra essa varredura. O olho humano é construído para olhar para aquilo que se move, o que significa que cada token animado está competindo pela mesma atenção.

Doze tokens animados num mapa produzem uma tela genuinamente mais difícil de ler do que doze estáticos, e também produzem uma aba de navegador que esquenta o notebook de alguém. Os dois problemas pioram conforme o grupo cresce.

Então a regra é simples, e é a coisa mais valiosa deste artigo: anime a exceção, não a regra. O chefe. O elemental invocado. A coisa que acabou de atravessar a parede. Todo o resto é um token estático e limpo, e é justamente o contraste que faz o animado funcionar.

O que "token animado" quer dizer de verdade

Duas coisas bem diferentes recebem o mesmo nome.

Uma imagem de origem animada — você pegou um clipe de vídeo ou uma ilustração animada e transformou em token. A própria criatura se move: asas batem, tecido balança, uma chama tremula. Isso exige filmagem ou arte animada, que a maioria dos mestres não tem para a maioria das criaturas.

Um tratamento animado — você pegou uma imagem parada normal e adicionou movimento em volta dela. Uma aura que pulsa, partículas que flutuam, um anel girando, um brilho que respira. A arte por baixo é uma imagem estática, e a animação é gerada.

A segunda é a que praticamente toda mesa consegue fazer, porque a entrada é o mesmo retrato que você usaria de qualquer jeito. E, honestamente, é também a que se lê melhor no tamanho de um token: a 256 pixels, o movimento sutil de uma asa é invisível, mas uma aura vermelha pulsante diz "isso aqui é perigoso" do outro lado do mapa.

O animador de tokens foi feito para o segundo caso: você traz uma imagem parada, ele adiciona auras, partículas e brilhos, e exporta algo que a sua mesa consegue exibir.

Formatos, e qual mesa virtual aceita cada um

É aqui que a maioria das tentativas falha, então vale ser preciso.

WebM é o padrão para tokens animados. É um formato de vídeo com suporte a canal alfa, o que significa que a animação pode ter fundo transparente — essencial, porque um token com uma caixa preta em volta é pior do que animação nenhuma. Também é eficiente: algumas centenas de kilobytes para um loop suave.

Sequências de quadros PNG são um conjunto de imagens numeradas, uma por quadro, exportadas em ZIP. Algumas ferramentas e mesas preferem quadros a vídeo, e quadros também são o que você quer se for compor a animação por conta própria ou levá-la para outro programa.

GIF é o formato que as pessoas tentam primeiro e o que você deveria evitar. É limitado a 256 cores, sua transparência é binária — um pixel é totalmente opaco ou totalmente invisível, então você ganha bordas serrilhadas em vez de um brilho suave — e os arquivos são maiores que o WebM equivalente, com qualidade pior.

Suporte por mesa virtual, em 2026:

  • Foundry VTT tem o melhor suporte nativo. Coloque um WebM como imagem do token e ele reproduz, repete em loop e respeita a transparência. É a plataforma para a qual os tokens animados foram, na prática, desenhados.
  • Owlbear Rodeo é uma mesa deliberadamente enxuta; o suporte a animação depende da extensão que você estiver usando, e não do app principal, e ele recompensa arquivos pequenos acima de tudo.
  • Roll20 é o mais restrito entre as opções populares, e o suporte a tokens animados historicamente dependeu do seu plano de assinatura. Confira antes de montar um bestiário inteiro.
  • Mini Kraken aceita a exportação em WebM ou em sequência de quadros do animador direto na mesa, e o token fica junto das suas fichas e documentos, não numa biblioteca de assets separada.

Se você não tem certeza do que a sua mesa suporta, faça um token, teste, e só então faça o resto. Quinze tokens num formato não suportado é uma noite ruim.

Fazendo um que fique certo

Comece de um bom token estático. Animação não salva um recorte ruim. Acerte o enquadramento primeiro — cabeça e ombros, centralizado, a máscara que combina com a sua grade — e depois anime. O recortador de tokens é o passo anterior a este, e pulá-lo é o motivo mais comum de um token animado ficar estranho.

Faça o loop perfeito. É a diferença entre profissional e amador. Se o último quadro não flui para o primeiro, você ganha um salto visível a cada poucos segundos, e depois que alguém repara nele não consegue mais parar de reparar. Um loop perfeito é invisível, e invisível é o objetivo.

Mantenha o movimento lento. Auras devem respirar, não piscar. Um pulso de dois a quatro segundos se lê como "vivo". Um pulso de meio segundo se lê como notificação e vira irritante na segunda rodada.

Respeite a proporção. Um token achatado para caber num quadrado é imediatamente perceptível, e é uma falha comum em ferramentas que redimensionam sem preservar as proporções.

Fique de olho no tamanho do arquivo. Menos de 1MB por token, de preferência bem menos. O navegador de cada jogador baixa cada token; um dragão de 12MB significa doze segundos de nada acontecendo para quem está no wi-fi do hotel.

Limite a resolução a 1080px. Acima disso você está pagando banda por detalhe que nunca chega à tela — na prática, um token é renderizado numa fração desse tamanho.

Usando cor como informação

O truque mais prático de toda a técnica: faça a aura significar alguma coisa.

  • Aura vermelha — hostil, ou enfurecido.
  • Verde — regenerando, ou envenenado; escolha um e mantenha.
  • Azul ou branco — protegido, abençoado, com escudo.
  • Pulsando mais rápido — ferido, abaixo da metade dos PV.

Mude a aura quando o estado mudar e você substituiu um rastreador de condições por algo que os jogadores leem sem precisar de explicação. Isso é um benefício mecânico real, não só decoração, e é o argumento mais forte a favor dos tokens animados além do espetáculo.

Um fluxo realista

Para uma sessão em que uma criatura merece o tratamento:

  1. Escolha uma criatura. O chefe, ou a revelação.
  2. Recorte como um token estático normal primeiro — máscara certa, enquadramento certo, fundo transparente.
  3. Adicione aura e partículas no animador, combinando com o que a criatura é: fogo para o elemental, verde doentio para a coisa pestilenta, branco gélido para o espectro.
  4. Ajuste o loop e confira se ele roda sem emenda.
  5. Exporte em WebM se a sua mesa aceitar, em quadros PNG se não.
  6. Teste no mapa antes da sessão. Não durante.

Tempo total: menos de dez minutos. Efeito: o único momento da noite que todo mundo lembra.

Todo o resto do mapa continua estático, e isso não é concessão — é o que faz o animado funcionar.

O animador de tokens e o recortador de tokens são gratuitos e rodam no navegador, junto do resto das ferramentas de RPG. Se quiser a comparação mais ampla do que existe por aí, cobrimos isso em os melhores criadores de token gratuitos.