Как мне найти оптимальный набор цветов для 10 игроков?

293

Я хочу дать каждому из 10 игроков уникальный идентификационный цвет. Есть ли оптимальный набор цветов для этого? Как мне его создать?

Каждый набор, который я придумал, содержит слишком похожие цвета.

Обновление: меня спросили ниже, для чего это (честный вопрос). Теперь я могу сказать вам - Windwardopolis и цвета работали отлично.

Дэвид Тилен
источник
2
Красный, синий, зеленый, фиолетовый, коричневый, оранжевый, желтый, черный, белый и серый.
Луис Эстрада
12
какого цвета фон? или какие другие цвета у вас есть на сцене (например, для нейтральных объектов)?
Ali1S232
Это может быть немного более амбициозным, чем вы планировали, но как насчет предоставления игрокам всевозможных опций для настройки внешнего вида их персонажей, чтобы каждый из них выглядел уникальным из-за огромного количества возможных комбинаций?
Филипп
Задним взглядом, наверное, я бы точно спросил, что это ты красишь? Зоны на карте? Маркеры? Модели игроков в 3D-игре?
Тим Холт
4
Я вроде не ожидал, что на этот вопрос будут хорошие ответы, вау.
Джоккинг

Ответы:

337

Вы можете создать эквидистантные значения оттенка в пространстве HSV:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

попробуй 1

Однако возможно, что у вас не всегда будет 10 игроков. В этом случае палитра не будет очень эффективной, если вы повторно не сгенерируете другую палитру для другого числа игроков. Вместо этого некоторые авторы рекомендуют генерировать палитру с использованием золотого сечения, используя свойство, вытекающее из теоремы о равном распределении :

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

попробуй 2

Таким образом, даже если вы остановитесь на 3, 4 или 7 игроках, вы получите очень хороший спред.

Многие иррациональные числа подойдут, но золотое сечение будет работать лучше всего (это было доказано ).

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

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

попробуй 3

Обновление : вышеупомянутые результаты могут быть улучшены с помощью кривой коррекции для H(аналогичной гамма-кривой для компонентов RGB), которая учитывает зрительную систему человека. Это кривая коррекции оттенка, которую я рассчитал с использованием метрики CIEDE2000 :

кривая коррекции оттенка

Результаты для значений эквидистантного оттенка следующие:

попробуй 4

А для последовательностей генерации золотого сечения (с твиками и без них V):

попробуй 5 попробуй 6

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

Сэм Хоцевар
источник
11
Отличный ответ! Смещение значений насыщенности также может помочь, у вас нет коричневого здесь. В зависимости от стилей карты, белый или черный также могут быть возможными цветами.
Бобобобо
21
Это не принимает во внимание дальтонизм, я полагаю? Тем не менее, очень интересный ответ.
AlexanderBrevig
7
@AlexanderBrevig нет, к сожалению, нет; это также не учитывает тот факт, что люди, как полагают, не воспринимают контрасты оттенка равномерно. Я думаю о последнем и могу обновить свой ответ позже. Боюсь, проблема дальтонизма гораздо сложнее.
Сэм Хоцевар
25
Лучший ответ на дальтонизм это просто не полагаться на цвет. Каждый игрок в идеале должен иметь уникальный силуэт для любых актеров, которых он контролирует. И я имею в виду силуэт, а не какой-то символ; слишком много игр в жанре «Матч 3» делают это совершенно неправильно, и даже для тех, кто не страдает дальтонизмом, в них просто трудно играть и они слишком сильно напрягают глаза.
Шон Мидлдич
13
Пожалуйста, смотрите график восприятия человеческого цвета . Вы должны построить точки равноудаленные в этом 2D-пространстве. Построение эквидистант по оттенку означает неспособность приспособиться к человеческому восприятию даже в малейшей степени!
ErikE
172

8 цветов StarCraft :

Красный, синий, бирюзовый, фиолетовый, оранжевый, коричневый (зеленый на картах пустыни), белый (зеленый на картах льда), желтый

Аверс. Blizzard - гении пользовательского интерфейса, изучившие проблему.

Они оставили Грина в качестве замены Брауна на картах пустыни, так что технически там их 9.

В 12 Warcraft 3 цвета:

Красный, синий, бирюзовый, фиолетовый, желтый, оранжевый, зеленый, розовый, серый, светло-голубой, темно-зеленый, коричневый

Вот как это выглядит:

введите описание изображения здесь

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

bobobobo
источник
3
Если бы я мог выбрать 2 ответа, я бы выбрал и ваш. Спасибо
Дэвид Тилен
11
Быть тетрахроматом помогает различать цвета в реальном мире, потому что нормальные объекты имеют сложные спектры. Однако наличие тетрахромата не поможет в компьютерных играх, поскольку мониторы имеют только три цвета (красный, зеленый, синий). Чтобы помочь людям с мутацией в статье, нужен новый монитор с четырьмя цветами (красный, зеленый, синий, оранжевый). Ограниченное цветовое пространство RGB также означает, что все фото / видео должны выглядеть нереально для тетрахромата.
Джо
3
Люди с частичной дальтонизмом - еще одна проблема - на приведенном выше скриншоте W3 Розовый и Серый выглядят практически одинаково для меня, пока я не прочитаю что есть и снова посмотрю очень внимательно.
f055
20
отличные программисты воруют! Первое, на что я бы обратил внимание - это любая современная многопользовательская игра Blizzard.
Джефф Этвуд
4
На самом деле я частично дальтоник, поэтому трудно различить следующие цвета: оранжевый против зеленого, розовый против серого, темно-зеленый против коричневого
Архимед Траяно
75

Несколько человек здесь рекомендуют разделить цветовое пространство HSV на 10 равноудаленных позиций по оттенку. На мой взгляд, это на самом деле не очень хорошее решение. Человеческий глаз не воспринимает различия в цвете одинаково по всему спектру ВПГ. Например, то, что мы бы назвали оранжевым, занимает крошечный кусочек полосы, тогда как хороший 25% -ый кусок может быть квалифицирован как зеленый. Так что все начинается с плохой предпосылки. Посмотрите на первый ряд цветов в этом ответе . Две зелени почти неразличимы.

Помните, что ваши пользователи должны будут общаться и ссылаться на цвета. В свете этого тема Starcraft / Warcraft является отличным примером для подражания. Выбор на основе списка простых английских цветов Crayola совсем не плохая идея, потому что в итоге вы получите знакомые именованные цвета. Затем просто настройте эти цвета, чтобы они были смелыми, приглушенными, в зависимости от вашей эстетики, при условии, что они по-прежнему узнаваемы, например: красный, оранжевый, желтый, зеленый, синий, фиолетовый, коричневый, серый, белый, черный.

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

Crayola-фикация мира: как мы дали названия цветов, и это перепуталось с нашими мозгами на Эмпирическом рвении

Мэтт М.
источник
2
Это действительно имеет большой смысл; во время написания своего ответа я исследовал больше информации об относительном восприятии контрастом людей, но не нашел никаких цифр. Возможно, у вас есть ссылки?
Сэм Хоцевар
Вот интересная программа об отношениях между языком и цветом: dailymotion.com/video/…
Мэтт М.
Знаете ли вы нелинейную карту значения оттенка, которая принимает это во внимание?
Anony-Mousse
1
Привет @MattMontag, просто мысль: вместо того, чтобы ссылаться на «голосование с наивысшим рейтингом», которое может измениться (хотя, опять же, у него есть большое преимущество ...), стоит связать непосредственно с ответом на вопрос. Хороший ответ, +1
Platinum Azure
3
@ Anony-Mousse: лабораторное цветовое пространство предназначено для приблизительного человеческого зрения. Он стремится к единообразию восприятия. Возьмите эквидистантные цвета Lab и сопоставьте их с HSV, и вы увидите соответствие. Это было бы не только нелинейно в отношении оттенка.
Янус Троелсен
29

Я подумал, что нужно разбить этот подход к «символам» в отдельный ответ.

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

Кстати, именно это вы и пытаетесь сделать. Легко определить что-то на расстоянии.

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

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

введите описание изображения здесь

Модель легко узнаваема, а не только цвета. Хорошее текстурирование может сделать герб довольно большим на груди или плече каждого подразделения.

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

Вы также можете найти интересную идею японского Mon , которые очень просто выглядят как «логотипы».

японский пн

Теперь вы в основном рекламируете свои подразделения с помощью современных «брендов». StarCraft II сделал это немного с «наклейками»,

введите описание изображения здесь

но они едва видны в игре

введите описание изображения здесь

и не используются для идентификации единиц, так как цвета.

Для вдохновения я бы также посмотрел на флаги, особенно те, которые не используют трехполосный шаблон (они немного сбивают с толку). Рассмотреть возможность:

  • Швейцария: флаг Швейцарии
  • Somolia: флаг Сомолии
  • Южная Корея: флаг Южной Кореи

У всех них есть очень простые на вид, но отличительные флаги.

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

введите описание изображения здесь

 

bobobobo
источник
Разделение этого на два ответа сломало некоторые изображения.
Отмечает Томас
Гербы выглядят круто, но в реальном игровом процессе они слишком сложны, чтобы их разобрать. По крайней мере, без основного цвета фона.
Дэвид С. Бишоп
3
Вы знаете, это "Сомали", а не "Сомолия".
Панда Пижама
21

Зачем изобретать велосипед? Существует даже стандарт для набора из шестнадцати цветов, из которых вы можете выбрать десять. Это набор ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

введите описание изображения здесь

Цвет ANSI равномерно распределен по кубу RGB, который, я думаю, лучше подходит для этой проблемы, чем пространство HSV.

Взяв крайние значения куба RGB, вы получите знакомые цвета, такие как красный, синий, голубой и т. Д. После восьми угловых точек вы получите все промежуточные точки по краям.

RobAu
источник
2
фактически рассматривая дальтоников, это довольно близко к дальтоникам, если исключить некоторые цвета
Архимед Траяно
20

Сделать 10 цветов, которые можно выделить, будет очень сложно. Это довольно распространенная проблема при создании графиков или диаграмм для многих значений, поэтому они часто используют цвет и форму или комбинацию цветов и рисунков.

Если вам нужно отобразить маркеры, вы можете использовать 4 основных цвета (например, красный, синий, оранжевый, черный) и четыре основные формы (квадрат, круг, треугольник, ромб) и получить 16 очень легко различимых маркеров.

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

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

Также при выборе цвета учитывайте дальтонизм. Например, зеленый и красный могут быть не различимы. Посмотрите на http://jfly.iam.u-tokyo.ac.jp/color/#select для набора предлагаемых цветов, которые не будут проблемой для дальтоников. Дополнительным ресурсом является http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Тим Холт
источник
4
+1 за упоминание узоров и дальтонизма! Недостаточно разработчиков игр думают об этой проблеме.
Тревор Пауэлл
7

Даже если вы можете получить 10 уникальных цветов, легко различимых одним человеком, другому человеку все равно будет сложнее его различить.

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

Вы не должны ограничивать себя черной полосой. Рассмотрим следующее решение для разводки 25 пар (которые также могут быть полосами вместо пар): http://en.wikipedia.org/wiki/25-pair_color_code

Кристофер
источник
Говоря об отличительной особенности, я предлагаю вам попробовать игру Bomberman для 10 игроков для Sega Saturn еще в 1993 году i.imgur.com/mCVmk.png
Архимед Траяно
Отбросьте «I», так как часто трудно различить B <- I и I -> V. У вас все еще есть 12 цветовых идентификаторов.
ocodo 31.12.12
Вероятно, правда, что «я» трудно отличить. Тем не менее, я подозреваю, что можно было бы найти более светлое «B» и более темное «I», чтобы заставить его работать с 7 (14 с полосами). Главное о добавлении полос или другой отличительной черты, стоит, правда.
Кристофер
4

Просто хотел добавить ссылку на палитру Tableau-10, которая была разработана для высокой отличимости и которая описана в этой статье:

http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf

«Палитра Tableau-10 обеспечивает наилучшую цветопередачу и минимальное совпадение имен».

Илия
источник
3

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

На английском языке существует 11 основных цветов: белый, черный, красный, зеленый, желтый, синий, коричневый, фиолетовый, розовый, оранжевый и серый.

Мне не нравится идея выбирать оттенки вокруг колеса по тем же причинам, о которых говорил Мэтт Монтег


источник
+1 Это правда. Существует культурный уклон. Но есть также наука о цвете, и волновые гармоники нельзя отрицать, если сенсорное оборудование не неисправно (например, дальтонизм).
Инженер
Из газеты есть ссылка на аккуратное онлайн-приложение: kuler.adobe.com
bobobobo
3

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

Например, в Legend of the Five Rings используется невероятный способ различать «набор цветов».

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

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

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

Каждый клан будет иметь как основной цвет, так и набор вторичных цветов.

«Краб был в основном идентифицирован сине-серым, а также черным, красным и коричневым цветами».

Это красиво, потому что независимо от того, как выглядел человек (крупный, хрупкий, самурай, волшебник, крестьянин), вы всегда могли определить, из какого клана он был. Это был не просто «Красный» для Скорпиона, это был темный кроваво-красный и ЧЕРНЫЙ. При этом у Феникса были цвета солнечных лучей: красный, оранжевый, желтый.

Вы никогда не перепутаете Скорпиона с Фениксом, даже если их цвета были похожи, и они оба использовали много красного.


источник
3

Попробуйте этот цветовой миксер: w3schools.com HTML Color Mixer .

Вот что я бы сделал: выберите цвет для первого варианта. Затем выберите один для 2-го варианта, чтобы 2-й цвет находился в точном противоположном положении по отношению к первому. Таким образом, цвет в позиции: строка 1, ячейка 1 будет иметь противоположное значение: последняя строка, последняя ячейка.

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

обкрадывать
источник
2
Я попробовал это. Я обнаружил, что легче выбрать цвета, расположенные на расстоянии друг от друга, как это . Работает хорошо.
MichaelHouse
1

На этот вопрос есть много ответов, но я хотел бы больше затронуть вопрос доступности.

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

Насколько мне известно, единственным решением этой проблемы является VALUE CONTRAST . Некоторые люди могут видеть только черным по белому (источник: рассказ друга из художественного колледжа о том, что он посещает занятия по теории цвета, хотя вообще не может воспринимать любой цвет из-за неудачной лазерной операции на глазах). Некоторые люди плохо видят или частично / юридически слепы. Вы должны различных оттенков серого в качестве отправной точки , так что цвета , которые вы DO выбираете для просмотра и различны для КАЖДОГО .

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

процесс воссоздания этого изображения описан выше

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

Вы видите слабый зигзаг "чистого цвета"? Это естественная ценность цветов. Даже при использовании чистых цветов синий цвет темнее, а желтый светлее. Используйте эту информацию, чтобы выбрать цвета, которые соответствуют ценностным требованиям геймеров, которым дальтонизм и / или слабовидение, и эстетически приятны людям, которые могут ощутить всю полноту выбранных вами оттенков.

Надеюсь это поможет! : -)



PS Я хочу убедиться, что вы также видели этот комментарий!

Лучший ответ на дальтонизм это просто не полагаться на цвет. Каждый игрок в идеале должен иметь уникальный силуэт для любых актеров, которых он контролирует. И я имею в виду силуэт, а не какой-то символ; слишком много игр в жанре «Матч 3» делают это совершенно неправильно, и даже для тех, кто не страдает дальтонизмом, в них просто трудно играть и они слишком сильно напрягают глаза. - Шон Мидлдич 30 декабря '12 в 5:08

джодедия холмс
источник
0

Способ обеспечения оптимального набора с точки зрения различимых цветов для различного числа игроков (без учета дальтонизма) заключается в выборе цветовой модели HSL (Hue, Saturation and Lightness).

Вы выбираете постоянную яркость и насыщенность, в зависимости от вашего выбора. Затем вы меняете оттенок цвета 360 / playerCount, как в следующем псевдокоде:

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);
Марио Пистрич
источник
0

Я хочу представить альтернативную цветовую схему:

16 цветов

Это цвета RGB (в том же порядке) с предлагаемыми именами:

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

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

Методология: выбрал 12 цветов на насыщенной поверхности цветового куба (думаю, что я был бы счастлив с 12), следил за их разделением, а затем - используя инструмент для имитации дальтонизма - начал твикинг. После этого я добавил почти белое, почти черное и прокрался серым, потому что мог. Это дало мне 15 цветов. Я хотел 16 цветов, потому что это степень 2, и я думал, что это может упростить задачу для разработчиков. В конце концов я нашел способ добавить 16-й цвет, для этого мне пришлось переместить остальных. Затем ... проверьте еще раз с помощью инструмента моделирования дальтонизма, исправьте и повторите.

Вот различные случаи дальтонизма:

Обычный: 16 цветов

Протанопия: Протанопия

Дейтеранопия: дейтеранопия

Tritanopia: Tritanopia

Protanomaly: Protanomaly

Deuteranomaly: Deuteranomaly

Tritanomaly: Tritanomaly

цветовая слепота: ахроматопсия

Achromatomaly: Achromatomaly


Надо сказать, что после некоторой игры с имитатором дальтонизма контраст имеет первостепенное значение.

Рассмотрим, например, 5-й (светло-зеленый), 7-й (серый) и 9-й (светло-фиолетовый) цвета. Они выглядят похожими в некоторых случаях, в частности, в небольших размерах и разделены другим цветом. Однако разместите их рядом, и вы сможете отличить их друг от друга. Увеличьте площадь, покрытую цветом, и вы сможете легко отличить их друг от друга. Итак ... дизайн для дальтонизма - это не только выбор цветов.

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

Эти цвета были выбраны очень эмпирическим методом. Я заметил, что очень важно убедиться, что все они имеют разную яркость. Я также заметил, что большинство «цветов» появляются дважды (есть два зеленых, два пурпурных, два коричневых и т. Д.). Фактически, 4-й цвет (оливковый) - последний, который я добавил, и я решил, что это будет желтый цвет, потому что не было ничего похожего на желтый. Я полагаю, что это может стать основой для более системного выбора цветов.

В ретроспективе я, вероятно, должен сделать второй желтый цвет (оливковый) темнее и использовать это пятно яркости для розового цвета (см. 7-й цвет). Почему? Потому что это даст вам больше оттенков для игры. Эрн ... это достаточно хорошо, и получать все фотографии - это хлопотно.

Приложение : Что-то, что я не учел, это то, как ЖК-экран искажает цвета, если вы смотрите за пределы предпочтительного диапазона углов.

Theraot
источник