Вам понадобится обновленная версия Spark AR (студия дополненной реальности, созданная Facebook), изображение вопроса, в котором задается вариант «Какой ____ вы?», и список изображений для результата.
Моя версия проекта находится на Github здесь. Берите у него как хотите.
Часть первая: настройка в Spark AR
Добавление текстур
После открытия пустого проекта в Spark AR первое, что нам нужно сделать, это добавить изображения. Вам понадобится одна фотография с надписью «Какой ты ____?» вопрос, а затем сколько результатов вы хотите включить.
В левом нижнем углу вы увидите раздел Активы. В этом разделе выберите Импорт: с компьютера, а затем выберите файлы изображений.
Эти изображения будут добавлены в ваш проект в папку под названием Текстуры. В Spark AR вы можете думать о текстурах как о верхнем слое краски. Позже мы будем использовать их для освещения материала AR в студии Spark AR.
Добавление трекера лица
Над Assets находится еще одно меню под названием Scene. В правом нижнем углу этого меню выберите Добавить объекты и выберите Face Tracker во всплывающем меню. Теперь наш проект может отслеживать движения лица пользователя.
Однако Face Tracker не является «физическим» объектом, поэтому нам нужно щелкнуть правой кнопкой мыши faceTracker0 в нашей иерархии сцен, выбрать Добавить, а затем выбрать Добавить плоскость. . Это добавит квадрат с рисунком в виде шахматной доски перед человеком в симуляторе и plane0 под Face Tracker в нашей иерархии сцен.
Вам не нужно менять название самолета, просто выберите его и посмотрите на меню справа. Вы увидите параметр для добавления материала, при выборе которого будет добавлен пустой материал0 в нашу иерархию ресурсов.
Сначала переименуйте material0 в display. Мы будем ссылаться на это позже в нашем скрипте, поэтому важно, чтобы имена совпадали. Затем в разделе Тип шейдера выберите Плоский, а в разделе Текстура выберите «Какой вы _____?» файл изображения, который вы добавили ранее.
Теперь вы увидите свое изображение, отображаемое перед лицом в симуляторе. Теперь вы можете вернуться к plane0 и поиграть с положением и масштабом, пока он не станет правильным.
Подключение к скрипту
Вернувшись в меню Активы, выберите Добавить актив и выберите Сценарий. Это создаст каталог сценариев, включающий пустой сценарий в иерархии под названием script.js. Нам нужно создать два патча; прослушиватель событий и ссылка на наш скрипт.
В разделе Просмотр в самом верху страницы выберите Показать / скрыть редактор исправлений. Пока он будет пустым, но таким образом мы сможем увидеть вещи, которые добавим через секунду.
Затем щелкните правой кнопкой мыши в любом месте редактора патчей и выберите Нажатие на экран во всплывающем меню. Это создаст патч, который будет прислушиваться к прикосновениям пользователя.
Наконец, выберите script.js и выберите параметр В сценарий в меню справа. В раскрывающемся списке выберите Пульс и измените его название на нажать. Когда вы нажмете желтую стрелку, она появится в нашем редакторе патчей в виде желтого прямоугольника. Проведите линию между касанием экрана и касанием, чтобы соединить два патча.
Теперь наш скрипт может взаимодействовать со Spark AR, и мы можем приступить к написанию программы.
Часть вторая: сценарии
Дважды щелкните файл script.js, и откроется ваш редактор кода по умолчанию (я использовал VS Code для этого проекта). Во-первых, вам нужно сослаться на различные API Spark AR, которые нам понадобятся позже, и вы можете сделать это в виде огромного фрагмента, подобного этому:
const Time = require('Time'); const Patches = require('Patches'); const Instruction = require('Instruction'); const Diagnostics = require('Diagnostics'); const Materials = require('Materials'); const Textures = require('Textures')
Затем нам нужно сослаться на наш отображаемый материал (который мы пометили ранее) и создать массив для хранения всех наших изображений результатов, например:
const display = Materials.get('display'); const pics = ['pic1', 'pic2', 'pic3', 'pic4'];
Затем нам просто нужно установить еще несколько вещей, прежде чем мы действительно сможем начать.
let randInterval = null; let status = 'ready';
Позже мы будем использовать randInterval
, чтобы перемещать различные изображения в нашем объектеpics
, и мы будем использовать status
, чтобы отслеживать ход выполнения программы.
Наконец, нам нужно настроить начальную инструкцию, чтобы пользователь мог видеть, когда он запускает фильтр.
Instruction.bind(true, 'tap_to_start');
Инструкции отображаются в виде белого текста внизу экрана. Их можно включать и выключать с помощью логических значенийtrue
иfalse
, а отображаемый текст задается с помощью того, что Spark AR называет токеном, который имеет строковое значение. Первый токен, который мы будем использовать, - 'tap_to_start'
.
Существует несколько различных токенов инструкций, и вы можете найти их в основной студии Spark AR, выбрав Проект → Возможности → Инструкции → Пользовательские инструкции. Вам также необходимо объявить каждую инструкцию, которую вы будете использовать в Spark AR, выбрав Добавить инструкцию и выбрав дополнительный токен в раскрывающемся меню.
Теперь мы можем перейти к сути нашей программы, которая выглядит так:
Patches.getPulseValue('tap').subscribe(function (e) { Instruction.bind(false, 'tap_to_start') if (status === 'ready') { start(); } else if (status === 'running'){ return; } else if (status === 'finished'){ reset(); } });
Первая строка ожидает касания экрана с помощью патча tap
, который мы сделали ранее. Когда он «слышит» нажатие, он выключает инструкцию 'tap_to_start'
и начинает цикл if для перетасовки наших изображений.
Поскольку мы уже установили статус ready
, первым шагом этого цикла является вызов функцииstart().
. Мы сами пишем эту функцию, и это выглядит так:
function start(){ status == 'running'; randInterval = Time.setInterval(function(){ randomImage(); }, 100); beginCountDown(); };
Во-первых, наш статус меняется на 'running'
. Если вы вернетесь к основному циклу if, вы увидите единственное ключевое слово return
под оператором else if
для этого статуса. По сути, это игнорирует любые дополнительные нажатия во время перетасовки изображений.
Затем randInterval
изменяется с null
на интервал, который вызывает функцию каждые заданное количество миллисекунд. В этом случае функция, которую мы используем, называется randomImage()
, которую нам также нужно записать, и она будет случайным образом выбирать изображение из нашего объекта pics
каждые 100 миллисекунд.
Эта функция выглядит так:
function randomImage(){ let randomNumber = randomlyChoose(0, pics.length); let pickedImage = pics[randomNumber] display.diffuse = Textures.get(pickedImage); };
В первой строке случайным образом выбирается число от 0 до длины вашего массива pics
. Написание функции javascript для случайного выбора числа из диапазона можно найти с помощью простого поиска в Google. (Я назвал свой randomlyChoose
, но вы можете называть свое как угодно).
Во второй строке это число затем используется для индексации массива, выбирая случайное изображение. Наконец, display.diffuse
используется для изменения текстуры отображения этого изображения.
Затем, продолжая withstart()
, таймер устанавливается на первый интервал, используя beginCountDown()
. Вот эта функция:
function beginCountDown(){ Time.setTimeout(function(){ stop(); }, 3000); };
Работает аналогично установке интервала. Вышеупомянутая функция вызывает stop()
один раз через 3 секунды (3000 миллисекунд), давая пользователю результат.
function stop(){ Time.clearInterval(randInterval); Instruction.bind(true, 'tap_to_reply') status = 'finished'; }
При этом также добавляется инструкция для пользователя о перезапуске (с использованием маркера 'tap_to_reply'
) и изменяется статус программы на 'finished'
. Это вызывает последнюю функцию в нашей программе, restart()
.
function reset(){ Instruction.bind(false, 'tap_to_reply') Instruction.bind(true, 'tap_to_start') display.diffuse = Textures.get('which'); status = 'ready'; };
Инструкции сбрасываются (tap_to_reply
выключен, а tap_to_start
включен), и материал дисплея возвращается к исходному "Кто ____ вы?" изображение вопроса. Пользователь может нажимать, чтобы использовать фильтр снова и снова.
Следующие шаги
Прежде чем отправить свой фильтр на рассмотрение в Instagram и Facebook, вы можете поиграть с ним множеством дополнительных способов.
В своем проекте я добавил эмиттер частиц, который позволяет маленьким изображениям летать вверх от дисплея, создавая своего рода эффект свечения. Кроме того, я изменил непрозрачность материала display, чтобы придать ему слегка полупрозрачный вид.
Вы можете многое сделать! Удачи :)