Quiero dar a cada uno de los 10 jugadores un color de identificación único. ¿Existe un conjunto óptimo de colores para esto? ¿Cómo creo uno?
Cada conjunto que he creado contiene colores que son muy similares.
Actualización: Me preguntaron a continuación para qué sirve (pregunta justa). Ahora puedo decirte: Windwardopolis y los colores funcionaron muy bien.
multiplayer
color
usability
David Thielen
fuente
fuente
Respuestas:
Puede generar valores de tono equidistantes en el espacio HSV:
Sin embargo, es posible que no siempre tengas 10 jugadores. En ese caso, la paleta no sería muy eficiente a menos que volviera a generar una paleta diferente para otro número de jugadores. En cambio, algunos autores recomiendan generar una paleta usando la proporción áurea, aprovechando una propiedad resultante del teorema de equidistribución :
De esa manera, incluso si te detienes en 3 o 4 o 7 jugadores, obtienes una muy buena distribución del tono.
Muchos números irracionales funcionarán, pero la proporción áurea funcionará mejor (se ha demostrado ).
Finalmente, puede usar dos secuencias generadoras diferentes para ajustar
S
oV
también. Por ejemplo ( editar : agregué lasqrt
llamada para una mejor equidistribución ):Actualización : los resultados anteriores se pueden mejorar mediante el uso de una curva de corrección para
H
(similar a la curva gamma para componentes RGB) que tiene en cuenta el sistema visual humano. Esta es la curva de corrección de tono que calculé usando la métrica CIEDE2000 :Los resultados para valores de tono equidistantes son los siguientes:
Y para las secuencias de generación de la proporción áurea (con y sin ajustes
V
):Publicaré una aproximación de la fórmula de la curva para su uso en programas tan pronto como encuentre una razonablemente buena.
fuente
Los 8 colores de StarCraft son :
Obv. Blizzard son genios de la IU y han estudiado el problema.
Dejaron a Green como un intercambio para Brown en los mapas del desierto, por lo que técnicamente hay 9 listados allí.
Los 12 colores de Warcraft 3 son:
Así es como se ve esto:
Como puede ver, son bastante distintos y fácilmente distinguibles. El verde oscuro es realmente fácil de distinguir del verde azulado, posiblemente porque el ojo humano puede distinguir más fácilmente los tonos de verde. Sin embargo, si estás seguro de que tus jugadores serán tetracromáticos femeninos , probablemente puedas elegir cualquier color.
fuente
Algunas personas aquí recomiendan dividir el espacio de color HSV en 10 posiciones equidistantes en el tono. En mi opinión, esta no es una buena solución. El ojo humano no percibe diferencias de color por igual en todo el espectro HSV. Por ejemplo, lo que llamaríamos naranja ocupa una pequeña porción de la banda, mientras que un buen 25% podría calificarse como verde. Entonces comienza con una mala premisa. Mire la primera fila de colores en esta respuesta . Los dos verdes son casi indistinguibles.
Recuerde que sus usuarios deberán comunicarse y referirse a los colores. A la luz de esto, el tema de Starcraft / Warcraft es una gran pista a seguir. Elegir en base a una lista de colores simples de Crayola en inglés no es una mala idea en absoluto, porque terminarás con colores con nombres familiares. Luego simplemente modifique esos colores para que sean audaces, apagados, lo que coincida con su estética, siempre que sean reconocibles como rojo, naranja, amarillo, verde, azul, púrpura, marrón, gris, blanco, negro.
Editar: la conexión entre el lenguaje y la percepción del color es tan interesante, solo quería compartir este increíble enlace:
La crayola ficación del mundo: cómo le dimos nombres a los colores, y se metió con nuestros cerebros en Empirical Zeal
fuente
Pensé que necesitaba dividir este enfoque de "símbolos" en una respuesta separada.
En el pasado, supongo que las personas necesitaban banderas y otras cosas para identificar fácilmente a un ejército a lo lejos, para que sepa si atacar o defender (en caso de enemigos), o sentirse aliviado (en el caso de los aliados).
Entonces, incidentalmente, eso es exactamente lo que estás tratando de hacer. Identifica fácilmente algo en la distancia.
Puede hacerlo con solo color, pero posiblemente una mejor manera de hacerlo es con color y símbolos . El uso de una combinación de colores y símbolos ayudará a las personas daltónicas a identificar cosas, como muchas personas mencionaron anteriormente.
Si las unidades son lo suficientemente grandes, también puedes usar 2-4 escudos de colores.
El patrón es fácilmente reconocible, no solo un color. Una buena textura podría marcar el escudo de armas bastante grande en el pecho o la parte superior del brazo de cada unidad.
En la imagen de arriba, los cascos para diferentes unidades tienen geometría diferente , así como la insignia del escudo.
También puede encontrar interesante la idea de Mon japonés , que son "logotipos" de aspecto muy simple.
Ahora básicamente está marcando sus unidades con "marcas" modernas. StarCraft II hizo esto un poco con "calcomanías",
pero estos son apenas visibles en el juego
y no se usan para identificar unidades tanto como los colores.
También buscaría inspiración en las banderas, especialmente las que no usan un patrón de marca de 3 rayas (se vuelven un poco confusas). Considerar:
Todos estos tienen algunas banderas muy simples, pero distintivas.
También revise los símbolos que usa el gobierno estadounidense para identificar al personal de defensa. Estas son imágenes monocromas (se pueden hacer completamente en blanco y negro), por lo que en realidad podría ser una gran solución que no excluirá a las personas daltónicas (básicamente use símbolos para identificar equipos, en lugar de colores)
fuente
¿Por qué reinventar la rueda? Incluso hay un estándar para un conjunto de dieciséis colores, de los cuales puede elegir diez. Este es el conjunto ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors
El color ANSI se distribuye por igual en el cubo RGB, que creo que es más adecuado para este problema que el espacio HSV.
Al tomar los extremos del cubo RGB, obtienes colores familiares, como rojo, azul, cian, etc. Después de los ocho puntos de esquina, obtienes todos los puntos intermedios, en los bordes.
fuente
Hacer 10 colores que se puedan distinguir será realmente difícil. Este es un problema bastante común en la creación de gráficos o tablas para muchos valores, por lo que a menudo usan color y forma o combinaciones de colores y patrones hash.
Si necesita mostrar marcadores, puede usar 4 colores básicos (rojo, azul, naranja, negro, por ejemplo) y cuatro formas básicas (cuadrado, círculo, triángulo, diamante) y obtener 16 marcadores muy fáciles de distinguir.
Si está coloreando áreas, use la misma idea pero combine colores con patrones de sombreado en líneas negras o blancas en lugar de formas.
Otra cosa a considerar es no usar el color como la única forma de distinguir el lado. Al pasar el mouse sobre un área podría resaltarlo y dar una sugerencia de herramienta con el nombre del jugador explícitamente indicado. O tal vez se pueda pasar el mouse por una lista de los 10 jugadores, y cuando uno se desplaza sobre el nombre de un jugador, se muestran todas las áreas en el mapa para ese jugador.
Además, al elegir colores, tenga en cuenta el daltonismo. El verde y el rojo, por ejemplo, pueden no ser distinguibles. Eche un vistazo a http://jfly.iam.u-tokyo.ac.jp/color/#select para ver un conjunto de colores sugeridos que no serán un problema para las personas daltónicas. Un recurso adicional es http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest
fuente
Incluso si puede obtener 10 colores únicos que pueden distinguirse fácilmente por una persona, a otra persona aún le puede resultar más difícil distinguir este conjunto.
Considere limitarse a un conjunto de colores más pequeño y agregar una característica distinguible , como una franja negra . Para el conjunto de colores, probablemente sea mejor no alejarse demasiado de lo que la mayoría de la gente puede distinguir fácilmente: ROYGBIV . Una simple raya / sin raya en ROYGBIV te da 14 piezas de juego de identificación.
Tampoco tiene que limitarse a una franja negra. Considere la siguiente solución para conectar 25 pares (que podrían ser fácilmente rayas en lugar de pares): http://en.wikipedia.org/wiki/25-pair_color_code
fuente
Solo quería agregar una referencia a la paleta Tableau-10 que se desarrolló para un alto carácter distintivo y que se describe en este documento:
http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf
"La paleta Tableau-10 proporciona la mejor notoriedad de color y una superposición mínima de nombres".
fuente
Brent Berlin y Paul Kay demostraron que el espacio de color se puede dividir en unos pocos colores básicos, pero depende de su cultura, ya que dar un nombre a un color lo hace más distinguible.
En inglés, hay 11 colores básicos: blanco, negro, rojo, verde, amarillo, azul, marrón, morado, rosa, naranja y gris.
No me gusta la idea de elegir tonos alrededor de una rueda por las mismas razones que Matt Montag declaró
fuente
Haga más que solo colores: tenga representaciones visuales que se sumen a la tradición, el estilo artístico y la representación del color.
Por ejemplo, Legend of the Five Rings utiliza una forma increíble de diferenciar entre "conjunto de colores".
Uno de los ejemplos más bellos para tomar una lección. Tome nota de las cientos de formas en que diferencian entre los clanes. No se trata solo de colores primarios, sino también de colores secundarios e incluso terciarios. Los colores incluso se incluyen en el peinado, el tipo de ropa, el tipo de personaje, un símbolo adjunto, banderas, pancartas, mini-banderas en la parte posterior, personalidades.
Lo más importante que tomaría de esto es la combinación de múltiples colores. No es simple: azul, rojo, morado, marrón, amarillo, verde, verde azulado.
Es una combinación de dos colores, siendo ambos muy pronunciados. Esto puede permitir una cantidad significativa de número adicional de jugadores.
Cada clan tendría un color primario y un conjunto de colores secundarios.
"El Cangrejo se identificó principalmente con los colores azul grisáceo, más negro, rojo y marrón".
Es hermoso, porque sin importar el aspecto de la persona (grande, frágil, samurai, mago, campesino) siempre se podía saber de qué clan eran. No era solo "Rojo" para Scorpion, era un rojo sangre oscuro y NEGRO. Mientras que Phoenix tenía colores de rayos de sol: rojo, naranja, amarillo.
Nunca confundirías un Escorpión con un Fénix, incluso si sus colores fueran similares y ambos usaran mucho rojo.
fuente
Pruebe este mezclador de colores: w3schools.com HTML Color Mixer .
Esto es lo que haría: seleccionar un color para la primera opción. Luego, seleccione uno para la segunda opción, de modo que el segundo color esté exactamente en la posición opuesta con respecto al primero. Entonces, el color en la posición: Fila 1, Celda 1 tendría lo contrario: Última fila, Última celda.
De esa manera, terminas con 2 colores muy diferentes en las extremidades de la mezcla cada vez. Repita esto 5 veces, siempre seleccionando colores que estén muy separados de la última selección.
fuente
Esta pregunta tiene muchas respuestas, pero quería tocar más sobre accesibilidad.
Si estuviera en su escenario (necesitando elegir colores para una cantidad de cosas en un juego que deben ser percibidas como distintas por todos los jugadores involucrados), mi principal preocupación sería acomodar no solo a los jugadores daltónicos, sino también a los jugadores que tienen visión baja.
La única solución a este problema, que yo sepa, es el CONTRASTE DE VALOR . Algunas personas solo pueden ver en blanco y negro (fuente: un amigo de las historias de la universidad de arte sobre tomar una clase de teoría del color sin poder percibir ningún color debido a una cirugía ocular con láser fallida). Algunas personas tienen baja visión o ceguera parcial / legal. Es necesario distintos tonos de gris como punto de partida para que los colores que HACES elegir son visibles y distinta para TODOS .
Para lograr todo esto y tener colores que se vean bien, considere esta imagen, obtenida colocando un degradado horizontal del arco iris en modo de fusión de color encima de un degradado vertical de negro a blanco (pruébelo usted mismo, tal vez con un color personalizado gradiente que no sea arcoiris!):
Del más oscuro al más claro: negro, azul, rojo, magenta, verde, cian, amarillo, blanco.
¿Puedes ver el débil zigzag de "color puro"? ESO es el valor natural de los colores ilustrados. Incluso cuando se usan colores puros, el azul es más oscuro y el amarillo es más claro. Utilice esta información para elegir colores que se ajusten a los requisitos de valor para los jugadores con daltonismo y / o baja visión Y que sean estéticamente agradables para las personas que pueden percibir la majestuosidad de sus tonos seleccionados.
¡Espero que esto ayude! : -)
PD: ¡Quiero asegurarme de que también hayas visto este comentario!
fuente
Una forma de garantizar el conjunto óptimo en términos de colores distinguibles para un número variable de jugadores (sin tener en cuenta el daltonismo) sería elegir entre el modelo de color HSL (Hue, Saturation and Lightness).
Elige una ligereza y saturación constantes, dependiendo de su elección. Luego, cambia el tono del color
360 / playerCount
, como en el siguiente pseudocódigo:fuente
Quiero presentar un esquema de color alternativo:
Estos son los colores RGB (mismo orden) con nombres sugeridos:
Nota: No utilicé blanco y negro puro, pensando que tal vez se usan como fondo o contornos.
Metodología: seleccionó 12 colores en la cara saturada del cubo de colores (pensando que estaría contento con 12), analizó su separación y luego, usando una herramienta para simular el daltonismo, comenzó a modificar. Después, agregué un casi blanco, casi negro, y escabullí un gris, porque pude. Eso me dio 15 colores. Quería 16 colores porque es una potencia de 2, y pensé que podría facilitar las cosas para los desarrolladores. Eventualmente encontré una manera de agregar un color 16, tuve que mover a los demás para eso. Luego ... verifique nuevamente con la herramienta de simulación de daltonismo, corrija y repita.
Estos son los diferentes casos de daltonismo:
Normal:
Protanopia
Deuteranopia
Tritanopia:
Protanomalía
Deuteranomalía:
Tritanomalía:
Acromatopsia:
Acromatomalía:
Después de jugar con la herramienta de simulación de daltonismo por un tiempo, debo decir que el contraste es primordial.
Considere, por ejemplo, los colores quinto (verde claro), séptimo (gris) y noveno (púrpura claro). Se ven similares en algunos casos, en particular en tamaño pequeño y separados por otro color. Sin embargo, colóquelos uno al lado del otro y podrá distinguirlos. Aumente el área cubierta en el color y podrá distinguirlos mucho más fácilmente. Entonces ... diseñar para daltonismo no es solo elegir colores.
En esa nota ... si eliges una combinación de dos colores en lugar de uno para representar una facción, esto es muy útil.
Estos colores fueron seleccionados por un método muy empírico. Noté que un punto muy importante es asegurarse de que todos tengan un brillo diferente. También noto que la mayoría de los "colores" aparecen dos veces (hay dos verdes, dos púrpuras, dos marrones, etc.). De hecho, el cuarto color (oliva) es el último que agregué, y decido que sería un color amarillo, porque no había nada como el amarillo. Supongo que puede ser la base de una forma más sistemática de elegir colores.
En retrospectiva, probablemente debería oscurecer el segundo color amarillo (oliva) y usar ese punto de brillo para un rosa (ver séptimo color). ¿Por qué? Porque te daría más sombras para jugar. Ern ... esto es lo suficientemente bueno, y obtener todas las fotos es una molestia.
Anexo : Algo que no consideré es cómo los colores de la pantalla LCD alteran los colores si se mira fuera del rango de ángulo preferido.
fuente