Как создать и анимировать визуальный эффект «огненный шар» в Unreal Engine 5

Введение

Я VoidFX, 19-летний художник визуальных эффектов в реальном времени, использую систему частиц Niagara в Unreal Engine 5. Мне нравится идея крутых визуальных эффектов, которые используются в играх, поэтому почти год назад (когда мне было восемнадцать) я начал заниматься VFX. Мне ещё многому предстоит научиться, и я надеюсь стать лучше и реализовать самые крутые идеи, которые есть у меня в голове.

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

Ключевые моменты этой статьи:

• Почему я выбрал Unreal Engine 5?
• Как возникла идея огненного шара.
• Визуальные эффекты в реальном времени в Unreal Engine 5.
• Анализ снаряда в виде огненного шара.
• Советы для начинающих художников визуальных эффектов в реальном времени.
• Где меня найти и мои социальные сети.

Дело в том, что я не выбирал Unreal Engine. В то время, когда я заинтересовался VFX, я не знал о многих игровых движках. Я просто знал о Unreal Engine, поэтому купил курс для него на Udemy. В итоге я прошёл его весь, однако после завершения понял, что UE5 — это более выгодный вариант для инвестиций, поскольку многие игровые студии переходят на использование Unreal Engine 5, поэтому я продолжил изучать его дальше.

Идея огненного шара

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

Через несколько дней после завершения работы я подумал, что этот эффект выглядит круто, и сделал несколько его вариаций. Одна — в виде тёмного огненного шара, а другая — в виде своего рода ледяного шара. На создание оригинального огненного шара у меня ушло 5 дней, а на вариации — 2 дня, так что в общей сложности около недели.

Визуальные эффекты в реальном времени в Unreal Engine в основном включают в себя:

1. Симуляцию частиц Niagara с использованием различных типов модулей.
2. Анимацию шейдеров/материалов в сочетании с частицами Niagara.
3. Создание логики и объединение различных систем Niagara с помощью Blueprints.

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

Анимация материала

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

Этот пример состоит из системы Niagara, порождающей спрайтовые и меш-частицы с анимацией материала, применённой к каждой частице, как показано в примере.

В Unreal Engine 5 Blueprints — это система визуального скриптинга, которая позволяет создавать логику геймплея, взаимодействия и системы без написания кода на C++. Blueprints также можно использовать для создания логики для VFX в Unreal Engine 5, например, для следов от меча, связанных с анимацией персонажа.

Его также можно использовать для запуска снарядов и создания продвинутой логики для систем Niagara, например, с помощью переменных. Вот пример моего VFX стрелка снарядов, созданного с помощью логики Blueprint:

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

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

Анимация огненного шара

Давайте сначала рассмотрим анимацию материала, поскольку материал, который я сделал, был предназначен для того, чтобы быть мастер-материалом, и использовался во всех сетках снаряда в виде огненного шара путём настройки некоторых параметров. Так что для этого материала я использовал методы, которым научился на курсе Udemy, о котором упоминал ранее. Вот обзор узлов, которые я использовал:

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

• Искажение: в группе искажения я создал текстуру шума, используя технику, которой научился на курсе, используя узел шума в системе материалов Unreal Engine, и использовал его в основном в розетке текстуры UV, чтобы придать ему искажённый вид.
• Растворение: для группы растворения я использую ту же текстуру шума, что и для группы искажения, которая подключена к разъёму непрозрачности в конечной выходной группе, чтобы создать маску этого шума. Это делает анимацию интересной, удаляя основную текстуру из чёрных частей шума.
• Основная текстура: для группы основной текстуры я использую текстуру огненного следа из Infinity Blade Effects, которая была бесплатным набором ресурсов на Unreal Engine Marketplace и была прекращена после перехода на Fab. Затем я добавил вывод искажения в его разъём UV, чтобы исказить его, как я упоминал ранее.
• Конечный вывод: наконец, в конечном выводе всё подключено к нужным разъёмам и умножается с узлом цвета частиц, чтобы сделать цвет материала и альфа-канал редактируемыми в системе Niagara. Позже основные текстуры подключаются к излучаемому цвету, а растворение подключается к разъёму непрозрачности вместе с маской Diamond Gradient и узлом Depth Fade, чтобы скрыть швы.

Для огненного шара я скачал бесплатную сетку Rock с Sketchfab (хотя использование сетки сферы в этом случае не будет иметь большого значения и рекомендуется из-за меньшего количества вершин и более простой настройки UV), а для его оболочки я продублировал излучатель Rock Mesh в системе Niagara и применил к нему анимацию материала. Вот визуальное представление:

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

Лучшим вариантом здесь может быть использование сетки сферы вместо этой сетки rock, разница не будет очень заметной, и это будет лучше, так как для сферы легче настроить UV из-за её менее сложной формы. Вот краткий обзор излучателей, используемых для скалы и её оболочки в системе Niagara:

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

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

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

Основная оболочка огненного шара

Для основной оболочки огненного шара я использовал сетку, которую сделал в Blender, помня о своей цели. Вот визуальное представление:

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

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

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

Для материала основной оболочки я сделал 2 экземпляра основного материала для обоих излучателей, показанных здесь, чтобы иметь больше контроля над панорамированием текстур с обеих сторон оболочки. А чтобы скрыть швы, я использовал маску Diamond Gradient, показанную ранее на графике узлов материала.

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

Излучение огня

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

Для создания эффекта выброса огня я использовал текстуру SubUV с изображением огня, которую скачал с маркетплейса Unreal Engine как бесплатный ассет. Я сделал простой материал для этой текстуры, в котором умножил альфа-канал и каналы RGB текстуры, чтобы изменить непрозрачность и цвет этого материала в системе Niagara.

Я использую ту же модель затенения и режим наложения (без освещения и аддитивный), что и для основного материала, используемого для мешей. Для текстуры FireSubUV я использовал текстуру огня из M5 VFX Vol2. Fire and Flames (Niagara), которая является ещё одним пакетом бесплатных ассетов и также доступна на новом рынке Fab. Также я подключил узел Depth Fade в гнезде непрозрачности, чтобы у пламени были более мягкие края при контакте с мешем.

Для эмиттера системы Niagara я использовал предустановку эмиттера SimpleSpriteBurst, добавил ранее созданный материал для выброса огня в гнездо материала Sprite Renderer и изменил размер подтекста на 8 на 6, так как в текстуре огня было 8 кадров в первом ряду и 6 кадров в первом столбце, что составляет текстуру размером 8 на 6. Чтобы анимировать материал текстуры SubUV, я добавил модуль SubUVAnimation.

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

• Состояние эмиттера: в этом модуле я просто изменил цикл эмиттера на бесконечный, как и у излучателей мешей, показанных ранее.
• Частота появления: я удалил SpawnBurstInstantaneous и добавил модуль частоты появления частиц в секунду, а также добавил диапазон случайных значений для случайности.
• Инициализация частицы: в модуле инициализации частицы я изменил время жизни, размер спрайта и режим вращения спрайтовых частиц на случайные, чтобы добавить ещё больше случайности, а также увеличил свечение цвета частицы до значения 8,0.
• Добавить скорость: я добавил модуль скорости, чтобы придать частицам некоторую скорость с противоположной стороны скалы для достижения эффекта огненного следа.
• Расположение формы: это был ещё один модуль, добавленный в эмиттер. Здесь я выбрал сферу в качестве основного примитива для управления шириной выброса пламени.
• Масштабировать размер спрайта: этот модуль был добавлен, чтобы добавить больше деталей в выброс пламени. Я добавил кривую, чтобы придать частицам меньший размер при появлении и смерти, а больший размер в середине срока службы.
• Масштабировать цвет: наконец, в этом эмиттере я просто настроил альфа-кривую, чтобы частицы появлялись с затуханием и умирали с затуханием, чтобы придать им плавную анимацию.

Искры огненного шара

Эта часть была очень похожа на выброс огня. Оба излучателя были добавлены как предустановки эмиттера SimpleSpriteBurst, и, как и раньше, их цикл эмиттера был изменён на бесконечный. Основное отличие состояло в том, что для этой части не было создано специального материала. Материал по умолчанию для спрайтов, предоставленный в Unreal Engine, в этом случае был достаточным.

Как и при выбросе огня, большая часть работы по созданию искр огненного шара была выполнена в излучателях системы Niagara. Я использовал два излучателя для настройки искр. Один называется Front Sparks (Передние искры), а другой — Spark Trail (След искр).

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

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

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

Как упоминалось ранее, позже я создал две вариации этого VFX. Один — как тёмный огненный шар, а другой — как своего рода ледяной шар.

• Тёмный огненный шар: эта вариация была своего рода тёмной стихийной магией. Для этого я просто изменил цвет выброса огня на чёрный, а другие излучатели — на пурпурный. И убедился, что основная оболочка огненного шара была визуализирована выше чёрного пламени.

• Ледяной шар/Замёрзший огненный шар: в этой вариации я изменил цветовую схему на светло-голубоватую, увеличил ширину пламени и основной оболочки огненного шара. И немного уменьшил скорость, чтобы придать ему ледяной вид.

Заключение

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

Мой совет для нового художника, работающего с VFX в реальном времени: VFX в реальном времени — это творчество и исследования (Research and Development), необходимые для воплощения ваших идей. Просто сделайте это сначала, потом можно будет улучшить.

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

Не стесняйтесь обращаться ко мне в Direct в Instagram или по электронной почте. Вот некоторые мои социальные профили и контактная информация:

• Instagram
• Email
• YouTube
• Reddit

Void FX, художник по VFX

Интервью проведено Глорией Левин