O elemento Image Sequence permite inserir animações simples em seu Gráfico, usando imagens estáticas como fonte.
Este building block pode lidar com dois tipos diferentes de fontes:
Um conjunto de imagens sequenciais (PNG ou JPG) contidas em um arquivo zip
Um sprite sheet pré-composto de imagem única (PNG ou JPG)
O tamanho máximo suportado é: 5 MB
1. Imagens sequenciais contidas em um zip (recomendado) *
Compacte todos os arquivos de imagem individuais exportados em um arquivo .zip e carregue-o no campo Source, no painel do inspetor de Image Sequence.
Leve em conta:
Todas as imagens devem seguir a mesma sequência numerada de nomes de arquivo: img_001.png img_002.png img_003.png
O prefixo pode ser qualquer texto, desde que seja o mesmo em todos os arquivos
O sufixo numérico deve existir e ser sequencial.
Todas as imagens dentro do zip têm o mesmo tamanho em px
Todas as imagens devem ser do mesmo tipo (PNGs ou JPGs, mas todas iguais)
Não deve haver outros arquivos além das imagens dentro do zip
Ferramentas de edição de animação ou vídeo, como Adobe Premiere e After Effects, permitem exportar facilmente composições como uma coleção de arquivos de imagem, um para cada quadro.
Configurações de Image Sequence
(1) Clique no elemento de sequência de imagens.
(2) Faça o upload do .zip com a sequência de imagens. Depois de fazer o upload, você verá as informações sobre os quadros e o tamanho das imagens.
(3) FPS: Defina a quantidade de quadros por segundo que você deseja que sua animação reproduza. Isso determinará a velocidade da sua animação.
(4) Loop: Existem 2 tipos de comportamento:
Habilitado: A animação será exibida em um loop infinito.
Desabilitado: Útil para animações que você deseja parar no último quadro, como um fundo para uma tarja.
2. Usando um sprite sheet pré-composto
Um sprite sheet é um arquivo de imagem que contém várias imagens menores (sprites ou frames) em um arranjo de grade lado a lado que, quando reproduzido sequencialmente, faz a animação acontecer.
Por exemplo, esta imagem:
Será jogado como:
Ao usar desta forma, você precisa:
(1) Clicar no elemento de Image Sequence.
(2) Carregar o sprite sheet pré-composto.
(3) Duas entradas aparecerão, lá você terá que definir quantas colunas e linhas de frames sua folha de sprite tem.
Columns: Refere-se aos quadros verticais que você tem em sua folha de sprite. No exemplo acima, temos 3 colunas de moedas.
Rows: Refere-se às imagens colocadas horizontalmente em sua folha de sprite. No exemplo acima, temos 2 linhas de moedas.