Una barra de puntuación es un elemento de la interfaz de usuario que muestra información importante para el juego del jugador, como su estadísticasde nivel, la cantidad de moneda o los artículos de potenciación en su inventario. Al mostrar directamente las barras de puntuación en la pantalla del jugador, puede mantener su atención en lo que necesitan para lograr varios objetivos dentro de su experiencia.
Usando el archivo Gold Rush.rbxl como referencia, este tutorial le muestra cómo crear una barra de puntuación que rastrea la cantidad de jugadores de oro que recolectan, incluyendo la guía sobre:
- Crear un marco en el centro superior de la pantalla.
- Añadiendo un icono de corona que comunica lo que la barra de puntuación está rastreando sin ninguna guía textual.
- Insertando texto de calificación que registra la cantidad de oro que recoge el jugador.
- Prueba tu diseño de UI en varios dispositivos emulados para revisar su apariencia en diferentes pantallas y ratios de aspecto.
Como con cualquier creaciones2D, hay muchas formas de alcanzar cualquier objetivo específico. Puedes crear tus propias 2D assets en herramientas de UI de terceros y seguir alineado con tu propio diseño.
Crear el marco
Para mostrar elementos de UI en la pantalla de cada jugador, puedes crear un objeto de ScreenGui en el servicio StarterGui. Los objetos de ScreenGui son los contenedores principales para la interfaz de usuario en la pantalla, y el servicio 2>Class.StarterGui2> copia su contenido
Después de crear un objeto ScreenGui , puedes crear y personalizar su 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 hijo 1> Class.Frame1> que contendrá tanto el icono
Además de personalizar las propiedades de la máquina, esta sección también proporciona instrucciones sobre cómo agregar un objeto hijo UISizeConstraint y UIListLayout al marco. Esta técnica garantiza que Class.GuiObject|Gui
Para recrear el contenedor de marco dentro del ejemplo Gold Rush lugar de archivo:
Crea un objeto ScreenGui para contener tu UI en la pantalla.
- En la ventana Explorer , pasa el cursor sobre StarterGui y haz clic en el ícono⊕. Se muestra un menú contextual.
- Inserta un ScreenGUI .
Crea un contenedor para la interfaz de usuario de la barra de puntuación completa.
Inserta un Marco en el objeto ScreenGUI
Seleccione el nuevo Marco , luego en la ventana Propiedades,
- Establece AnchorPoint a 0.5, 0 para establecer el punto de origen del marco en la parte superior del marco (50% desde la izquierda a la derecha del marco y 0% desde la parte superior del marco).
- Establece Color de fondo a 0.6 para hacer que el fondo del marco sea negro.
- Establece Transparencia de Fondo a 0.6 para hacer que el fondo del marco sea semitransparente.
- Establece Posición a {0.5, 0},{0.01, 0} para establecer el marco cerca de la parte superior del móvil (50% desde la izquierda a la derecha del móvil y 1% desde la parte superior del móvil).
- Establece Tamaño a {0.25, 0},{0.08, 0} para que el marco ocupe una gran parte del medio de la pantalla para atraer la atención del jugador (25% horizontalmente, y 8% verticalmente).
- Establece Nombre a ScoreBarFrame .
Añade una restricción a la pared para que sus contenidos siempre sean legibles en pequeños tamaños de pantalla.
- Inserta un objeto UISizeConstraint en ScoreBarFrame .
- Seleccione la nueva restricción, luego en la ventana Propiedades , establezca MinSize a 0, 40 para asegurar que el marco nunca se encogerá hasta menos de 40 píxeles verticalmente.
Añade un objeto de layout a la página para que sus contenidos se alineen desde el izquierdo hacia la derecha y hacia el centro verticalmente dentro del perímetro de la página.
- Inserta un objeto UIListLayout en ScoreBarFrame .
- Seleccione el nuevo objeto de layout, luego en la ventana Propiedades ,
- Establece Llenar dirección a horizontal .
- Establece Alineamiento vertical a Centro .
Añadir un icono
Un icono es un símbolo que representa una acción, objeto o concepto en una experiencia. Usar íconos que son simples y intuitivos permite a los jugadores reconocer fácilmente lo que estás comunicando con tu interfaz de usuario sin usar texto, lo que puede desordenar la pantalla y atraer la atención del contenido que importa.
Por ejemplo, la muestra usa un icono de corona de oro simple para indicar cuánto oro ha recolectado un jugador. Este icono es fácilmente reconocible como el objetivo más importante dentro de la experiencia, y incluye detalles mínimos para que se mantenga legible en las pantallas de dispositivos móviles.
Para recrear el icono de la corona de oro dentro del archivo de ejemplo Gold Rush :
Inserta un objeto ImageLabel en ScoreBarFrame .
En la ventana Explorer , pasa el cursor sobre ScoreBarFrame y haz clic en el ícono⊕. Se muestra un menú contextual.
Inserta un ImageLabel .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Imagen a rbxassetid://5673786644 para hacer de la corona una corona.
Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
Establece Orden de diseño a 1 . Esto garantiza que el icono se mantenga como el primer GuiObject en el marco de izquierda a derecha cuando insertes el texto en la siguiente sección del tutorial.
Establece Tamaño a {1.25,0},{1,0} para ampliar el área de etiqueta más allá de la máxima longitud del marco.
Establece Restricción de tamaño a YY Relativo para preservar la apariencia del íconoescalando el tamaño de la etiqueta con la altura de la marco padre.
Insertar texto de puntaje
Score text registra el puntaje del jugador dentro de una experiencia, como cuántos puntos gana dentro de un coincidir. 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, la muestra usa gran texto en la parte superior de un color contrario para que no se mezcla con el ruido del fondo. Esto es particularmente significativo para la accesibilidad porque garantiza que el texto se mantenga legible a medida que el jugador se mueve por el espacio 3D, que puede incluir objetos del mismo color que el texto.
Para recrear el texto de la puntuación dentro del archivo de ejemplo Gold Rush :
Inserta un objeto TextLabel en ScoreBarFrame .
En la ventana Explorer , pasa el cursor sobre ScoreBarFrame y haz clic en el ícono⊕. Se muestra un menú contextual.
Inserta un TextLabel .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
Establece Tamaño a {1,0},{1,0} para ampliar la etiqueta a toda la ventana (100% horizontalmente y 100% verticalmente de la etiqueta padre). La etiqueta se extiende más allá de los límites de la ventana porque se está desplazando por el ícono.
Establece Restricción de tamaño a RelativeYY para asegurar que el tamaño de la etiqueta escala con la altura del marco padre, y se mantiene la proporción de aspecto del ícono. Este paso también hace que la etiqueta sea un cuadrado y se mantenga dentro de los límites del marco.
Establece Fuente a GothamSSm para igualar las estéticas del entorno, ambiente.
Establece Texto a 0 para comenzar la puntuación desde cero.
Establece Color de texto3 a 255, 200, 100 para tonificar el texto dorado.
Establece TextSize para 30 para hacer que el texto sea más grande en la pantalla.
Establece TextXAlignment a izquierda para asegurar que el texto de la puntuación se mantenga alineado con la izquierda del icono de la corona, independientemente de si el puntaje 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 y interactuarán con tu UI en varios dispositivos. Esta herramienta es una parte vital del diseño de la interfaz de usuario porque la proporción de aspecto de tu ventana en Studio no refleja necesariamente la proporción de aspecto de las pantallas que los jugadores usan para acceder a tu experiencia, y es importante que tu interfaz de usuario sea legible y accesible en todos los dispositivos.
Por ejemplo, si no prueba su UI en una gama de tamaños de pantalla, los jugadores con pantallas grandes pueden no ser capaces de leer su texto o descifrar sus iconos, y los jugadores con pantallas pequeñas pueden no ser capaces de ver el espacio 3D porque sus elementos de UI toman demasiado espacio en la pantalla.
Para emular tu UI en varios tamaños de pantalla:
En la barra de menú, seleccione la pestaña Prueba .
En la sección Emulación , haz clic en Dispositivo . La ventana cambia para reflejar la proporción de aspecto de un portátil promedio.
En el menú desplegable de resolución, seleccione Resolución Actual . Esto le permite ver la resolución real de sus elementos de UI en el dispositivo que está emulando.
En el menú desplegable del dispositivo, seleccione al menos un dispositivo dentro de las secciones Teléfono , Tableta , Desktop y 1>Consola1>.
