#3 Как сделать красивую воду для мобильной игры?

Я всегда говорил, что разработчики игр одни из самый искусных обманщиков. Вам кажется, что вы видите воду, огонь или что-то еще, но то, что там на самом деле вызывает дикое удивление и порой даже смех. Недавно я общался с Matthew Bell — техническим художником из Ubisoft, он рассказывал как он работал над морской водой в Assassin Creed. Меня это подтолкнуло поделиться своим опытом разработки воды. Поскольку у нас игра мобильная, в Фентези мире, стояла следующая задача : сделать водную гладь, максимально простую, чтобы она быстро отрисовывалась, но в то же время красивую и подходящую под наш стиль. Я должен сразу предупредить, что это статья не техническая. Она рассчитана на геймеров, которым интересно узнать как все устроено изнутри.

1) Предположим, что у вас уже есть плоскость, на которой мы будем рисовать воду. Начать следует с волн, поэтому возьмем изображение, которое будет их симулировать:

normal

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

Water_1

Я еще подкрасил воду в голубой цвет. Если этого не сделать, то картинка будет черно-белой.

2) Теперь нужно заставить волны равномерно двигаться в каком-нибудь направлении. Для этого мы просто будем смещать картинку со временем.

Одних таких волн в любом случае недостаточно, добавим еще таких же волн, которые будут в два раза мельче и будут двигаться перпендикулярно первым. В качестве результата в каждой точке будем брать сумму двух волн. Получится примерно следующая картинка:

Water_2

3) Мы все ближе к цели. Возможно на картинке не очень похоже на воду, но анимация уже немного напоминает ее. Потерпите, в конце статьи будет видео.

Какая вода без бликов? Поэтому давайте добавим их. Нам потребуется текстура шума, например вот эта:

Noise

Можете использовать любой цвет на ней, лично я брал только красный. Эту текстуру шума мы точно так же должны анимировать, как и волны. Т.е. будет две текстуры, которые движутся перпендикулярно и складываются. Блик будет появляться только там, где суммарный цвет достигает определенного значения, все остальное обрезается. Этим значением вы сможете регулировать количество бликов и их размер.

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

Water_3

4) Теперь давайте добавим отражение облаков. Облаков на самом деле никаких нет, но игрок же об этом не знает. Возьмите какую нибудь картинку, которая будет эмулировать облака, например такую:

NoiseClouds64

Отрисовав отражение облаков в нашей воде, получим следующее:

Water_4

5) Осталось только добавить воде прозрачности, и она в то же время позволить убрать резкие границы с землей.

Water_5

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

Видео демонстрация всех шагов:

Оставайтесь с нами!

Подписываемся на блог

UnnyWorld
Twitter