Animación de mascota estilo Duolingo: estados, reacciones y esfuerzo

¿Duolingo usa Rive?

Sí, según la propia Duolingo. En una publicación de noviembre de 2022, el equipo de Duolingo describe Rive como "una herramienta web para crear animaciones y diseños interactivos en tiempo real, similar a un motor de juego", y dice sobre su máquina de estados: "El potente sistema de la State Machine es lo que permitió que este proyecto fuera viable a gran escala". El proyecto consistía en hacer el lip-sync de "nuestros diez World Characters" con "un set de más de 20 bocas", para "más de 40 idiomas en más de 100 cursos".

Más tarde, el blog de Rive describió la función Video Call de Duolingo, en la que el personaje Lily combina 8 animaciones de cabeza y 8 de cuerpo para lograr más de 64 variaciones en reposo, en un archivo de menos de 1 MB. Es Rive escribiendo sobre un cliente, así que tómalo como un caso de estudio y no como una referencia de rendimiento.

Lo que conviene rescatar es la arquitectura: un archivo interactivo por personaje, con una máquina de estados que controla la app. La app decide qué pasó (una respuesta correcta, una lección terminada); el archivo decide cómo se mueve el personaje y cómo pasa de un estado a otro. Nada de esto implica relación alguna entre Duolingo y las herramientas mencionadas en esta página.

¿Qué estados necesita una mascota de marca estilo Duolingo?

Un flujo de aprendizaje es una cadena de eventos cortos, así que combina loops (se reproducen hasta que cambian) y reacciones puntuales (se reproducen una vez y vuelven). Un mínimo práctico:

Mantén tranquilo el estado de la pregunta. La mascota acompaña el ejercicio, así que el loop debe ser lo bastante sutil como para poder ignorarlo. Para una lista más amplia, consulta estados de animación de mascotas; para el tono en apps infantiles, consulta mascotas para apps educativas infantiles.

¿Cómo funcionan las reacciones a respuestas correctas e incorrectas?

En términos de Rive, una reacción es un trigger: una señal puntual que reproduce una reacción puntual desde cualquier estado y luego vuelve al loop actual. El loop actual es un number (o enum) que define tu código. Tu código que verifica las respuestas solo tiene que disparar el trigger correcto:

// Rive web runtime with Data Binding (autoBind: true)
const vm = rive.viewModelInstance;

function onAnswerChecked(correct) {
  vm.trigger(correct ? "yes" : "no").trigger();
}

function onLessonComplete() {
  vm.trigger("success").trigger();
  vm.number("mood").value = 1; // happy loop after the reaction
}

Ambas llamadas devuelven null si el nombre de la propiedad no existe en el archivo, así que protégelas en producción. Con archivos antiguos basados en inputs, obtienes el input de tipo trigger desde la máquina de estados y llamas a fire() en su lugar.

Tres reglas de diseño de las apps de aprendizaje:

• Asimetría. Celebra las respuestas correctas más de lo que reaccionas a las incorrectas. Un leve movimiento de cabeza se percibe como retroalimentación; una gran animación triste se percibe como un castigo.
• Nunca bloquees la entrada. El estudiante debe poder tocar "continuar" mientras se reproduce la reacción.
• Respeta el movimiento reducido. Si el sistema pide menos movimiento, mantén la reacción pero hazla pequeña, o muestra una pose estática.

¿Cuánto trabajo implica una mascota de marca estilo Duolingo?

La lista de tareas es la misma, la haga quien la haga:

1. Diseño del personaje en una pose fácil de riggear: de frente, con las extremidades separadas y fondo liso.
2. Rigging: huesos o mallas para que las partes se muevan sin redibujarlas.
3. Loops para cada estado de ánimo, hechos para empezar y terminar en la misma pose.
4. Animaciones puntuales para cada reacción, hechas para volver con fluidez a cualquier loop.
5. La máquina de estados y sus inputs o su view model, con nombres que los desarrolladores puedan usar.
6. Integración y pruebas en dispositivos reales, incluido el movimiento reducido.

En los pasos 2 a 5 es donde se va el tiempo de un animador. Las tarifas y los plazos para contratar ese trabajo están en servicios de animación de mascotas de marca con exportación a Rive.

Charmotion automatiza los pasos 2 a 5 para una imagen: sube tu personaje y en pocos minutos recibes 10 loops (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention), 6 reacciones (success, error, yes, no, enter, exit) y una intro de inicio en un solo .riv, conectados a un view model Character con un número mood y un trigger por reacción. El .riv y el código vienen con todos los planes de pago, desde Starter ($20/mes), junto con MP4, GIF y un video de inicio 9:16.

¿Qué no puedes conseguir sin un animador?

Un set de estados generado cubre los momentos cotidianos. Esto todavía requiere un animador humano o mucho tiempo en el editor de Rive:

• Lip-sync. El sistema de Duolingo asigna los sonidos del habla a más de 20 formas de boca. Controlar visemas requiere arte de la boca para cada forma y un pipeline a partir del audio de voz; consulta lip-sync vs amplitud.
• Escenas personalizadas, como un personaje que celebra con accesorios, confeti vinculado a la interfaz o dos personajes conversando entre sí.
• Nuevos ángulos y poses que la imagen original no contiene, como girarse de lado o caminar por la pantalla.
• Personalidad propia del personaje: gestos característicos que hacen que una mascota de marca sea reconocible solo por su movimiento.

Un camino sensato es lanzar primero los estados estándar, observar qué momentos notan los usuarios y encargar trabajo personalizado solo para esos.

Preguntas frecuentes

¿Puedo usar a Duo u otros personajes de Duolingo en mi app?

No. Duo y los World Characters son personajes propios de Duolingo. Usa el patrón, no el arte: diseña tu propia mascota de marca y dale loops y reacciones conectados a los eventos de tu app. Evita imitar su aspecto hasta el punto de confundir a los usuarios.

¿Una respuesta incorrecta debería reproducir una animación triste?

Normalmente, un pequeño «no» o un movimiento negativo de cabeza funciona mejor que un loop triste. Da una respuesta clara sin que el estudiante se sienta castigado. Reserva los estados de ánimo tristes para momentos poco frecuentes y vuelve al reposo (idle) en cuanto aparezca la siguiente pregunta.

¿La mascota de una app de aprendizaje necesita lip-sync?

Solo si habla en pantalla con audio grabado o sintetizado. Para ejercicios de tocar y leer, bastan los estados de reposo, de pensar y de reacción. Un loop de habla sin lip-sync real funciona para frases cortas, pero se ve raro en diálogos largos.

Respuestas rápidas de esta guía

• ¿Cómo funcionan las animaciones de respuesta correcta e incorrecta al estilo Duolingo?

Fuentes

• Art meets technology: the next step in bringing our characters to life, Duolingo Blog
• Duolingo's AI-powered Video Call brings Lily to life, Rive Blog
• Data binding (web runtime), Rive
• prefers-reduced-motion, MDN Web Docs