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 contextual. Este emocionante paso del tutorial es donde puedes ver todos tus diseños y el arduo trabajo reunidos en un conjunto cohesivo de flujos de trabajo que están completos y listos para la interacción del jugador.

Usando el ejemplo de experiencia de laser tag .rbxl como referencia, esta sección del currículo de diseño de interfaces 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 de la experiencia de laser tag de ejemplo.
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 hacer componentes de UI emocionantes que ayuden a los jugadores a navegar lo que pueden hacer dentro de tus experiencias.

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 propia experiencia, o utilizar el ejemplo mismo 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 en 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.

**Ícono MultiBlaster**
rbxassetid://14309094777

**Ícono SingleBlaster**
rbxassetid://14309094641

**Ícono del Equipo Rosa**
rbxassetid://14309678581

**Trapecio Invertido**
rbxassetid://14304827304

**Ícono del Equipo Verde**
rbxassetid://14309678701

**Desvanecerse**
rbxassetid://14304826876

**Desvanecimiento Multidireccional**
rbxassetid://14304827147

**Ícono de Botón de Explosión - Predeterminado**
rbxassetid://18308375067

**Ícono de Botón de Explosión - Pulsado**
rbxassetid://18308372597

**Ícono de Mira**
rbxassetid://14400935532

Ícono de Marcador de Impacto
rbxassetid://14401148777

**Ícono de Flecha de Selección**
rbxassetid://14309187282

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

Para obtener la biblioteca de activos de tu inventario a tu experiencia:

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 Toolbox. La ventana Toolbox se abre.
En la ventana Toolbox, haz clic en la pestaña Inventario. Se mostrará la clasificación Mis Modelos.
Haz clic en el menú desplegable, luego selecciona la clasificación Mis Paquetes.
Haz clic en el mosaico Componentes de UI de Pantalla Final, luego en la ventana Explorador, selecciona Componentes Completados, 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 verán y con qué interactuarán los jugadores 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 viewport en Studio no refleja necesariamente la relación de aspecto de las pantallas que los jugadores utilizan para acceder a tu experiencia, y es importante que tu UI sea legible y 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 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 ingresan a una experiencia.

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

HUDGui - Muestra información clave sobre la jugabilidad de la experiencia 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 están temporalmente invencibles.
OutStateGui - Muestra un borde oscuro alrededor de la pantalla cuando los jugadores son etiquetados fuera.
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 a implementar elementos de UI para las tres categorías de información que los jugadores necesitan saber para tener éxito en la experiencia de laser tag de muestra. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propia experiencia.

Para crear un objeto ScreenGui:

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

UI de Objetivo

Siguiendo las mejores prácticas de jerarquía visual del Wireframe Your Layouts, esta sección te enseñará a implementar todos los elementos de UI en pantalla relacionados con el objetivo de la experiencia. Este agrupamiento 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, el ejemplo proporciona un componente de UI de objetivo al que los jugadores se refieren para saber qué necesitan hacer para tener éxito en una ronda. A medida que los jugadores etiquetan 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 mensaje del encabezado. Para una revisión de alto nivel de todos los scripts de cliente y 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 de la muestra de Laser Tag:

Crea un contenedor para todo el componente.
1. Inserta un Frame en el objeto ScreenGui de HUDGui.
  1. En la ventana Explorador, 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.
2. Selecciona el nuevo Frame, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 0 para establecer el punto de origen del marco en la parte superior central del 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 establecer el marco cerca de la parte superior central 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 para captar 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 permanezca igual sin importar el tamaño de la pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 7.
Crea un contenedor para los objetos de mensaje del objetivo.
1. Inserta un Frame en Objective.
2. Selecciona el nuevo Frame, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 0 para establecer el punto de origen del marco en la parte superior central del 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 establecer 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 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 Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior central de la 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 central 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 del mensaje 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 semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que la relación de aspecto de la etiqueta permanezca igual sin importar el tamaño de la 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 Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de la 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 OBJECTIVE.
  9. Habilita TextScaled.
Crea los elementos del mensaje.
1. Inserta un ImageLabel en ObjectiveDisplay.
2. Selecciona el ImageLabel, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior central de la 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 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 la totalidad del ancho 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 semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que la relación de aspecto de la etiqueta permanezca igual sin importar el tamaño de la pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 13.781.
4. Inserta un TextLabel en Body para mostrar un mensaje.
5. Selecciona la nueva etiqueta, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de la 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 sobre el fondo oscuro.
  9. Establece Text en ¡Etiqueta a los jugadores opositores para ganar puntos! El primer equipo en %d puntos gana..
  10. Habilita TextScaled.
Crea un contenedor para los contadores de puntos del equipo del objetivo.
1. Inserta un Frame en Objective.
2. Selecciona el nuevo Frame, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior central de la 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 establecer 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 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 espaciador 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 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 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 al ancho de la mitad 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 Propiedades, navega a la sección Attributes, luego haz clic en el ícono más. Se muestra un 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 mensaje.
5. Selecciona la nueva etiqueta, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 1, 0.5 para establecer el punto de origen de la nueva etiqueta en la parte media derecha de la 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 sobre 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 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 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 hijo duplicado TextLabel de TeamBCounter, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0, 0.5 para establecer el punto de origen de la nueva etiqueta en la parte media izquierda de la 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 hijo duplicado UIStroke de TeamBCounter, luego en la ventana Propiedades, establece Color en 158, 18, 94 para contornear el guion con un trazo rosa oscuro.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra de Laser Tag que actualizan programáticamente el mensaje del objetivo y rastrean los puntos del equipo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Display Heads Up (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, 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, 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 del Wireframe Your Layouts, esta sección te enseña a implementar todos los elementos de UI en pantalla relacionados con el blaster del jugador. Este agrupamiento de elementos de UI ocupa la mayor parte del espacio en pantalla cerca del centro de la misma 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 disparen su arma. Este elemento de UI es un requisito vital para las experiencias de disparos en primera persona porque los jugadores necesitan poder apuntar con precisión su blaster y etiquetar a los miembros del equipo enemigo.

Al igual que la mayoría de las otras experiencias en el género de disparos en primera persona, la experiencia de laser tag de muestra coloca la mira en el centro de la pantalla para que los jugadores tengan un punto estático en el que concentrarse mientras su avatar se mueve a través del espacio 3D. Además de reducir el mareo, esta ubicación permite que la mira sea perceptible mientras se integra en el entorno general.

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

Inserta un ImageLabel en el objeto HUDGui ScreenGui.
1. En la ventana Explorador, 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 ImageLabel.
Selecciona el nuevo ImageLabel, luego en la ventana 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 permanezca la misma sin importar el tamaño de la 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 en el equipo enemigo. Al igual que la mira, este elemento de UI es un requisito vital para las experiencias de disparos en primera persona porque proporciona retroalimentación visual de cuándo los jugadores tienen éxito al etiquetar a sus oponentes.

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

Inserta un ImageLabel en el objeto Crosshair ImageLabel.
1. En la ventana Explorador, navega al servicio StarterGui.
2. Pasa el mouse 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 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 devuelven la transparencia a 0 cada vez que el disparo de un jugador impacta a otro jugador en el equipo enemigo.
Referencia los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de muestra de Laser Tag que muestran programáticamente el marcador de impacto cuando un disparo impacta a un jugador en el equipo enemigo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Display Heads Up (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, 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 dispara su blaster y el disparo impacta a otro jugador, el marcador de impacto se muestra momentáneamente.

Selector de Blasters

Un selector de blasters es un componente de UI que los jugadores utilizan para seleccionar su tipo de blaster antes de unirse o reincorporarse a una ronda. La experiencia 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 seleccionan los jugadores influye en su estrategia durante la ronda, haciendo de este componente de UI un flujo de trabajo esencial para la experiencia general.

Los siguientes pasos detallan cómo crear varios contenedores para los diferentes agrupamientos de elementos de UI, un encabezado con un mensaje, 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 Configuration que representan cada tipo de blaster.

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

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

Crea un contenedor para todo el componente.
1. Inserta un Frame en el objeto PickABlaster ScreenGui.
  1. En la ventana Explorador, navega al servicio StarterGui.
  2. Pasa el mouse 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 Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen del marco en la parte inferior central del 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 del medio inferior 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 UI del selector de blasters ocupen una gran parte de la pantalla para atraer 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 el marco y la relación de aspecto de sus elementos hijos permanezcan iguales sin importar el tamaño de la pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 5.
Crea un contenedor para contener los agrupamientos de elementos de UI.
1. Inserta un Frame en Component.
2. Selecciona el nuevo marco, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de los marcos en el medio de sí mismos (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 central 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 UI de selección ocupen 3/4 del contenedor (100% horizontalmente y 75% verticalmente del marco padre).
  5. Establece Name en SelectionFrame.
Crea un mensaje para el selector de blasters.
1. Inserta un ImageLabel en SelectionFrame.
2. Selecciona la nueva etiqueta, luego en la ventana Propiedades,
  1. Establece AnchorPoint en 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior central de la 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 central 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 del mensaje 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 semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en la etiqueta para asegurar que la relación de aspecto de la etiqueta permanezca igual sin importar el tamaño de la pantalla del jugador. La muestra establece su propiedad UIAspectRatioConstraint.AspectRatio en 13.78.
4. Inserta un TextLabel en Header para mostrar un mensaje.
5. Selecciona la nueva etiqueta, luego en la ventana 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 SELECCIONA 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 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 central de la 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 la experiencia.
  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 mensaje (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 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 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 espaciadores para todos los futuros botones de blaster.
1. Inserta un objeto UIListLayout en el marco del paso 5.
2. Selecciona el nuevo objeto de layout, luego en la ventana 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 objeto ImageButton en el ImageLabel del paso 4.
2. Selecciona el nuevo botón, luego en la ventana 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 media izquierda 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 en el hover de que el botón es seleccionable.
  4. Establece Position en {0.02, 0},{0.5, 0} para proporcionar espacio 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 del contenedor padre).
  5. 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).
  6. Establece Name en NavigationButtonLeft.
3. Redondear las esquinas del botón.
  1. Inserte un objeto UICorner en el botón.
  2. Seleccione el nuevo objeto de esquina, luego en la ventana de Propiedades, establezca CornerRadius en 0.1, 0 para redondear las esquinas.
4. Inserte un objeto ImageLabel en el botón.
5. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establezca AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva 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. Establezca Position en {0.45, 0},{0.5, 0} para colocar la etiqueta cerca del medio de su botón padre (45% de izquierda a derecha del botón padre, y 50% de arriba a abajo del botón padre). Este valor no está en el medio porque una flecha no visualmente parece estar en el medio del botón en {0.5, 0},{0.5, 0}.
  3. Establezca 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. Establezca BackgroundTransparency en 1 para hacer que el fondo de la imagen sea completamente transparente.
  5. Establezca Image en rbxassetid://14309187238.
  6. Establezca ScaleType en Fit.
Crear el botón de navegación derecha.
1. Duplicar NavigationButtonLeft.
2. Seleccione el botón duplicado, luego en la ventana de Propiedades,
  1. Establezca AnchorPoint en 1, 0.5 para establecer el punto de origen del nuevo botón en el medio-derecho de sí mismo (100% de izquierda a derecha del botón, y 50% de arriba a abajo del botón).
  2. Establezca Position en {0.98, 0},{0.5, 0} para proporcionar un margen a la derecha del botón desde su contenedor padre (98% de izquierda a derecha de la etiqueta padre, y 50% de arriba a abajo de la etiqueta padre).
  3. Establezca Name en NavigationButtonRight.
3. Seleccione su objeto hijo ImageLabel.
  1. Establezca Rotation en 180 para voltear la imagen.
  2. Establezca Position en {0.55, 0},{0.5, 0} para establecer la etiqueta cerca del medio de su botón padre (55% de izquierda a derecha del botón padre, y 50% de arriba a abajo del botón padre). Este valor no está en el medio porque una flecha no visualmente parece estar en el medio del botón en {0.5, 0},{0.5, 0}.
Crear el botón SELECT.
1. Inserte un ImageButton en Component. Observe cómo este proceso mantiene el botón de selección separado de SelectionFrame para que pueda agregar un margen entre la parte principal del componente y el botón de selección.
2. Seleccione el nuevo botón, luego en la ventana de Propiedades,
  1. Eliminar el valor predeterminado de Image.
  2. Establezca AnchorPoint en 0.5, 1 para establecer el punto de origen del nuevo botón en el medio-debajo de sí mismo (50% de izquierda a derecha del botón, y 100% de arriba a abajo del botón).
  3. Establezca BackgroundTransparency en 0.15 para proporcionar retroalimentación visual al pasar el cursor de que el botón es seleccionable.
  4. Establezca Position en {0.5, 0},{0.99, 0} para establecer el botón cerca del medio inferior de su contenedor (50% de izquierda a derecha del marco padre, y 99% de arriba a abajo del marco padre).
  5. Establezca Size en {0.17, 0},{0.18, 0} para alargar el botón bajo los botones de blaster (17% horizontalmente y 18% verticalmente del marco padre).
  6. Establezca Name en SelectButton.
3. Redondear las esquinas del botón.
  1. Inserte un objeto UICorner en el botón.
  2. Seleccione el nuevo objeto de esquina, luego en la ventana de Propiedades, establezca CornerRadius en 0.2, 0 para redondear las esquinas.
4. Inserte un objeto TextLabel en el botón para que pueda mostrar un llamado a la acción.
5. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establezca AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva 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. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establezca Position en {0.5, 0},{0.5, 0} para mover la etiqueta al medio del botón (50% de izquierda a derecha del botón padre, y 50% de arriba a abajo del botón padre).
  4. Establezca 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. Establezca Name en SelectTextLabel.
  6. Establezca FontFace en Montserrat para adaptarse a la estética futurista.
  7. Establezca Weight en Medium para engrosar la fuente.
  8. Establezca Text en SELECT.
  9. Habilite TextScaled.
Crear un prefab del botón de blaster.
1. En el servicio ReplicatedStorage, cree una estructura de carpetas para organizar sus objetos de UI. El ejemplo utiliza una carpeta Instances con una carpeta hija Guis.
2. Inserte un objeto ImageButton en la carpeta Guis.
3. Seleccione el nuevo botón, luego en la ventana de Propiedades,
  1. Eliminar el valor predeterminado de Image.
  2. Establezca 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 del botón, y 50% de arriba a abajo del botón).
  3. Establezca 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. Establezca LayoutOrder en 2.
  5. Establezca Name en BlasterButtonPrefab.
  6. Establezca Size en {0.8, 0},{0.8, 0}.
  7. Establezca ImageTransparency en 1 para hacer que la imagen sea completamente transparente.
4. Inserte 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 la pantalla del jugador.
5. Redondear las esquinas del botón.
  1. Inserte un objeto UICorner en BlasterButtonPrefab.
  2. Seleccione el UICorner, luego en la ventana de Propiedades, establezca CornerRadius en 0.05, 0 para redondear las esquinas.
6. Inserte un ImageLabel en BlasterButtonPrefab.
7. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Eliminar el valor predeterminado de Image.
  2. Establezca AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la nueva 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. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establezca Position en {0.52, 0},{0.497, 0} para colocar la etiqueta cerca del medio de su botón padre (52% de izquierda a derecha del botón padre, y 49.7% de arriba a abajo del botón padre). Este valor no está en el medio porque el blaster no visualmente parece estar en el medio del botón en {0.5, 0},{0.5, 0}.
  5. Establezca 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. Establezca ScaleType en Fit.
Haga referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de ejemplo 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 a la experiencia o reaparece en una ronda después de que su salud alcanza cero, este script activa todos los elementos de UI del selector de blaster hasta que el jugador realiza 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 a la experiencia o reaparece en una ronda después de que su salud alcanza cero, la UI del selector de blaster se muestra, pueden realizar una selección y cada botón funciona como se espera.

Botón de explosión

Un botón de explosión es un componente de UI que los jugadores utilizan para disparar su blaster si están accediendo a la experiencia a través de un dispositivo móvil o tableta. La experiencia de láser tag de ejemplo utiliza un botón de explosión con un icono que representa tanto una mira como una explosión para comunicar la función del botón sin texto.

Para recrear exactamente el botón de explosión dentro de la muestra Laser Tag experiencia:

Inserte un ImageButton en el objeto HUDGui ScreenGui.
1. En la ventana de Explorer, navegue al servicio StarterGui.
2. Pase el ratón sobre su objeto hijo HUDGui, luego haga clic en el ícono ⊕. Se mostrará un menú contextual.
3. En el menú contextual, inserte un ImageButton.
En el visor, mueva el botón a donde el pulgar de un jugador se apoya de manera natural para que pueda obtener una idea visual de cómo se verá el botón en el dispositivo de un jugador, luego en la ventana de Propiedades,
1. Establezca Image en rbxassetid://18308375035 para mostrar el icono del botón de explosión.
2. Establezca PressedImage en rbxassetid://18308372558 para mostrar una versión invertida del icono del botón de explosión cuando un jugador presiona el botón.
3. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establezca Name en BlastButton.
5. Establezca ScaleType en Fit para que la imagen quepa dentro de su contenedor y no se estire en varios tamaños de pantalla.
6. Establezca ImageTransparency en 0.3 para reducir la opacidad de la etiqueta para que coincida con todos los elementos de UI negros en la experiencia.
Inserte un UIAspectRatioConstraint en BlastButton para garantizar que la relación de aspecto del botón siga siendo la misma sin importar el tamaño de la pantalla del jugador.
Haga referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de ejemplo Laser Tag que muestran programáticamente el botón de explosión cuando un jugador está usando la entrada táctil en un dispositivo que acepta controles táctiles.

El siguiente script requiere un conjunto de módulos de script que trabajan juntos para configurar la pantalla principal del 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 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, cuando un jugador se une a la experiencia y usa entrada táctil en un dispositivo que acepta controles táctiles, el botón de explosión se muestra en la parte superior derecha del botón de salto.

UI del jugador

Siguiendo las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección le enseña cómo implementar todos los elementos de UI en pantalla relacionados con el estado del jugador. Este agrupamiento de elementos de UI se sitúa 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 al que los jugadores hacen referencia para descifrar rápidamente a qué equipo pertenecen tan pronto como aparecen en la zona de aparición de su equipo. La experiencia de láser tag de ejemplo proporciona dos versiones del indicador de jugador dependiendo de si el jugador está en el equipo verde o rosa.

Siguiendo la orientación de Seleccione un Tema de Color, ambas versiones del indicador de jugador combinan el color del equipo con un icono único y simple con detalles mínimos para que permanezcan 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 indicador de jugador dentro de la muestra Laser Tag experiencia:

Inserte un Frame en el objeto HUDGui ScreenGui.
1. En la ventana de Explorer, navegue al servicio StarterGui.
2. Pase el ratón sobre su objeto hijo HUDGui, luego haga clic en el ícono ⊕. Se mostrará un menú contextual.
3. En el menú contextual, inserte un Frame.
Seleccione el nuevo Frame, luego en la ventana de Propiedades,
1. Establezca AnchorPoint en 0, 1 para establecer el punto de origen del marco en el medio inferior de sí mismo (0% de izquierda a derecha del marco, y 100% de arriba a abajo del marco).
2. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establezca Name en PlayerDisplay.
4. Establezca Position en {0.02, 0},{0.97, 0} para colocar el marco cerca de la parte inferior izquierda de la pantalla.
5. Establezca Size en {0.23, 0},{0.08, 0} para acortar y ampliar el marco.
6. Habilite ClipsDescendants para recortar GuiObjects hijos que se extienden más allá del marco.
Crear la forma poligonal.
1. Inserte un ImageLabel en PlayerDisplay.
2. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establezca Image en rbxassetid://14304828123 para mostrar el icono del trapecio.
  2. Establezca AnchorPoint en 1, 1 para establecer el punto de origen de la etiqueta en la parte inferior derecha de sí misma (100% de izquierda a derecha de la etiqueta, y 100% de arriba a abajo de la etiqueta).
  3. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establezca Name en Block.
  5. Establezca Position en {1,0},{1,0} para colocar la etiqueta en el lado derecho del marco.
  6. Establezca Size en {1.858, 0},{0.581, 0} para ampliar la etiqueta fuera del marco, y acortarla a un poco más de la mitad de la longitud del marco.
  7. Establezca ImageTransparency en 0.15 para hacer que la etiqueta sea ligeramente transparente.
  8. Establezca ScaleType en Fit para garantizar que la imagen quepa dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserte un UIAspectRatioConstraint en Block para asegurar que la etiqueta y los elementos UI hijos mantengan la relación de aspecto sin importar el tamaño de la pantalla del jugador.
  2. Seleccione la nueva restricción, luego en la ventana de Propiedades, establezca AspectRatio en 13.78.
Crear la caja para el retrato del jugador.
1. Inserte un ImageLabel en PlayerDisplay.
2. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Elimine 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. Establezca AnchorPoint en 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (0% de izquierda a derecha de la etiqueta, y 100% de arriba a abajo de la etiqueta).
  3. Establezca BackgroundColor3 en 0, 0, 0 para establecer el color de fondo de la etiqueta en negro.
  4. Establezca BackgroundTransparency en 0.3 para reducir la opacidad de la etiqueta en un 30% y hacerla coincidir con todos los elementos de UI negros en la experiencia.
  5. Establezca Name en PlayerPortrait.
  6. Establezca Position en {0.11, 0},{1, 0} para colocar la etiqueta en el lado izquierdo de la forma poligonal.
  7. Establezca Size en {0.23, 0},{1, 0} para encoger la etiqueta.
  8. Establezca ImageTransparency en 0.15 para hacer que la etiqueta sea ligeramente transparente.
  9. Establezca ScaleType en Fit para que la imagen quepa dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserte un UIAspectRatioConstraint en PlayerPortrait para garantizar que la etiqueta y los elementos UI hijos mantengan la relación de aspecto sin importar el tamaño de la pantalla del jugador.
  2. Inserte un UICorner en PlayerPortrait, luego en la ventana de Propiedades, establezca CornerRadius en 0.05, 0 para redondear ligeramente las esquinas.
Crear la etiqueta de texto para el nombre del jugador.
1. Inserte un objeto TextLabel en PlayerDisplay.
2. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
  1. Establezca AnchorPoint en 0, 0.5 para establecer el punto de origen del nuevo botón en el medio izquierdo de sí mismo (0% de izquierda a derecha del botón, y 50% de arriba a abajo del botón).
  2. Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establezca Name en PlayerNameTextLabel.
  4. Establezca Position en {0.35, 0},{0.72, 0} para colocar la etiqueta en el lado derecho de su contenedor (35% de izquierda a derecha de la etiqueta padre, y 72% de arriba a abajo de la etiqueta padre).
  5. Establezca 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. Establezca FontFace en Montserrat para adaptarse a la estética futurista.
  7. Establezca Weight en Bold para engrosar la fuente.
  8. Elimine el texto de marcador de posición en la propiedad Text. Los scripts en el paso 7 insertan programáticamente el nombre del jugador en la etiqueta de texto.
  9. Habilite TextScaled.
  10. Establezca TextXAlignment en Left.
Crear los iconos y colores del equipo que se muestran a la izquierda del retrato del jugador.
1. Inserte una Folder en PlayerDisplay, luego renómbrala a TeamIcons.
2. Crear el icono y color del equipo verde.
  1. Inserte un ImageLabel en TeamIcons.
  2. Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
    
    Establezca AnchorPoint en 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (0% de izquierda a derecha de la etiqueta, y 100% de arriba a abajo de la etiqueta).
    
    Establezca BackgroundColor3 en 88, 218, 171 para establecer el color de fondo de la etiqueta en verde menta.
    
    Establezca Name en TeamAIcon.
    
    Establezca Position en {0, 0},{1, 0} para colocar la etiqueta en el lado izquierdo del marco.
    
    Establezca Size en {0.135, 0},{0.58, 0} para encoger la etiqueta al lado izquierdo del retrato del jugador.
    
    Establezca ImageTransparency en 1 para hacer que la etiqueta sea transparente.
  1. Configure 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 Propiedades, navegue a la sección de Attributes, luego haga clic en el icono de más. Se mostrará un cuadro de diálogo emergente.
    
    En el campo Name, ingrese teamColor.
    
    En el menú desplegable Type, seleccione BrickColor.
    
    Haga clic en el botón Save.
    
    Establezca el nuevo atributo teamColor en Mint.
  2. Inserte un UIAspectRatioConstraint en TeamAIcon para garantizar que la etiqueta y sus elementos UI hijos mantengan la relación de aspecto sin importar el tamaño de la pantalla del jugador.
  3. Crear el icono.
    
    Inserte un ImageLabel en TeamAIcon.
    
    Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
    
    Establezca Image en rbxassetid://14309678670 para mostrar el icono del equipo verde.
    
    Establezca 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).
    
    Establezca BackgroundTransparency en 1 para hacer que el fondo de la etiqueta sea completamente transparente.
    
    Establezca Name en Icon.
    
    Establezca Position en {0.5, 0},{0.5, 0} para colocar la etiqueta en el medio de su etiqueta padre.
    
    Establezca Size en {0.7, 0},{0.6, 0} para encoger la etiqueta.
    
    Establezca ScaleType en Fit para que la imagen quepa dentro de su contenedor y no se estire en varios tamaños de pantalla.
3. Crear el icono y color del equipo rosa.
  1. Duplicar TeamAIcon y sus hijos.
  2. Seleccione el TeamAIcon duplicado, luego en la ventana de Propiedades,
    
    Establezca BackgroundColor3 en 255, 170, 255 para establecer el color de fondo de la etiqueta en rosa carne.
    
    Establezca Name en TeamBIcon.
    
    Establezca el atributo teamColor en Carnation Pink.
    
    Seleccione el hijo duplicado Icon de TeamBIcon, luego en la ventana de Propiedades, establezca Image en rbxassetid://14309678549 para mostrar el icono del equipo rosa.
Haga referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de ejemplo Laser Tag que muestran programáticamente el indicador del jugador con el color y el icono de equipo apropiados mientras un jugador está activo en una ronda.

El siguiente script requiere un conjunto de módulos de script que trabajan juntos para configurar la pantalla principal del 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 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 se une o reincorpora a la ronda después de reaparecer, 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 visor para informar a los jugadores que están a salvo del fuego del equipo enemigo mientras se unen o reincorporan a una ronda. Siguiendo las pautas estéticas para iconos de Elegir un Estilo de Arte, la experiencia de láser tag de ejemplo 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 de toda la UI en la experiencia, sino que también comunica el estado del jugador sin texto o guía adicional.

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

Inserte un ImageLabel en el objeto ForceFieldGui ScreenGui.
1. En la ventana de Explorer, navegue al servicio StarterGui.
2. Pase el ratón sobre su objeto hijo ForceFieldGui, luego haga clic en el ícono ⊕. Se mostrará un menú contextual.
3. En el menú contextual, inserte un ImageLabel.
Seleccione la nueva etiqueta, luego en la ventana de Propiedades,
1. Establezca Image en rbxassetid://14462567888.
2. Establezca BackgroundTransparency en 0.8 para hacer que el campo de fuerza sea translúcido.
3. Establezca Size en {1, 0},{1, 0} para que la imagen llene toda la pantalla (100% horizontalmente y 100% verticalmente del ScreenGui padre).
4. Establezca ScaleType en Tile para que el hexágono se repita por toda la pantalla.
5. Establezca TileSize en {0, 104},{0, 180}.
Inserte un objeto UIGradient en la etiqueta.
Seleccione el nuevo objeto de gradiente, luego en la ventana de Propiedades,
1. Establezca Color en una secuencia de colores que comienza en azul, se vuelve blanca y luego vuelve a azul.
  1. Establezca Color en 120, 192, 250 para aplicar un matiz de azul claro a todos los hexágonos.
  2. Haga clic en la propiedad Color, luego haga clic en el botón ⋯. Se mostrará un cuadro de diálogo 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. Haga clic y arrastre en la secuencia de color hasta llegar a un valor de Time de 0.05, luego haga clic en el pequeño cuadrado junto a Color para abrir la ventana emergente Colores.
  4. Seleccione un blanco brillante, luego cierre la ventana emergente.
  5. Haga clic y arrastre en la secuencia de color hasta llegar a un valor de Time de 0.95, luego abra la ventana emergente Colores de nuevo, y seleccione el mismo color blanco que antes.
2. Establezca Rotation en 225 para que la parte azul de su secuencia de color se muestre en las esquinas superior izquierda e inferior derecha.
3. Establezca Transparency en una secuencia de número que haga que el campo de fuerza parezca que brilla.
  1. Haga clic en la propiedad Transparency, luego haga clic en el botón ⋯. Se mostrará una ventana 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. Establezca las siguientes propiedades de tiempo y valor en toda 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
Duplicar el ImageLabel del paso 2.
Seleccione el objeto UIGradient dentro de la etiqueta duplicada, luego en la ventana de Propiedades,
1. Establezca Rotation en -45 para girar la imagen para que casi se refleje entre sí a lo largo del eje Y.
2. Modificar Transparency para que el brillo se vea más orgánico.
  1. Haga clic en la propiedad Transparency, luego haga clic en el botón ⋯. Se mostrará un cuadro de diálogo de secuencia de números.
  2. Seleccione el tercer fotograma clave, luego haga clic en el botón Eliminar.
Haga referencia a los siguientes scripts de ReplicatedStorage dentro del archivo de lugar de ejemplo Laser Tag que muestran programáticamente la pantalla del campo de fuerza mientras un jugador se une o reingresa a una ronda.

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

Este script comienza escuchando el momento en que el ForceField se agrega a un personaje, desactiva los visuales de fuerza del primer persona por defecto y luego habilita el objeto ForceFieldGui de ScreenGui. Ten en cuenta que esto no impacta los visuales de tercera persona cuando los jugadores miran a otros jugadores reapareciendo de nuevo en la experiencia.

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

Los visuales de fuerza en tercera persona incluyen un orbe azul brillante alrededor del jugador que aparece en la experiencia. — Visuales 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 la fuerza desactivada
		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 se reincorpora a la ronda después de reaparecer, la nueva interfaz del campo de fuerza se muestra en lugar de los visuales por defecto de ForceField en primera persona.

Pantalla de reaparecer

Una pantalla de reaparecer es un elemento de interfaz que atenúa la vista para informar a los jugadores que han sido eliminados, y que el servidor está en el proceso de reincorporarlos a su zona de spawn. Este elemento de interfaz es importante porque le da a los jugadores tiempo para procesar que han sido eliminados, y planificar su siguiente movimiento antes de reincorporarse a la ronda activa.

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

Para recrear exactamente la pantalla de reaparecer en la experiencia 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 mouse sobre su objeto hijo OutStateGui, luego haz clic en el icono ⊕. Se mostrará 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 a 0.5, 0.5 para establecer el punto de origen del nuevo botón en el centro de sí mismo (50% de izquierda a derecha, y 50% de arriba a abajo).
  2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
  4. Establece Size a {0.48, 0},{0.06, 0} para ampliar la etiqueta (48% horizontalmente y 6% verticalmente).
  5. Establece Name a Block.
  6. Establece Image a rbxassetid://14304827265 para hacer que la imagen sea un trapecio.
  7. Establece ImageColor a 0,0,0 para hacer que el trapecio sea negro.
  8. Establece ImageTransparency a 0.3 para reducir la opacidad de la etiqueta en un 30%, y coincidir con todos los elementos de interfaz negros en la experiencia.
3. Inserta un UIAspectRatioConstraint en Block para asegurarte de que la relación de aspecto de la etiqueta y sus elementos de interfaz hijos se mantengan constantes sin importar el tamaño de pantalla del jugador.
4. Selecciona la nueva restricción, luego en la ventana de Properties, establece AspectRatio a 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 a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el centro de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
  2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
  4. Establece Size a {.85, 0},{0.55, 0} para que el texto ocupe la mayor parte del área del trapecio (85% horizontalmente y 55% verticalmente).
  5. Establece Name a BodyTextLabel.
  6. Establece FontFace a Montserrat para adaptarse a la estética futurista.
  7. Establece Weight a Bold para engrosar la fuente.
  8. Establece Text a Reapareciendo....
  9. Establece TextColor3 a 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 a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior-media (50% de izquierda a derecha, y 100% de arriba a abajo).
  2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position a {0.5, 0},{0, 0} para establecer la etiqueta en la parte superior-media de su contenedor (50% de izquierda a derecha, y 0% de arriba a abajo).
  4. Establece Size a {0.46, 0},{0.56, 0} para ampliar la etiqueta (46% horizontalmente y 56% verticalmente).
  5. Establece Name a Header.
  6. Establece Image a rbxassetid://14304826985 para hacer que la imagen tenga un desvanecimiento multidireccional.
  7. Establece ImageColor a 245, 46, 46 para hacer que el desvanecimiento sea rojo y signifique que el jugador está temporalmente inactivo mientras está etiquetado fuera 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 a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el centro de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
  2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
  4. Establece Size a {.85, 0},{0.55, 0} para que el texto ocupe la mayor parte del área del desvanecimiento (85% horizontalmente y 55% verticalmente).
  5. Establece Name a HeaderTextLabel.
  6. Establece FontFace a Montserrat para adaptarse a la estética futurista.
  7. Establece Weight a Black para engrosar la fuente.
  8. Establece Text a ¡ETIQUETADO - ESTÁS FUERA!
  9. Establece TextColor3 a 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 a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el centro de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
  2. Establece BackgroundColor3 a 0,0,0 para establecer el color de fondo de la etiqueta a negro.
  3. Establece BackgroundTransparency a 0.5 para hacer que el fondo de la etiqueta sea medio transparente.
  4. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
  5. Establece Size a {1, 0},{1, 0} para expandir la etiqueta a toda la pantalla (100% horizontal y 100% vertical).
  6. Establece ZIndex a -1 para mostrar el desvanecimiento detrás de otros elementos de interfaz.
  7. Establece Name a Header.
  8. Establece Image a rbxassetid://14309518613 para hacer que la imagen tenga un desvanecimiento en el borde.
  9. Establece ImageTransparency a 0.1 para hacer que el desvanecimiento sea ligeramente translúcido.
Para mejorar el rendimiento, puedes omitir el activo de imagen y 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 ReplicatedStorage dentro del archivo 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 nuevo en la zona de spawn de su equipo.

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

Cuando la salud de un jugador llega a cero, su playerState se convierte en TaggedOut, lo cual desencadena la función onTaggedOut(). onTaggedOut() el 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 cual desencadena la función onSelectingBlaster(). onSelectingBlaster() habilita exclusivamente el StarterGui.PickABlasterGui, que desactiva automáticamente la pantalla de reaparecer. Para más información sobre estas condiciones, consulta Manejar Estado del Cliente del currículo de Scripting de Juego.


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"),
}

-- Deshabilita todas las capas de interfaz 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()
	-- Habilita la cámara para que los jugadores puedan mirar alrededor mientras seleccionan un bláster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Deshabilita el bláster mientras seleccionan un bláster
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

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

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

	-- Programa la lógica para destruir el campo de fuerza cuando el jugador comienza a jugar
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Deshabilita los controles mientras está etiquetado fuera
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Deshabilita el bláster mientras está etiquetado fuera
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Habilita los controles mientras está en el lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Oculta toda la HUD mientras está en el lobby
	setGuiExclusivelyEnabled(nil)

	-- Deshabilita el bláster mientras está en el lobby
	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

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

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

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

-- Asegúrate 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, se muestra la pantalla de reaparecer hasta que el jugador reaparece de nuevo en su zona de spawn.

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

Crear objetos SurfaceGui

Para mostrar la interfaz en la superficie de una pieza en el espacio 3D que responda a la lógica de scripting para cada jugador individual, puedes parentear un objeto SurfaceGui a la pieza donde deseas mostrar tu interfaz dentro del servicio ReplicatedStorage. Esta técnica asegura que tu interfaz 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 GuiObjects que se muestran en la superficie de una pieza en el espacio 3D. La experiencia 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 sobre cuándo pueden disparar su bláster nuevamente.

Para crear un objeto SurfaceGui:

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

Medidor de enfriamiento

Un medidor de enfriamiento es un componente de interfaz 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 no es realista para la jugabilidad de laser tag.

Para recrear exactamente el medidor de enfriamiento dentro de la experiencia de muestra Laser Tag:

Crea una pieza para sostener tu objeto SurfaceGui.
1. En la ventana de Explorer, pasa el mouse sobre el Workspace, luego haz clic en el icono ⊕. Se mostrará un menú contextual.
2. Desde el menú contextual, inserta una pieza de tipo bloque. Esta es una ubicación temporal para la pieza para que puedas visualizar los cambios en cada paso del proceso.
Posiciona y orienta la pieza alrededor de la posición de donde un personaje sostendría su bláster, luego en la ventana de Properties,
1. Establece Transparency a 1 para hacer que la pieza sea completamente transparente.
2. Establece Name a CooldownBarPrefab.
3. Establece Size a 0.169, 0.027, 2.537 para escalar la pieza 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 a Top para que la interfaz se muestre mirando hacia arriba.
2. Establece LightInfluence y MaxDistance a 0.
3. Establece PixelsPerStud a 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 por defecto de Image.
  2. Establece AnchorPoint a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
  3. Establece BackgroundColor3 a 0,0,0 para que el color de fondo de la etiqueta sea negro.
  4. Establece BackgroundTransparency a 0.4 para hacer que el fondo de la etiqueta sea semi-transparente.
  5. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
  6. Establece Size a {1, 0},{1, 0} para ampliar la etiqueta al tamaño completo de la parte (100% horizontalmente y 100% verticalmente del SurfaceGui padre).
  7. Establece Name a 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 a 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 por defecto de Image.
  2. Establece AnchorPoint a 1, 0.5 para establecer el punto de origen de la etiqueta en la parte media derecha (100% de izquierda a derecha, y 50% de arriba a abajo).
  3. Establece BackgroundColor3 a 172, 13, 13 para establecer el color de fondo de la etiqueta a un rojo oscuro.
  4. Establece BackgroundTransparency a 0.2 para hacer que el fondo de la etiqueta sea ligeramente transparente.
  5. Establece Name a Bar.
  6. Establece Position a {1, 0},{0.5, 0} para colocar la etiqueta en el medio derecho de su contenedor (100% de izquierda a derecha, y 50% de arriba a abajo).
  7. Establece Size a {0, 0},{1, 0} para alargar la etiqueta hasta la parte superior de su etiqueta padre (0% horizontalmente y 100% verticalmente). 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 a 0.15, 0 para redondear ligeramente las esquinas.
Mueve CooldownBarPrefab a ReplicatedStorage.
1. Crea una estructura de carpetas para organizar tus objetos de interfaz. 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 muestra Laser Tag que adjuntan programáticamente el medidor de enfriamiento al bláster del jugador, luego animan la barra roja después de que un jugador dispare su bláster.

El siguiente script cliente ReplicatedStorage.FirstPersonBlasterVisuals maneja toda la lógica visual para el bláster de primera persona del jugador. Requiere un conjunto de scripts de módulo que funcionan juntos para configurar visuales de bláster que se sientan más realistas para la jugabilidad 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 de 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

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

-- Vincula el rig a la cámara si existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Actualiza el CFrame del rig relativo a 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 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 estado del jugador
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Elimina los visuales cuando el jugador está seleccionando un bláster o está en el lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Agrega los visuales de nuevo 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 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.

La experiencia 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 etiquetados fuera de la ronda.

Después de crear un objeto BillboardGui, 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 interfaz para ambos tipos de indicadores dentro de la experiencia de muestra de laser tag. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propia experiencia.

Para crear un objeto BillboardGui:

En la ventana de Explorer, pasa el mouse sobre un BasePart o Attachment, luego haz clic en el icono ⊕. Se mostrará un menú contextual.
Desde el menú contextual, inserta un objeto BillboardGui.
Renombra el BillboardGui según el contexto de sus elementos de interfaz hijos.
Repite este proceso para cada elemento de interfaz que necesites mostrar contextualizadamente sobre la cabeza de los jugadores.

Indicador de equipo

Un indicador de equipo es un elemento de interfaz 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 una experiencia 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 de la experiencia de muestra Laser Tag:

Inserta un objeto BillboardGui en un rig temporal.
1. Desde la pestaña Inicio o Avatar de la barra de herramientas, haz clic en Personaje.
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 con el nombre Rig.
3. En la ventana de Explorer, navega al hijo Head de la malla del rig, luego haz clic en el icono ⊕. Se mostrará un menú contextual.
4. Desde el menú contextual, inserta un BillboardGui.
Selecciona el nuevo BillboardGui, luego en la ventana de Properties,
1. Establece LightInfluence a 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Name a OtherPlayerIndicatorPrefab.
3. Establece Size a {0, 10},{0, 10} para hacer que la etiqueta sea significativamente más pequeña.
4. Establece StudsOffsetWorldSpace a 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 a 0.5, 0.5 para establecer el punto de origen del marco en el medio de sí mismo (50% de izquierda a derecha, y 50% de arriba a abajo).
2. Establece BackgroundColor3 a 255, 3, 0 para establecer el color de fondo del marco a rojo como color de marcador.
3. Establece Position a {0.5, 0},{0.5, 0} para centrar el marco en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
4. Establece Size a {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 delinear el círculo del indicador.
Mueve OtherPlayerIndicatorPrefab a ReplicatedStorage.
Referencia el siguiente script ReplicatedStorage dentro del archivo 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 agrega la UI otherPlayerIndicatorPrefab a la cabeza del personaje, y establece el color del indicador de equipo a su color de equipo.

Si otros jugadores están en el mismo equipo, el indicador de equipo siempre se muestra, incluso si están ocultos 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 participando 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 amigable

		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, se muestran indicadores de equipo sobre las cabezas de otros jugadores a menos que estén en el equipo enemigo y detrás de un objeto.

Indicador de etiquetado fuera

Un indicador de etiquetado fuera es un elemento de interfaz 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 nuevo en su zona de spawn. Esta información es importante porque la jugabilidad de una experiencia de disparos en primera persona requiere que los jugadores pasen a su siguiente objetivo tan pronto como etiqueten a un jugador para que no se vuelvan vulnerables en la arena al permanecer demasiado tiempo en la misma ubicación.

Para recrear exactamente el indicador de etiquetado fuera dentro de la experiencia 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 Inicio o Avatar de la barra de herramientas, haz clic en Personaje.
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 con el nombre Rig.
3. En la ventana de Explorer, navega al hijo Head de la malla del rig, luego haz clic en el icono ⊕. Se mostrará un menú contextual.
4. Desde el menú contextual, inserta un BillboardGui.
Selecciona el nuevo BillboardGui, luego en la ventana de Properties,
1. Establece LightInfluence a 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Name a TaggedOutIndicatorGuiPrefab.
3. Establece Size a {3, 0},{0.5, 0} para ampliar el espacio para una etiqueta.
4. Establece StudsOffset a 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 a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Name a Frame.
4. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
5. Establece Size a {1, 0},{1, 0} para ampliar la etiqueta al tamaño completo del BillboardGui (100% horizontalmente y 100% verticalmente del BillboardGui padre).
6. Establece Image a rbxassetid://14304826985 para hacer que la imagen tenga un desvanecimiento multidireccional.
7. Establece ImageColor a 245, 46, 46 para teñir la etiqueta de rojo.
Para mejorar el rendimiento, puedes omitir el activo de imagen y 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 a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% de izquierda a derecha, y 50% de arriba a abajo).
2. Establece BackgroundTransparency a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Name a BodyTextLabel.
4. Establece Position a {0.5, 0},{0.5, 0} para centrar la etiqueta en su contenedor (50% de izquierda a derecha, y 50% de arriba a abajo).
5. Establece Size a {0.85, 0},{0.7, 0} para que el texto ocupe la mayor parte del área de desvanecimiento (85% horizontalmente y 70% verticalmente de la etiqueta padre).
6. Establece FontFace a Montserrat para ajustarse a la estética futurista.
7. Establece Weight a Bold para engrosar la fuente.
8. Establece Text a ETIQUETADO.
9. Establece TextColor3 a 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 muestra Laser Tag 1A que muestran programáticamente el indicador de etiquetado fuera mientras un jugador está reapareciendo de nuevo en la zona de spawn de su equipo.

El siguiente script de servidor ServerScriptService.SetupHumanoid se ejecuta tan pronto como un jugador carga la experiencia. Asegura que siempre que el personaje de un jugador se agregue al modelo de datos, se llame 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)
	-- Llama a onCharacterAdded si el jugador ya tiene un personaje
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Llama a onCharacterAdded para todos los futuros personajes que aparezcan para este jugador
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Llama a onPlayerAdded para cualquier jugador ya en el juego
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Llama 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 etiquetado fuera se muestra sobre su cabeza hasta que reaparezca.

¡Felicidades por completar el Currículo de Diseño de Interfaces! Ahora que tienes experiencia creando un estilo de arte, esbozando tus diseños y aplicando tus diseños en Studio de principio a fin, puedes extender tu proyecto con nuevas interfaces y funcionalidades, o seguir otros currículos de tutoriales, como el Currículo de Scripting de Juego que te enseña sobre la organización general y los detalles clave de implementación de la experiencia de laser tag de muestra. ¡Feliz creación!