Теория цвета в играх: практическое руководство

Теория цвета в разработке игр решает три практические задачи: сцена должна читаться, взгляд игрока должен попадать в нужное место, а настроение — соответствовать замыслу. Каждое правило, которое стоит применять, — ограниченная палитра, контраст по светлоте, пропорция 60-30-10, проверка в оттенках серого — служит одной из этих трёх задач. Если цветовое решение не помогает ни одной, это украшательство, а именно на украшательстве 2D-игры незаметно теряют ясность.

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

Три задачи — по одной#

1. Читаемость — это в первую очередь светлота, а не оттенок#

Игрок теряет объект из виду не потому, что цвета «не сочетаются», а потому, что у них одинаковая светлота. Тёмно-синий враг на тёмно-красном фоне незаметен в движении, хотя синий и красный — противоположности на цветовом круге. Основную работу по читаемости делает светлота, то есть близость цвета к чёрному или белому, а оттенок лишь добавляет вкуса.

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

2. Иерархия — один акцентный цвет для важного#

Редкое притягивает внимание. Когда на экране ярко всё, взгляду не за что зацепиться; когда ровно один цвет насыщенный, а остальные приглушены, взгляд падает туда первым. Это и есть рабочая версия правила 60-30-10: доминирующая палитра для мира, спокойные цвета для платформ и объектов и редкий акцент для интерактива. Предметы, рычаги и разрушаемые стены заслуживают акцента; декор — нет.

3. Настроение — это температура и насыщенность#

Тёплые цвета выходят вперёд, холодные уходят вглубь, приглушённые палитры звучат мрачно или ностальгически, а насыщенные — игриво и энергично. Не нужен мудборд с красивым названием — нужно рано принять одно решение: этот мир тёплый или холодный, громкий или тихий? Дальше каждое цветовое решение становится проще, потому что половина вариантов уже отброшена. Ужас с кислотно-розовым акцентом ломает настроение, даже если с читаемостью всё в порядке.

Минимум терминов#

В каждом редакторе цвет настраивают одни и те же три регулятора — это и есть словарь для всего остального:

Один навык отличает профессиональный пиксель-арт от любительского: затенение не одним цветом, а рядом оттенков — короткой цепочкой тонов для одного материала — со сдвигом оттенка внутри ряда: в тенях уходим в холод, в светах — в тёплое. Ряд от чёрного к белому формально правилен и выглядит мёртвым; тот же ряд, изгибающийся от холодно-серого к тёплому кремовому, выглядит как свет.

Выбор палитры: три подхода#

Для первой 2D-игры разумен средний путь — своя ограниченная палитра. Начните с готовой, а не с чистого листа: Lospec хранит тысячи палитр для пиксель-арта — от точных копий консольных до современных, каждую можно скачать в формате, который импортируют графические редакторы. Свои цвета подставите, когда определится настроение игры: править рабочую палитру куда проще, чем придумывать её с нуля в цейтноте.

Рабочий чек-лист#

Шесть шагов по порядку — и цвет перестаёт быть источником страха:

1. Сначала настроение. Одно предложение: тёплый или холодный мир, громкий или тихий. Запишите — это решает споры потом.
2. Стройте ряды, а не отдельные цвета. Четыре-пять рядов по три-пять тонов закрывают землю, объекты, опасности и интерфейс. Затеняйте со сдвигом оттенка, а не только по светлоте.
3. Распределяйте по 60-30-10. Доминирующая палитра мира, вторичные конструкции и один редкий акцент для интерактива.
4. Обесцветьте скриншот. Если важные для геймплея объекты не разделяются в сером, правьте светлоту, прежде чем трогать оттенок.
5. Симулируйте дальтонизм. Каждый двенадцатый мужчина и каждая двухсотая женщина видят цвета иначе — чаще всего не различают красный и зелёный. Инструменты разработчика в браузере, например в Chrome, умеют эмулировать это на живой сборке; отдельные приложения делают то же для скриншотов.
6. Проверьте контраст текста. Основной текст и подписи кнопок должны держать контраст не ниже 4,5:1 к фону — порог, который WCAG устанавливает для обычного текста. Игроки сидят при ярком свете, в полумраке и на маленьких экранах; контраст работает во всех трёх случаях.

Самые дорогие ошибки#

При чём здесь Egmatic#

Цветовые решения окупаются, только когда результат видно сразу, поэтому весь процесс упирается в цикл предпросмотра. Egmatic — это no-code-редактор 2D-игр с живым предпросмотром сцены: заменили цвет в палитре или перекрасили материал — и сцена обновилась на месте. Проверки из этого руководства — обесцвечивание, симуляция дальтонизма, замер контраста — выполняются в том же сеансе, без отдельного ритуала «экспортировал и посмотрел». Если вы определяете общее арт-направление, наши разборы пиксельной и векторной графики, основ композиции сцены и дизайна 2D-сцен закрывают решения до и после палитры.

Вывод#

Теория цвета оправдывает себя, когда на каждом экране отвечает на три вопроса: видит ли игрок главное, попадает ли взгляд туда, куда вы хотите, и совпадает ли настроение с замыслом? Ограничьте палитру, соблюдайте бюджет насыщенности, проверяйте сцену в сером и никогда не прячьте информацию только в цвет. Делайте так стабильно — и игра будет читаться у всех игроков, включая каждого двенадцатого мужчину, который видит цвета иначе, чем большинство.

Источники#

1. Национальный глазной институт (NIH) — Color Blindness (распространённость нарушений цветовосприятия: примерно 1 из 12 мужчин и 1 из 200 женщин; красно-зелёная форма — самая частая)
2. W3C Web Accessibility Initiative — Understanding Success Criterion 1.4.3 Contrast (Minimum) (коэффициент контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного)
3. Lospec — Palette List (бесплатная база палитр пиксель-арта: копии «железных» и авторские)