Textura flipbook: como animar sprites no Unity, Godot e VRChat

Uma textura flipbook é uma sprite sheet que um shader reproduz quadro a quadro em uma única superfície. Não há rig nem linha do tempo: a folha contém cada quadro em uma grade fixa, e o material move uma pequena janela por essa grade a uma taxa constante. Uma folha 8 x 8 contém 64 quadros; a 12 quadros por segundo, ela faz o loop em cerca de 5,3 segundos. A malha nunca muda, nenhuma textura é reenviada, e a animação inteira custa uma única consulta de textura.

Esta página aborda os quatro números de que um shader de flipbook precisa e como o índice de quadro mapeia para coordenadas UV, as duas formas de controlar uma textura flipbook no Unity, como um flipbook Poiyomi é configurado em um avatar VRChat, o equivalente no Godot e no Phaser, e como criar sua própria folha a partir de um GIF ou de uma descrição escrita.

Resposta rápida

Uma textura flipbook é uma sprite sheet usada como animação de shader, indexada por linha e coluna ao longo do tempo. A folha fica em um único slot de textura; cada avaliação do shader calcula um índice de quadro a partir do tempo decorrido e de uma taxa de quadros, reduz esse índice a uma coluna e uma linha, e remapeia as UVs da superfície para essa única célula. Frame = floor(time * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Uma folha 6 x 6 a 10 FPS percorre 36 quadros em 3,6 segundos, inteiramente na GPU, sem envio por quadro e sem alteração de draw call.

Como funciona uma textura flipbook

Quatro números definem a animação. Columns e Rows descrevem o layout da folha. Frame count normalmente é columns x rows, e é o valor no qual o índice dá a volta. A taxa de quadros é a velocidade com que o índice avança. Todo o resto — filtragem, wrap mode, insets de UV — existe para impedir que o sampler leia fora da célula atual.

A matemática do índice é curta e vale a pena escrever. Dado o tempo decorrido t: frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). A janela UV é então tiling = (1 / columns, 1 / rows) e offset = (column / columns, row / rows). A direção vertical é a parte que confunde as pessoas. A maioria das ferramentas de criação de folhas escreve a linha 0 no topo da imagem, enquanto as origens UV do Unity e do Godot ficam no canto inferior esquerdo. Em uma folha com a primeira linha no topo no Unity, offset.y se torna 1 - (row + 1) / rows; caso contrário, as linhas são reproduzidas invertidas e o primeiro quadro da animação é a última linha da folha.

A filtragem decide se o resultado fica limpo. Defina o wrap mode da folha como Clamp. Com Repeat, uma amostra na borda direita da textura lê a borda esquerda, então uma coluna de pixels do quadro 0 aparece dentro do último quadro de cada linha. Desative os mipmaps para pixel art de bordas nítidas, porque a cadeia de mips calcula a média das células vizinhas e a animação vira um borrão quando a superfície está a alguns metros de distância. Se a engine ou o shader de destino forçar mipmaps, deixe uma margem transparente de um ou dois pixels ao redor de cada célula, ou recue a janela UV em meio texel nos quatro lados.

Textura flipbook no Unity

Há duas abordagens, e elas falham de maneiras diferentes. A primeira é um shader que controla o índice de linha e coluna e se anima sozinho. A segunda é a janela Animation criando keyframes do tiling e do offset do material, enquanto um shader Lit ou Unlit comum faz a amostragem. A primeira é melhor para efeitos que precisam ficar sincronizados com o tempo de jogo; a segunda é melhor quando você precisa que a animação seja controlada por um estado do Animator e fique visível na linha do tempo junto com todo o resto da cena.

De qualquer forma, defina primeiro a importação da sprite sheet: Wrap Mode Clamp, Mip Maps off, Filter Mode Point e sem compressão em pixel art. Essas três configurações causam mais bugs de flipbook do que a matemática do shader.

Abordagem 1: um shader com índice de linha e coluna

No Shader Graph, o nó Flipbook recebe Columns, Rows e um índice de quadro controlado pelo tempo e gera as UVs remapeadas. Em um shader escrito à mão, exponha _Columns, _Rows e _Fps como propriedades e calcule a célula no estágio de vértice ou de fragmento. Se a animação precisar ficar sincronizada entre objetos, controle o índice de quadro a partir de um float de script em vez de amostrar _Time.y independentemente em cada material, para que dois flipbooks no mesmo objeto não se dessincronizem.

Abordagem 2: a janela Animation controlando tiling e offset

Esta abordagem anima o vetor _ST da textura. Standard e Unlit integrados usam _MainTex_ST; URP Lit e Unlit usam _BaseMap_ST. O tiling permanece fixo em (1, 1 / rows) e apenas offset.y muda. Os passos abaixo se aplicam a esta abordagem.

Flipbook Poiyomi para VRChat

A seção Flipbook do shader Poiyomi rola uma janela UV por uma folha no próprio material, então um slot de material pode mostrar um sprite animado em uma malha de avatar. Ela expõe Rows, Columns e uma taxa de quadros, além de um modo em que você mesmo controla o índice de quadro em vez de deixá-lo seguir o tempo do shader.

Use uma tira de uma única linha em vez de uma grade. Uma tira dá ao shader um único eixo para percorrer, o que elimina totalmente a emenda vertical. Com uma grade, a janela UV precisa descer uma linha no fim de cada linha, e qualquer erro de filtragem, nível de mip ou arredondamento de meio texel nesse limite amostra a linha vizinha — visível como uma faixa fina de um quadro diferente durante a reprodução. Uma tira também transforma o índice de quadro em uma multiplicação direta: a largura do quadro em UV é 1 / frameCount, e o offset é apenas frame / frameCount. Para uma animação de 8 quadros em células de 256 x 256, a tira tem 2048 x 256 e continua sendo uma potência de dois.

O alfa importa mais em um avatar do que em uma cena plana. Se o sprite tem bordas nítidas, use Cutout ou Opaque. Flipbooks na fila Transparent não gravam profundidade e, em um avatar, são ordenados em relação ao corpo e entre si de maneiras que mudam com o ângulo da câmera. Mantenha a superfície animada em um material que já esteja no avatar sempre que possível — cada slot de material extra conta contra o rank de desempenho do seu avatar. Se o índice de quadro for controlado por um estado do Animator com um parâmetro sincronizado, todos os clientes veem o mesmo quadro; um índice de quadro calculado a partir do tempo do shader é avaliado localmente e pode ficar em um ponto diferente do loop para espectadores diferentes.

Flipbook no Godot e no Phaser

No Godot 4, o caminho 2D é AnimatedSprite2D com um recurso SpriteFrames. Importe a folha, abra SpriteFrames, defina Hframes e Vframes como o número de colunas e linhas, adicione os quadros da animação, depois defina a velocidade da animação em quadros por segundo e deixe Loop ativado. SpriteFrames armazena a animação como uma lista de índices de quadro, então uma folha em grade e uma única tira funcionam sem nenhuma matemática de UV da sua parte.

Se você só precisa de uma animação, um Sprite2D comum é mais leve: defina Hframes e Vframes uma vez, depois avance a propriedade inteira frame a partir de um AnimationPlayer com interpolação step. Não faça tween de frame com uma curva de easing padrão — o valor é um índice inteiro e interpolá-lo ou o reduz a um único valor ou pisca entre duas células.

Para um flipbook em uma superfície 3D no Godot, um ShaderMaterial com a mesma matemática de linha e coluna da versão Unity é o caminho mais curto: uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), com a linha calculada a partir do índice de quadro. A origem UV do Godot é no canto inferior esquerdo, igual à do Unity, então uma folha com a primeira linha no topo precisa do mesmo flip vertical.

No Phaser 3, a folha é carregada uma vez e fatiada no momento do carregamento. frameWidth e frameHeight definem a célula, os quadros são numerados da esquerda para a direita e de cima para baixo, e a animação é identificada por números de quadro em vez de coordenadas — não há shader para escrever nem aritmética de linha e coluna para errar.

Anime uma sprite sheet ao vivo em 3D

A cena jogável desta seção é The Cyclops' Island, rodando no criador de jogos 3D da Neta Studio. O flipbook na tela é a mesma operação de índice para UV descrita acima, avaliada em um shader Three.js na GPU — a diferença é que ele está rodando em uma malha real, em uma cena real, com uma câmera que você controla e luzes que se movem.

Isso importa mais do que parece. Um flipbook em uma cena Unity plana normalmente é visto de frente, onde o vazamento de emenda e a mistura de mips são difíceis de notar. Gire a câmera ao redor de uma superfície animada em um ângulo rasante e os problemas aparecem imediatamente: uma faixa da célula vizinha na borda do quadro, o último nível de mip calculando a média de dois quadros e virando um borrão, ou uma borda alfa que se lê corretamente de frente e desaparece de lado. A build no navegador torna o ciclo entre criar uma folha e vê-la em uma superfície curto o bastante para iterar sem uma etapa de build.

Mini World é a cena menor para testar uma única folha — menos malhas e um carregamento mais curto. Agent Sprite Forge gera os quadros se você ainda não tem uma folha, e ambas as cenas usam o mesmo caminho de flipbook, então uma folha que fica certa no Mini World se comporta igual em The Cyclops' Island.

Crie sua própria folha

Há três caminhos para chegar a uma folha utilizável: converter um GIF existente, reduzir uma grade a uma única tira ou gerar quadros a partir de uma descrição escrita. Os três terminam no mesmo arquivo — um PNG com todas as células do mesmo tamanho, dispostas da esquerda para a direita e de cima para baixo, com a largura da folha sendo um múltiplo exato da largura da célula.

Converter um GIF é o caminho com mais trabalho oculto, porque um GIF não é uma sequência de quadros completos. Os quadros frequentemente são diffs parciais em relação ao quadro anterior, e os atrasos são armazenados por quadro em centésimos de segundo. Um shader de flipbook aceita apenas uma taxa de quadros, então o timing variável precisa ser achatado em quadros duplicados antes da exportação.

Cortar uma grade para uma tira é mecânico: mantenha a linha de que você precisa, corte a altura para uma célula e deixe a largura como o número de quadros vezes a largura da célula. É a escolha certa quando uma folha em grade é usada como uma única animação, porque remove o eixo vertical e a emenda que vem com ele. Gerar a partir de uma descrição é o terceiro caminho — Agent Sprite Forge recebe uma ação e um número de quadros e retorna uma folha com tamanho de célula fixo, o que elimina o trabalho de alinhar manualmente quadros exportados um de cada vez.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a em um mundo onde alguém possa andar — uma ilha pequena, um planeta, uma esquina chuvosa. Todos os mundos deste site foram feitos a partir de uma descrição escrita e publicados como uma página que você pode jogar.

FAQ