Онлайн урок. Сделай свою инста-маску с использованием текста, 2D-объектов и слоев

В этом уроке вы создадите простую 2D рамку с динамическим текстом, используя 2 объекта, включенных в Spark AR Studio: Canvas и Rectancle.

Последовательность действий для создания маски в инстаграм:
  1. Добавьте холст к своему эффекту - первый шаг для создания 2D-эффектов.
  2. Постройте рамку, используя прямоугольники и текстуру.
  3. Добавляйте текст и динамический текст в ваши проекты и редактируйте его свойства.
  4. Добавьте слои.

Загрузите образец содержимого,
чтобы выполнить этот урок. Если вы откроете незаконченную маску в папке с образцом проекта, вы увидите, что мы импортировали пользовательскую текстуру. Она называется Frame и отображается на панели «Assets». Вы будете использовать ее, чтобы добавить дополнительные детали к рамке, которую вы делаете.

В итоге вы получите эффект, который выглядит следующим образом:

Сделать маску в instagram. Фоторамка
Холст - Canvas

Первый шаг для создания эффектов с 2D-объектами - добавить холст. Холст создает пространство для размещения 2D-объектов, таких как прямоугольники и текст, которые вы собираетесь добавить к этому эффекту.

Чтобы сделать это:
  1. Нажмите +Add Object
  2. Выберите Canvas из меню.
Вы увидите canvas0 в списке на панели Scene.

Если вы посмотрите на свойства холста в Инспекторе, вы увидите опцию, помеченную как Mode. Это установлено по умолчанию в Camera Space. Любые объекты, сгруппированные под холстом в пространстве камеры, могут быть расположены и установлены в масштабе относительно размера экрана устройства.

В Инспекторе вы увидите, что свойство Size нельзя изменить. Это потому, что оно всегда будет соответствовать размеру экрана устройства.

Если вы измените режим отображения холста на World Space, вы сможете использовать холст для создания 2D-эффектов мира. Когда холст находится в мировом пространстве, он отделен от поля зрения камеры. Это означает, что он может быть расположен в трехмерном пространстве. Использование холста в мировом пространстве мы рассмотрим в одном из следующих уроков.

Мы хотим, чтобы этот эффект масштабировался вместе с экраном устройства, поэтому оставьте его в свободном пространстве камеры.


Добавление прямоугольников - Rectangle

Вы будете использовать 4 Rectangle для создания рамки. Затем вы добавите текстуру к последнему прямоугольнику, который вы поместите в центр сцены.

Чтобы добавить прямоугольник:
  1. Щелкните правой кнопкой мыши на canvas0
  2. Выберите Add
  3. Выберите Rectangle в меню

Вы увидите прямоугольник в центре области просмотра.


Создание маски в Instagram, добавление ассетов
Чтобы добавить еще 3 прямоугольника, вы можете либо повторить эти шаги, либо скопировать и вставить только что созданный прямоугольник:
  1. Выберите каждый прямоугольник.
  2. Нажмите команду cmd+c, затем команду cmd+v на клавиатуре - если вы используете Mac. Вместо этого нажмите «ctrl», если вы используете Windows.

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

Лучше сразу отразить в названии где они будут расположены, поэтому переименуйте их как лайны в доте:
  1. Rectangle0 - top_rectangle
  2. Rectangle1 - bottom_rectangle
  3. Rectangle2 - left_rectangle
  4. и Rectangle3 - right_rectangle

Добавление материалов маске-рамке

В Spark AR Studio материалы определяют внешний вид объектов на вашей сцене. Вы можете добавлять материалы и текстуры в прямоугольники, чтобы создавать цветные фильтры, виньетки и рамки.

В этом эффекте вы будете использовать один и тот же материал для каждого прямоугольника и добавите к нему цвет.

Вы можете создать материал и добавить его в каждый прямоугольник одновременно. Начните с выбора прямоугольников. Вы можете выбрать их все одновременно, удерживая нажатой клавишу Shift на клавиатуре и щелкая каждый прямоугольник на панели «Scene».

Затем в инспекторе нажмите + рядом с материалами. Вы увидите новый материал, перечисленный на панели «Assets» в разделе «Materials» , как material0.

Выберите материал, чтобы просмотреть его свойства в Инспекторе. Здесь вы можете вносить любые изменения в материал. Но начать стоит с изменения типа шейдера. Нажмите на выпадающий список сверху и выберите Flat.

Flat материал - лучший вариант для материалов, применяемых к 2D-объектам, поскольку он не излучает свет и не реагирует на свет. Это означает, что он оказывает меньшее влияние на FPS вашего эффекта.


Затем добавьте цвет материалу, используя опцию Color в Diffuse:
  1. Нажмите на поле рядом с цветом
  2. Выберите оттенок из цветовой палитры. Мы собираемся выбрать оттенок синего

Редактирование размера

Теперь давайте отредактируем размер прямоугольников, чтобы начать строить форму рамки.

Если вы выберете top_rectangle В Инспекторе, вы увидите 2 варианта рядом с Size. Используйте первый параметр (Fill Width), чтобы изменить ширину прямоугольника, а второй - для изменения высоты (Fill Hight).

Нам надо сделать два прямоугольника одинаковой ширины с холстом, и два других прямоугольника одинаковой высоты с холстом.

Для top_rectangle щелкните в первом поле. Вы увидите опцию Fill Width, которая заставит прямоугольник заполнить ширину холста. Выберите эту опцию.


Создание маски в Instagram, настройки
Создание маски в Instagram, настройки 2
Использование выравнивания для позиционирования прямоугольников

Для позиционирования прямоугольников мы будем использовать Alignment. Выравнивание перемещает 2D-объект в пределах холста.

Каждая из кнопок здесь переместит прямоугольник в другое положение.


Создание маски в Instagram, настройки 3
Таким образом, эти прямоугольники полностью заполняют пространство вокруг текстуры, которую мы собираемся добавить к центру эффекта, сделайте второе редактирование параметра «Size».

Выберите top_rectange и bottom_rectange. Опять же, вы можете выбрать оба объекта одновременно, удерживая Ctrl(cmd) на клавиатуре. Измените Height до 140 в Инспекторе.

Для right_rectangle и left_rectangle измените Weight на 30:

Сделайте то же самое для bottom_rectangle:
  1. Выберите его в инспекторе.
  2. Выберите Fill Width.

Для right_rectangle, так и left_rectangle:
  1. Нажмите во втором поле рядом с Size.
  2. Выберите Fill Height.
Вот как должен выглядеть ваш проект, когда вы закончите:

Создание маски в Instagram, закрепить Rectangl
Начните с установки выравнивания для top_rectangle :
  1. Выберите прямоугольник на панели «Scene».
  2. Под выравниванием нажмите первую кнопку слева. Это выровняет прямоугольник к вершине холста.

Сделайте то же самое для остальных 3 прямоугольников:
  1. bottom_rectangle для нижней части холста.
  2. left_rectangle слева от холста.
  3. right_rectangle справа от холста.
Создание маски в Instagram, настройка Rectangl 2
Теперь ваша маска действительно обретает форму. Но если вы измените размер устройства в симуляторе - например, на iPad pro - вы увидите, что прямоугольники остаются одинакового размера и в том же положении. Мы можем использовать Flexability и функции Pinning, чтобы изменить это.


Настройка гибкости - Flexability

Flexability масштабирует высоту и ширину каждого Rectangle по отношению к Canvas. Это означает, что объекты будут оставаться пропорциональными на всех устройствах.

Чтобы проверить это, выберите top_rectangle на панели Scene. Нажмите стрелки рядом с Flexability в Инспекторе.

Если вы смените тип устройства на iPad pro в симуляторе, вы увидите, что верхний прямоугольник масштабируется пропорционально экрану устройства, а другие нет.

Установите Flexability для оставшихся 3 прямоугольников:


Создать маску в Instagram, настройка Flexability
Закрепление прямоугольников

Итак, теперь мы установили Flexability, прямоугольники будут масштабироваться в зависимости от размера экрана устройства, но они все равно будут отображаться в одном и том же месте.

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

Начните с прямоугольника внизу сцены:
  1. Выберите bottom_rectangle на панели Scene.
  2. В Инспекторе выберите нижний символ рядом с Pinning.
Это прикрепит прямоугольник к нижней части Canvas.


Прикрепите остальные 3 прямоугольника так:
  1. Top_rectangle прикреплен к верхней части холста.
  2. Left_rectangle прикреплен влево.
  3. Right_rectangle закреплен вправо.

Добавление текстуры к рамке

Теперь форма маски закончена, мы можем добавить текстуру.

Сначала вставьте другой холст. Это сгруппирует текстуру и текст, который завершает эффект:

  1. Нажмите Добавить объект .
  2. Выберите Canvas .
Canvas1 теперь должен быть указан на панели Scene.

Затем вставьте еще один прямоугольник как дочерний элемент canvas1 :

  1. Щелкните правой кнопкой мыши canvas1 .
  2. Выберите Добавить .
  3. Выберите Прямоугольник .
  4. Переименовать прямоугольник кадра .
Следующим шагом будет добавление материала к прямоугольнику, к которому мы затем применим текстуру. Сделать это:

  1. Выберите прямоугольник рамки на панели «Сцена».
  2. Нажмите + рядом с материалами в Инспекторе.
Выберите новый материал - он будет указан как материал1 . Как и раньше, установите тип шейдера на Flat . Затем, чтобы добавить текстуру:

  1. Нажмите раскрывающийся список под Diffuse .
  2. Выберите кадр из меню.

Создать маску в Instagram, текстурирование
Чтобы сделать черную секцию в центре текстуры прозрачной, настройте параметры рендеринга:
  1. Нажмите раскрывающийся список рядом с режимом наложения (blend mode)
  2. Выберите Add

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


Теперь вы должны видеть белую рамку в сцене, но она немного меньше, чем нам нужно. Чтобы изменить это, измените размер прямоугольника:
  1. Выберите кадр на панели «Scene»
  2. В инспекторе измените оба значения размера на 400

Этот прямоугольник по умолчанию прикреплен к центру холста, что является верным расположением для этой маски. Убедитесь, что для высоты и ширины этого прямоугольника установлен параметр Flexability.

Так как прямоугольник должен оставаться в середине сцены, нет необходимости устанавливать выравнивание.


Добавление текста

Как и прямоугольники, текст должен быть дочерним элементом Canvas на панели «Сцена». Щелкните правой кнопкой мыши на canvas1 и выберите 2D Text . Вы увидите объект с именем 2dText0 на панели Scene.

Сделайте это еще раз, чтобы у вас на панели «Scene» было 2 текстовых объекта в качестве дочерних элементов canvas1 .


Создать маску в Instagram, добавление текста
Чтобы вам было проще отслеживать объекты, измените имя первого текстового объекта на date, а имя второго объекта - на place.

Выберите объект Date на панели «Сцена». В инспекторе вы увидите текстовое поле под типографикой (Typography). Вы можете отредактировать текст здесь, чтобы добавить свой собственный текст к эффекту. Однако для этого эффекта мы будем использовать параметр «Динамический текст» (Dynamic Text).


Чтобы добавить динамический текст:
  1. Удалить текст, который уже есть.
  2. Нажмите «insert» рядом с «Dynamic_Text».
  3. Выберите тип текста, который вы хотите вставить из меню.
Есть много вариантов на выбор - для этого эффекта выберите Date (Short).


Редактирование текста

Затем измените шрифт. Spark AR Studio поставляется с несколькими уже установленными шрифтами. Вы можете выбрать тот, который вам нравится. Для этого эффекта мы предлагаем NotoSans Bold. Измените цвет на белый, а размер шрифта на 24.

Как только вы это сделаете, в разделе «Преобразования» (Transformations) установите положение (position) текста на:
  1. -120 по оси X
  2. 220 по оси Y

Убедитесь, что для параметра «Flexability» заданы ширина и высота, а затем закрепите текст в верхней и левой части холста.


Чтобы редактировать свойства второго текстового объекта, выделите его на панели «Scene» и перейдите к Инспектору:
  1. Удалите текст в текстовом поле.
  2. Нажмите «insert» рядом с «Dynamic Text»
  3. Выберите Текущий город (Current City) - вы должны увидеть текст смены сцены.
Текущий город представлен как Лондон. Возможно, вы находитесь в другом месте, но Spark AR Studio не имеет доступа к этим данным через ваш компьютер, поэтому по умолчанию он использует Лондон. Вы можете просмотреть и протестировать динамический текст, используя приложение AR Studio Player, чтобы убедиться, что он работает правильно.

Затем измените шрифт на NotoSans Bold, а цвет на белый. Измените размер шрифта на 36 .


После этого:
  1. Установите Position на оси X на -120 и на оси Y на 220 .
  2. Установите гибкость для ширины и высоты.
  3. Прикрепите текст внизу и справа.
  4. Выровняйте текст справа от холста.

Распределение слоев в маске

Чтобы убедиться, что объекты в вашей сцене отображаются в правильном порядке, вам нужно настроить слои.

Для этого эффекта объекты на втором холсте должны отображаться после объектов на первом, так что они находятся спереди.

Для этого выберите canvas1 на панели «Scene». В Инспекторе щелкните раскрывающийся список рядом с «Layer» и выберите «New Layer». Второй холст и все объекты под ним теперь назначены этому слою.

Если щелкнуть панель «Layers», вы увидите, что новый слой - «Layer1» - находится вверху списка. Это означает, что объекты на этом слое будут отображаться первыми. Вы можете изменить этот порядок, перетаскивая слои в другое положение, но для этого эффекта они расположены правильно.



Читайте также:


Made on
Tilda