JohneyD

JohneyD

пикабушник
я тут деградирую вообще-то
пол: мужской
поставил 597 плюсов и 1 минус
проголосовал за 0 редактирований
2696 рейтинг 9 подписчиков 594 комментария 1 пост 1 в "горячем"
118

2D Water в Unity 3D

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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


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

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

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

2D Water в Unity 3D Unity3d, Pixel art, Шейдеры, Gamedev, Длиннопост, Гифка

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

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

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

Показать полностью 12

Мы ищем frontend-разработчика

Мы ищем frontend-разработчика

Привет!)


Мы открываем новую вакансию на позицию frontend-разработчика!

Как и в прошлые разы для backend-разработчиков (раз, два), мы предлагаем небольшую игру, где вам необходимо при помощи знаний JS, CSS и HTML пройти ряд испытаний!


Зачем всё это?

Каждый день на Пикабу заходит 2,5 млн человек, появляется около 2500 постов и 95 000 комментариев. Наша цель – делать самое уютное и удобное сообщество. Мы хотим регулярно радовать пользователей новыми функциями, не задерживать обещанные обновления и вовремя отлавливать баги.


Что надо делать?

Например, реализовывать новые фичи (как эти) и улучшать инструменты для работы внутри Пикабу. Не бояться рутины и командной работы (по чатам!).


Вам необходимо знать современные JS, CSS и HTML, уметь писать быстрый и безопасный код ;) Хотя бы немножко знать о Less, Sass, webpack, gulp, npm, Web APIs, jsDoc, git и др.


Какие у вас условия?

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


Ну как, интересно? Тогда пробуйте ваши силы по ссылке :)

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

Удачи вам! ;)

Показать полностью
Отличная работа, все прочитано!