Как создать маску-гадание в Instagram. Пошаговая инструкция от ffface.me

Как думаете, откуда взялись маски, которые определяют какой вы персонаж из Disney, какой вы президент Украины или насколько вы гей? Первую такую маску сделали киевские ребята из ffface.me для Silpo. Они опубликовали ее в Instagram еще 6 декабря 2019 года, за несколько недель до всемирного хайпа.
На заказ такие маски делают за $400-500. Вместе с ffface.me мы замутили большой гайд. С помощью этого гайда вы сможете создать маску с гаданием совершенно бесплатно. Спойлер: внутри очень много подробных скриншотов.
Мы и сами сделали маску с помощью инструкции. Наша маска про карантин выглядит так:

Инструкция

Первым делом нам понадобится программа Spark AR Studio.
1. Для нашей тренировочной маски качаем вот эти файлы. Впоследствии вы сможете заменить используемые вижуалы и тексты по своему вкусу.
2. Поехали. Внимательно смотрите на скриншоты. Сначала мы добавляем Face Mesh.

 
3. Добавляем Plane. Перед лицом появился шахматный прямоугольник. Именно на нем будут появляться вопрос и варианты ответа на него. Переименовываем наш Plane в Question для удобства.

 
4. Для удобства делаем Face Mesh невидимым.

 
5. Теперь делаем так, чтобы наш Question был синхронизирован с лицом. Для этого перетаскиваем его в раздел FaceTracker. Теперь наш Question закрывает лицо.

6. Поднимаем нашу карточку с вопросом на уровень лба. Для этого нажимаем на Question в левой панели и в правой панели в настройках Position задаем значение 0.1 по оси Y. Также, двигать эту область можно зажав любую из стрелочек в центре экрана.

7. Теперь присвоим материал и текстуру для Question. Нажимаем на него в левой части экрана, а в правой нажимаем кнопку + возле поля Materials. Сразу же называем появившийся материал Question.

8. Теперь нам нужно присвоить нашему материалу текстуру. Мы преобразуем плашку в картинку с вопросом. Для этого нажимаем на материал Question в левом нижнем углу экрана и присваиваем ему shader type Flat.

9. Здесь же подгружаем в раздел Texture первый файл из нашей папки проекта. Возле поля Texture нажимаем на choose file и загружаем файл question.png

10. Не забываем выключить компрессию. Для этого выделяем в левом нижнем углу текстуру Question и в правой панели ставим галочку no compression.

11. Добавляем еще один Plane и называем его Answers.

12. Присваиваем материал для Answers. Выделяем его в левой верхней части экрана, а в правой части экрана нажимаем + возле поля Material. Нажимаем create new material и появившийся материал называем Answers.
13. После этого нужно создать текстуру с ответами. Для этого нажимаем Add и добавляем Animation Sequence. Также называем ее Answers.

 
14. Animation Sequence — это последовательное отображение изображений в виде анимации. Чтобы увидеть, как это работает — выделяем нашу animation sequence, которую мы назвали Answers. В правой панели возле поля texture нажимаем на кнопку Choose File.

15. В появившемся окне можем выбрать все варианты ответов из папки Answers.

16. Дальше выбираем наш материал Answers в разделе Assets. Присваиваем ему shader type Flat.

17. Присваиваем ему в качестве текстуры наш animation sequence — Answers.

18. Маска некрасиво перекрывает лицо, поэтому поднимаем выше оба наших plane. Для этого выбираем их в левой верхней части экрана, а в правой части в разделе position задаем 0.2 по оси Y для Question и 0.1 для Answer.

19. Далее выбираем Answers в разделе animation sequence и нажимаем на кнопку напротив поля current frame.

20. Открылось меню патчей и появился первый патч. Правой кнопкой мы будем добавлять новые по порядку. Эти патчи задают логику работы маски. Первым добавляем патч под названием Random.

 
21. Добавляем таким же образом патч Loop Animation.

 
22. Появившиеся патчи соединяем вот так:

 
При этом в поле End Value патча Random вписываем значение 9.
23. Далее соединяем Random и Current Frame и видим, что значения ответов рандомно переключаются каждую секунду.

24. В патче Loop Animation меняем duration с 1 на 0.1. Теперь значения ответов сменяются быстрее, как в классических масках с гаданием.
25. Теперь гадание происходит постоянно, но не дает никаких ответов. А нам нужно, чтобы оно активировалось при открытии рта. Чтобы это произошло — выбираем FaceTracker в левом верхнем углу и в правой панели нажимаем на кнопку Create возле поля Patch.

26. Выбираем пункт Mouth Open и видим, что в нашем Patch Editor добавились новые патчи. Для удобства ставим их перед теми, что создали ранее.

27. Соединяем выход Mouth Open с входом Enable патч Loop Animation. Теперь анимация связана с открытием рта. Но для ее работы рот должен быть постоянно открыт.
28. Чтобы это пофиксить добавляем патч, который называется Delay.

29. Вставляем этот патч между Mouth Open и Loop Animation и присваиваем значение 3 в поле duration. Теперь анимация стартует с небольшой задержкой после открытия рта.

30. Далее добавляем патч, который называется Switch. Этот патч позволяет включать и выключать, например, анимацию.

31. Теперь нам необходимо подключить этот патч таким образом, чтобы открытие рта включало анимацию, а закрытие рта с задержкой выключало ее. После добавления Switch у нас автоматически добавляется патч под названием Pulse.
Дальше нам необходимо собрать такую картинку: выход Mouth Open соединить с входом Pulse, верхний выход Pulse соединить с входом Delay и Turn on в патче Switch / выход Delay соединить с Turn Off в патче Switch и выход Switch соединить с входом Enable в патче Loop Animation
32. Теперь сделаем так, чтобы на момент старта гадания был виден только вопрос. Для этого в левой панели выбираем Plane под названием Answer и в правой части экрана нажимаем на кнопку возле поля Visible.

33. Появившийся патч соединяем с выходом патча Switch.

34. Теперь у нас в дефолтном состоянии только вопрос, с открытием рта происходит появление анимации с ответами, после чего ответ появляется и быстро исчезает. Чтобы это исправить выделяем патчи Pulse, Switch и Delay и нажимаем копировать (ctrl+c). Вставляем эти патчи с помощью (ctrl+v) где-то немного выше таким образом:

 
35. Теперь подключаем второй созданный Switch к желтому патчу Visible. Для того, чтобы результат гадания оставался виден дольше — в поле нового Delay (который только что добавили) вставляем цифру 10.

36. Добавляем патч Not.

37. После этого в левой панели выбираем Plane — Question. В правой части экрана напротив поля Visible нажимаем кнопку. Появившийся патч соединяем с выходом патча Not. А вход патча Not соединяем с выходом второго патча Switch. Должно получиться вот так:

38. Теперь при открытии рта вопрос исчезает и остаются только ответы. Чтобы это выглядело органично, выбираем в левой части экрана Plane Question и в правой панели меняем значение Position по оси Y с 0.2 на 0.1

Поздравляем! Базовое гадание готово. Теперь по открытию рта начинается гадание, мы видим смену вариантов ответа и финальный ответ. Он остается на экране несколько секунд, после чего гадание перезапускается.

Дочитали? Как видите, собрать такую базовую маску одновременно и просто и сложно. Для тех, кому интересно *продолжить игру в разработку на уровне medium* — в блоге FFFACE доступна вторая часть этой инструкции. В ней ребята показывают, как засунуть себя в кабину самолета и заставить его взлететь.