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 juego, como sus estadísticas de nivel, la cantidad de moneda o los objetos 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 juego.
Usando el archivo .rbxl de Gold Rush como referencia, este tutorial te muestra cómo crear una barra de puntuación que rastrea la cantidad de oro que los jugadores recolectan, incluyendo orientación sobre:
- Crear un marco en la parte superior-central de la pantalla.
- Agregar un ícono de corona que comunique lo que la barra de puntuación está rastreando sin ninguna guía textual.
- Insertar texto de puntuación que registre la cantidad de oro que el jugador recolecta.
- 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 en 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 contenedores principales para la interfaz de usuario en pantalla, y el servicio StarterGui copia su contenido al contenedor PlayerGui de cada jugador a medida que entran en un juego.
Después de crear un objeto ScreenGui, puedes crear y personalizar sus objetos secundarios GuiObjects de acuerdo con 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 secundario 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 secundario UISizeConstraint y UIListLayout al marco. Esta técnica asegura que los GuiObjects se organicen automáticamente de manera horizontal a medida que los insertas en el marco, y que siempre sean legibles en tamaños de pantalla más pequeños. Si no sigues esta orientación, cada GuiObject que agregues al marco se organizará 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 de Explorer, pasa el cursor sobre StarterGui y haz clic en el ícono ⊕. Se muestra un menú contextual.
- Inserta un ScreenGui.
Crea un contenedor para todo el componente 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 de Properties,
- Establece AnchorPoint en 0.5, 0 para establecer el punto de origen del marco en la parte superior-media de sí mismo (50% desde la izquierda hasta la derecha del marco, y 0% desde la parte superior hasta 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 colocar el marco cerca de la parte superior-media de la pantalla (50% desde la izquierda hasta la derecha de la pantalla, y 1% desde la parte superior hasta 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 de Properties, establece MinSize en 0, 40 para asegurarte de 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 organice 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 de 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 un juego. 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 usar texto, que puede desordenar la pantalla y desviar la atención del contenido que importa.
Por ejemplo, la muestra utiliza un simple ícono de corona dorada para indicar cuánto oro ha recolectado un jugador. Este ícono es fácilmente reconocible como el objetivo más importante dentro del juego, y contiene 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 de Explorer, pasa el cursor sobre ScoreBarFrame y haz clic en el ícono ⊕. Se muestra un menú contextual.
Inserta un ImageLabel.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
Establece Image en rbxassetid://5673786644 para 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 un juego, como cuántos puntos ganan dentro de 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 juego.
Por ejemplo, la muestra utiliza texto grande sobre un color contrastante para que no se mezcle con el ruido del fondo. Esto es particularmente significativo para la accesibilidad porque asegura que el texto siga siendo 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 de Explorer, pasa el cursor sobre ScoreBarFrame y haz clic en el ícono ⊕. Se muestra un menú contextual.
Inserta un TextLabel.
Selecciona la nueva etiqueta, luego en la ventana de 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 asegurarte de que el tamaño de la etiqueta se 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 cuadrada 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 asegurarte de 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 juego, 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 tus elementos de interfaz de usuario 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 permite 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 dentro de las secciones Teléfono, Tableta, Escritorio y Consola.
