GIF para Textura de Flipbook — Empacote Qualquer GIF em uma Tira de Quadros para Unity e VRChat

Um GIF é uma linha do tempo. Uma textura de flipbook é essa mesma linha do tempo empacotada em uma única imagem para que um shader possa percorrê-la por índice em vez de um player buscar quadros. Você solta um GIF na ferramenta, ela detecta contagem de quadros, dimensões e atraso, e então grava uma tira de linha única ou em grade com metadados de linhas e colunas que você cola no seu material.

Esta página aborda o que uma conversão de gif para flipbook realmente produz para Unity, Godot e VRChat — os quatro números de que um shader de flipbook precisa, o que definir em um material Poiyomi e quando uma tira de quadros é melhor que uma grade. A saída é um PNG com fundo transparente e as contagens de linhas/colunas em texto simples ao lado.

Solte um GIF

O corpo da ferramenta é a primeira tela. A zona de soltar fica no topo; tudo abaixo dela é saída. Arraste um GIF até ela e a ferramenta lê a contagem de quadros, o atraso por quadro, o tamanho do canvas e o método de descarte. Ela informa o que encontrou antes de gravar qualquer coisa, porque GIFs reais divergem nesses quatro pontos.

Duas coisas geralmente exigem uma decisão. Primeiro, atrasos irregulares entre quadros: a maioria dos shaders de flipbook avança em FPS constante, então um GIF com atrasos mistos precisa ser reamostrado para uma taxa fixa ou exportado no tempo de quadro comum mais lento. Segundo, descarte: um GIF que só redesenha regiões alteradas entre quadros exibirá efeito fantasma se você empilhar quadros de forma ingênua. A ferramenta compõe cada quadro sobre um canvas completo antes de empacotar, então redesenhos parciais se tornam quadros completos.

Quando a composição termina, o empacotador grava uma imagem. Um GIF de 24 quadros 128x128 vira uma tira de 3072x128. Os mesmos quadros como uma grade 6x4 viram 768x512. Ambos são os mesmos pixels; a diferença é o que o shader faz com as UVs.

O que é uma textura de flipbook

Um shader de flipbook lê quatro números: linhas, colunas, o índice atual e FPS. Ele recebe uma coordenada UV no intervalo de 0 a 1, divide-a em uma célula de linha/coluna e desloca essa célula pelo índice atual. A textura em si é estática. Nada anima até o índice se mover.

O índice geralmente é derivado do tempo. Com uma tira de linha, o índice é igual a floor(tempo multiplicado por FPS), e a coordenada U é deslocada em índice dividido por colunas. Com uma grade, o índice também fornece uma linha: linha é igual a floor(índice dividido por colunas), coluna é igual a índice módulo colunas. É por isso que a tira de linha é o caso mais fácil — há apenas uma dimensão para percorrer.

Linhas e colunas devem corresponder exatamente à imagem. Uma tira de 3072x128 com 24 colunas e 1 linha declaradas é amostrada corretamente. Declare 23 colunas e cada quadro cai uma fração de célula fora do lugar, o que aparece como uma mancha diagonal. Declare 1 coluna e você obtém uma imagem estática. Esses dois erros explicam a maioria dos flipbooks quebrados.

FPS é separado da contagem de quadros. Uma tira de 24 quadros a 12 FPS faz loop duas vezes por segundo. Uma tira de 24 quadros a 24 FPS faz loop uma vez por segundo. Os dados da textura são idênticos; só o relógio muda. Mantenha o FPS no mesmo lugar que as contagens de linhas e colunas para que nunca se desencontrem.

Linhas, colunas, índice, FPS. Linhas e colunas descrevem a textura. Índice e FPS descrevem o tempo. Linhas e colunas são fixadas na exportação. O índice é dinâmico e pertence ao shader ou script. O FPS é fixo na maioria dos shaders, mas pode ser controlado por um parâmetro quando você quiser controle de velocidade.

Se seu shader tem um parâmetro de velocidade ou taxa de reprodução, ele multiplica o termo de tempo, não a constante de FPS. Mantenha o FPS exportado como taxa base para que os metadados continuem significativos quando a velocidade for 1.

Textura de flipbook para Unity

Na Unity, o flipbook geralmente é um material em um quad ou uma partícula. Importe o PNG com sRGB ativado, sem mipmaps se os quadros forem pequenos, e Alpha Is Transparency. O Wrap Mode deve ser Clamp, não Repeat — um flipbook com repetição envolve o último quadro no primeiro na borda da UV e mostra uma emenda de um pixel.

Há duas maneiras de controlar o índice. Em um shader Unlit ou Particles com um nó de flipbook integrado, você define o tiling para linhas e colunas e fornece a ele um valor de blend de 0 a 1. Em um shader personalizado, você mesmo escreve a matemática de UV e expõe linhas, colunas e FPS como propriedades de material para que possam ser editadas sem recompilar.

Os metadados que você cola: linhas, colunas, contagem de quadros, FPS exportado. Se seu shader usa um blend normalizado em vez de um índice inteiro, o intervalo do blend é de 0 até contagem de quadros dividida pelo total de células da grade — para uma linha única de 24 quadros, isso é 0 a 1; para uma grade 6x4 com 24 quadros de 24 células, também é 0 a 1. Grades parciais são o caso em que as pessoas erram: uma grade 6x4 com 20 quadros termina em 20 dividido por 24, ou cerca de 0,833. Passe disso e você amostra células vazias.

Flipbook Poiyomi para VRChat

O Poiyomi inclui um nó de flipbook, e esse é o caminho usual para uma boca falante, uma tela rolante ou uma alternância de dois quadros em um avatar. O nó recebe uma textura, um par de linhas e colunas e um valor de blend. O VRChat não executa código de shader personalizado a partir de um script em tempo de execução, então o índice precisa vir de uma propriedade de material animada ou de um parâmetro controlado por animator.

A malha importa tanto quanto o material. Um flipbook em um quad plano é lido corretamente; a mesma textura em uma superfície curva mostrará células esticadas onde as UVs estão distribuídas de forma irregular. Mantenha materiais de flipbook em malhas planas ou quase planas.

Trabalhe no layout de tira para Poiyomi quando a animação for um loop, porque a matemática de UV é uma multiplicação e uma soma. Use o layout de grade quando a animação for um conjunto de estados discretos entre os quais você quer saltar — uma boca com quatro formas é mais fácil de entender como uma grade 4x1 com índice inteiro do que como uma rolagem.

Tira de quadros vs grade: qual exportar

Os dados de pixels são idênticos. A escolha depende do que vai consumi-los. Shaders querem uma tira. Engines e sistemas de sprite querem uma grade. Escolha com base no consumidor, não no tamanho do arquivo — uma tira é mais larga e uma grade é mais quadrada, e ambas comprimem de forma semelhante com a mesma contagem total de pixels.

Uma tira tem uma linha, então a coordenada V não é usada e o shader só desloca U. Isso significa menos instruções e menos maneiras de errar a matemática. Uma grade usa os dois eixos, que é o que sistemas baseados em atlas esperam. Se estiver em dúvida, exporte a tira e reexporte como grade apenas quando um importador de engine pedir uma.

Mais um caso é o animador de sprites que espera quadros individuais. Algumas engines querem uma pasta de PNGs, não um atlas. A ferramenta pode gravar os quadros separadamente, mas a imagem em disco passa a ser a soma de todos os quadros em vez de um único arquivo, e as configurações de importação são por quadro.

Jogue em 3D

Uma textura de flipbook em um plano estático não prova nada. As afirmações que você precisa verificar são as que só aparecem em movimento: se a emenda fecha, se o alpha se mantém à distância, se o FPS parece certo quando a câmera se move. The Cyclops' Island é uma cena jogável criada no construtor de jogos 3D em que superfícies animam em tempo real, então você pode assistir a um loop de flipbook ao lado da geometria, e não em um Inspector.

Abra, percorra a superfície e observe o ponto de loop. Se um flipbook tem um quadro a menos ou uma coluna de largura errada, você vê isso ali — um travamento visível ou uma mancha diagonal — antes mesmo de enviar um asset. Esse é todo o argumento para a cena jogável: a falha é visual, e falhas visuais precisam de uma viewport.

A mesma cena é uma referência de como a troca de quadros se comporta em diferentes distâncias e ângulos de câmera. Quadros que parecem bons a 128 pixels de perto criarão serrilhado à distância sem controle de mip; quadros que parecem bons à distância podem ficar macios demais de perto. Ambos são mais fáceis de julgar em movimento.

Entre no mundo a que 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 montar e coloque-a em um mundo pelo qual alguém possa caminhar — uma pequena ilha, 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