He creado algunos juegos que he lanzado a la naturaleza. Hay un problema en particular con el que me encuentro una y otra vez, y ese es el tema de la interfaz / tema del juego.
¿Cómo puedes tomar decisiones coherentes y no arbitrarias sobre el aspecto y la interfaz de tu juego?
Por ejemplo, en la versión uno de mi juego basado en la química de Silverlight, tomé la decisión (¿mala?) De adoptar un aspecto natural y de estilo paisajístico, lo que resultó en esta interfaz de usuario:
Luego, en una iteración posterior, me volví más inteligente y elegí una apariencia más "mecánica" y sucia, lo que resultó en esto (interfaz de usuario final):
Definitivamente diré que mi gusto en la interfaz de usuario mejoró a través de la iteración. Pero fue el resultado de muchas decisiones inicialmente arbitrarias seguidas de muchos ajustes.
¿Hay una mejor manera de descubrir cómo crear un tema para tu juego?
Para dar un paralelismo en la escritura, cuando escribes una novela de fantasía / ciencia ficción, hay muchos elementos que debes describir. Si bien puedes inventar arbitrariamente objetos / criaturas / lugares / etc., obtienes un mundo mucho más consistente cuando te sientas durante unos minutos y diseñas el área, la región, el planeta o el universo. Entonces todo encaja muy bien, y se puede preguntarse "¿cómo este trabajo en este universo?
Editar: Parece que no lo expliqué bien. Permítanme simplificar la pregunta en extremo: cuando necesito diseñar una pantalla de título (con fondo, fuentes, botones de piel), ¿cómo decido cómo deben verse? Verde o azul? Grunge o no? Redondeado o plano? Serif o sans-serif?
Toma esa pregunta y explótala en tu juego como un todo. ¿Cómo te imaginas cómo deberían verse las cosas? ¿Qué proceso utilizas para hacerlos consistentes y no arbitrarios?
Mira las capturas de pantalla de nuevo. Me podría haber pegado a la hierba / cielo / rocas, pero el metal parecía más apropiado para la idea de las reacciones químicas y los átomos.
Respuestas:
Parece que tienes estilos conflictivos.
Echa un vistazo a estas interfaces de usuario de Peggle, Ultima Underworld, Diablo 3, Starcraft 2 y Gran Turismo 5.
Observe cómo cada interfaz de usuario es coherente dentro de su tema .
Peggle es como un pinball en todos sus elementos de la interfaz de usuario. Todo es un metro, una palanca, una boquilla, un trampolín.
Ultima Underworld tiene elementos de interfaz de usuario: hierro / acero, pociones, mochilas, mapas. Tiempo de Aventura.
Similar al inframundo de Ultima (de hecho, parece estar basado en UW)
Futurista, elegante, simple, mínimo (protoss)
Interior del coche
Como puede ver, su primer diseño es completamente inconsistente y no tiene tema. ¿Qué tiene que ver un campo abierto con tu juego? Lo mismo ocurre con el fondo de metal. Pruebe un banco de laboratorio para el tablero de juego y un fondo de laboratorio químico, con frascos y viales y guantes de goma y placas de Petri.
El Dr. Mario es básicamente un tema médico, de bacterias, virus y medicina.
Además, la interfaz de usuario debe tener gráficos de estilo similar a los elementos de juego . Las bolas de símbolo químico son redondas y de colores sólidos suavemente graduadas. Los fondos / tablero de juego que elijas tienen estilos de arte que son completamente diferentes a los elementos de juego. El campo es una fotografía vívida. El metal es muy detallado, mientras que las bolas químicas son lisas y relativamente sin detalles.
fuente
Una cosa que estoy empezando a darme cuenta es muy importante: el uso adecuado del contraste.
Mira esa primera foto. Es contrastante en todo el lugar! El cielo es brillante, el horizonte es oscuro, luego la hierba lejana es brillante, luego el fondo es oscuro. El fondo de mosaico varía enormemente entre extremadamente brillante y extremadamente oscuro. Todo esto no es información. Desorden visual. Las partes importantes reales (los círculos) quedan ahogadas por todos los cambios de contraste.
Ahora mira la segunda imagen. El fondo es oscuro y relativamente monótono. Hay un borde brillante alrededor de todo el campo de juego. El fondo de mosaico es mayormente oscuro, con delgadas líneas blancas en lugares importantes. De repente, puedes ver el rompecabezas, porque es una de las cosas más contrastantes.
Personalmente, todavía lo modificaría un poco, también haría que el campo de juego se viera más sucio. Esas líneas blancas para mostrar las divisiones de la cuadrícula son importantes, pero el cerebro humano es realmente bueno para extrapolar características rectas, y podrían ser mucho más oscuras e incluso divididas un poco.
La gran cosa que me saca de esa interfaz de usuario es la barra inferior. Es brillante, está en tu cara y es difícil leer el texto. Esa última parte es importante: la razón por la que es difícil leer el texto es, nuevamente, por el contraste. Leímos el texto parcialmente buscando el borde de las letras, pero desafortunadamente las letras se mezclan bien con partes de la barra inferior.
Lo que haría: volver a activar la barra inferior para que se ajuste bien al fondo principal, en términos de contraste. Haga un borde más claro entre él y el fondo principal para cruzar el hecho de que está separado. Luego, elimine la mayor parte del texto. "Diamante" puede convertirse en un diamante real. Los "átomos restantes" pueden convertirse en una vista pictórica de algunos átomos. El "tiempo restante" puede convertirse en un reloj de arena, un reloj de pulsera o un reloj de bolsillo. "Siguiente" puede desaparecer por completo: dices "tienes que jugar para ver qué átomos obtienes", pero esa es una mecánica de juego molesta. Conviértalo en una pila de átomos a la derecha, sentado en una cinta transportadora destartalada, con una pequeña pista visual de maquinaria para la cual está el siguiente en la línea. Tada! Rompecabezas mejorado, interfaz mejorada, todo parece menos desordenado.
Si no es necesario utilizar el texto, hay dos maneras de contraste de garantía. Primero, coloque su texto en algo que sea, en sí mismo, de bajo contraste. Si tiene un fondo oscuro, use texto claro. Si tiene un fondo claro, use texto oscuro. Si no puede hacer eso (y a veces simplemente no puede), no dude en usar el efecto de brillo exterior. Es una excelente manera de proporcionar el contraste de borde correcto sin importar en qué texto esté.
Cuando juegue con interfaces, abra un editor de imágenes, cámbielo a monocromo e intente dos cosas: desenfoque y detección de bordes. Cuando su interfaz de usuario está borrosa en monocromo, su visión debe gravitar automáticamente hacia las áreas importantes. Cuando está en detección de bordes, las áreas importantes deben resaltarse. Ejemplos:
Compara estos dos. La primera es casi ilegible, claro, algunas de las gemas son visibles, pero muchas de ellas no lo son. En el segundo, la cuadrícula se destaca instantáneamente, al igual que el cuadro de diálogo. Si bien solo hay una gema en el tablero, puedes ver instantáneamente dónde está.
El primero enfatiza masivamente los bordes de la cuadrícula. Algunas de las gemas son casi invisibles. El segundo enfatiza aquellos todavía (y más de lo que yo personalmente lo haría), pero también enfatiza el borde del rompecabezas con mucha fuerza, y la gema es significativamente más (aunque todavía no perfectamente) visible.
Este método no es una panacea de ninguna manera, pero puede ayudarlo a localizar cosas que deberían arreglarse. Solo tenga en cuenta que la visión humana se basa en los bordes y el contraste, y diseñe su interfaz de usuario para que los humanos puedan leerla.
fuente
(Voy a llegar a esto desde una perspectiva de teoría del color)
Creo que tu pregunta no se trata de cómo hacer una GUI atractiva, creo que realmente estás señalando es "¿Cómo elijo la experiencia que quiero ofrecer a mis jugadores?"
Y esto es principalmente una respuesta psicológica. Mencionas elegir el azul, el verde o el rojo, y no se trata realmente de los colores, sino de las emociones que los colores te hacen sentir cuando los ves.
Si tienes un juego que es rojo (el fondo es un chade de rojo, el jugador usa rojo o usa una pieza de juego roja, todas las fuentes son de un tono rojo legible) ¿cómo crees que te sentirías si jugaras esto? ¿juego? Y ni siquiera importa cuál sea el juego.
Te sientes como el juego era o muy enojado o algún tipo de día de San Valentín juego.
Aquí es donde entra el proceso de toma de decisiones. Si quieres que tu jugador sienta que está llevando a cabo un experimento científico en tu juego de química, tal vez hacer todo limpio y simple. Quizás algo que enfatice el color blanco.
Si quieres que tu jugador sienta que está haciendo algún tipo de trabajo de fabricación, donde siente que se está desanimando con la ciencia, entonces tal vez tu segunda imagen, o enfatizando los colores amarillo y negro juntos.
Si quieres que tu jugador se sienta como si estuviera en armonía con la química, como si fuera una extensión de sí mismo y de todos los seres vivos, entonces tu primera imagen podría ser un buen comienzo. Un énfasis en azules claros y verdes claros y tonos naturales como el marrón.
Realmente se reduce a la emoción cruda que esperas que sienta tu jugador.
fuente
Respuesta corta: no hay una respuesta corta.
El diseño es un campo enorme, con toneladas de libros, artículos y, como se mencionó, bibliotecas que cubren esta cuestión. Esquema de colores, fuentes, estilos, diseño, uso de espacios en blanco, espacios negativos, texturas, colores y sus significados en diferentes culturas, por qué comic sans es malo y nunca debe usarse. Hay cursos, libros, blogs, trabajos de investigación y sitios web dedicados a este tipo de cosas. No habrá una respuesta simple a esto, ya que la pregunta es mucho.
Dicho esto: Francamente, tu mejor opción es contratar a un diseñador para que te ayude. Si eso está fuera de su presupuesto, haga amigos con un diseñador para que lo ayude. Si eso no es posible, es posible que deba hacerlo solo por un tiempo.
Así que algunos consejos. Para esquemas de color, use algo como un Diseñador de esquemas de color . Dedique algo de tiempo a aprender cómo funcionan juntos los colores y, en general, trate de elegir solo unos pocos colores, no se exceda. El límite debe ser de unos 3 colores.
Para las fuentes, bueno, hay artículos completos y trabajos de investigación (aquí hay uno sobre serif vs sans serif ). Una vez más, la regla general es elegir, como máximo, dos fuentes. Una buena opción es elegir una fuente que no sea la predeterminada, pero que aún se vea bien. Si es una opción, Helvetica es bastante agradable, pero hay muchas otras buenas por ahí.
Por estilo y / o tema, este es aún más difícil de responder. Creo que el consejo más importante aquí es ser coherente con tu estilo . No intentes mezclar la naturaleza con la ciencia ficción o el arte lineal incompleto con sus modelos de polietileno en 3D. Esto significa principalmente encontrar un artista para hacer TODO el arte, o hacerlo usted mismo (en el caso de grandes empresas, esta es la razón por la cual hay un líder artístico). El tema es algo con lo que tendrá que jugar, a menos que tenga un tema establecido en mente antes de comenzar. Honestamente, puede cambiar a medida que pasa el tiempo y tienes más del juego hecho. Es muy probable que el tema cambie en el transcurso del desarrollo, de hecho.
En general, si bien el diseño se puede enseñar, algunas personas simplemente ... no son tan buenas (como la programación). Aquí es donde tener un amigo de diseño para ayudar es útil.
fuente
EDITADO:
Ok, he reescrito esto, ahora que entiendo mejor la pregunta.
La razón por la que me confundí es porque trataste de dar un paralelo por escrito, pero el ejemplo que tienes no es en absoluto paralelo. El diseño de una interfaz de usuario es una cuestión de presentación. El contenido de un libro trata sobre la sustancia real.
Entonces, mirando el diseño de la interfaz de usuario como una cuestión de presentación, debes pensar en lo que quieres presentar. Quiero decir, por supuesto que estás tratando de presentar tu juego, pero ¿qué más? ¿Quieres que parezca profesional? ¿Divertido? ¿Oscuro? ¿Ligero?
Como ejemplo, miraré las dos imágenes que publicaste y te contaré las impresiones que obtengo de ellas.
El primero, hay algunos aspectos obvios que podemos ver. Es más claro que la segunda imagen, por supuesto. Agregue eso al hecho de que eligió una imagen de un campo con profundidad (ya que el campo se aleja del espectador) y la sensación es mucho más expansiva. Se siente más libre, se siente más alegre.
Cuando miras la segunda imagen, por supuesto, es mucho más oscura. También tiene un fondo que es una imagen plana perpindicular a la línea de visión del espectador, eliminando la sensación de profundidad continua que tenía la primera imagen. Agregue que las únicas señales de profundidad real provienen del sombreado en el enchapado de diamante, y trae esa imagen de fondo muy cerca de la cámara. Todos estos se unen para darle una sensación mucho más oscura y más claustrofóbica.
Entonces, ¿qué puedes hacer con los dos temas? Bueno, el primer tema es algo que podría ser bueno si lo que quieres hacer es hacerlo sentir más informal. Da una especie de sentido de que lo que está haciendo el jugador en este momento con las piezas del juego no es todo lo que está sucediendo en el mundo. La segunda imagen le da más sentido de urgencia. El "mundo conocido" del juego es mucho más pequeño y pone más énfasis en lo que el jugador está haciendo.
fuente
¿Se trata realmente de 'hacerlo bonito'? Eso es algo subjetivo, y creo que la primera captura de pantalla se ve mejor que la segunda.
Elegir un tema no es realmente ciencia espacial: conoces el contenido clave o el propósito de tu juego, y puedes tenerlo en mente al elegir cualquier otro aspecto que vaya con él.
fuente
Algo que nadie más parece haber mencionado hasta ahora: pedirles a algunas de las personas que van a jugar el juego sus comentarios. Los diseñadores de UI pasan mucho tiempo mostrando diseños a los usuarios y descubriendo qué está bien o mal con ellos, ya sea que estén diseñando un juego, un procesador de textos o una plataforma de vuelo.
fuente