Saltar al contenido principal

Guía Rápida de Tween Manager en Lens Studio

🎭 ¿Qué es Tween.js?​

Tween.js es una librería de JavaScript para hacer animaciones de forma sencilla. En Lens Studio, se llama TweenManager, que facilita su uso en proyectos de Snapchat.

🛠️ Agregando el Paquete Tween​

  1. Abre tu proyecto en Lens Studio.
  2. Ve al panel Scene Hierarchy.
  3. Selecciona + → Scripts → Tween.
  4. ¡Listo! Ahora puedes empezar a usar tweens en tu escena. 🎉

Tip: Si ves objetos llamados [REMOVE_ME], bórralos para limpiar tu escena.

Agregar paquete Tween

🎬 Agregando Tweens​

Los Tweens se agregan como Script Components a los objetos de la escena. Estos scripts modifican propiedades específicas de los objetos.

✨ ¿Cómo agregar un Tween?​

  1. Selecciona TweenManager en Scene Hierarchy.
  2. Ve al panel Asset Browser y ve a la carpeta Tween dentro de la carpeta TweenMananger.
  3. Selecciona el archivo JS Tween, y arrástralo dentro TweenManager en Scene Hierarchy.
  4. Ve al panel Inspector y haz clic en Add Component.
  5. En Project Components, elige un Tween Type.
  6. Configura los parámetros del Tween en el Inspector.

Archivo JS Tween Parámetros del Tween

🔥 Tipos de Tween​

Cada Tween Type permite modificar una propiedad específica. Aquí te explico los más usados:

🔄 Tween Transform​

Modifica la posición, rotación o escala de un objeto.

  • Scene Object: Objeto al que se aplicará el tween.
  • Loop Type: Define si el tween se repite o alterna entre valores.
  • Easing Function: Controla la aceleración/desaceleración de la animación.

🎯 Tween Screen Transform​

Sirve para modificar objetos de interfaz (UI).

  • Position: Cambia la posición en la pantalla.
  • Scale: Ajusta el tamaño.
  • Rotation: Gira el objeto (solo eje Z).
  • Anchors: Modifica los anclajes de la UI.

🎨 Tween Color​

Cambia el color de textos, imágenes o modelos 3D.

  • Color Property: Decide qué parte del objeto se anima (Texto, Fondo, Contorno, etc.).
  • Start / End: Define los colores inicial y final.
  • Ignore Alpha: Ignora la transparencia del color.

👻 Tween Alpha​

Ajusta la transparencia de un objeto.

  • Start / End: Transparencia inicial y final.
  • Recursive: Aplica la transparencia a todos los hijos del objeto.

🔢 Tween Value​

Modifica un valor genérico en el código.

  • Data Type: Puede ser int, float, vec2, vec3 o vec4.
  • Start / End: Valores inicial y final.

🏗️ Tween Chain​

Permite encadenar múltiples Tweens.

  • All At Once: Activa todos los tweens al mismo tiempo.
  • Sequential: Los tweens se ejecutan en orden.
  • Recursive: Busca tweens en objetos hijos.

Tip: Usa Tween Chain para dividir una animación larga en partes más pequeñas.

🎮 Disparando Tweens con Behavior Script​

También puedes activar tweens con el Behavior Script.

  1. Agrega un Behavior Script en un objeto.
  2. En el Inspector, elige:
    • Trigger (evento que activa el tween, como "Tap" o "Sonrisa").
    • Response (acción, en este caso "Play Tween").
  3. El tween se activará automáticamente cuando ocurra el evento.

Behavior Script Behavior con Tween

🎬 Scripting Tweens​

🛠️ Antes de empezar: Asegúrate de que la opción Play Automatically esté desactivada cuando añadas un TweenType.

🔥 Cómo Iniciar un Tween​

global.tweenManager.startTween(SceneObject sceneObject, string, tweenName [, function onComplete, function onStart, function onStop]);

Ejemplo:

global.tweenManager.startTween(script.objectWithTweens, 'box_move');

Si quieres agregar algunas funciones para detectar cuándo empieza, termina o se detiene el tween, puedes hacer algo así:

global.tweenManager.startTween(
  script.objectWithTweens,
  'box_move_with_callbacks',
  moveComplete,
  moveStart,
  moveStop
);

function moveComplete() {
  // Código para cuando termine
}

✋ Cómo Detener un Tween​

Si necesitas detener la animación en seco, usa este comando:

global.tweenManager.stopTween(SceneObject sceneObject, string tweenName);

⏸️ Cómo Pausar y Reanudar un Tween​

Si quieres pausar la animación sin perder su estado actual:

global.tweenManager.pauseTween(SceneObject sceneObject, string tweenName)

Para reanudar un tween pausado:

global.tweenManager.resumeTween(SceneObject sceneObject, string tweenName);

📊 Obtener el Valor de un Tween​

Si necesitas saber el estado actual de un tween, usa esta función:

global.tweenManager.getGenericTweenValue(SceneObject sceneObject, string tweenName);

Puedes obtener valores específicos como x, y, z si el tween es un objeto de tipo Vec3.

🎛️ Modificar Valores de Inicio y Fin​

Valor inicial:

global.tweenManager.setStartValue(SceneObject sceneObject, string tweenName, newStartValue);

Valor final:

global.tweenManager.setEndValue(SceneObject sceneObject, string tweenName, newEndValue);

Ejemplo:

var newEnd = new vec3(0.0, 0.0, 0.0);
global.tweenManager.setEndValue(script.objectWithTweens, 'box_move', newEnd);

Para rotaciones, usa valores de tipo quat.

🔄 Reiniciar un Tween​

Si quieres resetear el objeto a sus valores iniciales:

global.tweenManager.resetObject(SceneObject sceneObject, string tweenName);