El elemento de Image Sequence te permite insertar animaciones simples en tu gráfico, utilizando imágenes estáticas como fuente.
Este building block puede manejar dos tipos diferentes de fuentes:
Un conjunto de imágenes secuenciales (PNG o JPG) contenidas en un archivo zip
Un sprite sheet de una sola imagen (PNG o JPG) precompuesta
El tamaño máximo soportado es: 5 MB
1. Imágenes secuenciales contenidas en un zip (recomendado) *
Comprime todos los archivos de imagen exportados individuales en un archivo .zip y cárgalo en el campo Source, en el panel del inspector de Image Sequence.
Ten en cuenta:
Todas las imágenes deben seguir la misma secuencia numerada de nombres de archivo: img_001.png img_002.png img_003.png
El prefijo puede ser cualquier texto, siempre que sea el mismo en todos los archivos.
El sufijo numérico debe existir y ser secuencial.
Todas las imágenes dentro del zip deben tener el mismo tamaño en px
Todas las imágenes deben ser del mismo tipo (PNG o JPG, pero todas iguales)
No debe haber otros archivos además de las imágenes dentro del zip
Las herramientas de edición de vídeo o animación como Adobe Premiere y After Effects te permiten exportar fácilmente composiciones como una colección de archivos de imagen, uno para cada fotograma.
Configuración de Image Sequence
(1) Haz clic en el elemento de Image Sequence.
(2) Carga el .zip con la secuencia de imágenes. Después de cargarlo , verás la información sobre los marcos y el tamaño de las imágenes.
(3) FPS: Establece la cantidad de fotogramas por segundo que deseas que se reproduzca tu animación. Esto determinará la velocidad de tu animación.
(4) Loop: Hay 2 tipos de comportamiento:
Habilitado: La animación se mostrará en un loop infinito.
Deshabilitado: Útil para animaciones que desea detener en su último fotograma, como un fondo para un zócalo.
2. Usando un sprite sheet de una imagen precompuesta
Un sprite sheet es un archivo de imagen que contiene varias imágenes más pequeñas (sprites o fotogramas) en una disposición de cuadrícula en mosaico que, cuando se reproduce secuencialmente, hace que la animación suceda.
Por ejemplo, esta imagen:
Se mostrará como:
Cuando se usa de esta manera, necesitas:
(1) Hacer clic en el elemento de secuencia de imágenes.
(2) Cargar el sprite sheet de imagen precompuesta.
(3) Aparecerán dos entradas, allí tendrás que establecer cuántas columnas y filas de marcos tiene tu sprite sheet.
Columns: Se refiere a los marcos verticales que tienes en tu sprite sheet. En el ejemplo anterior tenemos 3 columnas de monedas.
Rows: Se refiere a las imágenes colocadas horizontalmente en tu hoja de sprite sheet. En el ejemplo anterior tenemos 2 filas de monedas.