Онлайн урок. Навигация по интерфейсу Spark AR Studio

Я полагаю, это самое начло вашей работы с масками в инстаграм :) В этом руководстве мы рассмотрим различные части интерфейса Spark AR Studio.

В этом уроке вы узнаете все про:
  • Симулятор - он показывает, как ваша маска будет выглядеть на мобильном устройстве.
  • Окно просмотра - область в центре Spark AR Studio, где вы можете визуализировать свою маску.
  • Панель сцены - где вы будете контролировать, какие объекты находятся в вашей маске.
  • Панель «Слои» - где вы можете добавлять и редактировать слои маски.
  • Инспектор - используйте его для просмотра и редактирования свойств объектов в вашей сцене.
  • Панель Активы - где вы можете добавить и просмотреть все активы (материалы, текстуры, 3д модели, анимации и т.п.), которые вы добавили в проект.
  • Панель инструментов и строка меню - для быстрого доступа ко всем видам различных функций.
  • Редактор патчей и консоль сценариев - где вы можете повысить сложность своих эффектов с помощью визуального программирования или сценариев.


Симулятор (Simulator)

Симулятор представляет экран устройства. Например, мобильный телефон или планшет:



Интерфейс Spark AR. Симулятор
Когда камера выбрана в меню в левой части экрана, появятся синие линии. Эти линии показывают, куда указывает камера и какие объекты находятся в ее поле зрения.

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

Когда объект указан под камерой на панели «Сцена», он будет перемещаться с этими синими линиями - потому что он находится в пространстве камеры. Вы можете проверить это, нажав и перетащив мышью симулятор.

Когда объект не указан под камерой, он находится в так называемом «мировом пространстве». Он не будет двигаться с этими линиями, и может быть размещен в фиксированной позиции в мире. О мировых эффектах мы поговорим в следующих уроках.

В верхней части окна просмотра находятся манипуляторы. Используйте их для быстрого изменения объекта:
  • Position - чтобы регулировать положение вашего объекта в сцене.
  • Scale - чтобы менять размер объекта и делать его больше или меньше.
  • Rotation - чтобы вращать ваш объект.

Панель Сцена (Scene)

Добавление объектов на панель «Сцена» в левой части интерфейса добавит их к вашей маске.


Интерфейс Spark AR. Сцена
Нажмите "add object", чтобы добавить объект. Вы увидите список всех различных объектов, включенных в Spark AR Studio. Вы также можете выбрать 3D-объект, чтобы импортировать объект с вашего компьютера.

Здесь вы также вставляете элемент, который заставит ваш эффект реагировать на человека, который его использует, или на чью-то среду. Например, трекер лица (face tracker), если вы хотите создать эффект, который реагирует на мимику чьего-то лица.

Вы можете создавать отношения между объектами на панели «Сцена». Создание дочерних и родительских отношений означает, что вы можете вносить одно и то же изменение в несколько объектов одновременно, внося изменения в родительский объект. Чтобы создать дочерние и родительские отношения, перетащите объект, который вы хотите сделать дочерним, на объект, который вы хотите сделать родительским.


Панель «Слои» (Layers)

Используйте эту панель для создания слоев. Узнайтебольше об использовании слоев в ваших эффектах.




Интерфейс Spark AR. Слои
Инспектор (Inspector)

Используйте Инспектор для внесения всевозможных изменений в активы и объекты. Сначала вам нужно будет выбрать актив или объект на панели «Scene» или «Assets».

Ниже мы выбрали один из мешей, который составляет 3D-объект в нашей сцене:

Интерфейс Spark AR. Скрин Интерфейс Spark AR. Инспектор
Мы могли бы использовать инспектор, чтобы изменить:
  • На каком слое находится объект, регулируя раскрывающийся список рядом со слоем.
  • Независимо от того, виден ли объект на сцене, установите флажок рядом с Visibile.
  • Положение, масштаб и вращение, изменяя значения X , Y и X в Transformations.
  • Материал, щелкнув раскрывающийся список в разделе Material.
Мы также можем нажать «Create» рядом с «Patch». Это создаст патч, представляющий сетку в редакторе патчей.

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

Интерфейс Spark AR. Ресурсы
Интерфейс Spark AR. Свойства
Панель инструментов и строка меню Spark AR

Панель инструментов

Панель инструментов находится слева от интерфейса. Нажмите на значки, чтобы:
  • Настроить свою рабочую область, например, чтобы показать или скрыть редактор патчей.
  • Изменить видео, воспроизводимое в окне просмотра.
  • Приостановить или перезапустить видео.
  • Осуществить предварительный просмотр вашей маски для инстаграм.
  • Экспортировать свою маску для загрузки в инст.
  • Сообщить об ошибке или проблеме возникшей у вас при работе со Spark AR.
Так что, если мы нажмем стрелку рядом со свойством "Position", патч представляющий положение сетки в пространстве будет добавлен в редактор патчей. Вы можете подключить этот патч к другим патчам на графике (например animation и transition), чтобы манипулировать положением объекта на сетке.


Панель Активы (Assets)

Здесь вы можете добавить свои собственные активы в проект или создать ресурсы в Spark AR Studio.

Нажмите +Add Asset или +Add Object, чтобы создать активы или добавить свои собственные. Вы можете добавить текстуры, материалы, 3D-модели, анимацию и аудио файлы.


Интерфейс Spark AR. Инструменты
Панель меню

Вы можете получить доступ к ряду ярлыков и функций через строку меню в верхней части экрана. Например:
  • File - тут вы найдете варианты для сохранения или экспорта вашего проекта
  • Edit - вы можете отменить и повторить действия
  • View - вы можете настроить свое рабочее пространство
  • Add - вы можете добавить объекты и активы в свой проект
  • Project - управляйте расширенными настройками вашего проекта

Редактор патчей и консоль (Patch Editor)

Используйте редактор патчей для создания эффектов с логикой, анимацией и интерактивностью, без использования скриптов. Используйте консоль, чтобы добавить JavaScript в ваш проект.

Чтобы открыть или закрыть редактор патчей или консоль, нажмите «View» в строке меню и выберите один из следующих вариантов:
  • Show / Hide Patch Editor
  • Show / Hide Console
Редактор патчей и консоль откроются внизу экрана:


    Интерфейс Spark AR. Patch редактор
    Made on
    Tilda