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

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

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

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

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

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

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

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

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

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

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

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

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

Термин	Что задаёт	Зачем вам
Оттенок	Цветовое семейство — красный, бирюзовый, янтарный	Настроение и различение материалов
Насыщенность	Насколько цвет чистый или разбавленный серым	Внимание: редкая насыщенность читается как важность
Светлота	Насколько цвет близок к чёрному или белому	Читаемость: контраст по светлоте разделяет объекты

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

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

Подход	В чём суть	Кому подходит	Ловушка
Фиксированная «консольная»	4–16 цветов, заданных старым железом: четыре оттенка Game Boy, 16 цветов PICO-8	Ретро-стилистика, быстрые решения	Стиль фиксируется, выйти из него позже трудно
Ограниченная своя	8–16 цветов, которые вы выбрали сами, собранные рядами	Большинство 2D-инди-игр	Нужна честная ревизия, когда появится освещение
Неограниченная	Цвет на каждый спрайт из всего пространства	Ручная живопись, градиенты	Ничто не удерживает оттенки в согласии, и сцены грязнят

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

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

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

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

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

Ошибка	Чем вредит	Как исправить
«Радужный» интерфейс	Кнопки соревнуются друг с другом, игрок не находит главное	Два цвета интерфейса плюс один акцент, не больше
Различие только по оттенку	Пары «красный против зелёного» исчезают для ~8% мужчин-игроков	К каждому цветовому сигналу добавьте форму, иконку или подпись
Всё насыщенное	Ничего не выглядит важным, глаз устаёт	Насыщенность — это бюджет, тратьте его на интерактив
Цвет как единственный статус	«Надето» или «отравлен», переданные только тоном, ломаются тихо	Дублируйте цвет обводкой, иконкой или текстом
Палитра раньше жанра	Милая пастель в хорроре воюет с дизайном	Сначала предложение о настроении, потом палитра

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

Цветовые решения окупаются, только когда результат видно сразу, — поэтому весь этот workflow живёт и умирает вместе с циклом предпросмотра. 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 (бесплатная база палитр пиксель-арта: копии «железных» и авторские)