Онлайн урок. Создай свою маску в инстаграм - "Праздничное фото"

Маски в инстаграм. 2D маска
Создание маски фоторамки

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

Добавление 2D-объектов к маске

Мы собираемся добавить все объекты одновременно, а затем назначить их слоям.

Вставка объектов:
  1. Canvas (холст). Вы будете использовать его для группировки других объектов, чтобы вы могли преобразовать их все одновременно.
  2. 2 Rectangle, оба как дочерние объекты Canvas.
  3. Dynamic text объект, снова как дочерний объект холста.

Ваш проект должен выглядеть так:

Маска фоторамки. Добавь объекты Spark AR
Стоит переименовать объекты, чтобы вам было проще их отслеживать:
  • Первый Rectangle rect_frame
  • Второй Rectangle rect_overlay.
  • Текстовый объект dynamic_text.


Слои


Вам понадобится 3 слоя для создания этой маски, чтобы контролировать правильный порядок отображения объектов.

В проекте уже будет 1 слой с именем layer0. На панели «Layers» создайте еще 2 новых слоя.

Чтобы не запутаться, рекомендуется переименовать их так:
  1. Первый слой text_layer
  2. Второй слой frame_layer
  3. Третий слой color_overlay_layer
Вернувшись в панель Scene, назначьте:
  1. Текст в text_layer
  2. Canvas и rect_frame во frame_layer


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

Сначала отредактируйте Canvas. Поскольку прямоугольники являются дочерними элементами холста, они будут принимать любые изменения, внесенные в него.

В Инспекторе измените Mood со Screen Space на World Space.
    Маски в инстаграм. Создание фоторамки в Spark AR
    Маски в инстаграм. Настройка Canvas в Spark AR
    На данный момент один прямоугольник полностью перекрывает другой.

    Чтобы изменить это, поменяйте положение (position):
    1. rect_frame на -3.2 по оси X и 50 по оси Y.
    2. rect_overlay на 36 по оси X и 137 по оси Y.

    Изменить масштаб (scale):
    1. rect_frame на 1,2 по оси X и 0,9 по оси Y.
    2. rect_overlay на 1 по оси X и 0,7 по оси Y.

    Создание материалов для маски-фоторамки

    Создайте материал для каждого прямоугольника, щелкнув значок «+» рядом с «Material» в Инспекторе.

    Переименовать:
    1. Материал, который вы сделали для rect_frame - frame_mat
    2. Материал, который вы сделали для rect_overlay - overlay_mat

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


    Тип Shader должен быть Flat (плоский) для обоих материалов, потому что нам не нужно, чтобы материалы реагировали на свет. Тем более Flat-шейдер более производительный, чем тип шейдера Standart, поэтому помогает уменьшить размер маски и повысить FPS эффекта.

    Для frame_mat:
    1. Перейдите ко вкладке Diffuse. Рядом с текстурой примените текстуру frame_tex
    2. Установите флажок «Alpha Test» и настройте ползунок «Cutoff», чтобы сделать некоторые части текстуры прозрачными. Мы установили его на 50% .
    Маски в инстаграм. Создание маски онлайн
    Мы выбирали эти значения, корректируя их, пока не нашли лучший вариант. Использование манипуляторов - хороший способ экспериментировать с трансформирующимися объектами.


    Редактирование прямоугольников
    1. Выберите Rectangle.
    2. В инспекторе установите «Flexability» для высоты и ширины, чтобы они масштабировались пропорционально экрану устройства.
    Прямоугольники слишком малы для нашего эффекта. Чтобы настроить это:
    1. Перейдите к Size в инспекторе
    2. Установите ширину до 375 и высоту до 617

    Теперь вы увидите большой прямоугольник в сцене:

    Поскольку холст находится в мировом пространстве, он больше не будет масштабироваться вместе с экраном устройства. Это позволяет вам изменить его трансформации. В Инспекторе поменяйте:
    1. Position - 0.013 на X оси - холст немного сдвинется в сторону.
    2. Scale - 0.0005 для X , Y и Z значений - холст станет немного меньше.
    3. Rotation - на 5 для X , Y и Z значения - холст будет слегка наклонен.
    Маски в инстаграм. Редактируем материалы в Spark AR
    Теперь выберите overlay_mat в инспекторе:
    1. Перейти к параметрам Render Options.
    2. Установите Opacity до 30% , чтобы создать полупрозрачный эффект.

    Маска рамки приобретает форму:


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

    Начните с создания патчей. Выберите материал и в инспекторе нажмите на кружочке рядом с надписью «Texture» во вкладке «Diffuse». Так вы создадите патч, представляющий свойство «Diffuse Texture» материала.
    Маски в инстаграм. Патчи текстур в Spark AR
    Мы добавим остальные патчи позже.


    Добавление динамического текста

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

    Чтобы добавить динамический текст:
    1. Выберите dynamic_text на панели «Scene».
    2. В инспекторе удалите текст в текстовом поле ввода.
    3. Рядом с dynamic_text нажмите Insert.
    4. Вставьте 2 динамических текстовых токена из меню - Current City и Date (Middle).

    Есть много других типов динамического текста на выбор при создании ваших собственных эффектов. Вы можете опробовать их самостоятельно :)

    Следующее изменение:
    1. Шрифт Facebook Script Light
    2. Размер шрифта до 40
    3. Межстрочный интервал до 3000
    4. Положение 38 на оси X и -172 на оси Y
    Вы увидите текст в середине кадра. Чтобы это исправить, измените значения размера. Нажмите на каждый из боксов с текстом и выберите Fill Width и Fill Height, чтобы сделать текст такой же ширины, как холст:


    Маски в инстаграм. Динамический текст в Spark AR
    С помощью Pinning закрепите текст сверху, снизу и с обеих сторон холста. Закрепление текста будет означать, что он всегда поддерживает одинаковое расстояние от границы Canvas.


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

    Теперь мы изменим цвет рамки в ответ на нажатие на экран устройства.

    Вы уже создали патч frame_color_mat. Создайте остальные 3 патча, щелкнув правой кнопкой мыши в любом месте редактора патчей и выбрав их в меню.

    1. Screen Tap патч, чтобы определить, когда экран касания - вы можете использовать другой патч взаимодействия в меню.
    2. Counter патч.
    3. Option Picker патч.
    Маски в инстаграм. Добавь интерактивность и логику
    Добавление цветов

    Вы добавите цвета в Option Picker. Сначала измените тип данных Option Picker на Color:
    1. Выберите Option Picker.
    2. Выберите Color в меню внизу патча.

    Чтобы добавить цвета, щелкните квадраты в окне выбора параметров . Выберите цвет для каждого из меню:


    В этом уроке вы создадите маску-фоторамку для инстаграм! :)

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

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

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

    Маски в инстаграм. Переключение цветов в Spark AR 2
    Подключение патчей

    Так должен выглядеть ваш редактор патчей, когда вы закончите:
      Маски в инстаграм. Переключение цветов в Spark AR
      Вы можете проверить, как работает Screen Tap эффект в симуляторе, нажав на шестеренку и выбрав Simulate Touch:

      Маски в инстаграм. Тест в симуляторе в Spark AR
      Made on
      Tilda