Как создавался эффект Change Screen для игры Terminator Genisys: Future War

Занавес — важный элемент сцены в любом театре, он закрывает часть пространства, чтобы зритель не видел, как работники передвигают декорации. Спросите, при чем здесь театральный занавес? VFX Change Screen (смена экрана) выполняет похожие функции, скрывая от пользователя процессы подгрузки при «смене декораций». Специалисты краснодарской студии Plarium на примере игры Terminator Genisys: Future War подробно рассказали о создании этого важного эффекта.

В проектах Plarium эффект Change Screen срабатывает при переключении между картой города и картой игрового мира. Без него пользователю пришлось бы наблюдать, как объекты поэтапно появляются на экране. Поэтому, пока подгружается контент, игрок видит короткую динамическую заставку. В Vikings: War of Clans и Throne: Kingdom at War это набегающие облака, в Terminator Genisys: Future War — мерцающая сетка.


С самого начала разработки Change Screen для Terminator Genisys: Future War VFX-дизайнеры прекрасно понимали, что эффект придется создавать с нуля, так как динамические заставки Vikings: War of Clans и Throne: Kingdom at War не подходят этому проекту по стилю. Специфика сеттинга диктовала еще одно условие: визуально эффект смены экрана должен сочетаться не только с внешней картой, но и с картами городов обеих игровых фракций (Сопротивление и Скайнет). Кроме того, предстояло оптимизировать эффект, ведь заставка не должна быть тяжелой: девайс и так в это время занят подгрузкой нового контента.

Эффект Change Screen делится на три состояния анимации: Start, Idle, End. В первую очередь было важно сделать анимацию для Idle, так как именно она выполняет роль ширмы и занимает большую часть времени эффекта.

На этапе предварительной подготовки VFX-дизайнеры решили сделать Change Screen «резиновым» по хронометражу, то есть анимация Idle должна длиться столько времени, сколько нужно устройству для процесса подгрузки всех ассетов.

Далее предстояло разработать общую визуальную идею для заставки. Специалисты VFX Department хотели, чтобы у пользователя создалось впечатление, будто он следит за происходящим на внешней карте, не выходя со своей базы. Видеонаблюдение ведется с камер летающих дронов, а сам Командер просто подключается к системе и смотрит трансляцию. Чтобы достичь такого эффекта, за основу Change Screen была взята голографическая сетка.

Для создания текстуры сетки использовали шейдер, в котором из UV-пространства сформировали маску для появления/исчезновения и маску для свечения в центре.

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

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

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

На следующем этапе занялись созданием анимации для начала (Start) и конца (End) эффекта Change Screen. Для этого разработали меш, который накладывает особое свечение поверх появляющихся точек. Для Start и End решили использовать одну и ту же анимацию, только в End она проигрывается в обратную сторону.

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

Далее настроили UV-пространство так, чтобы прямоугольники ложились точно в координаты (0:0,1:1).

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

Канал R

Окрашивает каждый отдельный прямоугольник меша, превращая его в цельный объект.

Каналы G и B
Имитируют распад цельного объекта.

Формируя UV-пространство для этого эффекта, дизайнеры пошли на хитрость и рандомно повернули каждый прямоугольник на 90°, 180°, 270°. Этот прием помог им добиться хаотичного распада цельных объектов на мелкие части.

Теперь, чтобы эффект выглядел завершенным, предстояло добавить элементы анимации, притягивающие внимание игрока. Для создания такого визуального акцента VFX-специалисты разработали простой шейдер, который заставил всю текстуру ритмично мигать. Часто в подобных анимациях используется дополнительная надстройка в виде компонента Animation Clip, но она утяжеляет заставку. Решение специалистов Plarium помогло сделать этот эффект легким для устройства.

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

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

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

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

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

Итак, последние штрихи добавлены — эффект смены экрана для Terminator Genisys: Future War готов!

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

347 850 4
0
RENDER.RU