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 en el Inspector

🔥 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 respuesta Play 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);