Как сделать игру в спарк ар
Добавил пользователь Alex Обновлено: 19.09.2024
Привет! Меня зовут Павел, я делаю маски в инстаграм и решил для TJ сделать туториал по созданию простой маски.
Для начала нам понадобится программа Spark AR. Она есть для macOS и Windows, скачать можно тут. После установки запускаем Spark AR и авторизуемся через аккаунт в Фейсбуке. После этого у вас появится приветственное окно.
Теперь у нас есть трекер лица, с помощью которого наши элементы будут изменять своё местоположение при движении.
Наша маска почти готова! Теперь выключаем слой с лицом и экспортируем маску на рабочий стол в PNG. Закидываем наш файл в текстуры.
Подсказка: зелёная стрелочка перемещает полотно вверх/вниз, красное — вправо/влево, синее — вперёд/назад.
Наша маска готова! Теперь скачайте Spark AR Player на телефон, подсоедините его в компьютеру и отправьте маску на телефон для теста.
Спасибо, что прочитали этот туториал. В него было вложено много сил: если хотите, чтобы я рассказал, как сделать более сложные и крутые маски, то подписывайтесь на мой инстаграм. У меня там скоро будут новые крутые масочки.
Вопросы писать можете здесь в комментариях или мне в директ.
Маску зелёного слоника сделать бы))0)
Там всё легко) Можно и её сделать
Сколько раз по 15 минут уйдёт у человека который этим не занимался? + Установка софта и попытки понять что к чему.
Ничо не понял.
Давай с простого начнём: сколько к ВВП страны добавляет создание такой маски?
Если человек после этого заинтересуется 3D-софтом или анимацией, то потом может начать изучать эти области сам и в итоге уйти в графику для кино и рекламы, например. Так что потенциал увеличения ВВП имеется
О! Неплохо. А есть туториал по дополненной реальности. Я б почитал. А может и увлёкся б ею.
Это подробный туториал для тех, кто вообще ни разу не запускал Спарк Эйар. Я когда захотел сделать в первый раз маску, я наткнулся на такой же "туториал" как у тебя. Поверь, нихера не понятно.
• 40 авторских уроков, в качестве Full HD
• 20 -ти часовое погружение в мир AR
• Персональная поддержка и наставничество от меня
• Разбор ваших домашних заданий
• Дополнительные задания, уроки, подсказки в процессе обучения
• Закрытые стримы
• Дополнительные э ксклюзивные знания и инструменты
• понимать программу Spark AR Studio, а не повторять чужие уроки
• большинство задач вы сможете делать автоматически
• ускорите свою продуктивность работы
• научитесь думать и решать задачи, самостоятельно отвечать на большинство вопросов
• изучите основы работы в Adobe Photoshop, Adobe After Effects, Blender, Final Cut Pro, Apple Motion
• сможете реализовать большинство популярных масок
• 26 урок
Head Occluder. Закручиваем объекты вокруг головы, простая и быстрая схема для любых объектов в любом количестве. Принцип смещения опорных точек объекта.
• 27 урок
Продолжаем урок анимации, делаем копии для 4-х лиц и закручиваем их вокруг головы. Создаем эффект неоновых лиц с рванными краями.
• 28 урок
Источники освещения в Spark AR. Разбираем все типы освещения, свойства, принцип работы и взаимодействие с объектами.
• 29 урок
Погружаемся в материалы для объектов, в чём их отличие, а также общие правила для всех. Разбираем тип материала Flat и его возможности.
• 30 урок
Разбираем тип материала Standard. Свойства, настройки и особенности получение нужных эффектов (учимся создавать нормали, текстура рельефов, блики, блеск, тени). Взаимодействие с источниками освещения.
• 31 урок
Разбираем тип материала Physically Based, сравниваем с Standard, разбираем принци п получение нужных эффектов (текстура рельефов, блики, что такое карта окружающей среды).
• 32 урок
Разбираем остальные типы материал и изучаем принципы создания бьюти-масок, используя разные материалы и их свойства, для получения нужных нам результатов. Стрелки, Губы, Брови, Тени, Блики, Хайлайт и т.п. Особенности работы в фотошопе при создании подобных текстур. Учимся подсвечивать отдельные объекты и элементы.
• 33 урок
Основы работы c 3d моделями в Spark AR. Добавляем к нашему эффекту 3d очки. Особенности настройки текстур для отражения в стёклах и дополнительных бликов, настраиваем все материалы. Сколько вести наш проект? А также разбираемся с загруженными текстурами для 3d модели, что такое UV развёртка. Какие 3d форматы поддерживает Spark AR.
• 34 урок
Добавляем анимацию для 3d очков по тапу экрана, изменяя опорные точки для 3D объекта, настраиваем вектор смещения.
• 35 урок
Основы работы в Blender 2.8. Изменяем и модифицируем форму 3d модель в Blender. Как уменьшить вес 3d модели c 90 мб до 2 мб. Где скачать нужную модель и на что стоит обратить внимание при скачивании модель со стоков. Какие форматы 3d бывают и их отличие. Лицензии на авторство в программе Spark. Учиться 3d моделированию самому или отдавать задание на аутсорсинг?
• 36 урок
Привязка объекта к голове разными способами, разбираемся в передаваемых данных c Face Tracker. Бонус, знакомства с программой Apple Motion сравнение с Adobe After Effects, делаем динамичную анимацию для текста в два клика.
• 37 урок
Разбираем логику и принципы создания масок на основе рандомного выбора используя Animation Sequence. Делаем два варианта сценария игры. Делаем плавное проявление видимости объектов, добавляем инструкцию.
• 38 урок
3d Ресницы в Spark AR. Привязка ресниц, настройка и изменения необходимых параметров, амплитуда движения, как сделать свои собственные ресницы. Совмещение с макияжем и дополнительными элементами на лице. ЛайфХак как скрыть ресницы за носом при повороте головы.
• 39 урок
Eye Color - часть 1. Корректировка объектов, делаем разный цвет зрачков, смена цвета зрачков по кнопкам оставляя все настройки шейдеров, добавляем слайдер для смены цвета, добавляем свои текстуры на зрачки двумя способами.
Eye Color - часть 2 (57 минута). Ошибки трекинга некоторых патчей. Настраиваем скрытие материала зрачков и своих текстур при закрытие каждого глаза двумя способами. Избавляемся от двойных век. Разбираем патчи раздела Logic. Добавляем и совмещаем Пресет, Ресницы, элементы макияжа, настройка layer.
• 40 урок
Закрытый стрим по работе с футажами в Adobe After Effects. дополнение к 19 уроку
• работы и отзывы моих учеников вы можете увидеть в моем инстаграм
• также в своем и нстаграм я провожу регулярные прямые эфиры отвечая на ваши вопросы и разбирая наболевшие темы
• всем новичкам я рекомендую ознакомится с моими бесплатными уроками на ютубе
• ссылки на все соц сети находятся в самом низу страницы
• Есть возможность альтернативных способов, в том числе оплаты с других стран.
• Возможность рассрочки обсуждается индивидуально пишите в > Телеграм
• Уроки будут доступны в вашем личном кабинете.
• Видеоуроки защищены от скачивания, копирования, распространения в интернете и предназначены исключительно для частного просмотра.
• Напоминаю, что приобретенный курс и вся информация в рамках курса (включая доп. материалы) предназначены исключительно для личного использования того, кто приобрёл курс, распространение информации в любом формате в любом месте категорически карается). Вы будите заблокированы.
• Также если система обнаружит вход с чужих устройств или мест по IP, доступ к урокам также будет заблокирован. Не нарушайте правила об авторском праве, уважай чужой труд и все будет хорошо).
Автор статьи: Алена Гейзер — дизайнер с опытом работы 15 лет, выпускница БВШД.
В своем блоге я пишу о дизайне, как для Instagram так и в общем. Делаю арт видео и иллюстрации.
SparkAR позволяет добавлять:
● Спрайтовую анимацию (преобразованный gif)
● Эффекты камеры и света
● Реакцию на действия — например открылся рот и пошел снег
● Трекеры головы, рук и плоскости и еще много чего интересного.
На самом сайте есть подробные уроки по пользованию всеми функциями, и рецепты создания простых масок. Я смогла создать несколько эффектов в первый же день использования программы.
Дисклеймер.
Статья была написана и опубликовано больше года назад.
С тех пор многое изменилось и появился более полный и подробный гайд по созданию масок в Instagram.
Схема создания маски выглядит так:
- Добавляете в SparkAR трекеры лица и нужные объекты
- Соединяете смартфон и компьютер через usb
- Нажимаете кнопку “Mirror” в программе на компьютере.
После этих манипуляций ваша маска будет доступна для тестирования на телефоне. Тестировать маску обязательно, так как многие косяки видно только в живую. К тому же, если маска работает плохо, она может не пройти модерацию Facebook. Еще один повод провалить модерацию — добавить в маску логотип или текст. Несколько моих масок были отклонены именно по этой причине.
Самую простую маску можно сделать всего несколькими манипуляциями с помощью создания текстуры в режиме Face Paint. В этом режиме отдельный рисунок так накладывается на ваше лицо, что выглядит как боди арт. Таким способом можно создавать макияж, татуировки, усы и тд.
Вот тут можете найти уроки по созданию масок, начиная от самого простого и первого и дальше.
Для создания более сложных масок вам могут потребоваться 3d объекты. Некоторые из них можно импортировать из встроенной AR библиотеки.
Когда ваша маска готова, вы можете загрузить ее в Facebook. Для загрузки в Instagram вам потребуется статус бета тестера, о нем я расскажу чуть позже.
Вам необходимо:
● Экспортировать маску из программы
● Создать иконку превью 480х480px
● Придумать описание эффекта и схему его работы
● Загрузить превью работы маски. Видео превью можно сделать из приложения Spark на телефоне.
При загрузки маски можно задать регион видимости маски и срок действия, что актуально для сезонных масок. Если маска не нарушает правила Facebook, спустя пару дней она будет доступна в эффектах камеры Facebook приложения. После одобрения маски отредактировать ее нельзя, можно только деактивировать.
Загружать маски в Instagram могут только авторизованные партнеры и бета тестеры.
В первый же день пользования программой я подала заявку на тестеры, но ее отклонили. После загрузки первых масок в Facebook я повторила свой запрос и его приняли через 4 дня. Подать запрос на бета тестера можно тут.
После присвоении статуса бета тестера, в том же интерфейсе на Facebook появится возможность загрузки в Instagram. Схема загрузки и требования практически не отличаются от выше описанных. Разница только в оформлении аватарки эффекта. Она должна быть выполнена по специальному шаблону.
После модерации маска появится в сториз у вас и всех ваших подписчиков автоматически.
Что дает создание собственных масок?
Каждый раз, когда пользователи будут использовать вашу маску, в углу сториз будет гореть ваше имя со ссылкой на аккаунт. Другие зрители смогут перейти на ваш аккаунт по клику на ваше имя. Каждый сториз с вашей маской станет для вас рекламным упоминанием.
Информация о том, что у вас есть свои маски будет отображаться для пользователей при посещения вашего профиля.
Примерить вашу маску сможет каждый пользователь Instagram. После одного использования маска сохранится в списке всех масок истории.
Статистику по загруженным маскам для Facebook посмотреть нельзя. Для масок загруженных в Instagram после одобрения появляется пункт “Результативность” в котором можно посмотреть число раз, когда эффект показывался на экране. В том числе когда пользователь пробовал эффект в камере, а также когда эффект показывался в истории.
За первый день статистики берется время загрузки и модерации маски, по этому диапазон дат в статистике показывается больше, чем фактическое время работы маски.
За первый день использования маски ее попробовали — 40 330 человек
Подписалось на меня + 15-20 человек
Статистика взаимодействий с аккаунтом + 300
Фактический эффект масок пока не такой волшебный, как я ожидала. Но я верю, что в долгосрочной перспективе этот инструмент принесет свои плоды.
Лучший блог про Instagram в социальных сетях. Подписался на свежие статьи?
Spark AR Player
Версия: 130.0.0.14.588
Последнее обновление программы в шапке: 22.01.2022
Краткое описание:
Посмотрите, как ваши Spark AR эффекты выглядят на мобильном устройстве.
Описание:
Посмотрите, как ваши Spark AR эффекты выглядят на вашем мобильном устройстве.
Spark AR Player работает с приложением для Mac, Spark AR Studio, которое позволяет вам создавать расширенные эффекты с дополненной реальностью для камеры Facebook.
Используйте Spark AR Player для:
• Зеркальных эффектов, таких как маски и рамки, с вашего компьютера на вашем мобильном устройстве
• Проверки, как ваши творения реагируют на движение и взаимодействие
• Сохранения нескольких эффектов и версий в приложении
Требуется Android: 4.1 и выше
Русский интерфейс: Нет
v54.0.0.7.291 от 11 января 2019 г.
v53.0.0.18.197 от 21 декабря 2018 г.
v52.0.0.15.193 от 06 декабря 2018 г.
v51.0.0.17.296 от 23 ноября 2018 г.
v50.0.0.9.194 от 29 октября 2018 г.
v49.0.0.9.197 от 19 октября 2018 г.
v48.0.0.28.182 от 15 октября 2018 г.
v47.0.0.19.183 от 25 сентября 2018 г.
v46.0.0.10.159 от 04 сентября 2018 г.
v45.0.0.22.146 от 24 августа 2018 г.
v44.0.0.14.155 от 08 августа 2018 г.
v43.0.0.17.157 от 26 июля 2018 г.
v42.0.0.20.165 от 12 июля 2018 г.
v41.0.0.18.176 от 27 июня 2018 г.
v40.0.0.29.145 от 19 июня 2018 г.
v39.0.0.8.189 от 01 июня 2018 г.
Instagram — одна из наиболее популярных социальных сетей в России, которая по данным на ноябрь 2020 года насчитывает 33 996 тыс. ежемесячной аудитории. Социальная сеть постоянно дополняет свой функционал, предлагая пользователям все больше различных интересных механик, которые направлены на удержание их внимания. К ним можно отнести Instagram Face Filters — интерактивные маски, меняющие внешность пользователя или предлагающие интересные игровые активности.
Маски — специальные фильтры, помогающие пользователям добавлять различные графические эффекты на изображение при фото- или видеосъемке через камеру в Instagram. Создаются и работают они на основании технологии AR (augmented reality).
В августе 2019 каждый пользователь получил возможность загружать свою маску в общедоступный каталог. С тех пор AR-элементы закрепились в привычках пользователей и постоянно обновляются.
Как пользователь находит маски для stories?
- Через привычную камеру в Инстаграм
Кладезь различных эффектов раскрывается при свайпе стандартного режима камеры. Здесь хранятся маски, которые вы сохранили или недавно использовали, стандартные маски социальной сети. В самом конце перечня находится галерея масок (в англоязычном интерфейсе называется Effect gallery). Она пополняется масками созданными пользователями и брендами.
Маски отображаются в специальном разделе Effects Tab профиля автора.
В левом верхнем углу stories доступно название фильтра, при нажатии на которое у вас откроется сам эффект.
Зачем пользователям маски?
Чаще всего пользователи используют маски-фильтры для повышения привлекательности своих сторис, накладывают эффекты для преображения своего лица. Маски-игры, рандомайзеры и различные юмористические эффекты развлекают пользователей и вовлекают их в жизнь социальной сети. Применение маски — способ коммуникации со своими подписчиками и инструмент увеличения ответных социальных действий от них.
В некоторых случаях применяемый пользователем эффект отражает его принадлежность к определенной социальной группе людей. Например, по политическим или религиозным убеждениям.
Зачем брендам маски?
SMM требует разнообразия и креатива. AR-маски один из инструментов большого комплекса работ. Фактически они стимулируют пользователя на более долгий контакт с брендом и способствуют запоминаемости, так как их использованию сопутствуют эмоции.
Рассмотрим, какие задачи могут решать бренды с помощью масок. Во-первых, из-за своего вирусного потенциала маски работают на охват. Более того stories смотрят чаще, чем публикации в ленте. Главное запустить первую волну и дальше сарафанное радио будет работать на вас.
Во-вторых, визуальные эффекты Инстаграм могут способствовать узнаваемости, если бренд добавляет в маску свою айдентику.
В-третьих, интересные механики и конкурсы с применением масок повышают лояльность пользователей к бренду и его странице в Instagram.
В-пятых, стимулирование продаж через акционные механики в масках - использование маски или результат пользования дают пользователю преимущество при покупке.
Виды AR-масок в Инстаграм
Обычные маски. Применяются на лицо пользователя. Существует возможность отслеживания нескольких лиц, при этом визуальный эффект для каждого лица может быть разным.
Маски, направленные на изменение лица пользователя, насчитывают большое количество механик:
- изменение формы (ex, увеличить глаза или нос);
- ретушь (ex, нанесение макияжа);
- коллажирование, иными словами добавление объектов на определенную часть лица (ex, борода или очки).
Визуальные элементы могут быть размещены не на самом лице пользователя, а в пространстве относительно него: витающие снежинки, искры, цветы или текст. Относительно лица может быть изменен и фон. При такой технике он сегментируется от овала лица пользователя и вместо него может быть добавлено другое изображение.
Маски-фильтры. Визуальные эффекты, которые применяются на все изображение. Это может быть цветовая коррекция изображения определенным тоном, применение эффекта состаривания картинки и прочее.
Проекции объектов. Графические элементы в 2D/3D проекции, применяемые на все изображение. При этом используется основная камера. Дополняемый объект будет автоматически располагаться на плоскости снимаемой поверхности.
Target Tracker. Графические элементы в 2D/3D проекции, которые возникают при наведении на конкретный объект.
Интерактивные маски. Игровая механика, управляемая глазами пользователей. Так, например, с помощью эффекта в Инстаграм можно сыграть в крестики-нолики или тетрис.
Стоит дополнить, что к эффектам можно добавить звуки, связанные с анимацией̆, так и звуковое/музыкальное сопровождение. С точки зрения взаимодействия с маской, можно отслеживать поднятие и опускание бровей, улыбку, открытие рта, моргание глазами. На эти действия назначается включение или отключение определённой̆ анимации.
Как сделать маску самому?
Для создания собственного авторского AR-эффекта вам потребуется установка Adobe Photoshop и Spark AR . Навыки работы в графических редакторах и вдохновение — обязательно.
Готовим текстуру
Текстуру для маски можно готовить в Adobe Photoshop или загружать напрямую в Spark AR. Рассмотрим вариант с фотошопом, он будет прост для тех, кто уже работал в этой программе.
Создаем маску-ретушь
Ретушь и финализацию эффекта будем проводить в программе Spark AR. Открыв программу, создайте проект (Create project). Кнопка располагается в правом нижнем углу. В будущем, когда вам нужно будет открыть свой проект, воспользуйтесь кнопкой Open project.
Spark AR позволяет применить фильтры на разных людях и даже на себе, если выбрать Facetime HD Camera (название будет зависеть от устройства, на котором вы работаете). При создании проекта во всплывающем окне выбираем Face Tracking. Он отвечает за отслеживание положения лица, его мимики. Кликните на FaceTracker правой кнопкой мыши и выберите Add. Добавить нам нужно FaceMesh. После этого вы увидите появившуюся маску в шашечку, которая повторяет движение лица. В правой верхней панели вы можете изменить маску (ее структуру) с помощью синих галочек.
Убедитесь в том, что FaceMesh располагается под FaceTracker. Если это не так, то переместить можно с помощью курсора. В правой панели инструментов находим Material и нажимаем добавить (на плюс). Вы увидите, как материал добавится в левой панели, а сама шахматная маска преобразится.
Далее сглаживаем FaceMesh. В меню справа изменяем в разделе Shader Type: Standart на Retouching. Лучше изменить параметр FullScreen (убрать галочку), чтобы параметр применялся не к всему пространству, а только к маске. Для регулирования эффекта сглаживания можно поиграть с параметром Skin Smoothing.
Для справки в Spark AR есть несколько типов материалов:
- Standart — объемный материал
- Flat — плоский материал, не отражает свет
- Retouching – материал с эффектом сглаживания
- Physically-Based – шероховатость поверхности
- Face Paint – нанесение цвета на лицо
- Blended – для микса разных текстур и эффектов
Добавляем текстуру в маску
Проверяем работу эффекта
Работу маски нужно обязательно проверить через Инстаграм, а значит понадобится ваш смартфон. Для начала в левой навигационной панели найдите значок телефона Test on device, затем во всплывающем окне — Send to App. Нажмите Send напротив значка Инстаграм. Через несколько секунд появится ссылка в разделе Test link, которую нужно будет скопировать и открыть на девайсе. Другой вариант — вам придет push-уведомление в Инстаграм, на которое нужно будет кликнуть.
Как опубликовать свою маску?
Сначала маску нужно экспортировать в файл. В верхней навигационной панели выбираем File, а затем Export. Файл маски сохранится на вашем компьютере в разрешении .arexport.
Для публикации маски необходимо перейти на Facebook Spark AR Hub. Это страница загрузки маски, на которой вам предстоит заполнить несколько полей:
- название вашего эффекта;
- превью эффекта для отображения пользователям;
- место публикации маски (Facebook или в Instagram);
- загрузить маску в работе (предварительно сделав запись экрана телефона).
Время модерации составляет около 10 рабочих дней, но некоторые примеры из практики показали, что этот срок может затянуться (как например, было в пандемию). Подтверждение одобрения маски придет уведомлением на Facebook. Сразу после этого уведомления маска появится в каталоге эффектов (Effects Gallery) и будет доступна всем пользователям.
Для брендовых масок модерация проходит не всегда успешно и вместо заветного апрува можно получить отклонение. Чаще всего это связано с размером используемого в маске логотипа бренда.
В заключении
Маски в Instagram — отличный способ развлечения и вовлечения пользователей. Несмотря на то, что мы разобрали технические аспекты создания масок, не стоит забывать: любое планирование начинается с постановки цели. Собственно, от этого зависит успешность распространения маски в будущем. Креативная составляющая маски влияет на ее виральный потенциал.
Так, например, для fmcg бренда сыров мы сделали классическую маску с продуктом, которая была основой конкурсной механики перед Новым годом. Основной задачей было увеличить социальный шеринг бренда и как следствие охват потенциальной аудитории, так как бренд присутствует на рынке недавно.
Механика маски может быть простой и ее реализация под силу любому пользователю. Но сложные эффекты все-таки создаются на стороне специализированных специалистов или агентств.
Читайте также: