После разработки отдельных голосов для каждого из персонажей мы подумали о том, как оживить их — помимо анимаций бездействующего поведения, которые у нас были. Мы хотели, чтобы наши персонажи были живыми и привлекательными для наших учеников!
В первую очередь: есть множество движений рта, которые можно анимировать
Мы преподаем более 40 языков на более чем 100 курсах, каждый из которых содержит тысячи предложений и уроков, поэтому о ручной анимации движения губ для наших десяти персонажей не могло быть и речи. Нам нужно было что-то масштабируемое, учитывающее любую возможную форму рта для каждой буквы, чтобы губы соответствовали звуку. При этом нужно было сохранять размер файла достаточно маленьким для работы на Android, iOS и в Интернете. Наконец, мы хотели убедиться, что качество наших анимаций не пострадало в процессе!
Мы подумали, что ответ может заключаться в чем-то, вроде альтернативного игрового движка — в чем-то, что может помочь нам взять ограниченное количество ассетов и превратить их в практически неограниченное количество комбинаций. Так мы узнали о Rive.
Что такое Rive?
Rive — это веб-инструмент для создания интерактивных анимаций и дизайнов в реальном времени, похожий на игровой движок. Казалось, что он решит множество наших проблем: размеры файлов были компактными и аккуратно вписывались в архитектуру приложения Duolingo, а передача от аниматора к инженеру прошла без проблем.
Но больше всего нам понравился конечный автомат Rive: визуальное представление логики, которая соединяет анимации («состояния») вместе. Он позволил нам программно контролировать, какие состояния анимации вызываются, как они вызываются и как они переходят друг в друга и смешиваются друг с другом. Мощная система конечного автомата — это то, что позволило реализовать этот проект в большом масштабе. Мы поняли, что Rive — правильный инструмент, чтобы воплотить в жизнь синхронизацию движения губ со звуком!
Магия речевой технологии
Чтобы совершать движения ртом, нам нужно в мельчайших деталях знать, что происходит в речи. Когда мы создавали голоса для text-to-speech технологии, решение, которое мы использовали, не давало нам понимания произношения и таймингов для того, что говорится, но у нас была богатая экосистема речевых технологий, которую мы использовали для изучения языка. Чтобы создать точную анимацию, мы генерируем речь, прогоняем ее через наши собственные модели распознавания речи и произношения и получаем тайминги для каждого слова и фонемы (звука речи). Каждый звук сопоставляется с визуальным представлением, или виземой (визуальное описание фонемы в устной речи, она определяет положение лица и рта в тот или иной момент речи), в наборе, который мы разработали на основе лингвистических особенностей.
Благодаря этим возможностям, мы сделали фабрику для создания всех таймингов визем, необходимых для содержания нашего курса. Конечно, нам также нужно было убедиться, что все сделано правильно, и предоставить информацию в нужном месте для миллионов пользователей. Мы создали инструменты и процессы не только для создания движения губ, но и для его аудита и исправления, когда это необходимо.
Создание всех движений рта
Прежде чем мы смогли начать анимацию, нам нужно было убедиться, что мы точно представляем формы рта, соответствующие определенным звукам.
Пример диаграммы визем персонажа
Нам нужно было спроектировать каждую форму рта так, чтобы она оставалась соответствующей нашей эстетике Duolingo. Вдобавок ко всему, каждому персонажу нужен был свой набор форм для каждой виземы, соответствующей его уникальной личности. Наиболее важной частью процесса проектирования было обеспечение того, чтобы виземы выглядели правдоподобно при анимации.
Некоторым персонажам требовалось больше работы, чем другим, но в итоге мы получили набор из более чем 20 ртов, подходящих для всех!
Как только было готово руководство по дизайну, мы могли перейти к анимации. Мы создали состояние анимации для основных поз каждого персонажа в уроках, а кроме того сделали отдельные состояния только для рта персонажа. После того, как все состояния анимации были настроены, остался только один шаг — подключить эти анимации к машине состояний Rive и скомбинировать их с входными данными рта, которые мы аннотировали ранее.
Диаграмма, иллюстрирующая, как работает конечный автомат для анимации персонажа.
Диаграмма, показывающая, как формы рта смешиваются с помощью конечного автомата для визем. Здесь представлены только 4 рта, но логика та же, даже если форм больше 20. Эти состояния должны выполняться одновременно с состояниями анимации персонажа!
После завершения настройки конечного автомата он экспортируется из Rive в один файл среды выполнения, а затем передается инженерам, чтобы они могли интегрировать анимацию в приложение!
Собираем вместе
Когда приходит время показать персонажа, мы извлекаем аудио и информацию о таймингах, а затем используем временные отметки для запуска конечного автомата анимации синхронно со звуком. Это сводит передачу данных к абсолютному минимуму — гораздо меньше, чем отправка небольшого фильма — и позволяет нам реагировать на действия пользователя в режиме реального времени. Когда вы нажимаете на слово, персонаж произносит и визуально проговаривает это слово. Если вы закончите упражнение до того, как он закончит говорить, персонаж перестанет говорить вовремя. Мы также можем показать праздное поведение, такое как кивание головой, моргание и движение бровей. Наконец, в зависимости от результата задачи — правильно вы ответили или нет — мы можем перейти к конечному состоянию, показав реакцию на ваш ответ!
Будущее анимации и технологий в Duolingo
Duolingo стремится все проверять, и эти движения рта не исключение. Этот проект был забавным экспериментом, направленным на то, чтобы сделать процесс обучения более увлекательным, а также возможностью использовать новое программное обеспечение и технологии для производственного конвейера. Было поучительно видеть, что может помочь нам преодолеть технические проблемы, чтобы мы могли продолжать создавать или совершенствовать другие восхитительные функции для приложения!