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

Разберем несколько типичных примеров работы с цветовым кодом.

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

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

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

Один из простых вариантов триггера — цвет. Разберём варианты его использования для подсказок игроку.

Как применяется цветокодировка

В общем случае цвета для кодирования информации можно использовать двумя способами:

  1. Покрасить два предмета в один цвет, чтобы показать, что они обладают одинаковым свойством;
  2. Окрасить два предмета в разные цвета, чтобы игрок легко отличил одно от другого.

На этом можно было бы закончить статью, но разберёмся подробнее.

Использование стандартных цветовых кодов

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

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

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

Но кроме цветовых кодов из реальной жизни, у игр есть и свои устоявшиеся (и не очень) паттерны.

Шкала здоровья игрока в играх часто окрашена в зелёный или красный цвет. Зеленый — цвет сочной молодой листвы, красный — крови, так что играм было логично взять цвета с привычными ассоциациями со здоровьем. Но для ориентирования игрока чаще полезнее не сама шкала, а предметы, восполняющие здоровье. Если все лечебные предметы красить в зелёный цвет, то игроку будет понятно, что они лечат. Можно в качестве «лечилок» поместить в игру простые зеленые квадраты — и будет понятно.

В Furi зелёные выстрелы лечат игрока в отличие от остальных, которые наносят урон.
В Furi зелёные выстрелы лечат игрока в отличие от остальных, которые наносят урон.

С маной, которая в играх обозначается синим цветом, таких понятных ассоциаций нет. Старые игры просто перенимали наработки друг друга, пока популярность Diablo окончательно не закрепила привычный нам цвет волшебства. В статье "Красная жизнь и синяя мана — откуда они взялись в играх?" можно почитать подробнее о том, как происходило становление и развитие интерфейсов для этих шкал.

В Diablo 2 Resurrected, ремастере старой игры, сферы всё ещё на своих местах. <a href="http://mmoboom.ru/games/diablo-3/49572-obzor-tehnicheskoy-alfa-versii-diablo-2-resurrected-vozvraschenie-korolya" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
В Diablo 2 Resurrected, ремастере старой игры, сферы всё ещё на своих местах. Источник

Цвет выносливости гораздо слабее устоялся в играх, чем пара «здоровье-мана», но привычно видеть её жёлтого или оранжевого цвета. Та же история со щитами или временными жизнями. Для их обозначения может применяться серый или голубой цвет, но возможен и жёлтый, как в Doom.

Деньги ассоциируются с золотом и соответственно золотым цветом, так что в играх им красят то, что используется в качестве валюты или связано как-то с деньгами. В Binding of Isaac враги жёлтого цвета, например, после смерти выбрасывают деньги.

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

Стихийные элементы и их цвета в игре Genshin Impact. Огонь, вода, ветер, электричество, дерево, лёд и гео.
Стихийные элементы и их цвета в игре Genshin Impact. Огонь, вода, ветер, электричество, дерево, лёд и гео.

Связка предмета с действием

На нос вагонетки игрок может применить парирование (удар, который дает заряды на супер атаку) в игре Cuphead
На нос вагонетки игрок может применить парирование (удар, который дает заряды на супер атаку) в игре Cuphead

В этом случае с помощью определённого цвета геймдизайнер подсказывает игроку, где можно использовать тот или иной навык. Для этого используется яркий цвет, который отличается от окружения. Например, в Cuphead можно использовать парирование только на предметах ярко-розового цвета — этот цвет не используется нигде больше. В Ori and the will of Wisps притягивание может быть использовано только на ярко-синем мху.

Светящийся голубой мох. Если присмотреться, слева можно увидеть Ори
Светящийся голубой мох. Если присмотреться, слева можно увидеть Ори

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

Связывание пары «ключ-замок»

Всеми любимые Heroes of Might and Magic III и их разноцветные палатки с ключниками
Всеми любимые Heroes of Might and Magic III и их разноцветные палатки с ключниками

Если в локации есть всего одна дверь, или ключ подойдёт к любой встреченной двери, то ориентироваться не очень сложно. Когда дверей становится 2 или больше, то легко запутаться, какой ключ от какой двери. Можно помечать и цифрами, и значками, но вспомнить, где находится зелёная дверь, ассоциативно будет проще, чем найти комнату 406.

Причем ключ и замок могут принимать самые разные формы. Например, в Heroes of Might And Magic III были ворота разных цветов. Чтобы пройти через них, игроку нужно было было сначала найти на карте палатку соответствующего цвета и зайти в неё. В этом случае палатка стала своеобразным «ключом».

Такое же, но немного другое

Иногда механики могут отличаться не очень значительно. В этом случае нелогично делать две разные формы, но надо всё-таки дать возможность игроку различить их. Перекрашивание — идеальный вариант.

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

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

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

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

Оповещение о разных состояниях

Разными цветами удобно отмечать смену состояний, особенно в играх, требующих быстрой реакции.

Например, в Celeste есть возможность рывка в воздухе. Её можно применять только один раз, а восстанавливается она, когда героиня приземляется на плоскую поверхность. В процессе игры появляются элементы, которые могут восстанавливать рывок прямо в воздухе, и добавляется возможность сделать два рывка подряд. Чтобы игроку было понятно, сколько рывков у него осталось, разработчик меняет цвет волос главной героини. Два рывка — волосы розовые, 1 рывок — волосы красные, рывков не осталось — волосы голубые.

В Rayman: Origin похожее происходит с местной валютой, люменами. Когда игрок подбирает королевского (большого) люмена, то на некоторое время остальные (маленькие) люмены выдают двойную награду — это показывается игроку с помощью перекрашивания люменов из жёлтого в красный цвет.

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

Враги с одинаковым свойством

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

Например, в The Binding of Isaac существуют чемпионы — это улучшенные версии врагов, обладающие дополнительным свойством. Все свойства цветов можно посмотреть здесь.

Зелёные враги оставляют за собой опасную слизь в The Binding of Isaac
Зелёные враги оставляют за собой опасную слизь в The Binding of Isaac

Ориентировка на местности

В Last Campfire трубы не целиком покрашены в разные цвета, а лишь имеют небольшие цветовые пятна, но всё равно становится проще определить, куда какая труба идёт
В Last Campfire трубы не целиком покрашены в разные цвета, а лишь имеют небольшие цветовые пятна, но всё равно становится проще определить, куда какая труба идёт

Чтобы направить игрока в интересные места, часто используются линии или, допустим, провода. Игрок не всегда замечает их, но неосознанно следует за линиями — скорее всего придёт туда, куда хочет разработчик, чем в какое-то другое место. Если же интересных мест больше одного, то можно запутаться в путях. Тут-то на помощь и придут цвета. Красишь в разные цвета указатели — и даже если не писать на них названия кабинетов, то у игрока возникнет ассоциация, куда они указывают.

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

Карта локаций из Hollow Knight, где виден основной цвет каждого участка игры
Карта локаций из Hollow Knight, где виден основной цвет каждого участка игры

Проблемы использования цветокодировки

В Death Stranding видно, как разные виды земли отмечаются не только цветом, но и разными формами
В Death Stranding видно, как разные виды земли отмечаются не только цветом, но и разными формами

Первая проблема чисто техническая. Цвета, используемые для кодирования, чаще всего яркие, чтобы игроку было проще выделить их из окружения. Не для всех стилистик это подходит. В нуарных или черезчур реалистичных играх ярко-розовые метки могут оказаться неуместными.

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

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

И последнее (но не по важности) — существование нарушений цветовосприятия у части игроков (дальтонизм и его вариации). Для таких людей обычная цветовая кодировка будет как минимум бессмысленна, а как максимум только запутает. Некоторые игры добавляют для таких людей дополнительную опцию в настройки, которая меняет цветовую схему или добавляет к цветам ещё и паттерны.

База цветокодировки. Как использовать цвет, чтобы помочь пользователю сориентироваться в игре?
Некоторые игры делают дополнительные настройки для людей с разными видами цветовой слепоты. Как минимум меняют цветовую схему, как это сделано в Psychonauts 2
Некоторые игры делают дополнительные настройки для людей с разными видами цветовой слепоты. Как минимум меняют цветовую схему, как это сделано в Psychonauts 2

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

Текст написала Алёна Киселёва, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

9999 показов
4.1K4.1K открытий
22 репоста
11 комментариев

В нуарных или черезчур реалистичных играх ярко-розовые метки могут оказаться неуместными.

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

Ответить

Единственного кого боятся демоны...

Ответить

Странно, что не привели пример с Doom Eternal, где цветовая кодировка оружейного колеса работает на игрока, помогая в принятии решений

Ответить

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

Ответить

После цветового кода на картинке я впал в безумие и наточил топор...

Ответить

Хранителя Леса уже того?

Ответить

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

Ответить