Je veux donner à chacun des 10 joueurs une couleur d'identification unique. Existe-t-il un jeu de couleurs optimal pour cela? Comment en créer un?
Chaque jeu que j'ai créé contient des couleurs trop similaires.
Mise à jour: On m'a demandé ci-dessous à quoi cela sert (bonne question). Maintenant, je peux vous dire - Windwardopolis et les couleurs ont très bien fonctionné.
multiplayer
color
usability
David Thielen
la source
la source
Réponses:
Vous pouvez générer des valeurs de teinte équidistantes dans l'espace HSV:
Cependant, il est possible que vous n’ayez pas toujours 10 joueurs. Dans ce cas, la palette ne serait pas très efficace si vous ne re-génériez pas une palette différente pour un autre nombre de lecteurs. Certains auteurs recommandent plutôt de générer une palette utilisant le nombre d'or, en tirant parti d'une propriété résultant du théorème de l' équidistribution :
De cette façon, même si vous vous arrêtez à 3, 4 ou 7 joueurs, vous obtenez un très bon écart de teinte.
Beaucoup de nombres irrationnels feront l'affaire, mais le nombre d'or fonctionnera mieux (cela a été prouvé ).
Enfin, vous pouvez utiliser deux séquences de génération différentes pour peaufiner
S
ouV
aussi. Par exemple ( edit : j'ai ajouté l'sqrt
appel pour une meilleure équidistribution ):Mise à jour : les résultats ci-dessus peuvent être améliorés en utilisant une courbe de correction pour
H
(similaire à la courbe gamma pour les composants RVB) qui prend en compte le système visuel humain. Voici la courbe de correction de teinte calculée à l'aide de la métrique CIEDE2000 :Les résultats pour les valeurs de teinte équidistantes sont les suivants:
Et pour les séquences de génération du nombre d'or (avec et sans modifications
V
):Je publierai une approximation de la formule de courbe à utiliser dans les programmes dès que j'en aurai trouvé une assez bonne.
la source
Les 8 couleurs de StarCraft sont :
Obv. Blizzard sont des génies de l'assurance-chômage et ont étudié le problème.
Ils ont laissé Green en tant que swap-in pour Brown sur des cartes de désert, donc techniquement, il y en a 9 répertoriés.
Les 12 couleurs de Warcraft 3 sont:
Voici à quoi cela ressemble:
Comme vous pouvez le constater, ils sont assez distincts et faciles à distinguer. Le vert foncé est en fait facile à distinguer de la sarcelle, probablement parce que l’œil humain peut plus facilement distinguer les nuances de vert. Si vous êtes sûr que vos joueuses seront des tétrachromates féminines, vous pourrez probablement choisir n'importe quelle couleur.
la source
Quelques personnes recommandent de diviser l’espace colorimétrique HSV en 10 positions équidistantes de teinte. A mon avis, ce n'est en réalité pas une bonne solution. L'œil humain ne perçoit pas les différences de couleur de manière égale sur le spectre HSV. Par exemple, ce que nous appelons orange occupe une toute petite partie du groupe, alors qu’un bon pourcentage de 25% pourrait être qualifié de vert. Donc, cela commence par une mauvaise prémisse. Regardez la première rangée de couleurs dans cette réponse . Les deux verts sont presque indiscernables.
N'oubliez pas que vos utilisateurs devront communiquer et se référer aux couleurs. À la lumière de cela, le thème Starcraft / Warcraft est une excellente piste à suivre. Choisir sur une liste de couleurs anglaises Crayola unies n'est pas une mauvaise idée du tout, car vous allez vous retrouver avec des couleurs nommées. Ensuite, ajustez simplement ces couleurs pour qu'elles soient audacieuses, en sourdine, tout ce qui correspond à votre esthétique, tant qu'elles restent reconnaissables: rouge, orange, jaune, vert, bleu, violet, marron, gris, blanc et noir.
Edit: le lien entre la langue et la perception des couleurs est si intéressant que je voulais juste partager ce lien génial:
Le crayola-fication du monde: Comment nous avons donné des noms de couleurs, et ça a dérangé nos cerveaux sur le zèle empirique
la source
Je pensais que je devais casser cette approche de "symboles" dans une réponse séparée.
En fin de journée, je suppose que les gens avaient besoin de drapeaux et d'objets pour identifier facilement une armée éloignée, de sorte que vous sachiez s'il fallait attaquer ou défendre (en cas d'ennemi), ou être soulagé (pour les alliés).
Donc, incidemment, c'est exactement ce que vous essayez de faire. Identifiez facilement quelque chose au loin.
Vous pouvez le faire avec juste de la couleur, mais une meilleure façon de le faire est de la couleur et des symboles . L'utilisation d'une combinaison de couleurs et de symboles aidera les daltoniens à identifier les choses, comme beaucoup de personnes mentionnées ci-dessus.
Si les unités sont assez grandes, vous pouvez également utiliser 2 à 4 blasons de couleurs.
Le motif est facilement reconnaissable, pas seulement une couleur. Une bonne texture pourrait donner aux armoiries une assez grande largeur sur la poitrine ou le haut des bras de chaque unité.
Dans l'image ci-dessus, les casques de différentes unités ont une géométrie différente , ainsi que les insignes du bouclier.
Vous pouvez aussi trouver intéressant l’idée du japonais Mon , qui sont des "logos" très simples
Maintenant, vous marquez essentiellement vos unités avec des "marques" modernes. StarCraft II l'a fait un peu avec des "décalques",
mais ceux-ci sont à peine visibles dans le jeu
et ne sont pas utilisés pour identifier les unités autant que les couleurs.
Je chercherais aussi de l'inspiration dans les drapeaux, en particulier ceux qui n'utilisent pas de motif de marque à 3 bandes (ceux-ci deviennent un peu déroutants). Considérer:
Celles-ci ont toutes des drapeaux à la fois simples et distinctifs.
Consultez également les symboles utilisés par le gouvernement américain pour identifier le personnel de la défense. Il s’agit d’ images monochromes (pouvant être réalisées entièrement en noir et blanc). C’est donc une excellente solution qui n’exclut pas les daltoniens (utilisez essentiellement des symboles pour identifier les équipes, au lieu des couleurs).
la source
Pourquoi réinventer la roue? Il existe même une norme pour un ensemble de seize couleurs, parmi lesquelles vous pouvez en choisir dix. C'est l'ensemble ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors
Les couleurs ANSI sont également distribuées sur le cube RVB, ce qui, à mon avis, convient mieux à ce problème que l’espace HSV.
Lorsque vous prenez les extrêmes du cube RVB, vous obtenez des couleurs familières, telles que le rouge, le bleu, le cyan, etc. Après les huit angles, vous obtenez tous les points entre les deux, sur les bords.
la source
Faire 10 couleurs qui peuvent être distinguées va être très difficile. Il s'agit d'un problème assez courant dans la création de graphiques ou de graphiques pour de nombreuses valeurs. C'est pourquoi elles utilisent souvent des combinaisons de couleurs et de formes ou de couleurs et de motifs de hachage.
Si vous devez afficher des marqueurs, vous pouvez utiliser 4 couleurs de base (rouge, bleu, orange, noir, par exemple) et quatre formes de base (carré, cercle, triangle, diamant) et obtenir 16 marqueurs très faciles à distinguer.
Si vous coloriez des zones, utilisez la même idée, mais combinez les couleurs avec des motifs de hachures en lignes noires ou blanches au lieu de formes.
Une autre chose à considérer est de ne pas utiliser la couleur comme seul moyen de dire le côté. Passer la souris sur une zone peut la mettre en surbrillance et donner une info-bulle avec le nom du joueur explicitement indiqué. Ou peut-être une liste des 10 joueurs peut-elle être déplacée, et lorsqu'une personne survole son nom, toutes les zones de la carte de ce joueur sont affichées.
Aussi, lors du choix des couleurs, gardez à l'esprit le daltonisme. Vert et Rouge, par exemple, peuvent ne pas être distingués. Jetez un coup d’œil à http://jfly.iam.u-tokyo.ac.jp/color/#select pour un ensemble de couleurs suggérées qui ne sera pas un problème pour les daltoniens. Une autre ressource est http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest
la source
Même si vous pouvez obtenir 10 couleurs uniques qui peuvent être facilement distinguées par une personne, une autre personne peut tout de même trouver cet ensemble plus difficile à distinguer.
Pensez à vous limiter à un plus petit ensemble de couleurs et à ajouter une fonction distincte , telle qu'une bande noire . Pour le jeu de couleurs, il vaut probablement mieux ne pas s'éloigner de ce que la plupart des gens peuvent distinguer facilement: ROYGBIV . Une simple rayure / sans rayure sur ROYGBIV vous donne 14 pièces d'identification.
Vous n'êtes pas obligé de vous limiter à une bande noire, non plus. Considérez la solution suivante pour le câblage de 25 paires (qui pourraient tout aussi bien être des bandes que des paires): http://en.wikipedia.org/wiki/25-pair_color_code
la source
Je voulais juste ajouter une référence à la palette Tableau-10 qui a été développée pour être très distincte et qui est décrite dans cet article:
http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf
"La palette Tableau-10 offre la meilleure visibilité des couleurs et un chevauchement minimal des noms."
la source
Brent Berlin et Paul Kay ont montré que l’espace colorimétrique peut être divisé en quelques couleurs de base, mais cela dépend de votre culture car le fait de donner un nom à une couleur la rend plus reconnaissable.
En anglais, il existe 11 couleurs de base: blanc, noir, rouge, vert, jaune, bleu, brun, violet, rose, orange et gris.
Je n'aime pas l'idée de choisir des teintes autour d'une roue pour les mêmes raisons que Matt Montag
la source
Ne vous contentez pas des couleurs: créez des représentations visuelles qui enrichissent la tradition, le style artistique et la représentation des couleurs.
Par exemple, Legend of the Five Rings utilise un moyen incroyable pour différencier les "jeux de couleurs".
Un des plus beaux exemples à tirer de la leçon. Prenez note des centaines de façons dont ils différencient les clans. Ce ne sont pas seulement des couleurs primaires, mais aussi des couleurs secondaires et même tertiaires. Les couleurs sont même incluses dans la coiffure, le type d'usure, le type de personnage, un symbole, des drapeaux, des bannières, des mini-drapeaux à l'arrière, des personnalités.
La plus grande chose que je tirerais de cela est la combinaison de plusieurs couleurs. Ce n'est pas simple: bleu, rouge, violet, marron, jaune, vert, turquoise.
C'est une combinaison de deux couleurs, les deux étant très prononcées. Cela peut permettre un nombre important de joueurs supplémentaires.
Chaque clan aurait à la fois une couleur primaire et un ensemble de couleurs secondaires.
"Le crabe était principalement identifié avec les couleurs bleu-gris, plus noir, rouge et brun."
C'est beau, car peu importe à quoi la personne ressemblait (grande, frêle, samouraï, sorcier, paysan), on pouvait toujours dire de quel clan elle appartenait. Ce n'était pas juste "rouge" pour Scorpion, c'était un rouge sang foncé et NOIR. Tandis que Phoenix avait les couleurs éclatantes: rouge, orange, jaune.
Vous ne confondriez jamais un scorpion avec un phénix, même si leurs couleurs étaient similaires et qu'ils utilisaient beaucoup de rouge.
la source
Essayez ce mélangeur de couleurs: w3schools.com HTML Color Mixer .
Voici ce que je ferais: sélectionnez une couleur pour la première option. Ensuite, sélectionnez-en une pour la deuxième option afin que la deuxième couleur soit exactement à l'opposé de la première. Donc, la couleur à la position: rangée 1, cellule 1 aurait le contraire: dernière rangée, dernière cellule.
De cette façon, vous obtenez à chaque fois deux couleurs très différentes aux extrémités du mélange. Répétez cette opération 5 fois en sélectionnant toujours des couleurs très éloignées de la dernière sélection.
la source
Cette question a de nombreuses réponses, mais je voulais aborder davantage l'accessibilité.
Si j'étais dans votre scénario (besoin de choisir des couleurs pour une quantité d'éléments dans un jeu qui doivent être perçus comme distincts par tous les joueurs impliqués), ma principale préoccupation serait d'accommoder non seulement les joueurs daltoniens, mais aussi les joueurs basse vision.
La seule solution à ce problème, pour autant que je sache, est VALUE CONTRAST . Certaines personnes ne peuvent voir qu’en noir et blanc (source: un ami d’un collège d’art, qui raconte comment suivre un cours de théorie des couleurs sans être capable de percevoir une couleur du tout à cause d’une intervention chirurgicale au laser ratée). Certaines personnes sont malvoyantes ou partiellement / légalement aveugles. Vous avez besoin de nuances distinctes de gris comme point de départ pour que les couleurs que vous APPLIQUEZ choisissez sont visibles et distincts pour TOUT LE MONDE .
Pour réaliser tout cela et obtenir des couleurs joliment colorées, veuillez considérer cette image, obtenue en superposant un dégradé arc-en-ciel horizontal en mode de fusion des couleurs sur un dégradé vertical noir à blanc (essayez-le vous-même, éventuellement avec une couleur personnalisée.) gradient autre que l'arc-en-ciel!):
Du plus sombre au plus clair: noir, bleu, rouge, magenta, vert, cyan, jaune, blanc.
Pouvez-vous voir le zigzag faible de "couleur pure"? C’est la valeur naturelle des couleurs illustrées. Même en utilisant des couleurs pures, le bleu est le plus foncé et le jaune est le plus clair. Utilisez ces informations pour choisir des couleurs qui correspondent aux exigences de valeur pour les joueurs daltoniens et / ou malvoyants ET sont esthétiques pour ceux qui peuvent percevoir toute la majesté des teintes que vous avez sélectionnées.
J'espère que cela t'aides! : -)
PS je veux m'assurer que vous avez vu ce commentaire aussi!
la source
Un moyen d'assurer un jeu optimal de couleurs distinctes pour un nombre variable de joueurs (sans tenir compte du daltonisme) serait de choisir parmi le modèle de couleur HSL (Hue, Saturation and Lightness).
Vous choisissez une luminosité et une saturation constantes, selon votre choix. Ensuite, vous décalez la teinte de la couleur
360 / playerCount
, comme dans le pseudo-code suivant:la source
Je souhaite présenter un jeu de couleurs alternatif:
Ce sont les couleurs RVB (même ordre) avec les noms suggérés:
Remarque: je n'ai pas utilisé du noir et blanc pur, pensant qu'ils sont peut-être utilisés comme arrière-plan ou comme contours.
Métodologie: a sélectionné 12 couleurs sur la face saturée du cube de couleur (pensant que je serais heureux avec 12), en observant leur séparation, puis - en utilisant un outil de simulation du daltonisme - a commencé à jouer. Ensuite, j'ai ajouté un blanc presque, un noir, et un gris, parce que je le pouvais. Cela m'a donné 15 couleurs. Je voulais 16 couleurs parce que c'est une puissance de 2 et je pensais que cela pourrait faciliter les choses pour les développeurs. Finalement, j'ai trouvé un moyen d'ajouter une 16ème couleur, j'ai dû déplacer les autres pour cela. Ensuite ... vérifiez à nouveau avec l'outil de simulation de daltonisme, corrigez et répétez.
Voici les différents cas de daltonisme:
Ordinaire:
Protanopia:
Deutéranopie:
Tritanopia:
Protanomalie:
Deutéranomalie:
Tritanomalie:
Achromatopsie:
Achromatomalie:
Après avoir utilisé l'outil de simulation de daltonisme pendant un certain temps, je dois dire que le contraste est primordial.
Considérez, par exemple, les 5ème couleurs (vert clair), 7ème (gris) et 9ème (violet clair). Ils se ressemblent dans certains cas, en particulier de petite taille et séparés par une autre couleur. Cependant, placez-les côte à côte et vous pourrez les distinguer. Augmentez la surface couverte dans la couleur et vous pourrez les distinguer beaucoup plus facilement. Donc… concevoir pour le daltonisme ne consiste pas seulement à choisir des couleurs.
Sur cette note ... si vous choisissez une combinaison de deux couleurs au lieu d'une pour représenter une faction, cela ira un long chemin.
Ces couleurs ont été choisies selon une méthode très empirique. Je remarque qu’un point très important est de s’assurer qu’ils ont tous une luminosité différente. Je remarque également que la plupart des "couleurs" apparaissent deux fois (il y a deux verts, deux violets, deux bruns, etc.). En fait, la 4ème couleur (olive) est la dernière que j'ai ajoutée, et je décide que ce serait une couleur jaune, car il n'y avait rien comme le jaune. Je suppose que cela peut constituer la base d’une méthode plus systématique de sélection des couleurs.
En rétrospective, je devrais probablement assombrir la deuxième couleur jaune (olive) et utiliser ce point de luminosité pour un rose (voir 7ème couleur). Pourquoi? Parce que cela te donnerait plus de nuances pour jouer. Ern ... c'est assez bon, et obtenir toutes les photos est un problème.
Addendum : Quelque chose que je n’ai pas pris en compte est la façon dont les couleurs de l'écran LCD déforment si vous regardez hors de la plage d'angle préférée.
la source