Создание визуальных эффектов в стиле League of Legends

Основы от разработчика из Riot Games.

Сотрудник Riot Games Кевин Лирой (Kevin Leroy) дал интервью порталу 80.lv, в котором рассказал, как он создаёт визуальные эффекты в духе League of Legends в Unity.

Создание визуальных эффектов в стиле League of Legends

Специальные эффекты

Я расскажу о заклинаниях, потому что это моя стезя. Возьмём, к примеру, снаряды — один из самых комплексных видов эффектов. Большая часть снарядов состоит из трёх элементов: эффект создания, сам снаряд и эффект попадания.

Рассмотрим базовый снаряд:

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

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

Вот снаряд для Вел'Коза в образе Звёздного защитника:

Создание визуальных эффектов в стиле League of Legends

Основная точка (Hot Point) — самая важная. Это та часть снаряда, от которой нужно увернуться. Она должна быть видимой, точно определённой и легко считываться. Она не должна расходиться с хитбоксом, потому что тогда игроки не смогут от неё увернуться.

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

Наконец, остаются свечение и тень. Логичный вопрос: «Зачем нужна тень, когда стреляешь яркой звездой?». Тень нужна, чтобы усилить свечение. На тёмном фоне оно кажется более ярким.

Эффект попадания обычно появляется, когда хитбокс снаряда сталкивается с вражеским персонажем.

Создание визуальных эффектов в стиле League of Legends

Я разделил его на несколько частей. Первая и самая важная — момент попадания. Он должен быть очень коротким (примерно одна десятая секунды) и привлекать внимание игрока: снаряд попал! Затем свечение исчезает и остаются только эффекты. В этом случае блик исчезает почти с той же скоростью, что и свечение. После него исчезают искры, и остаются только точки боке.

Процесс создания

Обычно я делаю всё в Unity, так как использую в основном частицы и эффекты шейдеров. Для текстур я использую Photoshop, для мешей — Maya. Частицы я создаю во встроенной системе частиц Shuriken.

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

Все текстуры я рисую в Photoshop. Я не очень хороший художник, так что полагаюсь на простые текстуры. Вот несколько примеров:

Создание визуальных эффектов в стиле League of Legends

Большая часть из них чёрно-белые, потому что так мне легче контролировать цвет частицы. Если я вдруг хочу сменить её цвет, мне не приходится снова запускать Photoshop. Я могу сделать это прямо в Unity, используя значение Color over Lifetime.

Анимация

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

Создание визуальных эффектов в стиле League of Legends

Например, параметр Start Speed придаёт импульс частице. Если он равен 20, то частица будет двигаться со скоростью 20 единиц в секунду. Если добавить Velocity over Lifetime, то можно контролировать скорость частицы. Limit Velocity over Lifetime позволяет сделать так, чтобы частица будто бы замедлялась из-за трения.

Color over Lifetime изменяет цвет частицы. Скажем, если добавить градиент альфа-слоя, который выглядит как 0 – 0.5 – 0, то частица сначала будет невидимой, потом станет постепенно проявляться, достигнет прозрачности в 0.5 и со временем исчезнет.

Ещё один способ анимации — анимированные шейдеры, как вот этот:

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

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

Повторное использование материалов и текстур

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

Это полезно, если ты всегда работаешь с одним движком. Но если приходится переключаться, скажем, между Unreal Engine 4 и Unity, то всё усложняется. Большую часть материалов для одного движка нельзя использовать в другом. Но текстуры можно.

Нужно ли уметь программировать, чтобы работать в этой сфере?

И да, и нет.

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

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

Как правильно организовать работу

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

Создание визуальных эффектов в стиле League of Legends

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

Ещё одна важная вещь — спрашивать мнения людей о своей работе. Когда я только начинал, я понятия не имел, что существуют группы людей, которые бесплатно делятся друг с другом опытом. Например, RTVFX. Идите туда, задавайте вопросы, просите оценки. Это отличное сообщество, всегда готовое помочь. Там же можно найти много ресурсов и референсов. Отзывы — это прогресс, не бойтесь просить людей оценить вашу работу.

99
6 комментариев

Мне кажется была какая-то подобная статья про анимации в лиге легенд? Было бы круто увидеть тредик из подобных статеек или какую-то отдельную колоночку

2
Ответить

Что-то я не понял, зачем он эффекты в Юнити делает. Игра же вроде на UE4. Нет?

Ответить

Это фан арт.
1) В оригинале написано in the style of
2) В начале видео написано, что автор не сотрудник Riot
3) Юнити
Стоит поправить начало статьи

Ответить

LoL на собственном движке.

Ответить