Магический вихрь. Создание и оптимизация

Привет! Я Антон Грицай, Lead of VFX Team в краснодарской студии Plarium. Мы запускаем цикл статей о создании визуальных эффектов, и первая статья будет про эффект «Магический вихрь».

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

Подробности расскажет автор эффекта, Junior VFX Artist Александра Аликумова.

1.gif

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


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

Если требуется создать более сложный меш, который не доворачивается на камеру, но все-таки должен смотреться объемно, то можно сделать меш с крестовиной в сечении. Такой подход можно использовать, например, при создании дымового кольца при вылете проджектайла из пушки. Или, как в нашем случае, порывов ветра, образующих цилиндрическую форму, и дополняющих их линий.

Эффект «Магический вихрь» состоит из следующих элементов:

  • Центральный вихрь.
  • Пыль у земли.
  • Дополнительный вихрь.
  • Острые линии.
  • Мелкие частицы.
  • Свечение на земле.
Рассмотрим каждый из элементов подробнее.


Центральный вихрь

Начнем с центрального элемента (основной части массы). Меш для него будет следующим:



1.jpg

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

Назначаем на меш материал с текстурой:

2.jpg

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


Теперь переходим к настройкам системы частиц и делаем следующее:

  • Задаем рандомный поворот по оси Y.
  • Задаем рандомность по времени жизни, начальному размеру и цвету.
  • Настраиваем плавное появление и исчезновение партиклов.
  • Добавляем изменение размера на протяжении жизни партиклов.
  • В качестве меша частиц используем меш, который мы создали.

2.gif

Пыль у земли

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

Меш:

3.jpg

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

4.jpg

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

3.gif

Дополнительный вихрь

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

Меш и форму текстуры берем от центрального элемента, цвет — от нижнего.

5.jpg

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

4.gif

Острые линии

Данный элемент необходим для поддержания формы магического вихря. Четкие направленные элементы на фоне общей размытой воздушной массы подчеркивают направление движения всего эффекта.

Меш:

6.jpg

В данном случае крестовина у меша прямая (одна плоскость параллельна земле, вторая — перпендикулярна). Вертикальная плоскость дополнительно подчеркнет цилиндрическую форму, а горизонтальная придаст элементу объем.

Материал:

7.jpg

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

В системе частиц на протяжении жизни партиклов добавляем вращение по оси Y, а их появление и исчезновение настраиваем только через цвет, без изменения размера.

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

5.gif

Мелкие частицы


Роль этого элемента — сделать вихрь более реалистичным. Ведь ветер часто подхватывает мелкие предметы и поднимает их в воздух.

Перейдем к настройке системы частиц:

  • Спавним частицы на окружности вихря.
  • Задаем рандом по времени жизни, начальному размеру и цвету.
  • Настраиваем динамику движения так, чтобы частицы быстро подбрасывало вверх, а затем смещало в сторону по окружности.
  • Редактируем прозрачность частиц по следующей схеме:

9.jpg

  • Размер на протяжении жизни настраиваем по нисходящей кривой, но в ноль не уводим, чтобы не было совсем мелких элементов.

6.gif

Свечение на земле

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

8.jpg

Оптимизация

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

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

7.gif

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

В таких случаях стоит сохранять баланс между красотой/детализированностью и производительностью.

8.gif
Слева меши high poly, справа — low poly

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

Дополнительным союзником является динамика: на движущемся изображении слабее видна лоупольность меша.

9-10.gif
Один и тот же эффект на разных фонах


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

8.gif
Слева меши high poly, справа — low poly

Для оптимизации эффектов можно:
  • Упростить геометрию мешей, сделать их более лоупольными.
  • Сжать текстуры: например, вместо разрешения 128 использовать 32.
  • Максимально уменьшить количество партиклов в системе частиц.
  • Отказаться от некоторых элементов.
На этом с магическим вихрем мы закончили. Чтобы не пропустить следующую статью из цикла, следите за публикациями в блоге.
760 0 850 10
0
RENDER.RU