Летающие персонажи или почему нужна под ними тень?

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

Персонаж слева кажется парящим в пространстве потому как глазу сложно распознать поверхность. Даже если добавить текстуру травы или земли картина в целом не измениться. Мозг не распознает границу соприкосновения. Персонажи справа имеют тень, хоть и выполненную разными способами. Самый продвинутый вариант крайний справа имеет окружающее затенение + направленную тень.

Границу соприкосновения с поверхностью мозг понимает наблюдая затенение в месте соприкосновения. В мобильных устройствах разработчики стараются не использовать направленную тень (Хотя она решает проблему парящих обьектов просто своим наличием). Так как направленные тени потребляют значительное количество ресурсов. Так что поговорим о том, как просто сделать персонажей приземленными без направленной тени.

Как правило, в условиях экономии ресурсов разработчики решают разместить круглую плашку черного цвета с размытием к краю, что создать имитацию Ambient oclusion под объектами или персонажами.

Выглядит это примерно так:

Пример из игры Clash of Clans. Тени под персонажами выполнены через радиальный градиент и накладывающийся через альфу на подложку.

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

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

Тень имеет достаточно резкую границу у края тени. и вместо затенения мы имеем под персонажем "черный кружок" (Есть случаи когда стилизация допускает резкую границу, но это скорее исключение).
Тень Излишне темная и имеет сильный контраст по отношению ко всей картине в целом.
Тень черного цвета и при смешивании гасит цвета подложки.

В данном примере все 3 проблемы есть.

Решается все остаточно просто, но требует внимание разработчиков к данному вопросу.

Резкая граница

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

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

Главное отличие от направленной тени - очень плавные, практически незаметные края. Глаз их не осознает, но глядя на обьект мы понимаем, что он стоит на поверхности. Так и с персонажами, затенение под обьектом должно быть максимально плавным и без резких границ.

В примере затенение плавное и граница начала градиента сильно вынесена относительно центра персонажа. Плашка имеет размер в 2-3 раза больше радиуса тела персонажа.

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

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

Темная тень

Тень под обьектом, имеет прозрачность.

Итоговый результат не должен быть самым темным местом в кадре, как правило, это где-то 50% от самого светлого и самого темного. А если используется метод умножение, то следите , чтобы баланс темности все равно оставался в пределах 50%. Придеться текстуру тени делать светлее или прозрачнее.

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

Тень черного цвета

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

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

Тут важно, чтоб тот человек, который настраивает баланс, в идеале Артдиректор, понимал какой оттенок тени должен быть в текущем сетапе света и подложек.

А механизм примешивания цвета можно реализовать в зависимости от локации в которую попадает эта текстура.

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

@ArtsFactory телега

@ArtsFactory teletype

#solutions #cases #experience #guidance