Implementar diseños en Studio | Documentación del Centro de creación de Roblox

Implementar tus diseños es el proceso de crear tus wireframes en Studio utilizando tanto elementos de UI integrados como personalizados con scripts que activan tu UI de manera contextual. Este emocionante paso del tutorial es donde puedes ver cómo todos tus diseños y arduo trabajo se unen en un conjunto cohesivo de flujos de trabajo que están completos y listos para la interacción del jugador.

Usando el juego de laser tag de muestra .rbxl como referencia, esta sección del currículo de diseño de interfaz de usuario te muestra cómo dar vida a tu planificación de UI, incluyendo orientación sobre:

Recuperar IDs de activos de la biblioteca de activos de UI para que puedas recrear los componentes de UI del juego de laser tag de muestra.
Emular varios dispositivos directamente en Studio para ver cómo se muestra tu UI en diferentes pantallas y relaciones de aspecto.
Crear objetos ScreenGui, SurfaceGui y BillboardGui para mostrar tu UI en las pantallas de los jugadores, superficies de partes y dentro del espacio 3D, respectivamente.

Después de revisar las técnicas en esta sección, puedes aplicarlas a tus propios proyectos para crear componentes de UI emocionantes que ayuden a los jugadores a navegar lo que pueden hacer dentro de tus juegos.

Las instrucciones en esta sección del tutorial te muestran cómo recrear exactamente los componentes de UI utilizando la Biblioteca de Activos de Diseño de UI. Este proceso toma alrededor de 90 minutos o menos de principio a fin. Si no deseas usar los valores proporcionados, puedes ajustar cada elemento de UI para cumplir con las especificaciones de tu propio juego, o usar la muestra misma para el resto del tutorial.

Obtener la biblioteca de activos

Las bibliotecas de activos son colecciones de activos que puedes agregar a tu inventario para un fácil acceso y reutilización. La biblioteca de activos que usarás para tu proyecto de la Tienda de Creadores incluye nueve activos individuales de elementos de UI 2D, y las versiones finales de los componentes de objetivo, selector de blaster y de información del jugador que estás creando en esta sección del tutorial.

**Icono MultiBlaster**
rbxassetid://14309094777

**Icono SingleBlaster**
rbxassetid://14309094641

**Icono del Equipo Rosa**
rbxassetid://14309678581

**Trapecio Invertido**
rbxassetid://14304827304

**Icono del Equipo Verde**
rbxassetid://14309678701

**Desvanecimiento**
rbxassetid://14304826876

**Desvanecimiento Multidireccional**
rbxassetid://14304827147

**Icono del Botón de Explosión - Predeterminado**
rbxassetid://18308375067

**Icono del Botón de Explosión - Presionado**
rbxassetid://18308372597

**Icono de Mira**
rbxassetid://14400935532

Icono de Marcador de Impacto
rbxassetid://14401148777

**Icono de Flecha de Selección**
rbxassetid://14309187282

**Desvanecimiento de Borde**
rbxassetid://14309518632

Para obtener la biblioteca de activos de tu inventario en tu juego:

Agrega la biblioteca de activos a tu inventario.
1. Navega a la página de detalles de la biblioteca de activos en la Tienda de Creadores.
2. En la esquina superior derecha, haz clic en el botón Obtener Modelo. La biblioteca de activos ahora está en tu inventario, y puedes reutilizar estos activos en cualquier proyecto en la plataforma.
En Studio, navega a la pestaña Inicio, luego haz clic en el botón Caja de Herramientas. Se abre la ventana de Caja de Herramientas.
En la ventana de Caja de Herramientas, haz clic en la pestaña Inventario. Se muestra el orden de Mis Modelos.
Haz clic en el menú desplegable, luego selecciona el orden de Mis Paquetes.
Haz clic en el mosaico Componentes de UI de Pantalla Final, luego en la ventana de Explorador, selecciona Componentes Completados, y luego arrástralos al servicio StarterGui. Ahora puedes habilitar cualquiera de los componentes finales para hacer referencia a su diseño.

Emular dispositivos

El Emulador de Dispositivos de Studio te permite probar cómo los jugadores verán e interactuarán con tu UI en varios dispositivos. Esta herramienta es una parte vital del proceso de implementación 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 UI sea tanto legible como accesible en cada dispositivo.

Por ejemplo, si no pruebas tu UI 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 UI ocupan demasiado espacio en la pantalla.

Para emular tu UI en varios tamaños de pantalla:

Desde el menú Prueba 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 UI 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.

Crear objetos ScreenGui

Para mostrar elementos de UI en la pantalla de cada jugador, puedes crear un objeto ScreenGui en el servicio StarterGui. Los objetos ScreenGui son los contenedores principales para la UI en pantalla, y el servicio StarterGui copia su contenido al contenedor PlayerGui de cada jugador a medida que entran en un juego.

Puedes crear múltiples objetos ScreenGui para organizar y mostrar agrupaciones de elementos de UI contextualizados a lo largo del juego. Por ejemplo, el juego de laser tag de muestra incluye cinco objetos ScreenGui separados que están inicialmente deshabilitados hasta que los jugadores cumplen diferentes condiciones durante el flujo principal de usuario del juego:

HUDGui - Muestra información clave sobre el juego cuando los jugadores están activos en una ronda, como el objetivo y los puntos totales de cada equipo.
PickABlasterGui - Muestra todas las opciones de blaster cuando los jugadores comienzan o se reincorporan a una ronda.
ForceFieldGui - Muestra una cuadrícula hexagonal cuando los jugadores están seleccionando un blaster y mientras son temporalmente invulnerables.
OutStateGui - Muestra un borde oscuro alrededor de la pantalla cuando los jugadores son eliminados.
RoundResultsGui - Muestra una superposición oscura en la parte superior de la pantalla con información sobre qué equipo ganó la ronda.

Después de crear un objeto ScreenGui, puedes crear y personalizar sus GuiObjects hijos de acuerdo con el propósito de cada contenedor. Para demostrar, en las secciones inmediatas que siguen, aprenderás cómo implementar elementos de UI para las tres categorías de información que los jugadores necesitan saber para tener éxito en el juego de laser tag de muestra. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propio juego.

Para crear un objeto ScreenGui:

En la ventana de Explorador, pasa el cursor sobre el servicio StarterGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
Inserta un ScreenGui.
Renombra el ScreenGui de acuerdo con el contexto de sus elementos de UI hijos.
Repite este proceso para cada agrupación de elementos de UI que necesites mostrar en la pantalla de cada jugador.

UI de Objetivo

Siguiendo las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de UI en pantalla relacionados con el objetivo del juego. Este grupo de elementos de UI está cerca de la parte superior de la pantalla porque el objetivo y los puntos de cada equipo tienen la mayor importancia sobre cómo ganar el juego.

Por ejemplo, la muestra proporciona un componente de UI de objetivo que los jugadores consultan para saber qué necesitan hacer para tener éxito en una ronda. A medida que los jugadores eliminan a los miembros del equipo enemigo y ganan puntos, este componente lleva un registro de la puntuación de cada equipo en relación con el objetivo general dentro del aviso del encabezado. Para una revisión de alto nivel de todos los scripts del cliente y del servidor que trabajan juntos para rastrear puntos, consulta Rastrear puntos en el Currículo de Scripting de Gameplay.

Para recrear exactamente la UI de objetivo dentro del juego de muestra Laser Tag:

Crea un contenedor para todo el componente.
1. Inserta un Frame en el objeto HUDGui ScreenGui.
  1. En la ventana de Explorador, navega al servicio StarterGui.
  2. Pasa el cursor sobre su objeto hijo HUDGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
  3. Desde el menú contextual, inserta un Frame.
2. Selecciona el nuevo Frame, luego en la ventana de Propiedades,
  1. 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).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.03, 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 3% desde la parte superior hasta la parte inferior de la pantalla para que haya un pequeño margen).
  4. Establece Size en {0.5, 0},{0.13, 0} para que los elementos del marco ocupen una gran parte de la parte superior de la pantalla y capten la atención de los jugadores (50% horizontalmente, y 13% verticalmente).
  5. Establece Name en Objective.
3. OPCIONAL
  Inserta un UIAspectRatioConstraint en Objective para asegurar que la relación de aspecto de la etiqueta se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 7.
Crea un contenedor para los objetos de aviso del objetivo.
1. Inserta un Frame en Objective.
2. Selecciona el nuevo Frame, luego en la ventana de Propiedades,
  1. 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).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{0, 0} para colocar el marco en el medio del contenedor (50% desde la izquierda hasta la derecha del marco padre, y 0% desde la parte superior hasta la parte inferior del marco padre).
  4. Establece Size en {1, 0},{0.67, 0} para que los componentes de UI de selección ocupen más de la mitad del contenedor de arriba a abajo (100% horizontalmente y 67% verticalmente del marco padre).
  5. Establece Name en ObjectiveDisplay.
Crea los elementos del título.
1. Inserta un ImageLabel en ObjectiveDisplay.
2. Selecciona el ImageLabel, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 100% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece LayoutOrder en -1.
  4. Establece Position en {0.5, 0},{0.34, 0} para colocar la etiqueta cerca de la parte superior-media del marco (50% desde la izquierda hasta la derecha del marco padre, y 34% desde la parte superior hasta la parte inferior del marco padre).
  5. Establece Size en {0.46, 0},{0.34, 0} para ampliar el área de aviso a casi la mitad del marco (46% horizontalmente y 34% verticalmente del marco padre).
  6. Establece Name en Header.
  7. Establece Image en rbxassetid://14304828123 para mostrar un trapecio.
  8. Establece ImageTransparency en 0.15 para hacer que el encabezado sea semi-transparente.
3. OPCIONAL
  Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que la relación de aspecto de la etiqueta se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 13.781.
4. Inserta un TextLabel en Header para mostrar un título.
5. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para mover la etiqueta al medio de su etiqueta padre (50% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).
  4. Establece Size en {0.62, 0},{0.55, 0} para ampliar el espacio de texto a más de la mitad de la etiqueta padre (62% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Name en HeaderTextLabel.
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Medium para engrosar la fuente.
  8. Establece Text en OBJETIVO.
  9. Habilita TextScaled.
Crea los elementos de aviso.
1. Inserta un ImageLabel en ObjectiveDisplay.
2. Selecciona el ImageLabel, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 100% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{1, 0} para mover la etiqueta al medio inferior de su marco padre (50% desde la izquierda hasta la derecha del marco padre, y 100% desde la parte superior hasta la parte inferior del marco padre).
  4. Establece Size en {0.89, 0},{0.66, 0} para ampliar el espacio de texto a casi el ancho completo del marco padre (89% horizontalmente y 66% verticalmente del marco padre).
  5. Establece Name en Body.
  6. Establece Image en rbxassetid://14304827265 para mostrar un trapecio invertido.
  7. Establece ImageColor3 en 0, 0, 0 para teñir la imagen de negro.
  8. Establece ImageTransparency en 0.3 para hacer que el encabezado sea semi-transparente.
3. OPCIONAL
  Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que la relación de aspecto de la etiqueta se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 13.781.
4. Inserta un TextLabel en Body para mostrar un aviso.
5. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para mover la etiqueta al medio de su etiqueta padre (50% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).
  4. Establece Size en {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más de la mitad de la etiqueta padre (85% horizontalmente y 39% verticalmente de la etiqueta padre).
  5. Establece Name en BodyTextLabel.
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Medium para engrosar la fuente.
  8. Establece TextColor3 en 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
  9. Establece Text en ¡Etiqueta a los jugadores oponentes para ganar puntos! El primer equipo en %d puntos gana..
  10. Habilita TextScaled.
Crea un contenedor para los contadores de equipo del objetivo.
1. Inserta un Frame en Objective.
2. Selecciona el nuevo Frame, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% desde la izquierda hasta la derecha del marco, y 100% desde la parte superior hasta la parte inferior del marco).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{1, 0} para colocar el marco en el medio inferior del contenedor (50% desde la izquierda hasta la derecha del marco padre, y 100% desde la parte superior hasta la parte inferior del marco padre).
  4. Establece Size en {0.44, 0},{0.27, 0} para que los componentes de UI de selección ocupen menos de la mitad del contenedor de izquierda a derecha (44% horizontalmente y 27% verticalmente del marco padre).
  5. Establece Name en TeamPointCounter.
Crea un relleno para los contadores de equipo.
1. Inserta un objeto UIListLayout en el marco del paso 5.
2. Selecciona el objeto UIListLayout, luego en la ventana de Propiedades,
  1. Establece Padding en 0.025, 0 para proporcionar espacio entre los futuros contadores de equipo.
  2. Establece FillDirection en Horizontal para que cada contador de equipo se muestre uno al lado del otro.
  3. Establece HorizontalAlignment en Center para que cada contador de equipo se alinee al medio uno del otro.
Crea los elementos del contador del equipo verde.
1. Inserta un ImageLabel en TeamPointCounter.
2. Selecciona el ImageLabel, luego en la ventana de Propiedades,
  1. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  2. Establece Position en {0.5, 0},{1, 0} para mover la etiqueta al medio inferior de su marco padre (50% desde la izquierda hasta la derecha del marco padre, y 100% desde la parte superior hasta la parte inferior del marco padre).
  3. Establece Size en {0.5, 0},{1, 0} para ampliar la etiqueta a la mitad del ancho del marco padre (50% horizontalmente y 100% verticalmente del marco padre).
  4. Establece Name en TeamACounter.
  5. Establece Image en rbxassetid://14304826831 para mostrar un desvanecimiento direccional.
  6. Establece ImageColor3 en 88, 218, 171 para teñir la imagen de verde menta.
3. Configura un atributo personalizado para rastrear que esta etiqueta es para el equipo verde.
  1. En la ventana de Propiedades, navega a la sección Attributes, luego haz clic en el ícono de más. Se muestra un cuadro de diálogo emergente.
  2. En el campo Name, ingresa teamColor.
  3. En el menú desplegable Type, selecciona BrickColor.
  4. Haz clic en el botón Guardar.
  5. Establece el nuevo atributo teamColor en Mint.
4. Inserta un TextLabel en TeamACounter para mostrar un aviso.
5. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 1, 0.5 para establecer el punto de origen de la nueva etiqueta en la parte derecha-media de sí misma (100% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.95, 0},{0.5, 0} para mover la etiqueta a la derecha de su etiqueta padre (95% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).
  4. Establece Size en {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más de la mitad de la etiqueta padre (85% horizontalmente y 39% verticalmente de la etiqueta padre).
  5. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  6. Establece Weight en Bold para engrosar la fuente.
  7. Establece TextColor3 en 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
  8. Establece Text en -.
  9. Habilita TextScaled.
  10. Establece TextXAlignment en Right.
6. Inserta un objeto UIStroke en el TextLabel, luego en la ventana de Propiedades, establece Color en 8, 78, 52 para contornear el guion con un trazo verde oscuro.
Crea los elementos del contador del equipo rosa.
1. Duplica TeamAICounter y sus hijos.
2. Selecciona el duplicado TeamACounter, luego en la ventana de Propiedades,
  1. Establece Name en TeamBCounter.
  2. Establece Image en rbxassetid://14305849451 para mostrar un desvanecimiento direccional en la dirección opuesta.
  3. Establece ImageColor3 en 255, 170, 255 para teñir la imagen de rosa carnación.
  4. Establece el atributo teamColor en Carnation Pink.
3. Selecciona el duplicado TextLabel hijo de TeamBCounter, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0, 0.5 para establecer el punto de origen de la nueva etiqueta en la parte izquierda-media de sí misma (0% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece Position en {0.05, 0},{0.5, 0} para mover la etiqueta a la izquierda de su etiqueta padre (5% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).
  3. Establece TextXAlignment en Left.
4. Selecciona el duplicado UIStroke hijo de TeamBCounter, luego en la ventana de Propiedades, establece Color en 158, 18, 94 para contornear el guion con un trazo rosa oscuro.
Haz referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que actualizan programáticamente el aviso del objetivo y rastrean los puntos del equipo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar la pantalla principal de visualización (HUD), incluyendo setObjective y startSyncingTeamPoints. Después de que un jugador se une a una ronda y selecciona su blaster, este script asegura que todos los elementos de UI del HUD se muestren apropiadamente para el estado del jugador, el dispositivo y el estado del equipo.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ahora, después de que un jugador selecciona su blaster, la UI de objetivo se muestra en la parte superior de su pantalla y rastrea los puntos de cada equipo.

UI de Blaster

Siguiendo las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de UI en pantalla relacionados con el blaster del jugador. Este grupo de elementos de UI ocupa la mayor parte del espacio de pantalla cerca del centro de la pantalla 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.

Mira

Una mira es un elemento de UI que informa a los jugadores dónde van a impactar cuando disparan su arma. Este elemento de UI es un requisito vital para los juegos de disparos en primera persona porque los jugadores necesitan poder apuntar con precisión su blaster y eliminar a los miembros del equipo enemigo.

Como la mayoría de los otros juegos en el género de disparos en primera persona, el juego de laser tag de muestra posiciona la mira en el centro de la pantalla para que los jugadores tengan algo estático en lo que concentrarse mientras su avatar se mueve a través del espacio 3D. Además de reducir el mareo, esta colocación permite que la mira sea perceptible mientras se mezcla con el entorno general.

Para recrear exactamente la mira dentro del juego de muestra Laser Tag:

Inserta un ImageLabel en el objeto HUDGui ScreenGui.
1. En la ventana de Explorador, navega al servicio StarterGui.
2. Pasa el cursor sobre su objeto hijo HUDGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
3. Desde el menú contextual, inserta un ImageLabel.
Selecciona el nuevo ImageLabel, luego en la ventana de Propiedades,
1. Establece Image en rbxassetid://14400935446.
2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta (50% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
3. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Name en Crosshair.
5. Establece Position en {0.5,0},{0.5,0} para colocar la etiqueta en el medio de la pantalla.
6. Establece ScaleType en Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
OPCIONAL
Inserta un UIAspectRatioConstraint en Crosshair para asegurar que la relación de aspecto de la etiqueta se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 0.895.

Marcador de impacto

Un marcador de impacto es un elemento de UI que solo se muestra cuando un disparo impacta a otro jugador del equipo enemigo. Al igual que la mira, este elemento de UI es un requisito vital para los juegos de disparos en primera persona porque proporciona retroalimentación visual de cuándo los jugadores tienen éxito al eliminar a sus oponentes.

Para recrear exactamente el marcador de impacto dentro del juego de muestra Laser Tag:

Inserta un ImageLabel en el objeto Crosshair ImageLabel.
1. En la ventana de Explorador, navega al servicio StarterGui.
2. Pasa el cursor sobre su objeto hijo Crosshair, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
3. Desde el menú contextual, inserta un ImageLabel.
Selecciona el nuevo ImageLabel, luego en la ventana de Propiedades,
1. Establece Image en rbxassetid://14401148736 para mostrar el ícono rectangular del marcador de impacto.
2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta.
3. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Position en {0.5,0},{0.5,0} para colocar la etiqueta en el medio de la pantalla.
5. Establece Name en Hitmarker.
6. Establece Size en {0.6, 0},{0.06, 0} para reducir el tamaño de los rectángulos alrededor del medio de la mira.
7. Establece ImageTransparency en 1 para hacer que el marcador de impacto sea completamente transparente. Los scripts en el siguiente paso vuelven a establecer la transparencia a 0 cada vez que el disparo de un jugador impacta a otro jugador del equipo enemigo.
Haz referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestran programáticamente el marcador de impacto cuando un disparo impacta a un jugador del equipo enemigo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar la pantalla principal de visualización (HUD), incluyendo setupHitmarker. Después de que un jugador se une a una ronda y selecciona su blaster, este script asegura que todos los elementos de UI del HUD se muestren apropiadamente para el estado del jugador, el dispositivo y el estado del equipo.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ahora, cada vez que un jugador dispara su blaster y el disparo impacta a otro jugador, el marcador de impacto se muestra momentáneamente.

Selector de blaster

Un selector de blaster es un componente de UI que los jugadores utilizan para seleccionar su tipo de blaster antes de unirse o reincorporarse a una ronda. El juego de laser tag de muestra proporciona dos tipos de blasters: uno que produce varios haces con una amplia dispersión horizontal, y otro que produce un solo haz. El tipo de blaster que los jugadores seleccionan influye en su estrategia durante la ronda, haciendo que este componente de UI sea un flujo de trabajo esencial para el juego en general.

Los siguientes pasos detallan cómo crear varios contenedores para los diferentes agrupamientos de elementos de UI, un encabezado con un aviso, los botones de navegación y selección, y un prefab de botón de blaster. La lógica de scripting para el componente general llena diferentes características visuales en el prefab de botón de blaster de acuerdo con las instancias de Configuration que representan cada tipo de blaster.

Esta configuración te permite crear instancias adicionales de Configuration para más tipos de blaster que se muestren automáticamente correctamente dentro del selector de blaster sin necesidad de crear botones individuales dentro de StarterGui.PickABlasterGui.

Para recrear exactamente el selector de blaster dentro del juego de muestra Laser Tag:

Crea un contenedor para todo el componente.
1. Inserta un Frame en el objeto PickABlaster ScreenGui.
  1. En la ventana de Explorador, navega al servicio StarterGui.
  2. Pasa el cursor sobre su objeto hijo PickABlaster, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
  3. Desde el menú contextual, inserta un Frame.
2. Selecciona el nuevo marco, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen del marco en la parte inferior-media de sí mismo (50% desde la izquierda hasta la derecha del marco, y 100% desde la parte superior hasta la parte inferior del marco).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.9, 0} para colocar el marco cerca de la parte inferior-media de la pantalla (50% desde la izquierda hasta la derecha de la pantalla, y 92.4% desde la parte superior hasta la parte inferior de la pantalla).
  4. Establece Size en {0.8, 0},{0.25, 0} para que los componentes de UI del selector de blaster ocupen una gran parte de la pantalla y capten la atención de los jugadores (80% horizontalmente, y 25% verticalmente).
  5. Establece Name en Component.
3. OPCIONAL
  Inserta un UIAspectRatioConstraint en Component para asegurar que la relación de aspecto del marco y sus elementos de UI hijos se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 5.
Crea un contenedor para mantener los agrupamientos de elementos de UI.
1. Inserta un Frame en Component.
2. Selecciona el nuevo marco, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen del marco en el medio de sí mismo (50% desde la izquierda hasta la derecha del marco, y 50% desde la parte superior hasta la parte inferior del marco).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.375, 0} para colocar el marco cerca de la parte superior-media del contenedor (50% desde la izquierda hasta la derecha del marco padre, y 37.5% desde la parte superior hasta la parte inferior del marco padre).
  4. Establece Size en {1, 0},{0.75, 0} para que los componentes de UI de selección ocupen 3/4 del contenedor (100% horizontalmente y 75% verticalmente del marco padre).
  5. Establece Name en SelectionFrame.
Crea un aviso para el selector de blaster.
1. Inserta un ImageLabel en SelectionFrame.
2. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 100% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece LayoutOrder en -1.
  4. Establece Position en {0.5, 0},{0.22, 0} para colocar la etiqueta cerca de la parte superior-media del marco (50% desde la izquierda hasta la derecha del marco padre, y 22% desde la parte superior hasta la parte inferior del marco padre).
  5. Establece Size en {0.45, 0},{0.22, 0} para ampliar el área de aviso a casi la mitad del marco (45% horizontalmente y 22% verticalmente del marco padre).
  6. Establece Name en Header.
  7. Establece Image en rbxassetid://14304828123 para mostrar un trapecio.
  8. Establece ImageTransparency en 0.15 para hacer que el encabezado sea semi-transparente.
3. OPCIONAL
  Inserta un UIAspectRatioConstraint en la etiqueta para asegurar que la relación de aspecto de la etiqueta se mantenga igual sin importar el tamaño de pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 13.78.
4. Inserta un TextLabel en Header para mostrar un aviso.
5. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 50% desde la parte superior hasta la parte inferior de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para mover la etiqueta al medio de su etiqueta padre (50% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).
  4. Establece Size en {0.6, 0},{0.55, 0} para ampliar el espacio de texto a más de la mitad de la etiqueta padre (60% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Name en HeaderTextLabel.
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Medium para engrosar la fuente.
  8. Establece Text en ELIGE UN BLASTER.
  9. Habilita TextScaled.
Crea el contenedor para tu contenedor de botones de blaster y flechas de selección.
1. Inserta un ImageLabel en SelectionFrame.
2. Selecciona la nueva etiqueta, luego en la ventana de Propiedades,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% desde la izquierda hasta la derecha de la etiqueta, y 100% desde la parte superior hasta la parte inferior de la etiqueta).
  3. Establece BackgroundColor en 0, 0, 0 para hacer que la etiqueta sea negra.
  4. Establece BackgroundTransparency en 0.3 para reducir la opacidad de la etiqueta en un 30%, y hacer que coincida con todos los elementos de UI negros en el juego.
  5. Establece Position en {0.5, 0},{1, 0} para colocar la etiqueta en el medio inferior del marco (50% desde la izquierda hasta la derecha del marco padre, y 100% desde la parte superior hasta la parte inferior del marco padre).
  6. Establece Size en {1, 0},{0.77, 0} para ampliar el área de la etiqueta al espacio debajo del aviso (100% horizontalmente y 77% verticalmente del marco padre).
3. Redondea las esquinas del contenedor.
  1. Inserta un objeto UICorner en la etiqueta.
  2. Selecciona el nuevo objeto de esquina, luego en la ventana de Propiedades, establece CornerRadius en 0.075, 0 para redondear las esquinas.
Crea el contenedor para tus botones de blaster.
1. Inserta un Frame en la etiqueta del paso 4.
2. Selecciona el nuevo marco, luego en la ventana de Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen del nuevo marco en el medio de sí mismo (50% desde la izquierda hasta la derecha del marco, y 50% desde la parte superior hasta la parte inferior del marco).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para colocar el marco en el medio de su etiqueta padre (50% desde la izquierda hasta la derecha del marco padre, y 50% desde la parte superior hasta la parte inferior del marco padre).
  4. Establece Size en {0.85, 0},{0.77, 0} para ampliar el área del marco a la mayor parte de la etiqueta (85% horizontalmente y 77% verticalmente de la etiqueta padre).
  5. Establece Name en Container.
Crea un relleno para todos los futuros botones de blaster.
1. Inserta un objeto UIListLayout en el marco del paso 5.
2. Selecciona el nuevo objeto de diseño, luego en la ventana de Propiedades,
  1. Establece Padding en 0.035, 0 para proporcionar espacio entre todos los futuros botones.
  2. Establece FillDirection en Horizontal para que cada botón se muestre uno al lado del otro.
  3. Establece tanto HorizontalAlignment como VerticalAlignment en Center para que cada botón se alinee al medio uno del otro.
Crea el botón de navegación izquierdo.
1. Inserta un ImageButton en el ImageLabel del paso 4.
2. Selecciona el nuevo botón, luego en la ventana de Propiedades,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 0, 0.5 para establecer el punto de origen del nuevo botón en la parte izquierda-media de sí mismo (0% desde la izquierda hasta la derecha del botón, y 50% desde la parte superior hasta la parte inferior del botón).
  3. Establece BackgroundTransparency en 0.15 para proporcionar retroalimentación visual al pasar el cursor que el botón es seleccionable.
  4. Establece Position en {0.02, 0},{0.5, 0} para proporcionar un margen a la izquierda del botón desde su contenedor padre (2% desde la izquierda hasta la derecha de la etiqueta padre, y 50% desde la parte superior hasta la parte inferior de la etiqueta padre).1. Establece Size en {0.04, 0},{0.33, 0} para hacer que el botón de selección sea mucho más pequeño que los botones de blaster (4% horizontalmente y 33% verticalmente del marco padre).
Establece Name en NavigationButtonLeft.

Redondea las esquinas del botón.
1. Inserta un objeto UICorner en el botón.
2. Selecciona el nuevo objeto de esquina, luego en la ventana de Properties, establece CornerRadius en 0.1, 0 para redondear las esquinas.

Inserta un objeto ImageLabel en el botón.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la inferior de la etiqueta).
2. Establece Position en {0.45, 0},{0.5, 0} para colocar la etiqueta cerca del medio de su botón padre (45% de la izquierda a la derecha del botón padre, y 50% de la parte superior a la inferior del botón padre). Este valor no está en el medio porque una flecha no se ve visualmente como si estuviera en el medio del botón en {0.5, 0},{0.5, 0}.
3. Establece Size en {0.8, 0},{0.8, 0} para ampliar el área de la etiqueta para que haya espacio debajo del aviso (80% horizontalmente y 80% verticalmente del marco padre).
4. Establece BackgroundTransparency en 1 para hacer que el fondo de la imagen sea completamente transparente.
5. Establece Image en rbxassetid://14309187238.
6. Establece ScaleType en Fit.

Crea el botón de navegación derecho.
1. Duplica NavigationButtonLeft.
2. Selecciona el botón duplicado, luego en la ventana de Properties,
  1. Establece AnchorPoint en 1, 0.5 para establecer el punto de origen del nuevo botón en el medio derecho de sí mismo (100% de la izquierda a la derecha del botón, y 50% de la parte superior a la inferior del botón).
  2. Establece Position en {0.98, 0},{0.5, 0} para proporcionar un margen a la derecha del botón desde su contenedor padre (98% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la inferior de la etiqueta padre).
  3. Establece Name en NavigationButtonRight.
3. Selecciona su objeto hijo ImageLabel.
  1. Establece Rotation en 180 para voltear la imagen.
  2. Establece Position en {0.55, 0},{0.5, 0} para colocar la etiqueta cerca del medio de su botón padre (55% de la izquierda a la derecha del botón padre, y 50% de la parte superior a la inferior del botón padre). Este valor no está en el medio porque una flecha no se ve visualmente como si estuviera en el medio del botón en {0.5, 0},{0.5, 0}.

Crea el botón SELECT.
1. Inserta un ImageButton en Component. Observa cómo este proceso mantiene el botón de selección separado de SelectionFrame para que puedas agregar un margen entre la parte principal del componente y el botón de selección.
2. Selecciona el nuevo botón, luego en la ventana de Properties,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen del nuevo botón en la parte inferior media de sí mismo (50% de la izquierda a la derecha del botón, y 100% de la parte superior a la inferior del botón).
  3. Establece BackgroundTransparency en 0.15 para proporcionar retroalimentación visual al pasar el mouse que el botón es seleccionable.
  4. Establece Position en {0.5, 0},{0.99, 0} para colocar el botón cerca del medio inferior de su contenedor (50% de la izquierda a la derecha del marco padre, y 99% de la parte superior a la inferior del marco padre).
  5. Establece Size en {0.17, 0},{0.18, 0} para alargar el botón debajo de los botones de blaster (17% horizontalmente y 18% verticalmente del marco padre).
  6. Establece Name en SelectButton.

Redondea las esquinas del botón.
1. Inserta un objeto UICorner en el botón.
2. Selecciona el nuevo objeto de esquina, luego en la ventana de Properties, establece CornerRadius en 0.2, 0 para redondear las esquinas.

Inserta un objeto TextLabel en el botón para que puedas mostrar un llamado a la acción.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la inferior de la etiqueta).
2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Position en {0.5, 0},{0.5, 0} para mover la etiqueta al medio del botón (50% de la izquierda a la derecha del botón padre, y 50% de la parte superior a la inferior del botón padre).
4. Establece Size en {0.9, 0},{0.55, 0} para ampliar el espacio de texto a casi todo el ancho de la etiqueta padre (90% horizontalmente y 55% verticalmente de la etiqueta padre).
5. Establece Name en SelectTextLabel.
6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
7. Establece Weight en Medium para engrosar la fuente.
8. Establece Text en SELECT.
9. Habilita TextScaled.

Crea un prefab de botón de blaster.
1. En el servicio ReplicatedStorage, crea una estructura de carpetas para organizar tus objetos de UI. El ejemplo utiliza una carpeta Instances con una carpeta hija Guis.
2. Inserta un objeto ImageButton en la carpeta Guis.
3. Selecciona el nuevo botón, luego en la ventana de Properties,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen del nuevo botón en el medio de sí mismo (50% de la izquierda a la derecha del botón, y 50% de la parte superior a la inferior del botón).
  3. Establece BackgroundTransparency en 0.65 para proporcionar retroalimentación visual de que el botón no está en foco. Los scripts en el paso 12 proporcionan retroalimentación visual programática cuando el botón está en foco.
  4. Establece LayoutOrder en 2.
  5. Establece Name en BlasterButtonPrefab.
  6. Establece Size en {0.8, 0},{0.8, 0}.
  7. Establece ImageTransparency en 1 para hacer que la imagen sea completamente transparente.
4. Inserta un UIAspectRatioConstraint en BlasterButtonPrefab para asegurar que la relación de aspecto del botón se mantenga igual dentro del componente sin importar el tamaño de pantalla del jugador.
5. Redondea las esquinas del botón.
  1. Inserta un objeto UICorner en BlasterButtonPrefab.
  2. Selecciona el UICorner, luego en la ventana de Properties, establece CornerRadius en 0.05, 0 para redondear las esquinas.
6. Inserta un ImageLabel en BlasterButtonPrefab.
7. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Elimina el ID de activo de marcador de posición dentro de la propiedad Image. Los scripts en el paso 7 insertan programáticamente el retrato del jugador en la etiqueta de imagen.
  2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la inferior de la etiqueta).
  3. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establece Position en {0.52, 0},{0.497, 0} para colocar la etiqueta cerca del medio de su botón padre (52% de la izquierda a la derecha del botón padre, y 49.7% de la parte superior a la inferior del botón padre). Este valor no está en el medio porque el blaster no se ve visualmente como si estuviera en el medio del botón en {0.5, 0},{0.5, 0}.
  5. Establece Size en {1.20, 0},{0.9, 0} para ampliar el área de la etiqueta fuera del botón (120% horizontalmente y 90% verticalmente del botón padre).
  6. Establece ScaleType en Fit.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestran programáticamente botones para cada blaster, escalan los botones cuando un jugador selecciona un botón que no está en foco, y adjuntan la selección de blaster de un jugador a su avatar.

El siguiente script requiere un conjunto de scripts que trabajan juntos para crear el selector de blaster. Cuando un jugador se une al juego o respawnea de nuevo en una ronda después de que su salud llega a cero, este script activa todos los elementos de UI del selector de blaster hasta que el jugador hace su selección.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Ahora, cada vez que un jugador se une al juego o respawnea de nuevo en una ronda después de que su salud llega a cero, la UI del selector de blaster se muestra, pueden hacer una selección y cada botón funciona como se espera.

Botón de blaster

Un botón de blaster es un componente de UI que los jugadores utilizan para disparar su blaster si están accediendo al juego a través de un dispositivo móvil o tablet. El juego de láser tag de muestra utiliza un botón de blaster con un ícono que representa tanto una mira como un disparo para comunicar la función del botón sin texto.

Para recrear exactamente el botón de blaster dentro del juego de muestra Laser Tag:

Inserta un ImageButton en el objeto HUDGui ScreenGui.
1. En la ventana de Explorer, navega al servicio StarterGui.
2. Pasa el mouse sobre su objeto hijo HUDGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
3. Desde el menú contextual, inserta un ImageButton.
En el viewport, mueve el botón a donde el pulgar de un jugador descansa naturalmente para que puedas tener una idea visual de cómo se verá el botón en el dispositivo de un jugador, luego en la ventana de Properties,
1. Establece Image en rbxassetid://18308375035 para mostrar el ícono del botón de blaster.
2. Establece PressedImage en rbxassetid://18308372558 para mostrar una versión invertida del ícono del botón de blaster cuando un jugador presiona el botón.
3. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Name en BlastButton.
5. Establece ScaleType en Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
6. Establece ImageTransparency en 0.3 para reducir la opacidad de la etiqueta para que coincida con todos los elementos de UI negros en el juego.
Inserta un UIAspectRatioConstraint en BlastButton para asegurar que la relación de aspecto del botón se mantenga igual sin importar el tamaño de pantalla del jugador.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestran programáticamente el botón de blaster cuando un jugador está usando entrada táctil en un dispositivo que acepta controles táctiles.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Display de Cabeza (HUD), incluyendo setupTouchButtonAsync. Después de que un jugador se une a una ronda y selecciona su blaster, este script asegura que todos los elementos de UI del HUD se muestren apropiadamente para el estado, dispositivo y estado del equipo del jugador.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ahora, cuando un jugador se une al juego y usa entrada táctil en un dispositivo que acepta controles táctiles, el botón de blaster se muestra en la parte superior derecha del botón de salto.

UI del jugador

Siguiendo las mejores prácticas de jerarquía visual del Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de UI en pantalla relacionados con el estado del jugador. Este agrupamiento de elementos de UI está cerca de los lados de la pantalla porque los jugadores pueden comprender esta información periférica sin desviar su atención del juego.

Indicador del jugador

Un indicador del jugador es un componente de UI que los jugadores consultan para descifrar rápidamente a qué equipo pertenecen tan pronto como aparecen en la zona de aparición de su equipo. El juego de láser tag de muestra proporciona dos versiones del indicador del jugador dependiendo de si el jugador está en el equipo verde o rosa.

Siguiendo la guía de Select a Color Theme, ambas versiones del indicador del jugador combinan el color del equipo con un ícono único y simple con detalles mínimos para que sigan siendo legibles en pantallas pequeñas. Proporcionar dos formas de retroalimentación visual es importante porque ayuda a mantener el diseño accesible para jugadores con daltonismo.

Para recrear exactamente el componente del indicador del jugador dentro del juego de muestra Laser Tag:

Inserta un Frame en el objeto HUDGui ScreenGui.
1. En la ventana de Explorer, navega al servicio StarterGui.
2. Pasa el mouse sobre su objeto hijo HUDGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
3. Desde el menú contextual, inserta un Frame.
Selecciona el nuevo Frame, luego en la ventana de Properties,
1. Establece AnchorPoint en 0, 1 para establecer el punto de origen del marco en la parte inferior media de sí mismo (0% de la izquierda a la derecha del marco, y 100% de la parte superior a la inferior del marco).
2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Name en PlayerDisplay.
4. Establece Position en {0.02, 0},{0.97, 0} para colocar el marco cerca de la parte inferior izquierda de la pantalla.
5. Establece Size en {0.23, 0},{0.08, 0} para acortar y ensanchar el marco.
6. Habilita ClipsDescendants para recortar los GuiObjects hijos que se extienden más allá del marco.
Crea la forma poligonal.
1. Inserta un ImageLabel en PlayerDisplay.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece Image en rbxassetid://14304828123 para mostrar el ícono de trapecio.
  2. Establece AnchorPoint en 1, 1 para establecer el punto de origen de la etiqueta en la parte inferior derecha de sí misma (100% de la izquierda a la derecha de la etiqueta, y 100% de la parte superior a la inferior de la etiqueta).
  3. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establece Name en Block.
  5. Establece Position en {1,0},{1,0} para colocar la etiqueta en el lado derecho del marco.
  6. Establece Size en {1.858, 0},{0.581, 0} para ensanchar la etiqueta fuera del marco, y acortarla a un poco más de la mitad de la longitud del marco.
  7. Establece ImageTransparency en 0.15 para hacer que la etiqueta sea ligeramente transparente.
  8. Establece ScaleType en Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserta un UIAspectRatioConstraint en Block para asegurar que la relación de aspecto de la etiqueta y sus elementos de UI hijos se mantenga igual sin importar el tamaño de pantalla del jugador.
  2. Selecciona la nueva restricción, luego en la ventana de Properties, establece AspectRatio en 13.78.
Crea la caja para el retrato del jugador.
1. Inserta un ImageLabel en PlayerDisplay.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Elimina el ID de activo de marcador de posición dentro de la propiedad Image. Los scripts en el paso 7 insertan programáticamente el retrato del jugador en la etiqueta de imagen.
  2. Establece AnchorPoint en 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (0% de la izquierda a la derecha de la etiqueta, y 100% de la parte superior a la inferior de la etiqueta).
  3. Establece BackgroundColor3 en 0, 0, 0 para establecer el color de fondo de la etiqueta en negro.
  4. Establece BackgroundTransparency en 0.3 para reducir la opacidad de la etiqueta en un 30%, y hacer que coincida con todos los elementos de UI negros en el juego.
  5. Establece Name en PlayerPortrait.
  6. Establece Position en {0.11, 0},{1, 0} para colocar la etiqueta en el lado izquierdo de la forma poligonal.
  7. Establece Size en {0.23, 0},{1, 0} para encoger la etiqueta.
  8. Establece ImageTransparency en 0.15 para hacer que la etiqueta sea ligeramente transparente.
  9. Establece ScaleType en Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserta un UIAspectRatioConstraint en PlayerPortrait para asegurar que la relación de aspecto de la etiqueta y sus elementos de UI hijos se mantenga igual sin importar el tamaño de pantalla del jugador.
  2. Inserta un UICorner en PlayerPortrait, luego en la ventana de Properties, establece CornerRadius en 0.05, 0 para redondear ligeramente las esquinas.
Crea la etiqueta de texto para el nombre del jugador.
1. Inserta un objeto TextLabel en PlayerDisplay.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0, 0.5 para establecer el punto de origen del nuevo botón en la parte izquierda media de sí mismo (0% de la izquierda a la derecha del botón, y 50% de la parte superior a la inferior del botón).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Name en PlayerNameTextLabel.
  4. Establece Position en {0.35, 0},{0.72, 0} para colocar la etiqueta en el lado derecho de su contenedor (35% de la izquierda a la derecha de la etiqueta padre, y 72% de la parte superior a la inferior de la etiqueta padre).
  5. Establece Size en {0.52, 0},{0.3, 0} para que el texto ocupe la mayor parte del área de la forma poligonal (52% horizontalmente y 30% verticalmente del marco padre).
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Bold para engrosar la fuente.
  8. Elimina el texto de marcador de posición dentro de la propiedad Text. Los scripts en el paso 7 insertan programáticamente el nombre del jugador en la etiqueta de texto.
  9. Habilita TextScaled.
  10. Establece TextXAlignment en Left.
Crea los íconos y colores del equipo que se muestran a la izquierda del retrato del jugador.
1. Inserta una Folder en PlayerDisplay, luego renómbrala a TeamIcons.
2. Crea el ícono y color del equipo verde.
  1. Inserta un ImageLabel en TeamIcons.
  2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
    
    Establece AnchorPoint en 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (0% de la izquierda a la derecha de la etiqueta, y 100% de la parte superior a la inferior de la etiqueta).
    
    Establece BackgroundColor3 en 88, 218, 171 para establecer el color de fondo de la etiqueta en verde menta.
    
    Establece Name en TeamAIcon.
    
    Establece Position en {0, 0},{1, 0} para colocar la etiqueta en el lado izquierdo del marco.
    
    Establece Size en {0.135, 0},{0.58, 0} para encoger la etiqueta a la izquierda del retrato del jugador.
    
    Establece ImageTransparency en 1 para hacer que la etiqueta sea transparente.
  1. Configura un atributo personalizado para rastrear que esta etiqueta es para el equipo verde. Este paso es muy importante para los scripts en el paso 7.
    
    En la ventana de Properties, navega a la sección de Attributes, luego haz clic en el ícono de más. Se muestra un cuadro de diálogo emergente.
    
    En el campo Name, ingresa teamColor.
    
    En el menú desplegable Type, selecciona BrickColor.
    
    Haz clic en el botón Save.
    
    Establece el nuevo atributo teamColor en Mint.
  2. Inserta un UIAspectRatioConstraint en TeamAIcon para asegurar que la relación de aspecto de la etiqueta y sus elementos de UI hijos se mantenga igual sin importar el tamaño de pantalla del jugador.
  3. Crea el ícono.
    
    Inserta un ImageLabel en TeamAIcon.
    
    Selecciona la nueva etiqueta, luego en la ventana de Properties,
    
    Establece Image en rbxassetid://14309678670 para mostrar el ícono del equipo verde.
    
    Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la inferior de la etiqueta).
    
    Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
    
    Establece Name en Icon.
    
    Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su etiqueta padre.
    
    Establece Size en {0.7, 0},{0.6, 0} para encoger la etiqueta.
    
    Establece ScaleType en Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
3. Crea el ícono y color del equipo rosa.
  1. Duplica TeamAIcon y sus hijos.
  2. Selecciona el TeamAIcon duplicado, luego en la ventana de Properties,
    
    Establece BackgroundColor3 en 255, 170, 255 para establecer el color de fondo de la etiqueta en rosa carnación.
    
    Establece Name en TeamBIcon.
    
    Establece el atributo teamColor en Carnation Pink.
    
    Selecciona el hijo duplicado Icon de TeamBIcon, luego en la ventana de Properties, establece Image en rbxassetid://14309678549 para mostrar el ícono del equipo rosa.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestran programáticamente el indicador del jugador con el color y el ícono de equipo apropiados mientras un jugador está activo en una ronda.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Display de Cabeza (HUD), incluyendo startSyncingTeamColor, setPlayerName, y setPlayerPortrait. Después de que un jugador se une a una ronda y selecciona su blaster, este script asegura que todos los elementos de UI del HUD se muestren apropiadamente para el estado, dispositivo y estado del equipo del jugador.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ahora, cada vez que un jugador se une o vuelve a unirse a la ronda después de respawnear, el indicador del jugador se muestra en la parte inferior izquierda de su pantalla.

Pantalla de campo de fuerza

Una pantalla de campo de fuerza es un elemento de UI que se superpone al viewport para informar a los jugadores que están a salvo del fuego del equipo enemigo mientras se unen o vuelven a unirse a una ronda. Siguiendo las pautas estéticas para íconos de Choose an Art Style, el juego de láser tag de muestra utiliza un patrón hexagonal semitransparente para simbolizar un campo de fuerza. Esta decisión de diseño no solo refuerza el estilo artístico futurista general para toda la UI en el juego, sino que también comunica el estado del jugador sin ningún texto o guía adicional.

Para recrear exactamente la pantalla de campo de fuerza dentro del juego de muestra Laser Tag:

Inserta un ImageLabel en el objeto ForceFieldGui ScreenGui.
1. En la ventana de Explorer, navega al servicio StarterGui.
2. Pasa el mouse sobre su objeto hijo ForceFieldGui, luego haz clic en el ícono ⊕. Se muestra un menú contextual.
3. Desde el menú contextual, inserta un ImageLabel.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
1. Establece Image en rbxassetid://14462567888.
2. Establece BackgroundTransparency en 0.8 para hacer que el campo de fuerza sea translúcido.
3. Establece Size en {1, 0},{1, 0} para hacer que la imagen llene toda la pantalla (100% horizontalmente y 100% verticalmente del ScreenGui padre).
4. Establece ScaleType en Tile para hacer que el hexágono se repita a través de toda la pantalla.
5. Establece TileSize en {0, 104},{0, 180}.
Inserta un objeto UIGradient en la etiqueta.
Selecciona el nuevo objeto de gradiente, luego en la ventana de Properties,
1. Establece Color en una secuencia de color que comienza en azul, se vuelve blanca y luego vuelve a azul.
  1. Establece Color en 120, 192, 250 para aplicar un tono azul claro a todos los hexágonos.
  2. Haz clic en la propiedad Color, luego haz clic en el botón ⋯. Se muestra un cuadro emergente de secuencia de color.
    
    Cada triángulo en el eje inferior de la secuencia de color es un punto clave que determina el valor de color de la propiedad en ese punto de la imagen de izquierda a derecha.
  3. Haz clic y arrastra en la secuencia de color hasta que llegues a un valor de Time de 0.05, luego haz clic en el pequeño cuadrado junto a Color para abrir la ventana emergente de Colors.
  4. Selecciona un blanco brillante, luego cierra la ventana emergente.
  5. Haz clic y arrastra en la secuencia de color hasta que llegues a un valor de Time de 0.95, luego abre la ventana emergente de Colors nuevamente, y selecciona el mismo color blanco que antes.
2. Establece Rotation en 225 para que la parte azul de tu secuencia de color se muestre en las esquinas superior izquierda e inferior derecha.
3. Establece Transparency en una secuencia de números que haga que el campo de fuerza parezca que está brillando.
  1. Haz clic en la propiedad Transparency, luego haz clic en el botón ⋯. Se muestra un cuadro emergente de secuencia de números. Cada cuadrado al principio y al final de la secuencia de números es un punto clave que determina el valor de transparencia de la propiedad en ese punto de la imagen de izquierda a derecha.
  2. Establece las siguientes propiedades de tiempo y valor a lo largo de la secuencia de números:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
Duplica el ImageLabel del paso 2.
Selecciona el objeto UIGradient dentro de la etiqueta duplicada, luego en la ventana de Properties,
1. Establece Rotation en -45 para voltear la imagen de modo que casi se refleje entre sí a lo largo del eje Y.
2. Modifica Transparency para que el brillo se vea más orgánico.
  1. Haz clic en la propiedad Transparency, luego haz clic en el botón ⋯. Se muestra un cuadro emergente de secuencia de números.
  2. Selecciona el tercer fotograma clave, luego haz clic en el botón Delete.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestran programáticamente la pantalla de campo de fuerza mientras un jugador se une o vuelve a unirse a una ronda.

El siguiente script del cliente ReplicatedStorage.ForceFieldClientVisuals sustituye el visual predeterminado de ForceField por StarterGui.ForceFieldGui. Cuando los jugadores ingresan a un juego y aparecen en un SpawnLocation con una propiedad Duration que es mayor que 0, el comportamiento predeterminado en cada juego es proporcionar a su avatar un orbe azul protector que momentáneamente les impide perder salud.

Este script comienza escuchando cuando se añade el ForceField a un personaje, desactiva los visuales predeterminados del campo de fuerza en primera persona, y luego habilita el objeto ForceFieldGui ScreenGui. Ten en cuenta que esto no impacta los visuales en tercera persona cuando los jugadores miran a otros jugadores reapareciendo en el juego.

Los visuales del campo de fuerza en primera persona incluyen una cuadrícula hexagonal futurista en el perímetro de la pantalla. — Visuales del campo de fuerza en primera persona

Los visuales del campo de fuerza en tercera persona incluyen un orbe azul brillante alrededor del jugador que reaparece en el juego. — Visuales del campo de fuerza en tercera persona

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Si el jugador aparece en un punto de aparición con el ForceField desactivado
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Ahora, cada vez que un jugador se une o vuelve a unirse a la ronda después de reaparecer, la nueva interfaz de usuario del campo de fuerza se muestra en lugar de los visuales predeterminados del ForceField en primera persona.

Pantalla de reaparecer

Una pantalla de reaparecer es un elemento de interfaz de usuario que oscurece el viewport para informar a los jugadores que han sido eliminados, y que el servidor está en el proceso de reaparecerlos de vuelta a su zona de aparición. Este elemento de interfaz de usuario es importante porque le da a los jugadores tiempo para procesar que han sido eliminados y planificar su próximo movimiento antes de volver a unirse a la ronda activa.

Para más información sobre el comportamiento de reaparecer personalizado en el juego de muestra de laser tag, consulta Reaparecer Personajes del currículo de Scripting de Gameplay.

Para recrear exactamente la pantalla de reaparecer dentro del juego de muestra Laser Tag:

Crea el banner de información central.
1. Inserta un ImageLabel en el objeto OutStateGui ScreenGui.
  1. En la ventana de Explorer, navega al servicio StarterGui.
  2. Pasa el ratón sobre su objeto hijo OutStateGui, luego haz clic en el icono ⊕. Se muestra un menú contextual.
  3. Desde el menú contextual, inserta un ImageLabel.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen del nuevo botón en el medio de sí mismo (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su contenedor (50% de izquierda a derecha del ScreenGui padre, y 50% de arriba a abajo del ScreenGui padre).
  4. Establece Size en {0.48, 0},{0.06, 0} para ampliar la etiqueta (48% horizontalmente y 6% verticalmente del ScreenGui padre).
  5. Establece Name en Block.
  6. Establece Image en rbxassetid://14304827265 para hacer que la imagen sea un trapecio.
  7. Establece ImageColor en 0,0,0 para hacer que el trapecio sea negro.
  8. Establece ImageTransparency en 0.3 para reducir la opacidad de la etiqueta en un 30%, y hacer coincidir todos los elementos de interfaz de usuario negros en el juego.
3. Inserta un UIAspectRatioConstraint en Block para asegurar que la relación de aspecto de la etiqueta y sus elementos de interfaz de usuario hijos se mantenga igual sin importar el tamaño de pantalla del jugador.
4. Selecciona la nueva restricción, luego en la ventana de Properties, establece AspectRatio en 13.78.
5. Inserta un TextLabel en Block para el texto informativo.
6. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su etiqueta padre (50% de izquierda a derecha de la etiqueta padre, y 50% de arriba a abajo de la etiqueta padre).
  4. Establece Size en {.85, 0},{0.55, 0} para que el texto ocupe la mayor parte del área del trapecio (85% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Name en BodyTextLabel.
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Bold para engrosar la fuente.
  8. Establece Text en Respawning….
  9. Establece TextColor3 en 255, 255, 255 para hacer que el texto sea blanco.
  10. Habilita TextScaled.
Crea el encabezado.
1. Inserta un ImageLabel en Block.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media de sí misma (50% de izquierda a derecha de la etiqueta, y 100% de arriba a abajo de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0, 0} para colocar la etiqueta en la parte superior-media de su etiqueta padre (50% de izquierda a derecha de la etiqueta padre, y 0% de arriba a abajo de la etiqueta padre).
  4. Establece Size en {0.46, 0},{0.56, 0} para ampliar la etiqueta (46% horizontalmente y 56% verticalmente de la etiqueta padre).
  5. Establece Name en Header.
  6. Establece Image en rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
  7. Establece ImageColor en 245, 46, 46 para hacer que el desvanecimiento sea rojo y señalar que el jugador está temporalmente inactivo mientras está eliminado de la ronda.
3. Inserta un TextLabel en Header para el texto informativo.
4. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su etiqueta padre (50% de izquierda a derecha de la etiqueta padre, y 50% de arriba a abajo de la etiqueta padre).
  4. Establece Size en {.85, 0},{0.55, 0} para que el texto ocupe la mayor parte del área del desvanecimiento (85% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Name en HeaderTextLabel.
  6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
  7. Establece Weight en Black para engrosar la fuente.
  8. Establece Text en TAGGED - YOU'RE OUT!
  9. Establece TextColor3 en 255, 255, 255 para hacer que el texto sea blanco.
  10. Habilita TextScaled.
Crea el desvanecimiento alrededor de los bordes de la pantalla.
1. Inserta un ImageLabel en OutStateGui.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  2. Establece BackgroundColor3 en 0,0,0 para establecer el color de fondo de la etiqueta en negro.
  3. Establece BackgroundTransparency en 0.5 para hacer que el fondo de la etiqueta sea medio transparente.
  4. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su contenedor (50% de izquierda a derecha del ScreenGui padre, y 50% de arriba a abajo del ScreenGui padre).
  5. Establece Size en {1, 0},{1, 0} para ampliar la etiqueta a toda la pantalla (100% horizontalmente y 100% verticalmente del ScreenGui padre).
  6. Establece ZIndex en -1 para mostrar el desvanecimiento detrás de los otros elementos de interfaz de usuario.
  7. Establece Name en Header.
  8. Establece Image en rbxassetid://14309518613 para hacer que la imagen sea un desvanecimiento de borde.
  9. Establece ImageTransparency en 0.1 para hacer que el desvanecimiento sea ligeramente translúcido.
Para mejorar el rendimiento, puedes omitir el activo de imagen y en su lugar usar un objeto UIGradient con una secuencia de números de transparencia personalizada. Para aprender más sobre esta técnica de desvanecimiento, consulta Modificadores de Apariencia de UI - Gradiente.
Referencia el siguiente script de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que muestra programáticamente la pantalla de reaparecer cuando la salud de un jugador llega a cero, y están en el proceso de reaparecer de vuelta a la zona de aparición de su equipo.

El siguiente script del cliente ReplicatedStorage.PlayerStateHandler contiene funciones que desencadenan diferentes tipos de comportamiento de acuerdo con el atributo playerState. Todas las respuestas a eventos están lógicamente agrupadas en este script porque requieren un comportamiento similar de habilitar o deshabilitar los controles del jugador, el movimiento de la cámara, y qué capa de UI es visible.

Cuando la salud de un jugador llega a cero, su playerState se convierte en TaggedOut, lo que desencadena la función onTaggedOut(). onTaggedOut() desencadena inmediatamente el siguiente comportamiento:

El jugador no puede moverse en la arena.
El jugador no puede mover su cámara.
El jugador no puede usar su bláster.
El StarterGui.OutStateGui se habilita exclusivamente.

Cuando el jugador reaparece, su playerState se convierte en SelectingBlaster, lo que desencadena la función onSelectingBlaster(). onSelectingBlaster() luego habilita exclusivamente el StarterGui.PickABlasterGui, que desactiva automáticamente la pantalla de reaparecer. Para más información sobre estas condiciones, consulta Manejar el Estado del Cliente del currículo de Scripting de Gameplay.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Desactivar todas las capas de UI excepto la excepción dada
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contiene una lista de los guis que deben establecerse exclusivamente.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Habilitar la cámara para que los jugadores puedan mirar alrededor mientras seleccionan un bláster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Desactivar el bláster mientras se selecciona un bláster
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Habilitar el movimiento del jugador después de elegir un bláster
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Habilitar el bláster mientras se juega
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Programar la lógica de destrucción del campo de fuerza cuando el jugador comienza a jugar
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Desactivar controles mientras está eliminado
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Desactivar el bláster mientras está eliminado
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Habilitar controles mientras está en el vestíbulo
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Ocultar todo el HUD mientras está en el vestíbulo
	setGuiExclusivelyEnabled(nil)

	-- Desactivar el bláster mientras está en el vestíbulo
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Estado de jugador inválido ({newPlayerState})`)
	end
end

-- Manejar el estado inicial del jugador si está establecido
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Manejar futuras actualizaciones del estado del jugador
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Asegurarse de que los cambios aún se apliquen después de reaparecer
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Ahora, cada vez que la salud de un jugador llega a cero, la pantalla de reaparecer se muestra hasta que el jugador reaparece de vuelta en su zona de aparición.

Ahora que estás familiarizado con los comunes GuiObjects para la interfaz de usuario en pantalla, intenta recrear el objeto RoundResultsGui ScreenGui y todos sus hijos para la visualización en pantalla cuando los jugadores ganan o pierden un partido. Puedes usar el archivo de muestra del juego de laser tag Laser Tag .rbxl como referencia, o ajustar los valores para cumplir con los requisitos de juego de tu propio juego.

Crear objetos SurfaceGui

Para mostrar la interfaz de usuario en la superficie de una parte en el espacio 3D que responda a la lógica de scripting para cada jugador individual, puedes parentear un objeto SurfaceGui a la parte en la que deseas mostrar tu interfaz de usuario dentro del servicio ReplicatedStorage. Esta técnica asegura que tu interfaz de usuario y su lógica de scripting estén disponibles tanto para el servidor como para el cliente de cada jugador.

Los objetos SurfaceGui contienen todos los GuiObjects que se muestran en la superficie de una parte en el espacio 3D. El juego de muestra de laser tag solo incluye una instancia de un objeto SurfaceGui: el medidor de enfriamiento que se muestra sobre el bláster de cada jugador. Este objeto necesita lógica de scripting para cada jugador porque responde activamente a la entrada de cada jugador individual y proporciona retroalimentación visual de cuándo pueden disparar su bláster nuevamente.

Para crear un objeto SurfaceGui:

En la ventana de Explorer, pasa el ratón sobre el servicio ReplicatedStorage, luego haz clic en el icono ⊕. Se muestra un menú contextual.
Desde el menú contextual, inserta un objeto Part.
Inserta un objeto ScreenGui en la parte.
Renombra el SurfaceGui de acuerdo con el contexto de sus elementos de interfaz de usuario hijos.
Repite este proceso para cada elemento de interfaz de usuario que necesites mostrar en la superficie de una parte en el espacio 3D.

Medidor de enfriamiento

Un medidor de enfriamiento es un componente de interfaz de usuario que informa a los jugadores cuánto tiempo deben esperar antes de poder disparar su bláster nuevamente. Esta ligera pausa evita que los jugadores puedan disparar tan rápido como pueden hacer clic o presionar un botón, lo cual es poco realista para el juego de laser tag.

Para recrear exactamente el medidor de enfriamiento dentro del juego de muestra Laser Tag:

Crea una parte para sostener tu objeto SurfaceGui.
1. En la ventana de Explorer, pasa el ratón sobre el Workspace, luego haz clic en el icono ⊕. Se muestra un menú contextual.
2. Desde el menú contextual, inserta una parte block. Esta es una ubicación temporal para la parte para que puedas visualizar los cambios en cada paso del proceso.
Posiciona y orienta la parte alrededor de la posición de donde un personaje de jugador sostendría su bláster, luego en la ventana de Properties,
1. Establece Transparency en 1 para hacer que la parte sea completamente transparente.
2. Establece Name en CooldownBarPrefab.
3. Establece Size en 0.169, 0.027, 2.537 para escalar la parte a un tamaño aproximadamente igual a la longitud del bláster.
4. Desactiva CanCollide y CanQuery.
Inserta un SurfaceGui en CooldownBarPrefab.
Selecciona el nuevo SurfaceGui, luego en la ventana de Properties,
1. Establece Face en Top para que la interfaz de usuario se muestre mirando hacia arriba.
2. Establece LightInfluence y MaxDistance en 0.
3. Establece PixelsPerStud en 200.
Crea la barra negra.
1. Inserta un ImageLabel en el SurfaceGui.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  3. Establece BackgroundColor3 en 0,0,0 para establecer el color de fondo de la etiqueta en negro.
  4. Establece BackgroundTransparency en 0.4 para hacer que el fondo de la etiqueta sea semi-transparente.
  5. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su contenedor (50% de izquierda a derecha del SurfaceGui padre, y 50% de arriba a abajo del SurfaceGui padre).
  6. Establece Size en {1, 0},{1, 0} para ampliar la etiqueta a toda la parte (100% horizontalmente y 100% verticalmente del SurfaceGui padre).
  7. Establece Name en Container.
Redondea las esquinas del contenedor.
1. Inserta un objeto UICorner en Container.
2. Selecciona el UICorner, luego en la ventana de Properties, establece CornerRadius en 0.15, 0 para redondear ligeramente las esquinas.
Crea la barra roja.
1. Inserta un ImageLabel en Container.
2. Selecciona la nueva etiqueta, luego en la ventana de Properties,
  1. Elimina el valor predeterminado de Image.
  2. Establece AnchorPoint en 1, 0.5 para establecer el punto de origen de la etiqueta en el medio-derecho de sí misma (100% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
  3. Establece BackgroundColor3 en 172, 13, 13 para establecer el color de fondo de la etiqueta en un rojo oscuro.
  4. Establece BackgroundTransparency en 0.2 para hacer que el fondo de la etiqueta sea ligeramente transparente.
  5. Establece Name en Bar.
  6. Establece Position en {1, 0},{0.5, 0} para colocar la etiqueta en el medio-derecho de su contenedor (100% de izquierda a derecha de la etiqueta padre, y 50% de arriba a abajo de la etiqueta padre).
  7. Establece Size en {0, 0},{1, 0} para alargar la etiqueta hasta la parte superior de su etiqueta padre (0% horizontalmente y 100% verticalmente de la etiqueta padre). Este paso también es beneficioso para el comportamiento de tweening que ocurre en los scripts en el paso 8.
Redondea las esquinas de la etiqueta.
1. Inserta un objeto UICorner en Bar.
2. Selecciona el UICorner, luego en la ventana de Properties, establece CornerRadius en 0.15, 0 para redondear ligeramente las esquinas.
Mueve CooldownBarPrefab a ReplicatedStorage.
1. Crea una estructura de carpetas para organizar tus objetos de interfaz de usuario. La muestra utiliza una carpeta Instances con una carpeta hija Guis.
2. Mueve CooldownBarPrefab a Guis.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag que adjuntan programáticamente el medidor de enfriamiento al bláster del jugador, y luego animan la barra roja después de que un jugador dispare su bláster.

El siguiente script del cliente ReplicatedStorage.FirstPersonBlasterVisuals maneja toda la lógica visual para el bláster en primera persona del jugador. Requiere un conjunto de scripts de módulo que trabajan juntos para configurar los visuales del bláster que se sienten más realistas para el juego de laser tag, incluyendo FirstPersonBlasterVisuals.addCooldownBar y FirstPersonBlasterVisuals.runCooldownBarEffect.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- Agregar el rig en primera persona
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Agregar el cooldownBar
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- Esto también destruye la barra de enfriamiento ya que está parentada al rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Ejecutar efectos visuales en primera persona cuando ocurre un disparo
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Vincular el rig a la cámara si existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Actualizar la CFrame del rig en relación con la posición de la cámara y RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Maneja el cambio de visuales cuando el blasterType cambia mientras se juega
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Maneja el cambio de visuales cuando cambia el playerState
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Eliminar los visuales cuando el jugador está seleccionando un bláster o está en el vestíbulo
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Agregar los visuales nuevamente cuando el jugador termina de seleccionar el bláster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Ahora, cada vez que un jugador dispara su bláster, la barra de enfriamiento se anima para comunicar cuándo el jugador puede disparar nuevamente.

Crear objetos BillboardGui

Para mostrar elementos de interfaz de usuario dentro del espacio 3D que respondan a la lógica de scripting y siempre enfrenten la cámara de cada jugador sin importar su ángulo de visión, como nombres de jugadores o marcadores de mapa, puedes crear un objeto BillboardGui como hijo de un BasePart o Attachment que exista en el espacio 3D.

El juego de muestra de laser tag incluye dos objetos BillboardGui separados dentro del servicio ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Muestra un círculo rosa o verde sobre la cabeza de cada jugador cuando están activos en una ronda.
TaggedOutIndicatorGuiPrefab - Se muestra sobre la cabeza de un jugador cuando están eliminados de la ronda.

Después de crear un objeto BillboardGui, puedes crear y personalizar sus hijos GuiObjects de acuerdo con el propósito de cada contenedor. Para demostrar, en las secciones inmediatas que siguen, aprenderás cómo implementar elementos de interfaz de usuario para ambos tipos de indicadores dentro del juego de muestra de laser tag. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propio juego.

Para crear un objeto BillboardGui:

En la ventana de Explorer, pasa el ratón sobre un BasePart o Attachment, luego haz clic en el icono ⊕. Se muestra un menú contextual.
Desde el menú contextual, inserta un objeto BillboardGui.
Renombra el BillboardGui de acuerdo con el contexto de sus elementos de interfaz de usuario hijos.
Repite este proceso para cada elemento de interfaz de usuario que necesites mostrar contextualizadamente sobre las cabezas de los jugadores.

Indicador de equipo

Un indicador de equipo es un elemento de interfaz de usuario que informa a los jugadores a qué equipo pertenecen otros jugadores en la ronda para que puedan diferenciar fácilmente entre sus aliados y los miembros del equipo enemigo. Esta información es importante porque la jugabilidad de un juego de disparos en primera persona requiere que los jugadores tomen decisiones estratégicas rápidas mientras están en zonas de combate para que no sean eliminados y pierdan el partido.

Para recrear exactamente el indicador de equipo dentro del juego de muestra Laser Tag:

Inserta un objeto BillboardGui en un rig temporal.
1. Desde la pestaña Home o Avatar de la barra de herramientas, haz clic en Character.
2. Selecciona entre las opciones disponibles. La muestra utiliza un tipo de rig R15, una forma de cuerpo femenina, y un avatar Rthro. El rig se muestra tanto en el viewport 3D como en la ventana de Explorer bajo el nombre Rig.
3. En la ventana de Explorer, navega a la malla Head del rig, luego haz clic en el icono ⊕. Se muestra un menú contextual.
4. Desde el menú contextual, inserta un BillboardGui.
Selecciona el nuevo BillboardGui, luego en la ventana de Properties,
1. Establece LightInfluence en 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Name en OtherPlayerIndicatorPrefab.
3. Establece Size en {0, 10},{0, 10} para hacer que la etiqueta sea significativamente más pequeña.
4. Establece StudsOffsetWorldSpace en 0, 4, 0 para posicionarlo sobre la cabeza del rig.
Inserta un objeto Frame en OtherPlayerIndicatorPrefab.
Selecciona el nuevo marco, luego en la ventana de Properties,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen del marco en el medio de sí mismo (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
2. Establece BackgroundColor3 en 255, 3, 0 para establecer el color de fondo del marco en rojo como color de marcador.
3. Establece Position en {0.5, 0},{0.5, 0} para colocar el marco en el medio de su contenedor (50% de izquierda a derecha del BillboardGui padre, y 50% de arriba a abajo del BillboardGui padre).
4. Establece Size en {1, -2},{1, -2} para acortar el marco al área de superficie del BillboardGui.
Inserta un objeto UICorner en Frame para redondear completamente las esquinas.
Inserta un objeto UIStroke en Frame para contornear el círculo del indicador.
Mueve OtherPlayerIndicatorPrefab a ReplicatedStorage.
Referencia el siguiente script de ReplicatedStorage dentro del archivo de lugar de muestra Laser Tag 1A que muestra programáticamente el indicador de equipo para cada jugador en una ronda activa a menos que estén en el equipo enemigo y ocultos.

El siguiente script ReplicatedStorage.OtherPlayerIndicatorGuiSetup se ejecuta cuando los jugadores aparecen en la arena para una ronda activa. Adjunta el indicador de equipo llamando a la función addIndicatorToCharacter(), que localiza el objeto Head de cada personaje jugador que participa en la ronda. Si no tienen ya un indicador de equipo, el script clona y añade la interfaz de usuario otherPlayerIndicatorPrefab al Head del personaje, y establece el color del indicador de equipo en su color de equipo.

Si otros jugadores están en el mismo equipo, el indicador de equipo siempre se muestra, incluso si se ocultan detrás de objetos en el espacio 3D; si otros jugadores están en el equipo enemigo, el indicador de equipo solo se muestra si no hay un objeto en el espacio 3D que los oculte.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Solo agregar indicadores a jugadores que participan en la ronda
		if not otherPlayer.Team then
			return
		end

		-- Evitar agregar indicadores duplicados, creando uno nuevo solo si no existe
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- El indicador siempre está en la parte superior solo si el jugador es amigo

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Ahora, cada vez que un jugador está en una ronda activa, los indicadores de equipo se muestran sobre las cabezas de otros jugadores a menos que estén en el equipo enemigo y detrás de un objeto.

Indicador de eliminado

Un indicador de eliminado es un elemento de interfaz de usuario que informa a los jugadores cuando otros jugadores ya no están activos en la ronda y están en el proceso de reaparecer de vuelta a su zona de aparición. Esta información es importante porque la jugabilidad de un juego de disparos en primera persona requiere que los jugadores se muevan hacia su próximo objetivo tan pronto como eliminen a un jugador para que no se vuelvan vulnerables en la arena al jugar en la misma ubicación durante demasiado tiempo.

Para recrear exactamente el indicador de eliminado dentro del juego de muestra Laser Tag:

Inserta un objeto BillboardGui en un rig temporal para que puedas visualizar los cambios en cada paso del proceso.
1. Desde la pestaña Home o Avatar de la barra de herramientas, haz clic en Character.
2. Selecciona entre las opciones disponibles. La muestra utiliza un tipo de rig R15, una forma de cuerpo masculina, y un avatar Rthro. El rig se muestra tanto en el viewport 3D como en la ventana de Explorer bajo el nombre Rig.
3. En la ventana de Explorer, navega a la malla Head del rig, luego haz clic en el icono ⊕. Se muestra un menú contextual.
4. Desde el menú contextual, inserta un BillboardGui.
Selecciona el nuevo BillboardGui, luego en la ventana de Properties,
1. Establece LightInfluence en 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Name en TaggedOutIndicatorGuiPrefab.
3. Establece Size en {3, 0},{0.5, 0} para ampliar el espacio para una etiqueta.
4. Establece StudsOffset en 0, 3.25, 0 para posicionarlo sobre la cabeza de un jugador.
Inserta un objeto ImageLabel en TaggedOutIndicatorGuiPrefab.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Name en Frame.
4. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su contenedor (50% de izquierda a derecha del BillboardGui padre, y 50% de arriba a abajo del BillboardGui padre).
5. Establece Size en {1, 0},{1, 0} para ampliar la etiqueta a todo el BillboardGui (100% horizontalmente y 100% verticalmente del BillboardGui padre).
6. Establece Image en rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
7. Establece ImageColor en 245, 46, 46 para teñir la etiqueta de rojo.
Para mejorar el rendimiento, puedes omitir el activo de imagen y en su lugar usar un objeto UIGradient con una secuencia de números de transparencia personalizada. Para aprender más sobre esta técnica de desvanecimiento, consulta Modificadores de Apariencia de UI - Gradiente.
Inserta un objeto TextLabel en Frame.
Selecciona la nueva etiqueta, luego en la ventana de Properties,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha de la etiqueta, y 50% de arriba a abajo de la etiqueta).
2. Establece BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Name en BodyTextLabel.
4. Establece Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su contenedor (50% de izquierda a derecha de la etiqueta padre, y 50% de arriba a abajo de la etiqueta padre).
5. Establece Size en {0.85, 0},{0.7, 0} para que el texto ocupe la mayor parte del área del desvanecimiento (85% horizontalmente y 70% verticalmente de la etiqueta de imagen padre).
6. Establece FontFace en Montserrat para ajustarse a la estética futurista.
7. Establece Weight en Bold para engrosar la fuente.
8. Establece Text en TAGGED.
9. Establece TextColor3 en 255, 255, 255 para hacer que el texto sea blanco.
10. Habilita TextScaled.
Mueve TaggedOutIndicatorGuiPrefab a ReplicatedStorage.
Referencia los siguientes scripts de ServerScriptService dentro del archivo de lugar de muestra Laser Tag 1A que muestran programáticamente el indicador de eliminado mientras un jugador está reapareciendo de vuelta a la zona de aparición de su equipo.

El siguiente script del servidor ServerScriptService.SetupHumanoid se ejecuta tan pronto como un jugador carga el juego. Asegura que cada vez que se añade el personaje de un jugador al modelo de datos, se llama a setupHumanoidAsync con su Humanoid.

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Llamar a onCharacterAdded si el jugador ya tiene un personaje
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Llamar a onCharacterAdded para todos los futuros personajes que aparezcan para este jugador
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Llamar a onPlayerAdded para cualquier jugador que ya esté en el juego
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Llamar a onPlayerAdded para todos los futuros jugadores
Players.PlayerAdded:Connect(onPlayerAdded)

Ahora, cada vez que la salud de un jugador llega a cero, el indicador de eliminado se muestra sobre su cabeza hasta que reaparezca.

¡Felicidades por completar el Currículo de Diseño de Interfaz de Usuario! Ahora que tienes experiencia creando un estilo artístico, diseñando tus maquetas e implementando tus diseños en Studio de principio a fin, puedes extender tu proyecto con nuevas interfaces de usuario y funcionalidades, o seguir otros currículos de tutoriales, como el Currículo de Scripting de Gameplay que te enseña sobre la organización general y los detalles clave de implementación del juego de muestra de laser tag. ¡Feliz creación!