Skip to main content

Animación 2D

Lens Studio te permite importar GIFs animados o secuencias de texturas para crear animaciones 2D. Estas secuencias se convierten en una hoja de sprites optimizada, que puedes usar como textura en tu proyecto.

Puedes controlar la reproducción activando Always Play o programando cuándo y con qué frecuencia se ejecuta la animación.

🚀 Importar Animaciones 2D​

Solo arrastra y suelta un GIF en el *Asset Browser, y Lens Studio generará automáticamente una textura animada.

⚙️ Configuración de Animación​

Selecciona el recurso de animación en el Inspector Panel, donde podrás:

  • Previsualizar la animación.
  • Ver el número de cuadros.
  • Comprobar el tamaño en píxeles.

🔄 Opciones de Reproducción​

  • Auto Play: La animación se repite indefinidamente.
  • FPS: Controla los cuadros por segundo.
  • Duración: Define cuánto tiempo dura la animación.
  • Reproducción programada: Usa scripts para activar la animación en ciertos momentos.

🛠️ Programando Animaciones​

🔹 Usando el script Behavior​

Puedes hacer que la animación se active con eventos como:
✅ Abrir la boca
✅ Toque en pantalla
✅ Fin de otra animación
Esto se configura fácilmente con menús desplegables en el panel de Behavior Script.

🔹 Control de animación con código​

Si necesitas más control, puedes usar JavaScript o TypeScript.

Ejemplo en JavaScript​

const loops = 1; // Número de repeticiones (-1 para infinito)
const offset = 0.0; // Tiempo de inicio

const myAnimation = script.getSceneObject().getComponent('Component.Image');
const textureControl = myAnimation.getMaterial(0).getPass(0).baseTex.control;
textureControl.play(loops, offset);

Ejemplo en TypeScript​

@component
export class NewScript extends BaseScriptComponent {
  onAwake() {
    const loops = 1;
    const offset = 0.0;

    const myAnimation = this.getSceneObject().getComponent('Component.Image');

    // Obtener el TextureProvider de la imagen y asegurarse de que es una textura animada
    const textureProvider = myAnimation.getMaterial(0).getPass(0).baseTex
      .control as AnimatedTextureFileProvider;

    textureProvider.play(loops, offset);
  }
}

Para más información, revisa la documentación de la API Animated Texture File Provider.