_(6).png?table=block&id=b34e1989-fdbb-42f2-a106-fb42843258ec&cache=v2)
_(6).png?table=block&id=72ca2866-436e-4524-a6a5-049f3d17c876&cache=v2)
.png?table=block&id=3faa2421-019f-4e95-9b17-b2b1b6c31891&cache=v2)
¡Hola, tecnocoleguis! 👋
¿Qué tal? ¡Cuánto tiempo! ¡Feliz año nuevo! 🥳
Para celebrar el inicio de año🎄 he decidido empezar con este artículo: Crea la UI de tu juego, donde hablaremos sobre el proceso que podrías seguir a la hora de crear la interfaz de tu videojuego.
No te preocupes que veremos ejemplos gráficos😊
Queda aclarar que no hay un proceso específico, único y perfecto en esto. Tendemos a creer que ciertas cosas son de una única manera cuando en realidad son un popurrí de técnicas entremezcladas según nuestras preferencias.
Overview del proceso
Veamos primero un overview del proceso:
- Arquitectura. En este primer paso deberíamos saber cuál va a ser el esquema o estructura de nuestra interfaz. Es vital en este paso ser organizado/a para que la cosa no se líe y se te vaya al carajo.
- Sketch up. En este segundo paso empezamos a esbozar los primeros diseños y la distribución de los elementos en la interfaz.
- Wireframes. Un poco como el paso anterior pero en mejor calidad y ya creando propuestas sólidas sobre cómo nos gustaría que fuera la interfaz del juego.
- Prototipos. No te saltes este paso, hazme caso. Si no hay prototipo no sabes realmente cómo se comportará la interfaz.
- Mockups. En este paso se crean las propuestas finales a alta calidad de los diseños de la interfaz del juego.
- Presentación. Este paso es dependiendo de si sois un equipo o si vas en solitario. Se trata de realizar una presentación en power point o PDF sobre tus diseños y propuestas y explicar por qué has tomado x o y decisión sobre un diseño.
Arquitectura
En la imagen de arriba te muestro una arquitectura muy básica de un flujo de navegación.
El juego comienza desde la ventana de Menú principal, la cual va hacia la pantalla de juego.
Desde la pantalla de juego vemos 2 condiciones:
- si se pierde, el juego muestra la ventana de Game Over;
- si se gana, se muestra la ventana de Win.
Tanto la ventana de Game Over como la de Win llevan a la siguiente misma ventana, la ventana de los Rankings, y de esta, volvemos al menú principal.
Es una estructura donde intentamos dividir cuántas pantallas vamos a tener sin entrar en muchos detalles, simplemente cuál será el flujo de navegación entre pantallas.
Sketch up
No os voy a mentir, no dibujo muy bien como habréis podido comprobar en los esbozos de la imagen de aquí arriba. Menos mal que Dios te quita unos talentos y te da otros.
Por ejemplo, puedo mantener el equilibrio en el metro sin apoyarme en nada, sorprendente, ¿verdad?
Volviendo a lo que nos atañe.
Esta fase es para soltar toda tu creatividad. Elige una pantalla y ponte a dibujar. Por ejemplo en la imagen superior yo escogí la Pantalla de título y la Pantalla de juego.
Los elementos que aparecen en los dibujos: título, botones, opciones, avatar, timer… No vienen de la nada. Ya me gustaría ponerme a dibujar y visionar de forma mágica qué necesita mi videojuego.
Pero no. Todos los elementos que se colocan en la interfaz vienen de una investigación previa en conjunto con la UX y Game Design. Si vas por solitario, piensa en el diseño de tu juego, de sus mecánicas y del gameplay, ¿qué elementos tienen que destacar en la interfaz para que apoyen el gameplay de tu juego?
Por ejemplo. Si tienes muchas habilidades, investiga cómo otros videojuegos muestran las habilidades del personaje principal en pantalla y haz pruebas con tus propias ideas.
Create una especie de “board” con ejemplos que te gusten y en los que te vas a inspirar para crear tu interfaz, por ejemplo utilizando Pinterest, Figma o Adobe XD. Eso te servirá de documentación para no perder el rumbo cuando el proyecto se haga demasiado grande.
Esta fase es para equivocarse, eso ya te lo digo. Es para dibujar esa distribución que creías perfecta, ver esa idea en formato tangible y decir: oh, no. No, no, no. Y empezar de nuevo.
Así que prueba, itera hasta que creas que alguna idea cuaja y te convence. Te recomiendo hacer esta fase en papel + bolígrafo/lápiz porque vas a probar, borrar y rehacer mucho y es más sencillo en papel que en digital.
Cada vez que creas que hayas dado con una buena idea te aconsejo pedir feedback, ya sea a tu equipo o a gente que conozca de cerca tu proyecto.
Wireframes
Esta fase es la continuación de la siguiente. (Sí, ya, tiene sentido).
Una vez tengas tus esbozos hechos y creas que las ideas te convencen, deberías recrearlos en digital con placeholders mejores que garabatos.
No te voy a mentir. A veces una idea que me convencía en esbozo, me ha dejado de convencer la pasarla al digital y poner todo bien en su sitio. Gajes del oficio.
Para crear wireframes puedes utilizar Figma, Photopphea, Photoshop, Illustrator, Adobe XD, Canva…
Prototipar
En la imagen de arriba ves un ejemplo de cómo sería la interacción de la persona usuaria con el menú principal con intención de jugar. Por eso también se incluye la transición del menú a la pantalla de juego.
Un prototipo tiene que servirte para imaginarte la interacción del jugador o jugadora con el juego, con diferentes pantallas, con diferentes mecánicas o características, etc.
Yo soy una acérrima defensora de hacer prototipos antes de escribir ni una sola línea de código, antes de hacer ni un sólo diseño en alta calidad. Los prototipos nos sirven para saber si algo va a funcionar o va a ser un desastre.
Puedes hacer prototipos con programas como Figma, Photoshop, Illustrator y Adobe XD.
También puedes hacer prototipos de papel en la fase de sketch up, pero no son tan fiables como los que se crean en digital y no te permiten hacer transiciones ni animaciones simples como fundidos, highlights o parpadeos.
Mockups
La fase de mockups es la fase en la que las ideas ya te parecen lo bastante buenas y maduras como para crear diseños de cómo se vería realmente esa interfaz si estuviera ya integrada en tu videojuego.
Es para “hacerse una idea final” de cómo quedará eso cuando esté metido en el juego.
Suele servir para que, si tienes un equipo, la gente más técnica pueda ver, aprobar y validar que esas ideas funcionan y están listas para meterse en el juego. Si vas por solitario, pueden servirte de documentación.
Puedes crear mockups con Figma, Photoppea, Photoshop, Illustrator o Adobe XD.
Presentación
Los mockups creados en la fase anterior te sirven para la penúltima fase: la presentación.
De nuevo, si tienes un equipo la presentación te sirve para presentar la interfaz de la pantalla en la que estáis trabajando, justificar las decisiones de diseño que se han hecho (por ejemplo, por qué un elemento aparecerá destacado en la interfaz y otro no), y, además, como documentación técnica a la hora de implementar esta pantalla.
Incluye también los prototipos que hayas hecho y en qué te has basado a la hora de crear las pantallas, también qué uso u opciones tiene la pantalla (salir del juego, cambiar de nivel…), de forma opcional puedes añadir qué elementos tiene cada pantalla, algo que será muy útil para el equipo técnico.
Puedes crear tus presentaciones utilizando Figma, Adobe XD, Illustrator o Canva.
Implementación
La última fase, obviamente: meter la interfaz en el juego.
No puedo darte muchos detalles sobre esta fase porque se basa en el motor que utilices y en las habilidades técnicas que tengas.
Es posible que cuando metas la interfaz en el juego surjan algunos problemas:
- No encaja como se imaginaba. Si esto sucede, se debe iterar en el diseño y ver qué no se ha contemplado o qué cosas se han pasado por alto para que la interfaz no encaje como debería. Ejemplo: el estilo artístico que se eligió para ciertos elementos no encaja con el estilo general del juego.
- Las personas usuarias no la utilizan de forma cómoda o no la entienden. En este caso se debe intentar comprender por qué sucede y recolectar todo el feedback posible de las personas usuarias para entender la raíz del problema. Quizá no se entienda porque hay demasiados elementos en pantalla, demasiada información a la vez, o las acciones no se señalizan correctamente…
- Te des cuenta de que falta algo muy importante que debería estar presente en la UI. Como en el primer paso, toca iterar y ver dónde podrías encajar ese nuevo elemento.
Estos sólo son un par de ejemplos, pero en cualquier caso, cuando algo surge lo mejor es estudiar el problema e iterar el diseño para encontrar una solución óptima.
Últimos consejos
- No te cases con tus ideas. No te aferres a las ideas que te más te gustan aunque sepas que no son las más óptimas. A veces las mejores soluciones son las que menos nos convencen, pero las que mejor funcionan.
- Pide feedback. No irás a ningún sitio sin pedir feedback, tanto de gente que conozca tu proyecto como de gente que sea el target (jugador o jugadora) de juegos parecidos a tu proyecto.
- Elige un estilo y ve con él hasta el final. No puedes crear una pantalla en estilo cartoon y la sigueinte en estilo realista, por ponerte un ejemplo simple. Elige un estilo e intenta seguirlo en todo lo que hagas.
En conclusión
El arte de crear la interfaz de tu videojuego es complejo y muy personal. Tanto si eres un equipo como si vas por solitario vas a necesitar pedir mucho feedback, iterar mucho y equivocarte en exceso hasta encontrar una idea que te guste y funcione.
Es difícil pero no imposible. Y, si necesitas consejo sobre la UI de tu juego, ¡no dudes en escribirme! Intentaré ayudarte en lo que me sea posible.
Abrazo🤗
¡Suscríbete a mi newsletter!
Puedes suscribirte a mi newsletter para estar al día cuando suba nuevo contenido! 🌟✨
Vuelve a la página principal
¿Te gusta mi contenido?
Todo el contenido de los artículos y esta página ha sido creado por mí, no se permite copiar ni distribuir mi contenido sin mencionarme o sin enlazar mi artículo original, mucho menos atribuirse la autoría de mi contenido, gracias.