Diseña tus maquetas

Diseñar tus maquetas es el proceso de diseñar la estructura y el flujo de la información que deseas comunicar a través de la interfaz de usuario en varios flujos de trabajo. Este paso crítico del tutorial te permite iterar sobre la disposición de tus elementos de UI, descubrir puntos problemáticos y mejorar la experiencia del jugador antes de invertir tiempo y recursos en un diseño problemático que no funciona para tu juego.

Usando el juego de laser tag de muestra .rbxl como referencia, esta sección del currículo de interfaz de usuario te muestra cómo estructurar tus elementos de UI en la pantalla, incluyendo orientación sobre:

• Planificar una jerarquía visual para tu UI que guíe intuitivamente a los jugadores hacia las características e información que necesitan para tener éxito en tu juego.
• Bloquear elementos de UI con formas básicas para revisar la composición de tus elementos de UI junto con la UI y los controles táctiles básicos de Roblox.
• Desarrollar flujos de usuario para tener en cuenta las acciones necesarias que los jugadores deben realizar para alcanzar sus objetivos.

Después de completar esta sección, aprenderás cómo construir y configurar tu UI en Studio que respete tu estilo artístico y maquetas.

Planifica una jerarquía visual

Una jerarquía visual es una estructura organizativa que resalta los elementos de UI según su orden de importancia. Planificar una jerarquía visual para los diferentes flujos de trabajo en tu juego es importante porque prepara a los jugadores para tener éxito en el logro de sus objetivos, lo cual es especialmente necesario para la jugabilidad rápida de los juegos de disparos en primera persona en los que los objetivos cambian de momento a momento.

Las jerarquías visuales efectivas guían a los jugadores a través de las características y la información que necesitan para cumplir con los requisitos de tu jugabilidad, de acuerdo con dónde miran naturalmente en la pantalla para completar los flujos de trabajo. Por ejemplo, la jerarquía visual del juego de laser tag de muestra debe guiar a los jugadores a través de las siguientes categorías de elementos de UI mientras navegan por el mapa y etiquetan a los jugadores del equipo enemigo:

1. Información sobre el objetivo del juego.
2. Información sobre el bláster.
3. Información sobre el estado del jugador.

La ubicación que cada una de estas categorías tiene en la pantalla en el diseño final resalta su orden de importancia:

• La primera categoría está cerca de la parte superior porque contiene elementos de UI que tienen la mayor importancia sobre cómo ganar el juego.
• La segunda categoría ocupa la mayor parte del espacio de la pantalla cerca del centro porque actúa como el punto focal para atraer la atención de los jugadores hacia la acción en el espacio 3D, y tiene la mayor importancia para jugar el juego.
• La tercera categoría está cerca de los lados porque los jugadores pueden leer esta información periférica sin desviar su atención de la jugabilidad.

Para algunos géneros de juegos, solo necesitas mostrar una categoría de información a la vez porque es el único tipo de información que es importante para el jugador durante ese flujo de trabajo. Sin embargo, para los juegos de disparos en primera persona, los jugadores necesitan ver elementos de UI de múltiples categorías al mismo tiempo porque todos proporcionan información que el jugador necesita para tener éxito, como la puntuación de su equipo, el tiempo de recarga de su bláster y si han sido etiquetados fuera de una ronda.

Al planificar una jerarquía visual para los flujos de trabajo en tu propio juego, considera lo siguiente:

• Si agrupas elementos de UI de diferentes categorías juntos en toda la pantalla, los jugadores no sabrán dónde buscar lo que necesitan. Para ayudar a los jugadores a navegar por tu juego, agrupa los elementos de UI de la misma categoría juntos.
• Si tienes demasiadas categorías en la pantalla al mismo tiempo, los jugadores pueden no saber a qué información deben prestar atención. Para evitar abrumar a los jugadores con desorden, muestra los elementos de UI de manera contextual para diferentes flujos de trabajo.
• De manera similar, si hay demasiados elementos de UI por categoría, puede distraer a los jugadores de entender cómo completar una acción o proceso. Por esta razón, es importante usar tu estilo artístico para proporcionar énfasis visual para tus órdenes de interacción ideales.

Para una revisión completa de la jerarquía visual para el juego de laser tag de muestra, consulta la siguiente tabla:

Bloquear elementos de UI

Ahora que tienes una jerarquía visual en mente, puedes bloquear elementos individuales de UI utilizando formas básicas para revisar la composición de tu diseño de UI personalizado junto con la UI básica de Roblox en múltiples dispositivos. Este proceso te permite ver dónde necesitas modificar tu diseño para que sea efectivo en todos los tamaños de pantalla que los jugadores pueden usar para acceder a tu juego, como en móviles, tabletas, laptops y pantallas de TV.

Antes de comenzar, necesitas averiguar cuánto espacio en la pantalla está disponible para tus elementos de UI personalizados mientras consideras la UI básica de Roblox. Por ejemplo, de forma predeterminada, Roblox muestra los siguientes elementos de UI en cada juego:

• Una lista de jugadores dentro del juego.
• La barra de salud del personaje.
• La mochila del personaje.
• Una ventana de chat.
• Un botón de captura.
• Un menú emergente de emotes del personaje.

Puedes desactivar cualquiera de estos elementos que no cumplan con los requisitos de jugabilidad de tu propio juego para ahorrar espacio en la pantalla para tu UI personalizada. Por ejemplo, el juego de laser tag de muestra no requiere una mochila porque los jugadores solo tienen la capacidad de seleccionar un solo bláster. Sin embargo, si los jugadores pudieran seleccionar múltiples blásters a la vez, el juego podría desactivar esta UI básica para asegurar que siempre haya espacio para el selector de bláster cuando los jugadores reaparezcan, y luego proporcionar otra ubicación para seleccionar de tu inventario.

Además de la UI básica de Roblox, también debes considerar el espacio de pantalla necesario para los controles táctiles predeterminados de Roblox. Por ejemplo, cuando los jugadores acceden a tu juego utilizando un dispositivo móvil, un joystick virtual se muestra en la esquina inferior izquierda de la pantalla, y un botón de salto se muestra en la esquina inferior derecha de la pantalla. Esto asegura que los jugadores siempre puedan navegar por tu juego, incluso cuando no tienen acceso a un teclado o controlador.

Al tener en cuenta tanto los elementos de UI básicos de Roblox que son necesarios para la jugabilidad de tu juego, como la posibilidad de controles táctiles, puedes bloquear tus elementos de UI personalizados en un diseño que sea adaptable a través de dispositivos. Esto es importante porque significa que no necesitas mantener versiones separadas de tu UI a medida que actualizas tu juego.

Para demostrar este método, revisa las siguientes dos imágenes de cómo el juego de laser tag de muestra bloquea los elementos de UI personalizados tanto para dispositivos móviles como para PC. Ambas imágenes incluyen:

• Formas básicas para representar la UI personalizada porque permite que el diseño pase fácilmente por varias iteraciones antes de lograr el diseño final.
• Colores en escala de grises que permiten que el ojo siga la información sin la distracción de un entorno de fondo colorido.
• El estado abierto de la ventana de chat y la lista de jugadores activos y la ventana de chat para ver cuánto espacio ocupan en la pantalla.
• Espacio para controles móviles incluso si no son necesarios para dispositivos de PC.

Cuando diseñas tus maquetas de esta manera, pensando en cuántos elementos de UI pueden existir en la pantalla al mismo tiempo, estás preparándote para todos los posibles diseños según los dispositivos y flujos de trabajo de los jugadores.

Al bloquear elementos de UI para tus maquetas, considera lo siguiente:

• Dónde y cómo bloqueas tu UI puede impactar la composición de tus maquetas. Apunta a un equilibrio y simetría en la cantidad y tamaño de tus elementos de UI personalizados junto con la UI básica de Roblox.
• Interactuar con UI que están lejos de las esquinas inferiores de algunos dispositivos móviles y tabletas es incómodo o imposible. Coloca elementos interactivos en zonas de fácil acceso cerca de la posición de descanso natural para los pulgares.
• Cuando los jugadores navegan por tu entorno, el espacio 3D puede distraer de tu UI en pantalla. Prueba tus maquetas contra una variedad de posibles fondos para asegurarte de que tus elementos de UI en pantalla permanezcan claros y legibles.

Desarrollar flujos de usuario

Un flujo de usuario es una colección de caminos que los jugadores pueden tomar en un juego para completar una tarea, como elegir un arma, comprar un artículo o curar a un personaje. Los flujos de usuario generalmente comienzan donde esperas que los jugadores comiencen la tarea y terminan con la acción final o logro que los jugadores alcanzan al final de la tarea. Además, los flujos de usuario efectivos también tienen en cuenta caminos inusuales que los jugadores pueden querer tomar por su cuenta para alcanzar el mismo objetivo.

El siguiente diagrama de flujo muestra el flujo de usuario de un jugador que entra y juega el juego de laser tag de muestra. Cuando un jugador abre el juego, se une a un vestíbulo. Si la ronda aún no está en progreso, espera hasta que comience el bucle de la ronda, de lo contrario, se une a un equipo que actualmente está jugando el juego. Si la condición de finalización no se ha cumplido, como alcanzar un límite de tiempo o etiquetar a 10 jugadores por equipo, entonces los jugadores seleccionan su bláster y experimentan la jugabilidad principal de etiquetar o ser etiquetados por el equipo enemigo, equipando un nuevo bláster dentro de la arena, o reapareciendo después de ser etiquetados fuera. Una vez que los jugadores cumplen con la condición de finalización, terminan la ronda y se unen al vestíbulo nuevamente.

Es importante desarrollar flujos de usuario para todo lo que los jugadores pueden hacer en tu juego porque te permite evaluar dónde y cómo deseas que completen tareas, y anticipar dónde puedes aliviar los puntos problemáticos para cualquiera que siga su propio camino. Por ejemplo, si desarrollaras flujos de usuario adicionales para el juego de laser tag de muestra, ¿qué sucede cuando los jugadores:

• Abandonan una ronda antes de que se cumpla la condición de finalización?
• Salen del juego mientras se unen a un equipo?
• Reciben una llamada telefónica en medio de una ronda?
• Pierden su conexión a la ronda por menos de 15 segundos?

Al visualizar todas las acciones potenciales que los jugadores pueden tomar o escenarios que pueden suceder a los jugadores mientras completan tareas, puedes determinar mejor cómo la disposición de tus elementos de UI impacta negativamente su experiencia, y luego hacer ajustes antes de implementar tus diseños en Studio. Si las tareas se sienten intuitivas, no intrusivas y convenientes, es más probable que los jugadores pasen tiempo en tu juego y regresen en una fecha posterior.

Al desarrollar flujos de usuario para tu propio juego, considera lo siguiente:

• Lo que deseas que los jugadores hagan en tu juego y lo que ellos quieren hacer puede ser completamente diferente. Es mejor probar tus maquetas con múltiples tipos de jugadores para obtener una comprensión de los caminos que desean tomar para alcanzar sus objetivos.
• Los diagramas de flujo pueden volverse difíciles de leer e ineficaces si intentan capturar múltiples escenarios a la vez dentro del diagrama. Para centrar tu atención en cada tarea, limita los diagramas de flujo a una tarea principal a la vez.
• Los patrones de interacción varían dependiendo de si los jugadores están utilizando controles táctiles, gamepads o ratones de computadora para interactuar con tu juego. Si estás diseñando para múltiples dispositivos, desarrolla flujos de usuario únicos para cada dispositivo para que puedas identificar puntos problemáticos y simplificar flujos de trabajo.

Después de finalizar el diseño de tus maquetas, es hora de pasar a Studio y dar vida a tu UI.