Animação de mascote no estilo Duolingo: estados, reações e esforço

O Duolingo usa Rive?

Sim, segundo o próprio Duolingo. Em um post de novembro de 2022, a equipe do Duolingo descreve o Rive como "uma ferramenta web para criar animações e designs interativos em tempo real, semelhante a uma game engine" e diz sobre a state machine: "O poderoso sistema da State Machine foi o que tornou este projeto viável em grande escala." O projeto era fazer o lip-sync dos "nossos dez World Characters" com "um conjunto de mais de 20 bocas", para "mais de 40 idiomas em mais de 100 cursos".

Mais tarde, o blog do próprio Rive descreveu o recurso Video Call do Duolingo, em que o personagem Lily combina 8 animações de cabeça e 8 de corpo em mais de 64 variações de idle, em um arquivo com menos de 1 MB. É o Rive escrevendo sobre um cliente, então leia como estudo de caso, não como benchmark.

O que vale aproveitar é a arquitetura: um arquivo interativo por personagem, com uma state machine controlada pelo app. O app decide o que aconteceu (uma resposta certa, uma lição concluída); o arquivo decide como o personagem se move e faz a transição entre estados. Nada aqui sugere qualquer vínculo entre o Duolingo e as ferramentas mencionadas nesta página.

De quais estados um mascote no estilo Duolingo precisa?

Um fluxo de aprendizado é uma sequência de eventos curtos, então mistura loops (tocam até serem trocados) e reações únicas (tocam uma vez e depois voltam). Um mínimo prático:

Mantenha o estado da pergunta calmo. O mascote está apoiando o exercício, então o loop deve ser sutil o bastante para passar despercebido. Para uma lista mais ampla, veja estados de animação de mascote; para o tom em apps infantis, veja mascotes para apps de educação infantil.

Como funcionam as reações a respostas certas e erradas?

Em termos de Rive, uma reação é um trigger: um sinal pontual que toca uma animação de reação única a partir de qualquer estado e depois volta ao loop atual. O loop atual é uma propriedade number (ou enum) que seu código define. Seu código de verificação de respostas só precisa disparar o trigger certo:

// 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
}

As duas chamadas retornam null se o nome da propriedade não existir no arquivo, então proteja-as em produção. Em arquivos mais antigos baseados em inputs, você obtém o input de trigger pela state machine e chama fire().

Três regras de design vindas de apps de aprendizado:

• Assimetria. Comemore as respostas certas mais do que você reage às erradas. Um leve balançar de cabeça soa como feedback; uma grande animação triste soa como punição.
• Nunca bloqueie a interação. O aluno deve poder tocar em "continuar" enquanto a reação toca.
• Respeite o movimento reduzido. Se o sistema pedir menos movimento, mantenha a reação, mas deixe-a discreta, ou mostre uma pose estática.

Quanto trabalho dá um mascote no estilo Duolingo?

A lista de tarefas é a mesma, seja quem for fazer:

1. Design do personagem em uma pose fácil de fazer o rig: de frente, com membros separados e fundo liso.
2. Rigging: bones ou malhas para que as partes se movam sem precisar redesenhar.
3. Loops para cada humor, feitos para começar e terminar na mesma pose.
4. Animações que tocam uma vez para cada reação, feitas para voltar suavemente a qualquer loop.
5. A state machine e seus inputs ou view model, com nomes que os desenvolvedores possam usar.
6. Integração e testes em dispositivos reais, incluindo movimento reduzido.

Os passos 2 a 5 são onde vai o tempo de um animador. Valores e prazos para terceirizar esse trabalho estão em serviços de animação de mascote com exportação para Rive.

O Charmotion automatiza as etapas 2 a 5 para uma imagem: envie o seu personagem e, em poucos minutos, você recebe 10 loops (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention), 6 reações (success, error, yes, no, enter, exit) e uma intro de abertura em um único .riv, conectados a um view model Character com um número mood e um trigger por reação. O .riv e o código vêm com todos os planos pagos, a partir do Starter (US$ 20/mês), junto com MP4, GIF e um vídeo de abertura 9:16.

O que não dá para conseguir sem um animador?

Um conjunto de estados gerado cobre os momentos do dia a dia. Estes ainda precisam de um animador humano, ou de muito tempo no editor do Rive:

• Lip-sync. O sistema do Duolingo associa os sons da fala a mais de 20 formatos de boca. Controlar visemas exige arte da boca para cada formato e um pipeline a partir do áudio da fala; veja lip-sync vs amplitude.
• Cenas personalizadas, como um personagem comemorando com objetos, confetes ligados à interface ou dois personagens conversando entre si.
• Novos ângulos e poses que a imagem original não contém, como virar de lado ou atravessar a tela andando.
• Personalidade própria do personagem: gestos característicos que tornam um mascote reconhecível só pelo movimento.

Um caminho sensato é lançar primeiro os estados padrão, observar quais momentos os usuários notam e encomendar trabalho personalizado só para esses.

Perguntas frequentes

Posso usar o Duo ou outros personagens do Duolingo no meu app?

Não. O Duo e os World Characters são personagens do próprio Duolingo. Use o padrão, não a arte: crie seu próprio mascote e dê a ele loops e reações ligados aos eventos do seu app. Evite imitar o visual deles a ponto de confundir os usuários.

Uma resposta errada deve tocar uma animação triste?

Normalmente, um pequeno 'não' ou um balançar de cabeça funciona melhor do que um loop triste. Ele dá um feedback claro sem fazer o aluno se sentir punido. Reserve os humores tristes para momentos raros e volte ao idle assim que a próxima pergunta aparecer.

Um mascote de app de aprendizado precisa de lip-sync?

Só se ele falar com áudio gravado ou sintetizado na tela. Para exercícios de toque e leitura, os estados idle, thinking e de reação bastam. Um loop talking sem lip-sync de verdade funciona para falas curtas, mas fica estranho em falas longas.

Respostas rápidas deste guia

• Como funcionam as animações de resposta certa e errada no estilo Duolingo?

Fontes

• 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