Цветовые палитры + шейдер = круто

В моей игре Fox Tower (про разработку которой я ещё когда-нибудь напишу здесь) много цветовых палитр, около 5–6! Некоторые похожие, некоторые совсем разные. И так как я захотел делать смены палитры на одном и том же экране, стало понятно: понадобятся шейдеры. Статья — про мои удивительные открытия, связанные с его внедрением.

переход между 1 и 2 уровнями в итоговой игре

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

4 палитры из основной части игры (1 из них уже не используется)

Не буду вдаваться в технические подробности того, как работает шейдер, но “на пальцах” всё довольно прозаично: для каждого пикселя на экране берётся его цвет, из цвета извлекается его “серость” (градация Brightness, по шкале от чёрного до белого), дальше мы ищем “самый похожий по серости цвет” в нашей палитре, и заменяем на этот цвет!

даже если цветов больше чем надо, можно свести к цветам из нашей палитры (справа)

Разумеется, волшебный трюк сработает не с каждой палитрой. Все палитры следуют довольно жёстким правилам: есть ровно один цвет с “яркостью” 100, один цвет с 90, один с 80, и так далее до чёрного цвета, у которого яркость 0. Есть свои исключения в некоторых палитрах, но общее правило, что не должно быть цветов с похожей яркостью, иначе один из них не будет использоваться.

Из плюсов такого подхода: если какой-то цвет не понравился, можно в любой момент (хоть перед самым релизом) заменить его на другой с такой же яркостью, и при этом не надо перерисовывать никакие фоны/окружение/персонажа. Как приятный бонус — все цветовые гаммы подходят для всех дальтоников:

Но, как оказалось, я искал серебро, а нашёл золото: этот шейдер раз за разом приносил новые открытия и применения, хотя зачастую я даже не делал дополнительных телодвижений!

Везде, где каким-то образом была задействована прозрачность, шейдер играл разными красками. В прямом смысле! Когда прозрачность цвета сменяется с 1 до 0, то его “яркость” точно так же падает с изначального значения до 0. А если при этом поверх игры всё ещё наложен шейдер…

Получается, например, такая красота!

Переходы между экранами и менюшками стали как минимум интересными — а это всего лишь стандартное затемнение + цветовой шейдер!

Частицы пыли, разлетающиеся из-под ног лисички, тоже меняют свою прозрачность от 1 до 0, “пропадая”. Как это выглядит с шейдером?

очень стильно!

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

Экран “Game Over”, помимо цветового шейдера из статьи, использует ещё один самописный шейдер для пиксельного punchhole.
Экран “Game Over”, помимо цветового шейдера из статьи, использует ещё один самописный шейдер для пиксельного punchhole.

Поиграть в Fox Tower и посмотреть на остальные применения этого шейдера (и просто на игру!) можно тут:

Спасибо, что дочитали! 🦊

3838
6 комментариев

статья про то как в рпг макере палитры менять? ну спасибо как я жил без этой инфы

1

Статья про то, как я использовал самописный шейдер-с-локом-палитры-на-grayscale-шкалу и какие прикольные штуки в результате этого получил.
Это Godot, кстати.

8

Комментарий недоступен

2

При разработки этой игры одно из условий, которое поставил себе — закончить за два месяца. Быстро не получилось сделать красиво, чтобы цвета не мерцали, поэтому оставил мгновенный переход и пошёл заниматься другим.

Но в идеале конечно хотелось бы что-то покрасивее сделать, особенно если это был бы полноценный проект на продажу, а не бесплатная игра в браузере :)

3