2D Water в Unity 3D⁠⁠

Всем привет! =) Я начинающий (читать как очень хреновый) разработчик игр. Делал я как-то всякие кривости красивости для одной игры, которую мы пилили с братом (был тут пост про игру Plague Castle от моего брата, привет @LeeJSee), а именно воду, о которой и пойдет речь далее. Я сам не люблю, когда новичок, только что научившийся что-то делать, сразу бежит всех учить, но меня попросили написать этот пост, и я не мог отказать, потому что сам долго пытался найти реализацию такого эффекта. Меня попросил написать пост об этом пикабушник, в комментарии, так что пост для него. Если кому-то еще пригодится, я буду только рад, а особенно буду рад, если вы, уважаемые пикабушники и пикабушницы, поможете доделать эту воду =)

Гуляя по просторам интернета, я наткнулся на очень красивую (на мой взгляд) реализацию воды в игре Kingdom:

Посмотрев на эту красоту, сразу же загорелся желанием сделать что-то подобное. Пару часов в гугле привели меня на какой-то сайт с шейдером (к сожалению не помню где я его скачал, извини автор, если это твой шейдер ). Открыв пример и посидев пару дней, пытаясь понять как это работает (я ведь уже говорил что я нуб?), я так ничего и не понял. Но протрезвев методом научного тыка мне удалось немного разобраться.

Итак, приступим!

Нам понадобится сам шейдер, две карты смещений, и небольшой скрипт, для создания анимации движения. (Ссылка на архив файлов тут)

Копируем все 4 файла в проект и создаем материал, назовем его например Water2D.

Далее нам нужно выбрать шейдер для нашего материала, он находится во вкладке Custom -> 2DWater:

Так же нам нужно настроить сами карты смещений reflection и normal_detail.

Необходимо выставить Wrap mode с Clamp на Repeat и подтвердить нажатием Apply (вторая карта настраивается аналогично):

Далее в Displacement Map 1 необходимо поставить reflections, а в Displacement Map 2 - normal_detail:

Теперь нам необходимо создать камеру и поставить её в то место, под которым будет наша вода. А так же создать Render Texture, в которую мы будем рендерить изображение с нашей вспомогательной камеры, назовем её WaterTexture:

Я настроил её так:

Выберем нашу вспомогательную камеру и в поле Target Texture выберем нашу WaterTexture:

Пропорции камеры изменятся согласно размеру нашей WaterTexture.

Теперь нам нужно создать объект, на который будет проецироваться изображение с нашей камеры. Этим объектом будет Plane (Нажимаем правой кнопкой в иерархии, выбираем Create-> 3D Object -> Plane) Он у нас повернут не так как нам надо:

Для того чтобы он отражал так как нам нужно, его надо перевернуть вверх ногами и по горизонтали, для этого в трансформе настроим его как на картинке (также нужно его растянуть, по Х, чтобы он был по ширине вспомогательной камеры), а заодно настроим и остальное:

Обязательно! Нужно выставить слой, я использую слой Water. По X и Z расположить так как вам необходимо, в Mesh Render выбрать наш материал Water2D.

В нашей вспомогательной камере необходимо отключить слой Water в Culling Mask:

Перейдем в к нашему материалу Water2D, в нем необходимо в поле Render Texture выбрать WaterTexture.

Почти всё! =) Осталось немного настроить материал!

Итак, быстренько пройдемся по материалу. Distortion Strenght 1 и 2 - позволяют нам сделать волны, чем больше число - тем сильнее искажение от волн. Color Tint задает цвет текстуры, им можно менять цвет воды, сделать её голубенькой или красной или какой хотите ещё. Foam Amount X и Y - это волны, тут лучше не переусердствовать, в моем проекте стоит число 0.00003. Foam Color - цвет волн, мне лучше всего подошли белые. Перспектива! Очень полезная вещь, чем ближе число к 1, тем сильнее растягивает нижний конец текстуры, и тем реалистичнее нам кажется движение воды.

Должно получиться что-то вроде этого:

Но вот незадача! Ничего не двигается, картинка статична. Исправим это!

Для этого нам необходимо на наш объект Plane, навесить скрипт WaveAnimation, настроить скорости течения и выбрать в Renderer наш Plane (да, можно получить ссылку на меш рендерер в коде, но мне было лень)).

Готово! Любуемся, подбираем значения в материале на глаз.

Должно получиться что-то вроде этого:

Получилось слишком длинно, но надеюсь очень подробно. Если есть вопросы или предложения по данной реализации, пишите в комменты. Если есть способ сделать тоже самое более простым способом - обязательно пишите в комменты!

пс: БМ ругался на какие-то посты про мошенников и поликлинику.

пс2: С первым постом меня! =)