Как создать маску-гадание в Instagram.
Инструкция от FFFACE

Как думаете, откуда взялись маски с гаданиями и всевозможными рандомайзерами?
Те, которые определяют какой вы персонаж из Disney, какой вы президент Украины или насколько вы хороши в постели? Так вот первичная идея всего этого — made in Kyiv.

Наша команда придумала первую маску-гадание для Silpo. Мы опубликовали ее в Instagram еще 6 декабря 2019 года, за несколько недель до всемирного хайпа. Теперь с помощью этого материала и небольших усилий — любой может сделать свою маску с гаданием.

Спойлер: очень много наглядных скриншотов.

П о д г о т о в к а


Первым делом нам понадобится Spark AR Studio

• Заходим сюда: https://sparkar.facebook.com

• Устанавливаем программу на свой ноутбук (это бесплатно)

• Открываем и нажимаем Create Project


Отлично, погнали!
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
38. Теперь при открытии рта вопрос исчезает и остаются только ответы, чтобы это выглядело органично, выбираем в левой части экрана Plane Question и в правой панель меняем значение Position по оси Y с 0.2 на 0.1

!

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


Как видите, собрать такую базовую маску одновременно и просто и сложно!

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


А для тех, кто не хочет заморачиваться разработкой, но хочет создать следующую маску, которая станет мировым трендом:
Часть 2



40. Мы в FFFACE любим клевые детали даже в базовых фильтрах, потому ниже - шаги для клевой кастомизации с использованием 3D


41. Для этого добавляем в наш фильтр файл airplane.fbx. Нажимаем Add - 3D Objects - 3D Object и выбираем файл airplane.fbx из нашей папки. У нас должен появиться вот такой 3D-самолет перед лицом
42. Сейчас мы можем свернуть меню патчей и сфокусироваться на сцене с нашим лицом и самолетом
43. Первым делом сделаем, чтобы наш самолет заблестел, добавив к его материалу текстуру отражения. Для этого нажимаем кнопку Add Asset в левом нижнем углу и выбираем там Environment Texture (Presets) - Office
44. Далее выбираем часть body внутри Airplane в левой панели. Присваиваем ей в правой части экрана shader type - Physically Based. Таким образом у нас появляется новый материал - body
45. Далее, там же, в правой панели ставим галочку напротив поля Environment
46. В Environment напротив поля Texture нажимаем Choose File и выбираем Office. Видим вот такое крутое преобразование самолета! Он заблестел
47. Такую же манипуляцию необходимо повторить и с Chrome и c Wheels. Выделяем их, в Shader Type ставим значение Physically Based и ставим галочку напротив Environment. В обоих случаях возле Environment нажимаем Choose File и выбираем Office. Теперь у нас все составные части самолета появились в материалах и стали блестящими:
48. Далее - сделаем материал chrome похожим на реальный хром. Для этого выделяем его и в правой панели крутим бегунки в поле Surface Parameters
49. Далее необходимо добавить новый объект - Null Object
50. В появившуюся папочку Null Object перетаскиваем Airplane
51. Теперь нам нужно сделать так, чтобы самолет синхронизировался с движением головы. Для этого нужно снова открыть поле для работы с патчами, выделить Null Object и создать 2 патча - Position и Rotation. Для этого кликаем на кнопки возле соответствующих полей в правой части экрана
52. После того, как мы добавили оба патча нам необходимо добавить еще один патч из папки с заготовками, этот патч создан нашей командой для упрощения синхронизации движения 3D-объекта и головы. Выбираем Add Asset - Import from Computer - в нашей папке выбираем Patches и Plane.control.arp
53. Этот патч появился у нас в левой панели внизу в папке Patches. Теперь его нужно перетащить в наше поле для работы с патчами. Тащим:
54. После того, как перетащили - выбираем этот патч и кликаем на него правой кнопкой чтобы открыть Group Properties. Перед нами появиться окно в нем нужно выбрать 3D position и в поле type выбрать Vector 3
55. После этого соединяем выход 3D position с желтым патчем Null Object - 3D position и выход 3D Rotation с желтым патчем Null Object - 3D Rotation

56. Теперь наш самолет полетел и ему нужно небо. Для этого в левой верхней части добавляем еще один Plane (как мы делали раньше)
57. Выбираем этот Plane и задаем ему параметры Scale 20, 20, 20 (по каждой из осей), а также - в поле Position задаем -1 по оси Z. Получилась вот такая каша, но не надолго
58. Теперь к этому Plane добавляем material, который мы называем Sky
59. Выбираем этот материал в левом нижнем углу и присваиваем ему shader type Flat, а потом - в поле texture добавляем файл из нашей папки - Sky
60. У нас есть небо. Теперь нужно посадить наше лицо в кабину самолета и все будет готово. Для этого добавляем еще один Face Mesh и называем его Face
61. После этого выделяем Face и в правой панели убираем галочки напротив Eyes и Mouth
62. Теперь мы добавляем Material к Face и называем его тоже Face
63. Мы почти на финишной. Теперь выбираем слева Face Tracker и справа нажимаем кнопку texture extraction, таким образом мы извлечем текстуру собственного лица, которое снимаем
64. Этот FaceTracker Texture отображается в левом нижнем углу в списке текстур. Давайте тоже переименуем его в Face. После этого выбираем материал Face и в правой части присваиваем ему Shader Type Flat, после чего присваиваем ему также справа в поле Texture текстуру Face. Получается такая картинка:
65. Теперь садим наше лицо в самолет. Для этого Face mesh Face перетаскиваем в папку Airplane
66. Остался последний штрих - выделяем в левой панели Question и Answer - и перетаскиваем их внутрь нашего Face (который уже лежит внутри Airpalne)
67. В общем-то все готово, но есть неидеальность. Вокруг наших ответов и вопроса в кружочках есть некрасивый квадрат. Чтобы от них избавиться по очереди выделяем в левой нижней панели материалы Question и Answer и в правой панели заходим в Advanced Render Options. Там будет 2 галочки, которые вам нужно отключить чтобы квадрат вокруг кружочков пропал
68: Теперь делаем еще одну мелочь - выбираем наш plane0 (его нужно назвать фон, сделаем это в конце) и перетаскиеваем его по списку выше, чтобы он был под Focal Distance. Должно получиться так:
69. Еще остались силы? Мы можем добавить вишенку на торте. Для этого в левой панели выбираем из Scene объект Airplan и кликаем на него 2 раза. В открывшемся списке находим fan и выделяем его. В правом окне нажимаем кнопку напротив поля Rotation чтобы создать патч
70. Берем этот желтый патч и добавляем к нему еще 2 - Loop Animation и Transition. Выстраиваем их в таком порядке:
71. В патче Transition присваиваем в поле Start по оси Z значение 360*
72. Ваш самолет полетел !!!
Публикуй свою маску и отмечай @ffface.me в сториз чтобы мы (и наши подписчики:) увидели твой успех!