Учимся делать визуальные эффекты: подробный туториал от разработчиков Tanks A Lot!

Как создать эффекты огня, взрыва, ледяных шипов и летящих пил.

Создание визуальных эффектов — это тонкая работа: разработчик должен сделать их правдоподобными, понятными и впечатляющими.

DTF поговорил с ведущим художником по 3D и эффектам из студии Highcore Games Владимиром Тихановым и выяснил, какие принципы должны лежать в основе визуальных эффектов.

Художник подробно описал процесс создания нескольких анимаций для Tanks A Lot! — он рассказал про огнемёт, огненную стену, ледяные шипы, взрыв и циркулярные пилы. Если вы хотите воссоздать эти эффекты в Unity, то можете использовать этот текст в качестве туториала.

Все эффекты в игре должны соответствовать нескольким ключевым правилам.

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

Избегайте слишком резких переходов, появлений и исчезновений. Используйте 12 принципов анимации, особенно «смягчение начала и завершения движения» (slow in & slow out), «расчёт времени» (Timing), «преувеличение и утрирование» (Exaggeration). Это хорошо сказывается на динамике эффекта, делает его более выразительным и убедительным.

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

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

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

Теперь затронем техническую сторону. В Highcore Games все эффекты создаются при помощи Particle System в Unity — стандартных средств почти всегда достаточно. Кастомные шейдеры используйте с осторожностью — только если это действительно нужно для решения задачи. Код в таких ситуациях лучше писать собственноручно, чтобы отсечь всё лишнее.

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

Обычно в Highcore Games используют три шейдера для эффектов: Mobile Additive, Mobile Alpha Blended и Unlit Shader для мешей с текстурой.

Чем больше материалов используется, тем больше draw-calls и тем меньше fps в игре. Поэтому постарайтесь ограничиться тремя материалами для каждого типа шейдеров. Все спрайты и текстуры для эффектов храните в отдельном атласе. Чтобы выбрать нужный спрайт, используйте блок Texture Sheet Animation как показано в примере ниже.

Также художники из Highcore Games стараются не делать слишком много систем частиц. Их количество сильно зависит от конкретного эффекта: если это выстрел или попадание, то достаточно двух-трёх, если это летящий проджектайл, то можно применить от двух до четырёх, а взрыв может состоять из четырёх-пяти. Каждая система занимает определённое количество оперативной памяти устройства. Это касается даже тех систем, в которых ничего не происходит.

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

У огнемёта есть две ключевые атаки, для каждой из которых нужен отдельный эффект:

Первый шаг при создании эффекта — собрать и исследовать референсы, чтобы понять, как он должен выглядеть. Вы можете искать референсы, например, на Pinterest (вот пример поиска для огнемёта).

Затем нарисуйте скетч. Набросок должен быть простым и грубым, но при этом передавать суть задумки. Это черновой вариант, поэтому используйте только упрощённые формы для изображения объектов. И не тратьте слишком много времени на проработку наброска. Постарайтесь сделать так, чтобы на эту задачу у вас уходило не более 20 минут.

Следующий важный шаг — рисование частиц (спрайтов), из которых будет состоять эффект. Проще всего нарисовать их в Photoshop. Для эффекта огнемёта понадобится три вида частиц. Первые нужны для создания следа дыма. В реальности дым состоит из частиц, появившихся в результате горения, и пара, поэтому его поведение и физическая природа очень похожи на газообразное вещество.

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

Если вы не знаете, как должны выглядеть подобные частицы, можно поискать вдохновение на сайте Adobe Stock (вот пример поиска).

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

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

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

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

Атласы удобно собирать в Substance Designer: там можно легко определить размер атласа и количество ячеек для будущих спрайтов. Всё зависит от проекта, но обычно хватает 2048 пикселей и 12х12 ячеек: в такой атлас можно поместить 144 текстуры — этого должно хватить для мобильного проекта. Также для Substance Designer есть бесплатный плагин, который позволяет легко управлять атласом.

Следующий важный этап — создание и настройка систем частиц в Unity.

Эффект огнемёта состоит из трёх систем частиц:

Каждая система частиц создаётся отдельно, хотя у них есть некоторые общие черты.

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

Теперь можно заняться визуальной частью эффекта и заменить стандартные спрайты на ранее отрисованные. Для этого в поле Render назначаем нужный материал — так как он лежит в атласе, надо указать номер в поле Texture Sheet Animation. После этого эффект должен выглядеть примерно так.

Из-за того, что все спрайты повёрнуты в одну сторону, эффект выглядит неестественным. Исправить это можно с помощью поля Start Rotation в основных настройках системы — достаточно заменить значение на случайное от 0 до 360. Также настройте цвет частиц в поле Color Over Lifetime.

Следующая система частиц — сам огонь. Чтобы создать его, нужно скопировать уже созданную систему дыма, заменить градиент в поле Color Over Lifetime и выбрать нужный спрайт в поле Texture Sheet Animation.

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

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

С основной атакой закончили. Теперь можно переходить к дополнительной.

Опять начинаем со скетча.

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

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

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

Эффект горящей земли сделан из спрайтов, которые использовались для создания основной атаки. На самом деле он очень похож на обычный огонь, который встречается во многих играх. Чтобы сделать «стену огня», нужно создать несколько префабов огня через равные промежутки. Главное отличие «стены огня» от огнемёта в том, что частицы поднимаются вверх по оси Y c помощью параметра Gravity Modifier.

У ледяной пушки тоже есть две атаки, но особого внимания заслуживает дополнительная — она создаёт ледяные шипы, вырастающие из-под земли.

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

Для начала нужно смоделить ледяные шипы, так как они — центр композиции. Сделать это можно в любом 3D-редакторе — в Highcore используют Maya, но этого же можно добиться в Blender или в любом другом приложении для 3D-моделирования. Так как этих шипов будет много, а игра мобильная, то нужно использовать как можно меньше точек и полигонов. В модели Тиханова получилось 62 вершины.

Затем нужно добавить материал, который сделает шипы похожими на лёд. Для этого можно использовать всё тот же аддитивный мобильный шейдер, чтобы не просаживать fps игры чем-то сложным. Этот шейдер поддерживает Vertex Color, благодаря чему можно достичь нужного эффекта. Также цвет можно задать в 3D-редакторе.

После моделинга и покраски можно экспортировать готовый FBX-файл в Unity и начинать настраивать эффект.

Создаём Particle system и в поле Renderer выбираем Render Mode — Mesh. Находим нужный меш, а потом назначаем материал с аддитивным шейдером.

Далее меняем Shape на Circle, а в основных параметрах системы убираем скорость, делаем рандом по цвету и размеру (в пределах указанного диапазона), снижаем время жизни частиц. Получается что-то такое.

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

Чтобы достичь этого, можно использовать банальный скейл по оси Y. Во вкладке Size Over Lifetime нужно настроить кривые по трём осям: переменная для X и Z всегда равна единице, а график по оси Y должен выглядеть следующим образом.

Выглядит неплохо, но недостаточно вариативности.

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

Далее создаём новую систему, снижаем до нуля скорость частиц, во вкладке Shape ставим Circle и подгоняем размер под радиус шипов. Во всех эффектах старайтесь сочетать аддитивные элементы с элементами в режиме смешивания Alpha Blend. Благодаря этому эффект будет хорошо выглядеть на любом фоне — он не будет слишком пересвеченным или затемнённым. Полученную систему нужно выставить на слой ниже, чем шипы.

Также можно добавить меши, имитирующие плоскую корку льда — для этого нужно применить тот же подход, что и при создании шипов. Ещё можно добавить снежинки.

Разберём ещё один интересный кейс на примере пушки, стреляющей дисками от пилы.

Как и в случае с шипами, для начала нужно смоделировать и текстурировать центральный объект композиции — пилу. Сделать это можно в любом 3D-редакторе. Тиханов советует завести папку в проекте для моделей, которые используются в эффектах. Постепенно у вас сложится целая библиотека подобных ассетов, которые всегда можно использовать в других эффектах и играх.

Теперь создадим систему частиц: сразу же нужно назначить меш пилы в качестве частиц, а также выбрать такой материал, который применяется для динамических 3D-объектов — это может быть Unlit Shader или шейдер, который принимает свет, например, Diffuse или Specular.

Когда само вращение пил готово, можно сделать стилизованный трейл вращения — он представляет собой полоску полигонов, на которую наложен простой спрайт в виде кругового градиента. Чтобы сделать такой эффект, нужно воспользоваться Custom Mesh и импортировать его из Maya.

Используя эту модель в качестве частицы, создадим новую систему. Снимаем галочку с вкладки Shape, потому что частицы должны всегда появляться в центре координат. Также задаём вращение во вкладке Rotation Over Lifetime.

Теперь можно добавить лёгкое свечение и искры.

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

Меш нужно импортировать, чтобы использовать в качестве частицы. Также нужно изменить некоторые настройки системы: параметры начальной скорости, гравитации и коллизии с окружением.

Чтобы осколки исчезли, нужно применить к ним обратное масштабирование.

Похожий эффект можно делать с любыми разлетающимися 3D-элементами: осколками, кусками земли и так далее.

Экшены сложно представить себе без взрывов. И в Tanks A Lot! их тоже достаточно. Даже простой эффект взрыва состоит из нескольких систем частиц.

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

Результат нужно преобразовать в 3D-модель, прогнать через оптимизатор геометрии в Maya и запечь цвет в текстуру. Полученную текстуру следует поместить в атлас эффектов, а меш импортировать в Unity. Такую модель можно сделать и более традиционными средствами: например, слепить в Blender или ZBrush.

После импорта создаём систему, добавляем модель в качестве частицы и настраиваем динамику появления в Size Over Lifetime.

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

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

Добавим ещё одну систему без Shape и сделаем очень быстрое появление через Size Over Lifetime. Декаль должна находиться параллельно земле. Для этого нужно в поле Renderer — Render Alignment поставить вариант Local.

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

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

Теперь можно добавить дымящиеся осколки, разлетающиеся в стороны.

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

Теперь сделаем след дыма для этих частиц.

В качестве частиц можно использовать нарисованные ранее спрайты стилизованного дыма.

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

Чтобы камни падали на землю, нужно настроить Gravity Modifier и Collision.

Также можно добавить вращение камней вокруг свой оси, пока они не достигнут земли. После этого они исчезают с помощью графика Size Over Lifetime.

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

Обычно эффекты создаются в четыре этапа:

В заключение повторим несколько общих советов при создании визуальных эффектов:

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

#опыт #арт #tanksalot