Una barra de puntuación es un elemento de la interfaz de usuario que muestra información del jugador que es importante para la jugabilidad de tu experiencia, como sus estadísticas de nivel, conteo de monedas o artículos de potenciación en su inventario. Al mostrar las barras de puntuación directamente en la pantalla del jugador, puedes mantener su atención en lo que necesitan para lograr varios objetivos dentro de tu experiencia.
Usando el archivo Gold Rush .rbxl como referencia, este tutorial te muestra cómo crear una barra de puntuación que rastrea la cantidad de oro que los jugadores recogen, incluyendo orientación sobre:
- Crear un marco en la parte superior-central de la pantalla.
- Agregar un ícono de corona que comunica lo que está rastreando la barra de puntuación sin ninguna guía textual.
- Insertar texto de puntuación que registre la cantidad de oro que el jugador recoge.
- Probar tu diseño de interfaz de usuario en múltiples dispositivos emulados para revisar su apariencia en diferentes pantallas y relaciones de aspecto.
Al igual que con toda creación en 2D, hay muchas maneras de lograr cualquier objetivo particular. Puedes crear tus propios activos 2D en herramientas de interfaz de usuario de terceros y seguir con tu propio diseño.
Crear el marco
Para mostrar elementos de la interfaz de usuario en la pantalla de cada jugador, puedes crear un objeto ScreenGui en el servicio StarterGui. Los objetos ScreenGui son los principales contenedores para la interfaz de usuario en pantalla, y el servicio StarterGui copia su contenido al contenedor PlayerGui de cada jugador a medida que ingresan a una experiencia.
Después de crear un objeto ScreenGui, puedes crear y personalizar sus objetos hijo GuiObjects según el propósito de cada contenedor. Para demostrar este concepto, esta sección te enseña cómo crear un objeto ScreenGui con un objeto hijo Frame que contendrá tanto el ícono como el texto de la barra de puntuación.
Además de personalizar las propiedades del marco, esta sección también proporciona instrucciones sobre cómo agregar un objeto hijo UISizeConstraint y UIListLayout al marco. Esta técnica asegura que los GuiObjects se ordenen automáticamente de manera horizontal a medida que los insertas en el marco, y que siempre sean legibles en pantallas de tamaños más pequeños. Si no sigues esta orientación, cada GuiObject que añadas al marco se ordenará fuera del perímetro del marco.
Para recrear el contenedor del marco dentro del archivo de lugar de muestra Gold Rush:
Crea un objeto ScreenGui para contener tu interfaz de usuario en pantalla.
- En la ventana Explorer, pasa el cursor sobre StarterGui y haz clic en el icono ⊕. Se mostrará un menú contextual.
- Inserta un ScreenGui.
Crea un contenedor para el componente completo de la interfaz de usuario de la barra de puntuación.
Inserta un Frame en el objeto ScreenGui.
Selecciona el nuevo Frame, luego en la ventana Properties,
- Establece AnchorPoint en 0.5, 0 para establecer el punto de origen del marco en la parte superior-media del mismo (50% de la izquierda a la derecha del marco, y 0% de la parte superior a la parte inferior del marco).
- Establece BackgroundColor en 0.6 para que el fondo del marco sea negro.
- Establece BackgroundTransparency en 0.6 para que el fondo del marco sea semi-transparente.
- Establece Position en {0.5, 0},{0.01, 0} para situar el marco cerca de la parte superior-media de la pantalla (50% de la izquierda a la derecha de la pantalla, y 1% de la parte superior a la parte inferior de la pantalla).
- Establece Size en {0.25, 0},{0.08, 0} para que el marco ocupe una gran parte del medio de la pantalla y capte la atención del jugador (25% horizontalmente, y 8% verticalmente).
- Establece Name en ScoreBarFrame.
Agrega una restricción al marco para que su contenido siempre sea legible en tamaños de pantalla pequeños.
- Inserta un objeto UISizeConstraint en ScoreBarFrame.
- Selecciona la nueva restricción, luego en la ventana Properties, establece MinSize en 0, 40 para asegurar que el marco nunca se reduzca a menos de 40 píxeles verticalmente.
Agrega un objeto de diseño al marco para que su contenido se ordene de izquierda a derecha y se centre verticalmente dentro del perímetro del marco.
- Inserta un objeto UIListLayout en ScoreBarFrame.
- Selecciona el nuevo objeto de diseño, luego en la ventana Properties,
- Establece FillDirection en Horizontal.
- Establece VerticalAlignment en Center.
Agregar un ícono
Un ícono es un símbolo que representa una acción, objeto o concepto en una experiencia. Usar íconos que sean simples e intuitivos permite a los jugadores reconocer fácilmente lo que estás comunicando con tu interfaz de usuario sin texto, el cual puede desordenar la pantalla y desviar la atención del contenido que importa.
Por ejemplo, el ejemplo usa un simple ícono de corona dorada para indicar cuántos Oros ha recolectado un jugador. Este ícono es fácilmente reconocible como el objetivo más importante dentro de la experiencia, e incluye detalles mínimos para que siga siendo legible en las pantallas de dispositivos móviles.
Para recrear el ícono de corona dorada dentro del archivo de lugar de muestra Gold Rush:
Inserta un objeto ImageLabel en ScoreBarFrame.
En la ventana Explorer, pasa el cursor sobre ScoreBarFrame y haz clic en el icono ⊕. Se mostrará un menú contextual.
Inserta un ImageLabel.
Selecciona la nueva etiqueta, luego en la ventana Properties,
Establece Image en rbxassetid://5673786644 para hacer que el ícono sea una corona.
Establece BackgroundTransparency en 1 para que el fondo de la etiqueta sea completamente transparente.
Establece LayoutOrder en 1. Esto asegura que el ícono permanezca como el primer GuiObject en el marco de izquierda a derecha cuando insertes texto en la siguiente sección del tutorial.
Establece Size en {1.25,0},{1,0} para ampliar el área de la etiqueta más allá del ancho completo del marco.
Establece SizeConstraint en RelativeYY para preservar la relación de aspecto del ícono escalando el tamaño de la etiqueta con la altura del marco padre.
Insertar texto de puntuación
El texto de puntuación registra la puntuación del jugador dentro de una experiencia, como cuántos puntos obtienen en una partida. Es importante que todo el texto de la interfaz de usuario sea claro y fácil de leer para que los jugadores puedan entender rápidamente la información que necesitan para tener éxito en tu experiencia.
Por ejemplo, el ejemplo usa texto grande sobre un color contrastante para que no se mezcle con el ruido del fondo. Esto es particularmente significativo para la accesibilidad ya que asegura que el texto permanezca legible a medida que el jugador se mueve a través del espacio 3D, que puede incluir objetos que son del mismo color que el texto.
Para recrear el texto de puntuación dentro del archivo de lugar de muestra Gold Rush:
Inserta un objeto TextLabel en ScoreBarFrame.
En la ventana Explorer, pasa el cursor sobre ScoreBarFrame y haz clic en el icono ⊕. Se mostrará un menú contextual.
Inserta un TextLabel.
Selecciona la nueva etiqueta, luego en la ventana Properties,
Establece BackgroundTransparency en 1 para que el fondo de la etiqueta sea completamente transparente.
Establece Size en {1,0},{1,0} para ampliar la etiqueta a todo el marco (100% horizontalmente y 100% verticalmente del marco padre). La etiqueta se extiende más allá de los límites del marco porque está siendo desplazada por el ícono.
Establece SizeConstraint en RelativeYY para asegurar que el tamaño de la etiqueta escale con la altura del marco padre, y preservar la relación de aspecto del ícono. Este paso también hace que la etiqueta sea un cuadrado y la mantiene dentro de los límites del marco.
Establece Font en GothamSSm para coincidir con la estética del entorno.
Establece Text en 0 para comenzar la puntuación desde cero.
Establece TextColor3 en 255, 200, 100 para teñir el texto de oro.
Establece TextSize en 30 para hacer que el texto sea más grande en la pantalla.
Establece TextXAlignment en Left para asegurar que el texto de puntuación permanezca alineado a la izquierda cerca del ícono de la corona, independientemente de si la puntuación del jugador es 0, 1,000 o 1,000,000.
Probar el diseño
El Emulador de Dispositivos de Studio te permite probar cómo los jugadores verán e interactuarán con tu interfaz de usuario en varios dispositivos. Esta herramienta es una parte vital del diseño de la interfaz de usuario porque la relación de aspecto de tu vista en Studio no refleja necesariamente la relación de aspecto de las pantallas que los jugadores utilizan para acceder a tu experiencia, y es importante que tu interfaz de usuario sea legible y accesible en cada dispositivo.
Por ejemplo, si no pruebas tu interfaz de usuario en una variedad de tamaños de pantalla, los jugadores con pantallas grandes pueden no ser capaces de leer tu texto o descifrar tus íconos, y los jugadores con pantallas pequeñas pueden no ser capaces de ver el espacio 3D porque los elementos de tu interfaz ocupan demasiado espacio en la pantalla.
Para emular tu interfaz de usuario en varios tamaños de pantalla:
Desde el menú Test de Studio, activa el Emulador de Dispositivos.
En el menú desplegable de resolución, selecciona Resolución Real. Esto te permitirá ver la verdadera resolución de tus elementos de interfaz de usuario en el dispositivo que estás emulando.
En el menú desplegable de dispositivos, selecciona al menos un dispositivo de las secciones Teléfono, Tableta, Escritorio y Consola.
