Verônica | EmiriQuem aí já não viu os carismáticos personagens do Duolingo? Pra dar vida a todos eles, os animadores tiveram que enfrentar um grande desafio: fazer as animações das bocas em mais de 40 línguas, otimizar o tempo de produção e também reduzir o tamanho do arquivo final. E pra que todo o processo acontecesse, a melhor opção encontrada foi usar o Rive.
Afinal, o que é o RIVE?
O Rive é um aplicativo de design e animação 2D que funciona em tempo real. O forte do programa são as animações interativas e a possibilidade de colocá-las em qualquer plataforma de um jeito rápido e fácil. Possui dois modos, o Rive Editor onde você pode criar seus designs e animá-los e o Rive Runtimes que é uma biblioteca de código aberto que permite a manipulação dos arquivos feito no Rive (.riv) pro Swift, Flutter, Android, JavaScript/WebGL, React, C++ e outros.
Além disso, possui o Rive’s State Machine, que basicamente é um sistema lógico que conecta as animações (states) através de comandos de programação. Você pode definir quais animações são chamadas, como elas são chamadas e como acontecerá as transições entre elas. E o melhor, é de graça!
A grandiosa tecnologia da fala
O primeiro passo era saber o que estava acontecendo na locução, detalhe por detalhe. Pra isso utilizaram um ecossistema de tecnologia que criaram para o aprendizado de línguas. Geraram as locuções e colocaram num programa de reconhecimento de fala e modelos de pronunciação, e assim deram o “timing” para cada palavra e fonema.
Depois cada som foi mapeado a uma representação visual (visema) e fizeram os designs das bocas a partir disso. Pra garantir que tudo estava correto, construíram ferramentas que pudessem editar e corrigir os visemas caso necessário.
Agora é a vez do design
Antes de começar a animar, precisavam ter certeza que as representações das bocas correspondiam corretamente aos sons específicos, mantendo-as no estilo de ilustração da Duolingo. Cada personagem tinha seu próprio conjunto de bocas, alguns eram mais simples e outros mais complexos, mas no final conseguiram ter mais de 20 estilos de boca para cada personagem. A parte mais crítica do design foi manter a verossimilhança dos visemas.
Com todo o guia de design feito, puderam dar continuidade e atribuir cada animação a um estado diferente, para que depois fosse colocado no Rive’s State Machine e combinar com cada input da boca que fizeram antes.
Depois de terminar essa parte, os assets foram exportados do Rive em um único arquivo e entregues aos programadores para que eles pudessem integrar as animações pro aplicativo.
Por fim, pode-se observar que o resultado ficou incrível. As animações do Duolingo reagiam em tempo real quando os usuários acertavam ou erravam as respostas, quando clicavam numa palavra e os personagem repetiam a mesma palavra, além de ter animações até quando o usuário estava inativo.
E aí, o que vocês acharam do Rive? Já testaram? Deixa aqui nos comentários!
Imagem/Texto traduzido e adaptado do Blog Duolingo e Rive