Шейдерная магия или “желейные” дома из SteamWorld Build

Совсем недавно вышла стратегия SteamWorld Build. Естественно, я ее попробовал:) Но в статье мы не будем рассматривать игру, а посмотрим на один забавный прием, который использовали разработчики.

Мне стало интересно, как добиться такого “желейного” эффекта для зданий. При этом понятно, что никакие заготовленные анимации/кости мы использовать не станем. Это должен быть шейдер, а значит пора запустить UE и сделать что-то подобное. Я использую UE5.3 — если вы надумаете повторить прием на более старых версиях, то обратите внимание на ноды координат в материале. Они чуть иначе устроены но разобраться не составит труда, поэтому я пропущу этот момент.

WPO

Для начала необходимо понять, как вообще можно добиться схожего эффекта. Мы не хотим использовать заготовленные анимации или цели морфинга. Значит у нас остается WPO. World Position Offset. Штука эта относительно дешевая, грузит видеокарту и позволяет делать крутые вещи) Всякие птички, рыбки и многое другое в вашей любимой игре, скорее всего сделаны через WPO. Крысы в plague tale тоже используют эту фейковую анимацию. Почему фейковую? Потому как мы меняем визуальное отображение объекта, тогда как коллизии, фактическое положение в мире — остаются прежними. Все что делает WPO — изменяет позицию вертекса — это кстати будет важно и накладывает определенные ограничения.

Собираем первую конфигурацию:

Задаем RotateAngle - получаем вращение.
Задаем RotateAngle - получаем вращение.
Уже почти то, что мы хотели в начале! Ну почтииии…

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

Шейдерная магия или “желейные” дома из SteamWorld Build

Нам нужна какая-то маска, которая будет регулировать “качания”. У фундамента здания не качаются и к крыше получаем максимальную амплитуду. Маску мы получим из высоты.

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

Используем получившиеся значения как множитель для нашего WPO и получаем следующий результат.

Качаем-качаем:)

Уже ближе к искомому, но как же нам его изогнуть? Раньше я говорил, про вертексы и ограничения связанные с этим. Чтобы получить красивый эффект, схожий с тем, что был в начале статьи — нужно больше геометрии в нашем “здании”.

Я не трогал параметры материала, но я добавил кубу больше геометрии.

В примере выше 136 вертекса. В теории, можно за морочиться и на нижнюю часть дать меньше плотность и добиться того же эффекта. Но для написания статьи, я решил не заморачиваться с этим.
Дальше придется поковыряться в блюпринтах, нашему материалу необходимо задавать вектор, по которому мы будем скручивать объект — RotationAxis. Так же необходимо задавать анимацию. Я использовал все ту же конструкцию тайм (чуть улучшить, и передавать текущее время, для старта анимации. Там же нужно задавать значение, по которому будем лерпать таймом значение угла. Чтобы домик отклонялся в нужном нам направлении и реагировал на то, что мы с ним делаем. Ну и остается параметры, который отвечает за максимальную амплитуду. Он будет зависеть от скорости объекта. В итоге мы получим интересный, не сложный и достаточно дешевый эффект:)

Мне нравится, а вам?

Спасибо за внимание и хорошего вечера!

209209
54 комментария

Почему в качестве демонстрационного материала выбраны дома, а не груди ради которых фича и создана?

45
Ответить

Промашка конечно! Так бы статья уже была в популярных

30
Ответить

потому что они, обычно не так делаются - там есть своя кость на которой висит простой скрипт псевдо-физики

3
Ответить

Дтф наконец про игры? Я сплю чтоль?

15
Ответить

Получилось неплохо, но там как-то желейней) Игра на Юньке, кста

2
Ответить

Дальше просто играться с параметрами
Суть будет та-же, просто время на полишинг
Так как я не разрабатывал фичу, а только анализировал, как ее запустить, то результат мне показался достаточным
А юника/анрил - чаще всего разницы нет. Уверен и в юнити на тех же принципах можно все построить. Функции можно раскрыть и посмотреть, как они работают в базовой комплектации) Потом пересобрать в юнити

3
Ответить

Есть факторио (скоро факторио 2.0) Есть сатисфактори. Все эти качения и желе не нужны, только нагружают компутер.

1
Ответить