Онлайн урок. Создай свою маску в инстаграм с эффектом плавающих частиц


Маски в инстаграм. Маска с частицами и фоном
Добавление системы частиц

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

Для создания этой маски мы использовали 3 системы частиц (particle system). Одна система частиц находится на заднем плане, а две другие на переднем плане.

Начните с добавления первой системы частиц. Она станет системой частиц, которую мы будем использовать в качестве фоновой анимации для нашей маски:
  1. Вставьте Particle System
  2. Переименуйте вставленный объект в emitter_background
Системы частиц выглядят как быстрые потоки небольших объектов:

Маски в инстаграм. Particle System в Spark AR
Затем система фоновых частиц была перемещена в Scene из «пространства камеры» (camera) в «мировое пространство» (fokal distance). Это означает, что частицы больше не привязаны к движению камеры, а расположены в фиксированном месте в окружающей среде. Это называется «мировым эффектом» .

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

Маски в инстаграм. Сцена в Spark AR
Маски в инстаграм. Редактируем частицы в Spark
В готовой маске мы добавили последовательность текстур к частицам. Мы использовали Patch Editor, чтобы контролировать изменение каждого кадра. Но пока что вы можете просто применить материал и текстуру.

Мы включили свою текстуру в незаконченный проект, чтобы вы могли попробовать добавить материал и эту текстуру в систему частиц:
  1. Выберите emitter_background
  2. На панели «Инспектор» нажмите «+», а затем «Create New Material»
  3. Переименовав материал, мы выбрали particle_mat
Чтобы добавить текстуру к материалу:
  1. Выберите материал - particle_mat
  2. На панели «Инспектор» измените тип шейдера на «Flat», затем щелкните стрелку под «Diffuse»
  3. Выберите firefly_texture
Вы должны увидеть маленькие желтые частицы на сцене:

Маски в инстаграм. Редактируем частицы в Spark 2
Для этой системы частиц, начните с регулировки положения. Измените значение Y на -1,7 . Это переместит систему частиц в конец сцены.

Под Emitter вам нужно внести изменения в способ движения частиц:
  1. Поменяйте Type с Point на Round - таким образом частицы будут вылетать по форме круга, а не из одной точки. Увеличьте кольцо, изменив радиус на 2 и 7 .
  2. Повысьте значение Birthrate до 35 - чтобы последовательно создавать больше частиц.
  3. Lifespan до 45 с и 30% - чтобы некоторые частицы жили чуть дольше других.
  4. Spray Angle до 30 градусов и 10 градусов вариации.
  5. Speed до -0,01 и 40% .
Установите флажок рядом с Warmup, чтобы система частиц запускалась сразу после запуска эффекта. Установите значение 45 с.


Затем внесите изменения в сами частицы:
  1. Scale до 0,12 и 20% - некоторые частицы будут выглядеть больше.
  2. Spin до -45 градусов - чтобы частицы слегка вращались при падении.
  3. Tit до 10 и 15 градусов - чтобы немного наклонить некоторые частицы и добавить дополнительное естественное движение эффекту.

Наконец, надо настройте Force. Добавление силы позволяет вам манипулировать частицами так, как если бы к ним применялась сила тяжести:
  1. Установите флажок рядом с Force
  2. Установите значение Y на 0,05. Это очень слабо замедлит частицы по мере их движения вверх, как если бы в сцене была гравитация.
Вы должны увидеть множество квадратных частиц, движущихся вверх от нижней части сцены:

Редактирование системы частиц

Когда вы выбираете систему частиц на панели «Scene», вы можете вносить изменения в ее свойства в Инспекторе:

Маски в инстаграм. Создание фона
Добавление сегментации и создание фона за человеком

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


Начните с создания Rectangle, которые будут визуализировать эти объекты и текстуры в сцене:

  1. Вставьте Сanvas - контейнер для размещения 2D-объектов, таких как Rectangle, чтобы они соответствовали размеру устройства.
  2. Вставьте 2 Rectangle, как дочерние объекты холста.
  3. Переименуйте Rectangle в user и background .
В инспекторе около Size установите опции Fill Wight и Fill Height для обоих прямоугольников, чтобы они заполнили холст. Временно вы больше не сможете видеть частицы. Мы будем использовать слои, чтобы изменить это.

А пока ваша маска должна выглядеть так:

Маски в инстаграм. Добавляем материалы
Создание в маске фона за человеком

Выберите фоновый Rectangle. В инспекторе нажмите « +» рядом с «Material» и выберите «Create New Material». Переименуйте материал background_mat.

Чтобы создать эффект темного цвета:
  1. Установите тип шейдера на Flat - потому что нам не нужен этот материал, чтобы реагировать или опускать свет.
  2. Под Diffuse выберите цвет. Мы выбрали темно-синий.
  3. Измените непрозрачность на 70% , чтобы вы могли увидеть немного реального мира сквозь фон - это сделает его глубже, а эффект интереснее.


Использование сегментации для создания переднего плана

Выберите первый прямоугольник, User и в инспекторе:
  1. Нажмите + рядом с Material
  2. Переименуйте новый материал user_mat

Вы примените текстуру камеры и текстуру к этому материалу:
  1. Выберите Camera на панели «Сцена».
  2. Нажмите на знак + рядом с извлечением и сегментацией текстуры .
Теперь они будут перечислены на панели «Assets» в разделе «Texture».

Маски в инстаграм. Настройка сегментации Spark AR
Чтобы закончить редактирование user_mat:
  1. Измените тип шейдера на Flat
  2. Под Diffuse щелкните раскрывающийся список рядом с текстурой и выберите CameraTexture
  3. Чуть ниже установите флажок рядом с Alpha
  4. В разделе «Alpha» щелкните раскрывающийся список рядом с Texture» и выберите «Segmentation Mask Texture»
Маски в инстаграм. Настройка сегментации 2
Изменение порядка рендеринга

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

На вкладке «Layers» создайте еще 2 слоя, чтобы в вашем проекте было 3 слоя. Переименуйте их:
  1. Первый слой в списке foreground_layer
  2. Второй слой user_layer
  3. Третий слой background_layer
Вкладка должна выглядеть следующим образом:

Маски в инстаграм. Нумерация слоев в Spark AR
На панели «Scene»:
  1. Назначьте пользовательский Rectangle для user_layer
  2. Назначьте canvas, фоновый Rectangle и emitter_background для background_layer

Теперь выберите все 3 материала. В инспекторе:
  1. Перейдите в Advanced Render Option
  2. Снимите флажок рядом с надписью «Use Depth Test»
По окончанию этого урока вы создадите красивую маску в инстаграм с эффектом плавающих светящихся частиц.

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

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

На переднем плане есть еще 2 системы частиц, расположенные в 2 нижних углах экрана.


Вставьте еще 2 Particle System. Переименуйте их:
  1. emitter0 - emitterA_foreground
  2. emitter1 - emitterB_foreground

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

Выберите emitterA_foreground и перейдите к Инспектору. В разделе «Transformations» настройте его положение. Установите значения X , Y и Z на 0,05 , -0,24 и 0 .


Измените:

  1. Type на Line - таким образом, частицы вылетают по линии. Установите длину до 0,1.
  2. Смените Space с World на Local - тогда частицы движутся при движении излучателя.
  3. Birthrate до 1.
  4. Life Span до 10 с и 30%.
  5. Spray Angle до 45 градусов и 15 градусов.
  6. Speed до 0,02.
Установите флажок рядом с Warmup и установите его на 40 с.
  1. Scale до 0,04 и 20%.
  2. Spin до -45 градусов.
  3. Tit до 10 и 15.
Наконец, установите флажок рядом с Force и установите значения X и Y на 0,004, 0,003. Оставьте значение X как 0.


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

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

Опять же, в разделе «Transformations» отрегулируйте положение. Измените значения X, Y и Z на -0,05 , -22 и 0.

Измените:
  1. Снова смените тип излучателя на Line, и снова установите длину до 0,1.
  2. Устанвите Local.
  3. Birthrate до 1 и 25% .
  4. Life Span до 10 с и 15% .
  5. Spray Angle до -30 градусов и 15 градусов.
  6. Speed до 0,02.
Снова установите флажок рядом с Warmup и установите его на 40.
  1. Scale до 4 и 20%.
  2. Spin до -45 градусов.
  3. Tit до 10 и 15 градусов.
Наконец, установите флажок рядом с Force и настройте значения X и Y на -0,004 , 0,003. Оставьте значение X как 0.

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

Маски в инстаграм. Настройка сегментации 3
На панели «Assets» вы увидите актив с именем inventory_controller.

Чтобы применить inventory_controller к системам частиц:
  1. Выберите particle_mat.
  2. Рядом с материалом выберите в меню inventory_tex.-animation.

Использование логики для смены кадра в масках

Мы будем использовать логику для изменения свойства Current Frame последовательности текстур.

Чтобы создать патч:

  1. Выберите inventory_controller.
  2. На панели «Инспектор» щелкните стрелку рядом с «Current Frame».
Откроется редактор патчей под окном просмотра.



Последовательность анимации в Spark AR
Вам не нужно вносить какие-либо изменения в слои. emitterA_foreground и emitterB_foreground будут назначены слою foreground_layer по умолчанию, поскольку он первый из перечисленных на панели «Layers».


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

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

Для этого вы превратите 4 отдельные текстуры в анимационную последовательность (sequence texture), а затем с помощью редактора патчей установите триггер, меняя кадр в последовательности при каждом касании экрана.


Создание последовательности анимации
  1. На панели «Assets» одновременно выберите 4 текстуры - inventory_tex.01, inventory_tex.02, inventory_tex.03 и inventory_tex.04.
  2. В инспекторе измените тип с одной текстуры на последовательность текстур.

  1. Щелкните правой кнопкой мыши в редакторе патчей. В меню выберите патчи Screen Tap и Counter. Соедините патчи, чтобы ваш график выглядел так:
Настройка патчей переключения в Spark AR
Установите значение Maximum Count в патче Counter на 4 (!) на скрине 5, не ведитесь , потому что у нас есть всего 4 текстуры для подсчета.

Если вы выберете Simulate Touch в Simulator, вы увидите, что текстуры меняются при касании экрана.


Добавление вторичной анимации к Particle System

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

Мы будем использовать патчи Loop Animation и Transition для создания анимации.

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


Применение текстуры с помощью редактора патчей


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

Чтобы создать патч, представляющий свойство Diffuse для particle_mat:
  1. Выберите particle_mat
  2. Под Diffuse щелкните кружок рядом с Texture

Затем создайте патч для представления последовательности текстур:
  1. Выберите inventory_controller
  2. Перетащите его с панели «Assets» в редактор патче
Щелкните правой кнопкой мыши в редакторе патчей и выберите Texture Transform.

Соедините три патчи. Ваш график должен выглядеть так:


Настройка патчей переключения в Spark AR 2
Соедините выход этого патча перехода с входом Scale в патче 2D Transform Pack. Установление этой связи будет означать, что частицы будут увеличиваться и уменьшаться в соответствии со значениями, которые мы установили в патче перехода.

Подключите 2D Transform выход в 2D Transform Pack во вход в Texture Transform. Ваш график должен выглядеть так:

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

Для каждого патча Transition измените Curve на Quadratic In-Out. Это регулирует время движения частиц - вы можете выбрать другой вариант из списка.

Transition патч в верхней части графика. Чтобы установить частицы на овальное движение отрегулируйте верхний патч следующим образом:
  1. Рядом со Start установите X на -0,3 и Y на 0,15
  2. Рядом со End установите X на 0,3, а Y на -0,15
Подключите выходы этого патча перехода ко входу в 2D Transform Pack.

Исправление второго переходного патча будет немного масштабировать частицы по мере их движения. Во втором патче перехода исправьте:
  1. Рядом со Start установите X на 0,7 и Y на 0,6
  2. Рядом с End установите X на 1 и Y на 0,95
Последнее значение, которое вам нужно изменить, это Pivot в 2D Transform Pack . Установите для X и Y значение 0,5, чтобы частицы поворачивались от центра.

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




Читайте также:
Маски в инстаграм. Настройка анимации
Made on
Tilda