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

Implantar tus diseños es el proceso de creación de tus wireframes en Studio utilizando tanto elementos de UI incorporados como personalizados con scripts que activan tu contexto de UI de forma contextual. Esta emocionante etapa del tutorial es donde ves todos tus diseños y el trabajo duro que hay detrás de ellos para completar y preparar tu conjunto de flujos de trabajo para jugadores.

Usando la experiencia de etiqueta láser Example.rbxl como referencia, esta sección del curso de diseño de UI muestra cómo llevar tu planificación de UI a la vida, incluyendo la guía sobre:

Recuperando ID de activos de la biblioteca de activos de la interfaz de usuario para que pueda recrear los componentes de la interfaz de usuario de la experiencia de etiqueta láser.
Emular varios dispositivos directamente en Studio para ver cómo se muestra tu UI en diferentes pantallas y ratios de aspecto.
Crear ScreenGui, SurfaceGui y BillboardGui objetos para mostrar tu UI en las pantallas de los jugadores, las superficies de las partes y el espacio 3D, respectivamente.

Después de revisar las técnicas en esta sección, puede aplicarlas a sus propios proyectos para crear componentes de UI emocionantes que ayudan a los jugadores a navegar por lo que pueden hacer en sus experiencias.

Las instrucciones en esta sección del tutorial le muestran cómo recrear exactamente los componentes de la interfaz de usuario usando la Biblioteca de Composantes de Interfaz de Usuario. Este proceso toma alrededor de 90 minutos o menos desde el comienzo hasta el final. Si no desea usar los valores proporcionados, puede ajustar cada elemento de la interfaz de usuario para cumplir con las especificaciones de su propia experiencia o usar la muestra en sí misma para el resto del tutorial.

Obtener Biblioteca de Activos

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

**MultiBlaster Icon** rbxassetid://14309094777

**Icono de SingleBlaster** rbxassetid://14309094641

**Icono de equipo rosa** rbxassetid://14309678581

**Trampa de huevo de cabeza hacia abajo** rbxassetid://14304827304

**Icono del equipo verde** rbxassetid://14309678701

**Desaparición** rbxassetid://14304826876

**Fade multidireccional** rbxassetid://14304827147

**Icono de botón de explosión - Por defecto** rbxassetid://18308375067

**Icono de botón de explosión - Presionado** rbxassetid://18308372597

**Icono de mira cruzada** rbxassetid://14400935532

Icono de marcador de golpe rbxassetid://14401148777

**Fondo de transición de la interfaz de usuario** rbxassetid://14309518632

Puede agregar la mayoría de la biblioteca a su inventario dentro de Studio haciendo clic en el enlace Añadir al inventario en el siguiente componente. Una vez que los recursos estén dentro de su inventario, puede reutilizarlos en cualquier proyecto en la plataforma.

Final Screen UI Components

Reference the completed version of the UI designs with these 2D assets.

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

En la barra de menú, seleccione la pestaña Ver .
En la sección Mostrar , haz clic en Caja de herramientas . La ventana Caja de herramientas se muestra.
En la ventana Caja de herramientas , haz clic en la pestaña Inventario . La pantalla de clasificación de Mis modelos muestra.
Haga clic en el menú desplegable y luego seleccione el Ordenar mis paquetes ordenar.
Haga clic en la Superficie de usuario final de la interfaz de usuario, luego en la mosaicoExplorer, seleccione Completado Componentes y luego arrastrearlos en el servicio 2>StarterGui2>. Ahora puede habilitar cualquiera de los componentes finales para referirse a su diseño.

Emular dispositivos

El Emulador de Dispositivos de Studio te permite probar cómo los jugadores verán y interactuarán con tu UI en varios dispositivos. Esta herramienta es una parte vital del proceso de implementación porque la proporción de aspecto de tu ventana de vista en Studio no refleja necesariamente la proporción de aspecto de las pantallas que los jugadores usan para acceder a tu experiencia, y es importante que tu UI sea legible y accesible en todos los dispositivos.

Por ejemplo, si no prueba su UI en una gama de tamaños de pantalla, los jugadores con pantallas grandes pueden no ser capaces de leer su texto o descifrar sus iconos, y los jugadores con pantallas pequeñas pueden no ser capaces de ver el espacio 3D porque sus elementos de UI toman demasiado espacio en la pantalla.

Para emular su pantalla a la menor tamaño de pantalla:

En la barra de menú, seleccione la pestaña Prueba .
En la sección Emulación , haz clic en Dispositivo . La ventana cambia para reflejar la proporción de aspecto de un portátil promedio.
En el menú desplegable de resolución, seleccione Resolución Actual . Esto le permite ver la resolución real de sus elementos de UI en el dispositivo que está emulando.
En el menú desplegable de dispositivos, seleccione el dispositivo con el tamaño de pantalla más pequeño que los jugadores pueden usar para acceder a su experiencia. Mientras que la mejor opción varía según los dispositivos que soporta su experiencia, la experiencia de etiqueta láser de muelles prueba con un iPhone 4S para ver cómo se ve la interfaz de usuario con un espacio de pantalla limitado.

Crear Objetos de Interfaz de Usuario

Para mostrar elementos de UI en la pantalla de cada jugador, puedes crear un objeto de ScreenGui en el servicio StarterGui. Los objetos de ScreenGui son los contenedores principales para la interfaz de usuario en la pantalla, y el servicio 2>Class.StarterGui2> copia su contenido

Puedes crear múltiples objetos de ScreenGui para organizar y mostrar agrupaciones de elementos de UI contextualmente durante todo el juego. Por ejemplo, la experiencia de etiqueta láser muestra cinco objetos de ScreenGui que inicialmente están deshabilitados hasta que los jugadores cumplan diferentes condiciones durante el flujo de trabajo principal de la experiencia:

HUDGui - Muestra información clave sobre el juego del experienciacuando los jugadores están activos en una ronda, como el objetivo y el total de puntos de cada equipo.
PickABlasterGui - Muestra todas las opciones de blaster cuando los jugadores comienzan o se unen a una ronda.
ForceFieldGui - Muestra una cuadrícula hexagonal cuando los jugadores seleccionan 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 capa 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 su hijo GuiObjects según el propósito de cada contenedor. Para demostrar, en las secciones inmediatas que seguir, aprenderás a implementar elementos de UI para los jugadores de la etiqueta láser que necesitan tener éxito en

Para crear un objeto ScreenGui

En la ventana Explorador , pasa el mouse sobre el servicio StarterGui y luego haz clic en el ícono ⊕ . Se muestra un menú contextual.
Inserta un ScreenGUI .
Renombre el ScreenGUI según el contexto de sus elementos de interfaz de usuario hijos.
Repita este proceso para cada agrupación de elementos de UI que necesita para mostrar en la pantalla de cada jugador.

Interfaz de objetivo

Siga las mejores prácticas de la jerarquía visual de Wireframe Your Layouts , esta sección le enseña cómo implementar todos los elementos de la interfaz de usuario relacionados con el objetivo de la experiencia. Este agrupamiento de elementos de la interfaz de usuario está cerca de la parte superior de la pantalla porque el objetivo y cada punto de equipo tienen la mayor significación en cómo ganar el juego.

Por ejemplo, la muestra proporciona un componente de UI objetivo que los jugadores refieren para saber qué deben hacer para tener éxito en una ronda. A medida que los jugadores etiquetan a los miembros del equipo enemigos y ganan puntos, este componente rastrea el puntaje de cada equipo contra el puntaje total dentro del enlace de la cabecera. Para una revisión de alto nivel de todos los scripts del cliente y del servidor que trabajan juntos para rastrear los punt

Para replicar exactamente la interfaz de usuario objetivo dentro de la experiencia Laser Tag :

Cree un contenedor para todo el componente.
1. Inserta un Marco en el objeto HUDGui ScreenGui
  1. En la ventana Explorador, navegue hasta el servicio StarterGui.
  2. Pase el cursor sobre su objeto hijo HUDGui , luego haga clic en el ícono⊕. Se muestra un menú contextual.
  3. Del menú contextual, inserta un Marco .
2. Seleccione el nuevo Marco , luego en la ventana Propiedades,
  1. Establece AnchorPoint a 0.5, 0 para establecer el punto de origen del marco en la parte superior del marco (50% desde la izquierda a la derecha del marco y 0% desde la parte superior del marco).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.03, 0} para establecer el marco cerca de la parte superior del pantalla (50% desde la izquierda a la derecha de la pantalla, y 3% desde la parte superior a la parte inferior de la pantalla para que haya un poco de espacio de sobra).
  4. Establece Tamaño a {0.5, 0},{0.13, 0} para que los elementos del marco ocupen una gran parte de la parte superior de la pantalla para atraer la atención de los jugadores (50% horizontalmente, y 13% verticalmente).
  5. Establece Nombre a Objetivo .
3. (Opcional) Inserta un UIAspectRatioConstraint dentro de Objetivo para asegurar que el aspecto del etiqueta se mantenga el mismo sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad 0> Class.UIAspectRatioConstraint.AspectRatio 0> a 3> 7 3> .
Crea un contenedor para los objetos de solicitud del objetivo.
1. Inserta un Marco en Objetivo .
2. Seleccione el nuevo Marco , luego en la ventana Propiedades,
  1. Establece AnchorPoint a 0.5, 0 para establecer el punto de origen del marco en la parte superior del marco (50% desde la izquierda a la derecha del marco y 0% desde la parte superior del marco).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0, 0} para establecer el marco en el centro del contenedor (50% desde la izquierda a la derecha de la marco padre y 0% desde la parte superior a la inferior de la marco padre).
  4. Establece Tamaño a {1, 0},{0.67, 0} para que los componentes de la interfaz de selección tomen aproximadamente la mitad del contenedor desde arriba hacia abajo (100% horizontalmente y 67% verticalmente del marco padre).
  5. Establece Nombre a ObjectiveDisplay .
Crea los elementos de título.
1. Inserta un ImageLabel en ObjectiveDisplay .
2. Seleccione el Etiqueta de imagen , luego en la ventana Propiedades,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en el centro inferior de sí mismo (50% de la izquierda a la derecha de la etiqueta y 100% de la parte superior a la izquierda de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Ordenar página a -1 .
  4. Establece Posición a {0.5, 0},{0.34, 0} para establecer la etiqueta cerca de la parte superior e inferior central del marco (50% desde la izquierda a la derecha del marco padre, y 34% desde la parte superior a la parte inferior del marco padre).
  5. Establece Tamaño a {0.46, 0},{0.34, 0} para ampliar el área de sugerencia hasta casi la mitad del marco (46% horizontalmente y 34% verticalmente del marco padre).
  6. Establece Nombre a la cabecera.
  7. Establece Imagen a rbxassetid://14304828123 para mostrar un trapezoid.
  8. Establece Transparencia de imagen a 0.15 para hacer que el encabezado sea semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que el aspecto del etiqueta se mantenga el mismo sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad 0> Class.UIAspectRatioConstraint.AspectRatio0> a 3>13.781 3> .
4. Inserta un TextLabel en Encabezado para mostrar un título.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {0.62, 0},{0.55, 0} para ampliar el espacio de texto a más del 50% del etiqueta padre (62% horizontalmente y 55% verticalmente del etiqueta padre).
  5. Establece Nombre a Etiqueta de nombre de encabezado .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Medio para espesar el tipo.
  8. Establece Texto a OBJETIVO .
  9. Habilita TextScaled .
Crea los elementos de solicitud.
1. Inserta un ImageLabel en ObjectiveDisplay .
2. Seleccione el Etiqueta de imagen , luego en la ventana Propiedades,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en el centro inferior de sí mismo (50% de la izquierda a la derecha de la etiqueta y 100% de la parte superior a la izquierda de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{1, 0} para mover la etiqueta hacia la parte inferior del marco padre (50% desde la izquierda a la derecha del marco padre y 100% desde la parte superior a la parte inferior del marco padre).
  4. Establece Tamaño a {0.89, 0},{0.66, 0} para ampliar el espacio de texto casi al máximo ancho de la marco padre (89% horizontalmente y 66% verticalmente del marco padre).
  5. Establece Nombre a Cuerpo .
  6. Establece Imagen a rbxassetid://14304827265 para mostrar un trapezoid de cabece para abajo.
  7. Establece Color de imagen3 a 0, 0, 0 para tonificar la imagen negra.
  8. Establece Transparencia de imagen a 0.3 para hacer que el encabezado sea semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en el ImageLabel para asegurar que el aspecto del etiqueta se mantenga el mismo sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad 0> Class.UIAspectRatioConstraint.AspectRatio 0> a 3> 13.781 3> .
4. Inserta un TextLabel en Cuerpo para mostrar una solicitud.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más del 50% del etiqueta padre (85% horizontalmente y 39% verticalmente del etiqueta padre).
  5. Establece Nombre a BodyTextLabel .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Medio para espesar el tipo.
  8. Establece Color de texto3 a 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
  9. ¡Establece un Texto a Etiqueta para marcar puntos! El primer equipo en conseguir %d puntos gana.
  10. Habilita TextScaled .
Cree un contenedor para los contadores de equipos del objetivo.
1. Inserta un Marco en Objetivo .
2. Seleccione el nuevo Marco , luego en la ventana Propiedades,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior y central de sí mismo (50% de la izquierda a la derecha del marco y 100% de la parte superior a la parte inferior del marco).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a {0.5, 0},{1, 0} para establecer el marco en el centro inferior del contenedor (50% desde la izquierda a la derecha del marco padre y 100% desde la parte superior a la parte inferior del marco padre).
  4. Establece Tamaño a {0.44, 0},{0.27, 0} para que los componentes de la interfaz de usuario de selección tomen aproximadamente la mitad del contenedor desde la izquierda a la derecha (44% horizontalmente y 27% verticalmente del marco padre).
  5. Establece Nombre a TeamPointCounter .
Crear almohadillas para los contadores del equipo.
1. Inserta un objeto UIListLayout en el marco desde el paso 5.
2. Seleccione el objeto UIListLayout y luego en la ventana Propiedades ,
  1. Establece Amortiguación a 0.025, 0 para proporcionar espacio entre los contadores futuros del equipo.
  2. Establece Llenar dirección a horizontal para que cada contador de equipo se muestre al lado de cada otro.
  3. Establece Alineamiento horizontal a Centro para que cada equipo se alinee en el medio el uno del otro.
Crea los elementos del mostrador del equipo verde.
1. Inserta un ImageLabel en TeamPointCounter .
2. Seleccione el Etiqueta de imagen , luego en la ventana Propiedades,
  1. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  2. Establece Posición a {0.5, 0},{1, 0} para mover la etiqueta hacia la parte inferior del marco padre (50% desde la izquierda a la derecha del marco padre y 100% desde la parte superior a la parte inferior del marco padre).
  3. Establece Tamaño a {0.5, 0},{1, 0} para ampliar la etiqueta a la mitad de la marco padre (50% horizontalmente y 100% verticalmente del marco padre).
  4. Establece Nombre a TeamACount .
  5. Establece Imagen a rbxassetid://14304826831 para mostrar un desvanecimiento direccional.
  6. Establece Color de imagen3 a 88, 218, 171 para tonificar la imagen verde menta.
3. Configura un atributo personalizado para rastrear que esta etiqueta es para el equipo verde.
  1. En la ventana Propiedades , navegue a la sección Atributos y luego haga clic en el íconode plus. Se muestra un diálogo pop-up.
  2. En el campo Nombre , ingrese teamColor .
  3. En el menú Tipo del cuadro desplegable, seleccione Color de ladrillo .
  4. Haga clic en el botón Guardar .
  5. Establece el nuevo atributo teamColor en Mint .
4. Inserta un TextLabel en TeamACountner para mostrar una solicitud.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 1, 0.5 para establecer el punto de origen de la nueva etiqueta en el centro derecho de sí mismo (100% desde la izquierda a la derecha de la etiqueta, y 50% desde la parte superior a la inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.95, 0},{0.5, 0} para mover la etiqueta a la derecha de su etiqueta padre (95% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más del 50% del etiqueta padre (85% horizontalmente y 39% verticalmente del etiqueta padre).
  5. Establece FontFace a Montserrat para ajustar el futurista estético.
  6. Establece Peso a Negrito para espesar el tipo.
  7. Establece Color de texto3 a 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
  8. Establece Texto a - .
  9. Habilita TextScaled .
  10. Establece TextXAlignment a Derecha .
6. Inserta un objeto UIStroke en el TextLabel , luego en la ventana Propiedades , establece el 1>Color1> a 4> 8, 78, 524> para contornojar el guión con un trazo verde oscuro.
Crea los elementos del mostrador del equipo rosa.
1. Duplica TeamAICounter y sus hijos.
2. Seleccione el duplicado TeamACount , luego en la ventana Propiedades ,
  1. Establece Nombre a TeamBCounter .
  2. Establece Imagen a rbxassetid://14305849451 para mostrar un desvanecimiento direccional en la dirección opuesta.
  3. Establece Color de imagen3 a 255, 170, 255 para tonificar el tono de la imagen rosa.
  4. Establece el atributo teamColor en Carnation Pink .
3. Seleccione el hijo de TextLabel duplicado de TeamBCounter y luego en la ventana de Propiedades ,
  1. Establece AnchorPoint en 0, 0.5 para establecer el nuevo punto de origen de la etiqueta en el centro izquierdo de sí mismo (0% desde la izquierda hacia la derecha de la etiqueta, y 50% desde la parte superior hacia la parte inferior de la etiqueta).
  2. Establece Posición a {0.05, 0},{0.5, 0} para mover la etiqueta a la izquierda de su etiqueta padre (5% desde la izquierda a la derecha de la etiqueta padre, y 50% desde la parte superior a la parte inferior de la etiqueta padre).
  3. Establece Alineamiento de Texto a Izquierda .
4. Seleccione el hijo duplicado de UIStroke de TeamBCounter , luego en la ventana Propiedades , establezca 1> Color1> a 4> 158, 18, 944> para contornojar el guión con un trazo de tinte rosa oscuro.
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que actualizan programáticamente el mensaje de objetivo y rastrear puntos de equipo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Heads Up Display (HUD), incluido setObjective y startSyncingTeamPoints . Después de que un jugador se una a una ronda y seleccione su blaster, este script garantiza que todos los elementos de la interfaz de usuario de HUD se muestren apropiadamente para el estado, el dispositivo y el 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 seleccione su blaster, la interfaz de usuario objetivo se muestra en la parte superior de su pantalla y rastrea los puntos de cada equipo.

Interfaz de usuario de Blaster

Siga las mejores prácticas de la jerarquía visual de Wireframe Your Layouts , esta sección le enseña cómo implementar todos los elementos de la interfaz de usuario relacionados con el blaster del jugador. Este agrupamiento de elementos de la interfaz de usuario toma la mayor parte del espacio de la pantalla cerca del centro de la pantalla porque actúa como el punto focal para atraer la atención del jugador a la acción en el espacio 3D, y tiene la mayor significación para

Crosshair

Un crosshair es un elemento de UI que informa a los jugadores a dónde van a hacer un impacto cuando arrojan su arma. Este elemento de UI es una exigencia de juego vital para las experiencias de primer persona de los shooters porque los jugadores deben ser capaces de apuntar con precisión su arma y etiquetar a los miembros del equipo enemigos.

Al igual que la mayoría de las otras experiencias en el género shooter de primera persona, la experiencia de etiqueta láser de muelles muestra la crosa en el centro de la pantalla para que los jugadores tengan algo estático para enfocar mientras su avatar se mueve a través del espacio 3D. Además de reducir el vértigo del movimiento, esta colocación permite que la crosa sea perceptible mientras se mezcla con el entorno, ambientegeneral.

Para recrear exactamente el crosshair dentro de la experiencia Laser Tag :

Inserta un ImageLabel en el objeto HUDGui ScreenGui
1. En la ventana Explorador, navegue hasta el servicio StarterGui.
2. Pase el cursor sobre su objeto hijo HUDGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
3. Del menú contextual, inserta un ImageLabel .
Seleccione el nuevo ImageLabel , luego en la ventana Propiedades,
1. Establece Imagen a rbxassetid://14400935446 .
2. Establece AnchorPoint a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
3. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Nombre a Crosshair .
5. Establece Posición a {0.5,0},{0.5,0} para establecer la etiqueta en el medio de la pantalla.
6. Establece ScaleType a 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 el aspecto del etiqueta se mantenga el mismo sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad 0> Class.UIAspectRatioConstraint.AspectRatio0> a 3> 0.895 3> .

Marcador de Hit

Un marcador de golpe es un elemento de UI que solo se muestra cuando un impacto hace daño con otro jugador en el equipo enemigo. Como el crosshair, este elemento de UI es una requisito de juego vital para las experiencias de primer personaje de disparo porque proporciona una retroalimentación visual de cuando los jugadores son exitosos en etiquetar a sus oponentes.

Para replicar exactamente el marcador de hit dentro de la experiencia Laser Tag :

Inserta un ImageLabel en el objeto Crosshair ImageLabel
1. En la ventana Explorador, navegue hasta el servicio StarterGui.
2. Pase el cursor sobre su objeto hijo Crosshair , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
3. Del menú contextual, inserta un ImageLabel .
Seleccione el nuevo ImageLabel , luego en la ventana Propiedades,
1. Establece Imagen a rbxassetid://14401148736 para mostrar el íconode marcador rectangular.
2. Establece AnchorPoint a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta.
3. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Posición a {0.5,0},{0.5,0} para establecer la etiqueta en el medio de la pantalla.
5. Establece Nombre a Hitmarker .
6. Establece Tamaño a {0.6, 0},{0.06, 0} para reducir el tamaño de los rectángulos alrededor del medio de la cruz.
7. Establece Transparencia de imagen a 1 para hacer que el marcador de golpe sea completamente transparente. Los scripts en el siguiente paso vuelven a establecer la transparencia a 0 cada vez que el impacto de un jugador hace impacto con otro jugador en el equipo enemigo.
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que muestra programáticamente el marcador de golpe cuando un ataque hace impacto con un jugador en el equipo enemigo.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Heads Up Display (HUD), incluido setupHitmarker . Después de que un jugador se una a una ronda y seleccione su blaster, este script garantiza que todos los elementos de la interfaz de usuario de HUD se muestren apropiadamente para el estado, el dispositivo y el 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, siempre que un jugador dispare su bláster y la explosión tenga impacto con otro jugador, el marcador de golpe se muestra temporalmente.

Seleccionador de Blaster

Un seleccionador de bláster es un componente de UI que los jugadores usan para seleccionar su tipo de bláster antes de unirse o volver a unirse a una ronda. La experiencia de etiqueta láser muestra dos tipos de bláster: uno que produce varios rayos con un ancho, horizontal despliegue, y otro que produce un solo rayo. El tipo de bláster que los jugadores seleccionan afecta su estrategia durante la ronda, haciendo que esta experiencia de UI sea un flujo de trabajo esencial para la experi

Las siguientes etapas detallan cómo crear varios contenedores para los diferentes elementos de la interfaz de usuario, un encabezado con un mensaje, los botones de navegación y selección y un prefabricado de botón de blaster según las instancias Configuration que representan cada tipo de blaster. La lógica de script para el componente general populariza diferentes características visuales en el botón de blaster según las instancias Class.Configuration que representan cada tipo de blaster.

Esta configuración le permite crear instancias adicionales de Configuration para más tipos de armas que se muestran automáticamente dentro del seleccionador de armas sin necesidad de crear botones individuales dentro de StarterGui.PickABlasterGui .

Para recrear exactamente el seleccionador de bláster dentro de la experiencia Laser Tag :

Cree un contenedor para todo el componente.
1. Inserta un Marco en el objeto PickABlaster Class.ScreenGui
  1. En la ventana Explorador, navegue hasta el servicio StarterGui.
  2. Pase el cursor sobre su objeto hijo PickABlaster , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
  3. Del menú contextual, inserta un Marco .
2. Seleccione el nuevo marco, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen del marco en el centro inferior del marco (50% desde la izquierda a la derecha del marco, y 100% desde la parte superior a la parte inferior del marco).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.9, 0} para establecer el marco cerca del centro inferior de la pantalla (50% desde la izquierda a la derecha de la pantalla y 92.4% desde la parte superior a la parte inferior de la pantalla).
  4. Establece Tamaño a {0.8, 0},{0.25, 0} para que los componentes de la interfaz de usuario del seleccionador de bláster ocupen una gran parte de la pantalla para atraer la atención de los jugadores (80% horizontalmente, y 25% verticalmente).
  5. Establece Nombre a Componente .
3. (Opcional) Inserta un UIAspectRatioConstraint dentro de Componente para asegurar que el marco y sus elementos de la interfaz de usuario tengan la misma apariencia sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad 0> Class.UIAspectRatioConstraint.AspectRatio 0> a 3> 5 3> .
Crea un contenedor para almacenar agrupaciones de elementos de UI.
1. Inserta un marco en un Componente .
2. Seleccione 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 centro de sí mismo (50% de la izquierda a la derecha del marco y 50% de la parte superior a la parte inferior del marco).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a 0.5, 0,0.375, 0 para establecer el marco cerca de la parte superior del contenedor (50% desde la izquierda a la derecha del marco padre y 37.5% desde la parte superior del marco padre).
  4. Establece Tamaño a {1, 0},{0.75, 0} para que los componentes de la interfaz de selección tomen el 3/4 del contenedor (100% horizontalmente y 75% verticalmente del marco padre).
  5. Establece Nombre a SelectionFrame .
Crea un mensaje para el seleccionador de bláster.
1. Inserta un ImageLabel en SelectionFrame .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en el centro inferior de sí mismo (50% de la izquierda a la derecha de la etiqueta y 100% de la parte superior a la izquierda de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Ordenar página a -1 .
  4. Establece Posición a {0.5, 0},{0.22, 0} para establecer la etiqueta cerca de la parte superior e inferior central del marco (50% desde la izquierda a la derecha del marco padre, y 22% desde la parte superior a la parte inferior del marco padre).
  5. Establece Tamaño a {0.45, 0},{0.22, 0} para ampliar el área de sugerencia hasta casi la mitad del marco (45% horizontalmente y 22% verticalmente del marco padre).
  6. Establece Nombre a Cabecera .
  7. Establece Imagen a rbxassetid://14304828123 para mostrar un trapezoid.
  8. Establece Transparencia de imagen a 0.15 para hacer que el encabezado sea semitransparente.
3. (Opcional) Inserta un UIAspectRatioConstraint en la etiqueta para asegurar que el aspecto del etiqueta se mantenga el mismo sin importar el tamaño de la pantalla del jugador. El ejemplo establece su propiedad UIAspectRatioConstraint.AspectRatio a 0> 13.78 0> .
4. Inserta un TextLabel en cabecera para mostrar una solicitud.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {0.6, 0},{0.55, 0} para ampliar el espacio de texto a más del 50% del etiqueta padre (60% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Nombre a Etiqueta de nombre de encabezado .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Medio para espesar el tipo.
  8. Establece Texto a ESCOGE UN BLASTER .
  9. Habilita TextScaled .
Crea el contenedor para tu botón de blaster y flechas de selección.
1. Inserta un ImageLabel en SelectionFrame .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en el centro inferior de sí mismo (50% de la izquierda a la derecha de la etiqueta y 100% de la parte superior a la izquierda de la etiqueta).
  3. Establece Color de fondo a 0, 0, 0 para hacer que la etiqueta sea negra.
  4. Establece Transparencia de Fondo a 0.3 para reducir el opacidad de la etiqueta en un 30% y encontrar todos los elementos de la interfaz de usuario negros en la experiencia.
  5. Establece la posición a {0.5, 0},{1, 0} para establecer la etiqueta en la parte inferior del marco (50% desde la izquierda a la derecha del marco padre, y 100% desde la parte superior del marco padre).
  6. Establece Tamaño a {1, 0},{0.77, 0} para ampliar el área de etiqueta al espacio debajo del mensaje (100% horizontalmente y 77% verticalmente del marco padre).
3. Ronda las esquinas del contenedor.
  1. Inserta un objeto UICorner en la etiqueta.
  2. Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca CornerRadius para alrededor de los esquina.
Crea el contenedor para tus botones de destrucción.
1. Inserta un Marco en la etiqueta desde el paso 4.
2. Seleccione el nuevo marco, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la nueva ventana en el medio de sí misma (50% de la izquierda a la derecha de la ventana, y 50% de la parte superior a la parte inferior de la ventana).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo del marco sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para establecer el marco en el centro de su etiqueta padre (50% de la izquierda a la derecha del marco padre, y 50% de la parte superior a la parte inferior del marco padre).
  4. Establece Tamaño a {0.85, 0},{0.77, 0} para ampliar el área de marco a la mayoría de la etiqueta (85% horizontalmente y 77% verticalmente de la etiqueta padre).
  5. Establece Nombre a Contenedor .
Crea almohadillas para todos los botones futuros del blaster.
1. Inserta un objeto UIListLayout en el marco desde el paso 5.
2. Seleccione el nuevo objeto de layout, luego en la ventana Propiedades ,
  1. Establece Amortiguación a 0.035, 0 para proporcionar espacio entre todos los botones futuros.
  2. Establece Llenar dirección a horizontal para que cada botón se muestre al lado de cada uno.
  3. Establece ambas Alineamiento horizontal y Alineamiento vertical para centro para que cada botón se alinee con el medio del otro.
Crea el botón de navegación de la izquierda.
1. Inserta un objeto ImageButton en el ImageLabel desde el paso 4.
2. Seleccione el nuevo botón, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 0, 0.5 para establecer el nuevo punto de origen del botón en el centro izquierdo de sí mismo (0% desde el lado izquierdo del botón, y 50% desde el topo del botón).
  3. Establece Transparencia de Fondo a 0.15 para proporcionar comentarios visuales sobre el botón que se puede seleccionar.
  4. Establece Posición a {0.02, 0},{0.5, 0} para proporcionar amortiguación a la izquierda del botón de su contenedor padre (2% de la izquierda a la derecha del contenedor padre y 50% de la parte superior a la parte inferior del contenedor etiqueta).
  5. Establece Tamaño a {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 los padres (4% horizontalmente y 33% verticalmente del marco padre).
  6. Establece Nombre a NavigationButtonLeft .
3. Ronda las esquinas del botón.
  1. Inserta un objeto UICorner en el botón.
  2. Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca CornerRadius para alrededor de los esquina.
4. Inserta un objeto ImageLabel en el botón.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Posición a 0.45, 0,0.5, 0 para establecer la etiqueta cerca del medio de su botón padre (45% desde la izquierda a la derecha del botón padre, y 50% desde la parte superior a la parte inferior del botón padre). Este valor no está en el medio porque una fle
  3. Establece Tamaño a {0.8, 0},{0.8, 0} para ampliar el área de etiqueta al espacio debajo de la solicitud (80% horizontalmente y 80% verticalmente del marco padre).
  4. Establece Transparencia de Fondo a 1 para hacer que el fondo de la imagen sea completamente transparente.
  5. Establece Imagen a rbxassetid://14309187238 .
  6. Establece Tipo de escala a Ajustar .
Crea el botón de navegación correcto.
1. Duplicate Botón de Navegación Izquierdo .
2. Seleccione el botón duplicado, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 1, 0.5 para establecer el nuevo punto de origen del botón en el centro derecho de sí mismo (100% desde la izquierda a la derecha del botón y 50% desde la parte superior a la inferior del botón).
  2. Establece Posición a {0.98, 0},{0.5, 0} para proporcionar amortiguación a la derecha del botón desde su contenedor padre (98% desde la izquierda a la derecha del contenedor padre y 50% desde la parte superior a la parte inferior del contenedor etiqueta).
  3. Establece Nombre a Botón de Navegación Derecho .
3. Seleccione su ImageLabel objeto hijo.
  1. Establece Rotación a 180 para girar la imagen.
  2. Establece Posición a 0.55, 0,0.5, 0 para establecer la etiqueta cerca del medio de su botón padre (55% desde la izquierda a la derecha del botón padre, y 50% desde la parte superior a la parte inferior del botón padre). Este valor no está en el medio porque una fle
Crea el botón SELECT .
1. Inserta un ImageButton en Componente . Nota cómo este proceso mantiene el botón de selección separado de SelectionFrame para que puedas agregar espacio entre la parte principal del componentente desde el botón de selección.
2. Seleccione el nuevo botón, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 0.5, 1 para establecer el nuevo punto de origen del botón en la parte inferior y central de sí mismo (50% desde la izquierda a la derecha del botón y 100% desde la parte superior a la parte inferior del botón).
  3. Establece Transparencia de Fondo a 0.15 para proporcionar comentarios visuales sobre el botón que se puede seleccionar.
  4. Establece Posición a {0.5, 0},{0.99, 0} para establecer el botón cerca del medio inferior de su contenedor (50% desde la izquierda a la derecha del marco padre, y 99% desde la parte superior del marco padre).
  5. Establece Tamaño a {0.17, 0},{0.18, 0} para que la parte inferior del botón (17% horizontalmente y 18% verticalmente del marco padre) tenga la longitud del botón.
  6. Establece Nombre a Botón de Selección .
3. Ronda las esquinas del botón.
  1. Inserta un objeto UICorner en el botón.
  2. Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca CornerRadius para alrededor de los esquina.
4. Inserta un objeto TextLabel en el botón para que puedas mostrar un llamado a la acción.
5. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al medio del botón (50% desde la izquierda a la derecha del botón padre, y 50% desde la parte superior a la inferior del botón padre).
  4. Establece Tamaño a {0.9, 0},{0.55, 0} para ampliar el espacio de texto casi a toda la altura de la etiqueta padre (90% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Nombre a Seleccionar TextLabel .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Medio para espesar el tipo.
  8. Establece Texto a SELECCIONAR .
  9. Habilita TextScaled .
Crea un prefabricado de botón de blaster.
1. En el servicio Almacenamiento Replicado , crea una estructura de carpeta para organizar tus objetos de UI. El ejemplo usa un directorio de instancias con un sub directorio de Guis .
2. Inserta un objeto ImageButton en la carpeta Guis.
3. Seleccione el nuevo botón, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen del botón en el medio de sí mismo (50% de la izquierda a la derecha del botón, y 50% de la parte superior a la parte inferior del botón).
  3. Establece Transparencia de Fondo a 0.65 para proporcionar comentarios visuales que el botón no está en el enfoque. Los scripts en el paso 12 proporcionan comentarios visuales programáticos cuando el botón está en el enfoque.
  4. Establece Ordenar página a 2 .
  5. Establece Nombre a BlasterButtonPrefab .
  6. Establece Tamaño a {0.8, 0},{0.8, 0} .
  7. Establece Transparencia de imagen a 1 para hacer que la imagen sea completamente transparente.
4. Inserta un UIAspectRatioConstraint en BlasterButtonPrefab para asegurar que el aspecto del botón se mantenga el mismo dentro del componente sin importar el tamaño de la pantalla del jugador.
5. Ronda las esquinas del botón.
  1. Inserta un objeto UICorner en BlasterButtonPrefab .
  2. Seleccione el Esquina UI , luego en la ventana Propiedades , establezca CornerRadius en 1> 0.05, 01> para redondear las esquinas.
6. Inserta un ImageLabel en BlasterButtonPrefab .
7. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  3. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establece Posición a 0.52, 0,0.497, 0 para establecer la etiqueta cerca del medio de su botón padre (52% desde la izquierda a la derecha del botón padre, y 49.7% desde la parte superior a la parte inferior del botón padre). Este
  5. Establece Tamaño a {1.20, 0},{0.9, 0} para ampliar el área de etiqueta fuera del botón (120% horizontalmente y 90% verticalmente del botón padre).
  6. Establece Tipo de escala a Ajustar .
Consulte los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que muestran los botones de forma programática para cada blaster, escala los botones cuando un jugador selecciona un botón que no está en el enfoque, y ataca la selección del jugador para su avatar.

El siguiente script requiere un conjunto de scripts que trabajan juntos para crear el seleccionador de armas. Cuando un jugador se une a la experiencia o reaparece en una ronda después de que su salud alcance cero, este script activa todos los elementos de la interfaz de usuario del seleccionador de armas hasta que el jugador haga 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 alcance cero, la interfaz de usuario del seleccionador de bláster se muestra, pueden hacer 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 usan para explotar su bláster si están accediendo a la experiencia a través de un dispositivo móvil o tablet. La experiencia de etiqueta de láser de muestra usa un botón de explosión con un icono que representa tanto un crosshair como un blast para comunicar la función del botón sin texto.

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

Inserta un ImageButton en el objeto HUDGui ScreenGui
1. En la ventana Explorador, navegue hasta el servicio StarterGui.
2. Pase el cursor sobre su objeto hijo HUDGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
3. Del menú contextual, insértate un ImageButton .
En la ventana de vista, mueva el botón a donde el pulgar de un jugador se coloca naturalmente para que pueda obtener una sensación visual de lo que el botón se verá en el dispositivo del jugador, luego en la ventana de Propiedades ,
1. Establece Imagen a rbxassetid://18308375035 para mostrar el íconodel botón de explosión.
2. Establece PressedImage a rbxassetid://18308372558 para mostrar una versión invertida del icono del botón de explosión cuando un jugador presiona el botón.
3. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
4. Establece Nombre a Botón de Explosión .
5. Establece ScaleType a Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
6. Establece Transparencia de imagen a 0.3 para reducir la opacidad de la etiqueta para que coincida con todos los elementos de la interfaz de usuario negros en la experiencia.
Inserta un UIAspectRatioConstraint en BlastButton para asegurar que el aspecto del botón se mantenga el mismo sin importar el tamaño de la pantalla del jugador.
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que muestra programáticamente el botón de láser cuando un jugador está usando entrada táctil en un dispositivo que acepta controles táctiles.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Heads Up Display (HUD), incluido setupTouchButtonAsync . Después de que un jugador se una a una ronda y seleccione su blaster, este script garantiza que todos los elementos de la interfaz de usuario de HUD se muestren apropiadamente para el estado, el dispositivo y el estado del equipo del jugador.


local Players = game:GetService("Players")

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

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

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

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

Interfaz de usuario del jugador

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

Indicador de jugador

Un indicador de jugador es un componente de UI que los jugadores se refieren para decodificar rápidamente qué equipo pertenece tan pronto como aparecen en su zona de spawn. La experiencia de etiqueta láser muestra dos versiones del indicador de jugador dependiendo de si el jugador está en el equipo verde o rosa.

Siga las instrucciones de Selecciona un Tema de Color , ambas versiones del indicador del jugador combinan el color del equipo con un icono único, simple y con detalle mínimo para que sigan siendo legibles en pequeñas pantallas. Proporcionar dos formas de retroalimentación visual es importante, ya que ayuda a mantener el diseño accesible para los jugadores con ceguera de color.

Para replicar exactamente el componente del indicador del jugador dentro de la experiencia Laser Tag :

Inserta un Marco en el objeto HUDGui ScreenGui
1. En la ventana Explorador, navegue hasta el servicio StarterGui.
2. Pase el cursor sobre su objeto hijo HUDGui , luego haga clic en el ícono⊕. Se muestra un menú contextual.
3. Del menú contextual, inserta un Marco .
Seleccione el nuevo Marco , luego en la ventana Propiedades,
1. Establece AnchorPoint a 0, 1 para establecer el punto de origen del marco en el centro inferior del marco (0% desde la izquierda a la derecha del marco y 100% desde la parte superior del marco).
2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Nombre a PlayerDisplay .
4. Establece Posición a 0.02, 0,0.97, 0 para establecer el marco cerca de la parte inferior izquierda de la pantalla.
5. Establece Tamaño a {0.23, 0},{0.08, 0} para cortar y ancho el marco.
6. Habilita ClipsDescendants para cortar los GuiObjects hijos que se extienden más allá del marco.
Crea la forma poligonal.
1. Inserta un ImageLabel en PlayerDisplay .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece Imagen a rbxassetid://14304828123 para mostrar el íconodel trapezio.
  2. Establece AnchorPoint a 1, 1 para establecer el punto de origen de la etiqueta en la parte inferior derecha de sí mismo (100% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la etiqueta).
  3. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  4. Establece Nombre a Bloquear .
  5. Establece Posición a {1,0},{1,0} para establecer la etiqueta en el lado derecho de la ventana.
  6. Establece Tamaño a {1.858, 0},{0.581, 0} para ampliar la etiqueta fuera del marco y acortarla un poco más de la mitad de la longitud del marco.
  7. Establece Transparencia de imagen a 0.15 para hacer que la etiqueta sea ligeramente transparente.
  8. Establece ScaleType a Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserta un UIAspectRatioConstraint en Bloque para asegurar que el aspecto de los elementos de la etiqueta y sus hijos UI se mantenga el mismo sin importar el tamaño de la pantalla del jugador.
  2. Seleccione la nueva restricción, luego en la ventana Propiedades , establezca AspectRatio en 13.78 .
Crea la caja para el retrato del jugador.
1. Inserta un ImageLabel en PlayerDisplay .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Elimina el ID de activo de reemplazo dentro de la propiedad Imagen . Los scripts en el paso 7 programan visualmente el retrato del jugador en la etiqueta de la imagen.
  2. Establece AnchorPoint a 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí mismo (0% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
  3. Establece Color de Fondo3 a 0, 0, 0 para establecer el color de fondo de la etiqueta a negro.
  4. Establece Transparencia de Fondo a 0.3 para reducir el opacidad de la etiqueta en un 30% y encontrar todos los elementos de la interfaz de usuario negros en la experiencia.
  5. Establece Nombre a PlayerPortrait .
  6. Establece Posición a {0.11, 0},{1, 0} para establecer la etiqueta en el lado izquierdo de la forma poligonal.
  7. Establece Tamaño a {0.23, 0},{1, 0} para encoger la etiqueta.
  8. Establece Transparencia de imagen a 0.15 para hacer que la etiqueta sea ligeramente transparente.
  9. Establece ScaleType a Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
  1. Inserta un UIAspectRatioConstraint en PlayerPortrait para asegurar que el aspecto del etiqueta y sus elementos de UI se mantenga el mismo sin importar el tamaño de la pantalla del jugador.
  2. Inserta un Esquina de UICorner en PlayerPortrait , luego en la ventana Propiedades , establece 1> CornerRadius1> a 4> 0.05, 0 4> para redondear ligeramente las esquinas.
Crea la etiqueta de texto para el nombre del jugador.
1. Inserta un objeto TextLabel en PlayerDisplay .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0, 0.5 para establecer el nuevo punto de origen del botón en el centro izquierdo de sí mismo (0% desde el lado izquierdo del botón, y 50% desde el topo del botón).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Nombre a PlayerNameTextLabel .
  4. Establece Posición a {0.35, 0},{0.72, 0} para establecer la etiqueta en el lado derecho de su contenedor (35% desde el lado izquierdo del etiqueta padre, y 72% desde el topo del etiqueta padre).
  5. Establece Tamaño a {0.52, 0},{0.3, 0} para que el texto pueda ocupar la mayor parte de la zona de forma poligonal (52% horizontalmente y 30% verticalmente del marco padre).
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Negrito para espesar el tipo.
  8. Elimina el texto de relleno dentro de la propiedad Texto . Los scripts en el paso 7 programan secuencialmente el nombre del jugador en la etiqueta de texto.
  9. Habilita TextScaled .
  10. Establece Alineamiento de Texto a Izquierda .
Crea los iconos y colores del equipo que se muestran a la izquierda del retrato del jugador.
1. Inserta una carpeta en PlayerDisplay , luego renombrala TeamIcons .
2. Crea el icono y el color del equipo verde .
  1. Inserta un ImageLabel en TeamIcons .
  2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
    
    Establece AnchorPoint a 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí mismo (0% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
    
    Establece Color de fondo3 a 88, 218, 171 para establecer el color de fondo de la etiqueta en verde menta.
    
    Establece Nombre a TeamAIcon .
    
    Establece Posición a {0, 0},{1, 0} para establecer la etiqueta en el lado izquierdo del marco.
    
    Establece Tamaño a {0.135, 0},{0.58, 0} para encoger la etiqueta a la izquierda del retrato del jugador.
    
    Establece Transparencia de imagen a 1 para hacer que la etiqueta sea transparente.
  1. Configura un atributo personalizado para rastrear que este etiqueta es para el equipo verde. Este paso es muy importante para los scripts en el paso 7.
    
    En la ventana Propiedades , navegue a la sección Atributos y luego haga clic en el íconode plus. Se muestra un diálogo pop-up.
    
    En el campo Nombre , ingrese teamColor .
    
    En el menú Tipo del cuadro desplegable, seleccione Color de ladrillo .
    
    Haga clic en el botón Guardar .
    
    Establece el nuevo atributo teamColor en Mint .
  2. Inserta un UIAspectRatioConstraint en TeamAIcon para asegurar que el aspecto de los elementos de la etiqueta y sus hijos UI se mantenga el mismo sin importar el tamaño de la pantalla del jugador.
  3. Crea el ícono.
    
    Inserta un ImageLabel en TeamAIcon .
    
    Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
    
    Establece Imagen a rbxassetid://14309678670 para mostrar el íconodel equipo verde.
    
    Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
    
    Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
    
    Establece Nombre a Icono .
    
    Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su etiqueta padre.
    
    Establece Tamaño a {0.7, 0},{0.6, 0} para encoger la etiqueta.
    
    Establece ScaleType a Fit para que la imagen se ajuste dentro de su contenedor y no se estire en varios tamaños de pantalla.
3. Crea el icono de equipo rosa y el color.
  1. Duplica TeamAIcon y sus hijos.
  2. Seleccione el duplicado TeamAIcon , luego en la ventana Propiedades ,
    
    Establece Color de Fondo3 a 255, 170, 255 para establecer el color de fondo de la etiqueta en carne de rosa.
    
    Establece Nombre a TeamBIcon .
    
    Establece el atributo teamColor en Carnation Pink .
    
    Seleccione el hijo duplicado de Icono de TeamBIcon , luego en la ventana Propiedades , establezca 1> Imagen1> a 4> rbxassetid://14309678549 4> para mostrar el íconodel equipo rosa.
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que muestra programáticamente el indicador del jugador con el color y el icono del equipo adecuado mientras un jugador está activo en una ronda.

El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal Heads Up Display (HUD), incluido startSyncingTeamColor , setPlayerName y setPlayerPortrait . Después de que un jugador se una a una ronda y seleccione su blaster, este script garantiza que todos los elementos de la interfaz de usuario de HUD se muestren adec


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, siempre que un jugador se una o se una de nuevo a la ronda después de reaparecer, el indicador del jugador se muestra en la parte inferior izquierda de su pantalla.

Campo de Fuerza

Una pantalla de campo de fuerza es un elemento de la interfaz de usuario que superpone la ventana de visualización para informar a los jugadores que están a salvo del fuego del equipo enemigo mientras se unen o vuelven a unirse a una ronda. Según las pautas estéticas para los iconos de elegir un estilo de arte, la experiencia de etiqueta láser utiliza un patrón de celos semitr

Para replicar exactamente la pantalla del campo de fuerza dentro de la experiencia Laser Tag :

Inserta un ImageLabel en el objeto ForceFieldGui ScreenGui
1. En la ventana Explorador, navegue hasta el servicio StarterGui.
2. Pase el cursor sobre su objeto hijo ForceFieldGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
3. Del menú contextual, inserta un ImageLabel .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
1. Establece Imagen a rbxassetid://14462567888 .
2. Establece Transparencia de Fondo a 0.8 para hacer que el campo de fuerza sea translúcido.
3. Establece Tamaño a {1, 0},{1, 0} para llenar la imagen con toda la pantalla (100% horizontalmente y 100% verticalmente de la pantalla padre ScreenGUI).
4. Establece ScaleType a Tile para hacer que el cuadrante azulejo se estire en todo el espacio de pantalla.
5. Establece TileSize a {0, 104},{0, 180} .
Inserta un objeto UIGradient en la etiqueta.
Seleccione el nuevo objeto degradado, luego en la ventana Propiedades ,
1. Establece Color a una secuencia de colores que comienza con azul, se vuelve blanco y luego se vuelve azul de nuevo.
  1. Establece Color a 120, 192, 250 para aplicar un tinte azul claro a todos los hexágonos.
  2. Haga clic en la propiedad Color , luego haga clic en el botón ⋯ . Se muestra una secuencia de colores.
    
    Cada triángulo en el eje inferior de la secuencia de colores es un punto de interfereencia que determina el valor de color de la propiedad en ese momento de la imagen desde la izquierda a la derecha.
  3. Haz clic y arrastra en el secuencia de colores hasta que alcances un valor de Tiempo de 0.05, luego haz clic en el pequeño cuadrado junto a Color para abrir la ventana pop-up de 2> Colores2>.
  4. Seleccione un blanco brillante, luego cierre la ventana emergente.
  5. Haga clic y arrastre en la secuencia de colores hasta que alcance un valor de Tiempo de 0.95, luego abra la ventana emergente de Colores y seleccione el mismo color blanco que antes.
2. Establece Rotación a 225 para que la parte azul de tu secuencia de colores se muestre en los ángulos superiores izquierdo y derecho.
3. Establece Transparencia a una secuencia de números que hace que el campo de fuerza se vea como si estuviera brillante.
  1. Haga clic en la propiedad Transparencia, luego haga clic en el botón ⋯. Se muestra una ventana emergente de secuencia de números. Cada cuadrado en el comienzo y el final de la secuencia de números es un punto de inicio que determina el valor de transparencia de la propiedad en ese momento de la imagen desde la izquierda a la derecha.
  2. Establezca las siguientes propiedades de tiempo y valor a lo largo de la secuencia de números:
  - Tiempo = 0 , Valor = 0> 0.250>
  - Tiempo = .101, Valor = 0> 0.8750>
  - Tiempo = .183 , Valor = 0> 00>
  - Tiempo = .3 , Valor = 0> 10>
  - Tiempo = .7 , Valor = 0> 10>
  - Tiempo = 1 , Valor = 0> 0.90>
Duplica el ImageLabel del paso 2.
Selecciona el objeto UIGradient dentro de la etiqueta duplicada, luego en la ventana Propiedades ,
1. Establece Rotación a -45 para voltear la imagen para que casi se dupliquen entre sí en el eje Y.
2. Modifica Transparencia para hacer que el brillo de luces de tinte más orgánico.
  1. Haga clic en la propiedad Transparencia , luego haga clic en el botón ⋯ . Se muestra una secuencia de números.
  2. Seleccione el tercer fotograma claveclave, luego haga clic en el botón Eliminar .
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que muestra programáticamente la pantalla del campo de fuerza mientras un jugador se une o se une a una ronda.

El siguiente ReplicatedStorage.ForceFieldClientVisuals script del cliente sustituye el visual por defecto de ForceField con StarterGui.ForceFieldGui . Cuando los jugadores se cargan en una experiencia y se generan en un Class.SpawnLocation con una propiedad de 2>Duration

Este script comienza escuchando cuando se agrega el ForceField a un personaje, desactiva las imágenes de campo de fuerza por defecto y luego habilita el objeto Class.ScreenGui Class.ForceFieldGui. Tenga en cuenta que esto no tiene ScreenGui impacto en los visuales de terceros cuando los jugadores miran a otros jugadores reapareciendo en la experiencia.

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen. — Primera visualización de campo de fuerza en primera persona

Third-person force field visuals include a blue sparkling orb around the player spawning into the experience. — Visuales de campo de fuerza de terceras personas


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 spawn con ForceField desactivado
		return
	end

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

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

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Ahora, cada vez que un jugador se une o se reúne con la ronda después de reaparecer, la nueva interfaz de usuario de campo de fuerza muestra en lugar de los visuales de primera persona por defecto de ForceField .

Reutilizar pantalla

Una pantalla de respawn es un elemento de UI que ilumina la ventana para informar a los jugadores que han sido etiquetados, y que el servidor está en el proceso de respawn de ellos de vuelta a su zona de respawn. Este elemento de UI es importante porque le da tiempo a los jugadores para procesar que han sido etiquetados, y estrategizar su próximo movimiento antes de que se unan a la ronda activa.

Para obtener más información sobre el comportamiento de reaparición personalizado en la experiencia de etiqueta láser personalizada, consulte Respawn Characters del curso de guión de juego.

Para replicar exactamente la pantalla de respawn dentro de la experiencia Laser Tag :

Crea el banner de información central.
1. Inserta un ImageLabel en el objeto OutStateGui ScreenGui
  1. En la ventana Explorador, navegue hasta el servicio StarterGui.
  2. Pase el cursor sobre su objeto hijo OutStateGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
  3. Del menú contextual, inserta un ImageLabel .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 0.5 para establecer el nuevo punto de origen del botón en el medio de sí mismo (50% desde la izquierda a la derecha de la etiqueta, y 50% desde la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su contenedor (50% de la izquierda a la derecha de la pantalla padre, y 50% de la parte superior a la parte inferior de la pantalla padre).
  4. Establece Tamaño a {0.48, 0},{0.06, 0} para ampliar la etiqueta (48% horizontalmente y 6% verticalmente de la interfaz de usuario de padre).
  5. Establece Nombre a Bloquear .
  6. Establece Imagen a rbxassetid://14304827265 para hacer que la imagen sea un trapezoidio.
  7. Establece Color de imagen a 0,0,0 para hacer el trapezoidio negro.
  8. Establece Transparencia de imagen a 0.3 para reducir el opacidad del etiqueta en un 30% y encontrar todos los elementos de la interfaz de usuario negros en la experiencia.
3. Inserta un UIAspectRatioConstraint en Bloque para asegurar que el aspecto de los elementos de la etiqueta y sus hijos UI se mantenga el mismo sin importar el tamaño de la pantalla del jugador.
4. Seleccione la nueva restricción, luego en la ventana Propiedades , establezca AspectRatio en 13.78 .
5. Inserta un TextLabel en Bloque para el texto informativo.
6. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su etiqueta padre (50% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {.85, 0},{0.55, 0} para que el texto pueda ocupar la mayor parte de la zona de trapezoid (85% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Nombre a BodyTextLabel .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Negrito para espesar el tipo.
  8. Establece Texto a Respawning… .
  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 Bloque .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint a 0.5, 1 para establecer el punto de origen de la etiqueta en el centro inferior de sí mismo (50% de la izquierda a la derecha de la etiqueta y 100% de la parte superior a la izquierda de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0, 0} para establecer la etiqueta en la parte superior del Etiqueta padre (50% desde la izquierda a la derecha del padre de la etiqueta, y 0% desde la parte superior de la etiqueta).
  4. Establece Tamaño a {0.46, 0},{0.56, 0} para ampliar la etiqueta (46% horizontalmente y 56% verticalmente de la etiqueta padre).
  5. Establece Nombre a Cabecera .
  6. Establece Imagen a rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
  7. Establece Color de imagen a 245, 46, 46 para hacer que el rojo se desvanezca para significar que el jugador está temporalmente inactivo mientras están etiquetados fuera de la ronda.
3. Inserta un TextLabel en cabecera para el texto informativo.
4. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
  3. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su etiqueta padre (50% de la izquierda a la derecha de la etiqueta padre, y 50% de la parte superior a la parte inferior de la etiqueta padre).
  4. Establece Tamaño a {.85, 0},{0.55, 0} para que el texto pueda ocupar la mayor parte de la zona de desaparición (85% horizontalmente y 55% verticalmente de la etiqueta padre).
  5. Establece Nombre a Etiqueta de nombre de encabezado .
  6. Establece FontFace a Montserrat para ajustar el futurista estético.
  7. Establece Peso a Negro para espesar el tipo.
  8. Establece Texto a ETIQUETADO - ¡ESTÁS FUERA! 9. Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco.
  9. Habilita TextScaled .
Crea la transición alrededor de los límites de la pantalla.
1. Inserta un ImageLabel en OutStateGui .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  2. Establece Color de Fondo3 a 0,0,0 para establecer el color de fondo de la etiqueta a negro.
  3. Establece Transparencia de Fondo a 0.5 para hacer que el fondo de la etiqueta sea transparente.
  4. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su contenedor (50% desde la izquierda a la derecha de la pantalla padre, y 50% desde la parte superior a la parte inferior de la pantalla padre).
  5. Establece Tamaño a {1, 0},{1, 0} para ampliar la etiqueta a toda la pantalla (100% horizontalmente y 100% verticalmente de la pantalla padre ScreenGUI).
  6. Establece ZIndex a -1 para mostrar el desvanecimiento detrás de los demás elementos de la interfaz de usuario.
  7. Establece Nombre a Cabecera .
  8. Establece Imagen a rbxassetid://14309518613 para hacer que la imagen se desvanezca.
  9. Establece Transparencia de imagen a 0.1 para hacer que la transición sea ligeramente translúcida.
Para mejorar el ejecución, puede omitir la imágen y en su lugar usar un objeto UIGradient con una secuencia de número de transparencia personalizada. Para aprender más acerca de esta técnica de gradiente, see Apariencia de UI - Gradiente .
Consulte el siguiente ReplicatedStorage script dentro del ejemplo Laser Tag lugar de archivo que muestra programáticamente la pantalla de respawn cuando la salud de un jugador alcanza cero, y están en el proceso de respawning de vuelta a la zona de respawn de su equipo.

El siguiente ReplicatedStorage.PlayerStateHandler client script contiene funciones que activan diferentes tipos de comportamiento según el atributo playerState . Todas las respuestas de eventos se agrupan lógicamente en este script porque requieren un comportamiento similar para habilitar o deshabilitar los controles del jugador, el movimiento de la cámara y qué capa de UI es visible.

Cuando la salud de un jugador alcanza cero, su playerState se convierte en TaggedOut, lo que activa la función onTaggedOut(). 2>onTaggedOut2> inmediatamente activa 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 vuelve exclusivamente habilitado.

Cuando el jugador reaparece, su playerState se convierte en SelectingBlaster, lo que activa la función onSelectingBlaster(). Luego, exclusivamente habilita el 1> StarterGui.PickABlasterGui1>, que desactiva automáticamente la pantalla


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

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

local localPlayer = Players.LocalPlayer

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

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

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

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

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

	-- Activa el blaster mientras juegas
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

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

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

	-- Desactivar el blaster mientras está etiquetado
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

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

	-- Ocultar todo el HUD mientras está en el lobby
	setGuiExclusivelyEnabled(nil)

	-- Desactivar 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(`Invalid player state ({newPlayerState})`)
	end
end

-- Manipula el estado inicial del jugador si se establecer
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

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

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

-- Asegúrese de que las cambios se aún aplican después de reaparecer
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Ahora, siempre que la salud de un jugador alcance cero, la pantalla de respawn se muestra hasta que el jugador reaparezca de vuelta en su zona de respawn.

Ahora que estás familiarizado con el común GuiObjects para la interfaz de usuario en la pantalla, intenta recrear el objeto RoundResultsGui ScreenGui y todos sus hijos para la pantalla de visualización cuando los jugadores ganan o pierden un coincidir. Puedes usar el obj

Crear Objetos de Superficie

Para mostrar UI en la superficie de una parte en el espacio 3D que responde a la lógica de scripting para cada jugador individual , puedes padre un objeto SurfaceGui a la parte que quieres mostrar tu UI dentro del servicio ReplicatedStorage. Esto garantiza que tu UI y su lógica de scripting estén disponibles tanto para el servidor como para cada jugador de tu cliente.

SurfaceGui objetos contienen todos los GuiObjects que se muestran en la superficie de una parte en el espacio 3D. La experiencia de etiqueta láser solo incluye una instancia de un objeto SurfaceGui : el temporizador de encendido que se muestra sobre cada jugador's bl

Para crear un objeto SurfaceGui

En la ventana Explorador , pasa el cursor sobre el servicio ReplicatedStorage y luego haz clic en el ícono ⊕ . Se muestra un menú contextual.
Del menú contextual, inserta un objeto Parte .
Inserta un objeto ScreenGUI en la parte.
Renombre el Superficie de guía según el contexto de sus elementos de interfaz de usuario hijos.
Repita este proceso para cada elemento de la interfaz de usuario que necesita mostrar en la superficie de una parte en el espacio 3D.

Medidor de tiempo de reutilización

Un contador de tiempo de reutilización es un componente de UI que informa a los jugadores cuánto tiempo deben esperar antes de que puedan volver a hacer sonar su bláster. Esta ligera pausa evita que los jugadores puedan hacer sonar tan rápido como puedan hacer clic o presionar un botón, lo que es irrealista para el juego de etiqueta láser.

Para replicar exactamente el medidor de tiempo de reutilización dentro de la experiencia Laser Tag :

Crea una parte para sostener tu objeto SurfaceGui
1. En la ventana Explorador, pasa el cursor sobre el espacio de trabajo y luego haz clic en el ícono⊕. Se muestra un menú contextual.
2. Del menú contextual, insere una parte bloque . Esta es una ubicación temporal para la parte para que pueda visualizar los cambios en cada paso del proceso.
Posiciona y orienta la parte alrededor de la posición de dónde se mantendría su arma, luego en la ventana Propiedades ,
1. Establece Transparencia a 1 para hacer que la parte sea completamente transparente.
2. Establece Nombre a CooldownBarPrefab .
3. Establece Tamaño a 0.169, 0.027, 2.537 para escalar la parte a un tamaño alrededor de la longitud del blaster.
4. Desactivar CanCollide y CanQuery .
Inserta un SURFACEGUI en CooldownBarPrefab .
Seleccione el nuevo SuperficieGui, luego en la ventana Propiedades,
1. Establece Cara a Arriba para que la interfaz de usuario se muestre hacia arriba.
2. Establece LightInfluence y MaxDistance en 0 .
3. Establece Píxeles por Estudiar en 200 .
Crea la barra negra.
1. Inserta un ImageLabel en el SurfaceGui .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
  3. Establece Color de Fondo3 a 0,0,0 para establecer el color de fondo de la etiqueta a negro.
  4. Establece Transparencia de Fondo a 0.4 para hacer que el fondo de la etiqueta sea semitransparente.
  5. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su contenedor (50% desde la izquierda a la derecha de la superficie de su padre, y 50% desde la parte superior a la inferior de la superficie de su padre).
  6. Establece Tamaño a {1, 0},{1, 0} para ampliar la etiqueta a toda la parte (100% horizontalmente y 100% verticalmente de la superficie padre).
  7. Establece Nombre a Contenedor .
Ronda las esquinas del contenedor.
1. Inserta un objeto Esquina UIC en Contenedor.
2. Seleccione el Esquina UI , luego en la ventana Propiedades , establezca CornerRadius en 1> 0.15, 01> para redondear ligeramente las esquinas.
Crea la barra roja.
1. Inserta un ImageLabel en Contenedor .
2. Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
  1. Elimina el valor predeterminado de imagen .
  2. Establece AnchorPoint a 1, 0.5 para establecer el punto de origen de la etiqueta en el centro derecho de sí mismo (100% desde la izquierda a la derecha de la etiqueta, y 50% desde la parte superior a la inferior de la etiqueta).
  3. Establece Color de Fondo3 a 172, 13, 13 para establecer el color de fondo de la etiqueta en un rojo oscuro.
  4. Establece Transparencia de Fondo a 0.2 para hacer que el fondo de la etiqueta sea ligeramente transparente.
  5. Establece Nombre a Barra .
  6. Establece la posición a {1, 0},{0.5, 0} para establecer la etiqueta en el centro derecho de su contenedor (100% desde la izquierda a la derecha de la etiqueta padre, y 50% desde la parte superior a la parte inferior de la etiqueta padre).
  7. Establece Tamaño a {0, 0},{1, 0} para alargar la etiqueta hasta la parte superior de su etiqueta padre (0% horizontalmente y 100% verticalmente de la etiqueta padre). Este paso también es beneficioso para el comportamiento de tweening que ocurre en los scripts en el paso 8.
Corrija las esquinas de la etiqueta.
1. Inserta un objeto UICorner en Barra.
2. Seleccione el Esquina UI , luego en la ventana Propiedades , establezca CornerRadius en 1> 0.15, 01> para redondear ligeramente las esquinas.
Mover CooldownBarPrefab a AlmacenamientoReplicado .
1. Cree una estructura de carpeta para organizar sus objetos de UI. El ejemplo usa un Directorio con un sub directorio Guis con un hijo Objetos de Usuario .
2. Mover CooldownBarPrefab dentro de Guis .
Referencia los siguientes ReplicatedStorage scripts dentro del ejemplo Laser Tag lugar de archivo que programáticamente aplica el contador de tiempo de reutilización al jugador, luego animar la barra roja después de que el jugador explote su arma.

El siguiente ReplicatedStorage.FirstPersonBlasterVisuals client script maneja toda la lógica visual para el primer personaje del jugador. Requiere un conjunto de scripts de módulo que trabajan juntos para establecer los visuales de blaster que se sienten más realistas para el juego de etiqueta láser, incluyendo FirstPersonBlasterVisuals.addCooldownBar y FirstPersonBl


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()

	-- Añadir el primer rigde persona
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Agrega el tiempo de reutilización
	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 tiempo de reutilización ya que está asociada a la rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Correr primero los efectos visuales de la primera persona cuando ocurre una explosión
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Vincula el riego a la cámara si existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Actualizar la CFrame de la rigde acuerdo con la posición de la cámara y RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Manipula los gráficos mientras el tipo de arma cambia durante el juego
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Manipula los gráficos cuando el estado del jugador cambia
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Elimina las visuales cuando el jugador esté seleccionando un blaster o esté en el lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Agregue los gráficos cuando el jugador termine de seleccionar el blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Ahora, siempre que un jugador dispare su bláster, la barra de tiempo de reutilización se animará para comunicar cuando el jugador puede disparar de nuevo.

Crear Objetos de BillboardGui

Para mostrar elementos de UI dentro del espacio 3D que responden a la lógica de scripts y siempre se enfrentan a la cámara de cada jugador independientemente de su ángulo de visión, como nombres de jugadores o marcas de mapas, puedes crear un objeto de BillboardGui como hijo de un BasePart o Attachment que existe en el espacio 3D.

La experiencia de etiqueta láser de muestra incluye dos objetos separados de BillboardGui dentro del servicio de ReplicatedStorage :

OtherPlayerIndicatorGuiPrefab - Muestra un círculo rosa o verde sobre la cabeza de cada jugador cuando están activos en una ronda.
TaggedOutIndicatorGuiPrefab - Muestra por encima de la cabeza de un jugador cuando están etiquetados fuera de la ronda.

Luego de crear un objeto BillboardGui el objeto hijo GuiObjects según el propósito de cada contenedor. Para demostrar, en las secciones inmediatas que seguir, aprenderás a implementar elementos de UI para ambos tipos de indicador dentro de la experiencia de etiqueta láser. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones

Para crear un objeto BillboardGui

En la ventana Explorador , pasa el cursor sobre un BasePart o Attachment, luego haz clic en el ícono1>⊕1>. Se muestra un menú contextual.
Del menú contextual, introduce un objeto BillboardGui .
Renombre el BillboardGui según el contexto de sus elementos de interfaz de usuario hijos.
Repita este proceso para cada elemento de la interfaz de usuario que necesita mostrar en cabeza de los jugadores.

Indicador de equipo

Un indicador de equipo es un elemento de UI 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 el gameplay de una experiencia de disparador de primera persona requiere que los jugadores tomen decisiones estratégicas rápidas mientras están en zonas de combate para que no se saturen y pierdan la coincidir.

Para replicar exactamente el indicador del equipo dentro de la experiencia Laser Tag :

Inserta un objeto BillboardGui en un rigtemporal.
1. En la barra de menú, navega a la pestaña Avatar y luego haz clic en Rig Builder.
2. Seleccione de las opciones disponibles. El ejemplo usa un R15 introducirde modelo, una forma de cuerpo femenina y un Rthro avatar. El modelo muestra ambas en la ventana de vista 3D y en la ventana de 2> Explorador2> bajo el nombre 5>Rig5>.
3. En la ventana Explorador , navegue hasta el malla hija del rig, luego haga clic en el ícono ⊕ . Un menú contextual se muestra.
4. Del menú contextual, inserta un BillboardGui .
Seleccione el nuevo BillboardGui , luego en la ventana Propiedades ,
1. Establece LightInfluence a 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Nombre a OtherPlayerIndicatorPrefab .
3. Establece Tamaño a {0, 10},{0, 10} para hacer que la etiqueta sea significativamente más pequeña.
4. Establece StudsOffsetWorldSpace a 0, 4, 0 para colocarlo por encima de la cabeza del rig.
Inserta un objeto Marco en OtherPlayerIndicatorPrefab .
Seleccione el nuevo marco, luego en la ventana Propiedades ,
1. Establece AnchorPoint a 0.5, 0.5 para establecer el punto de origen del marco en el centro de sí mismo (50% desde la izquierda a la derecha de la etiqueta, y 50% desde la parte superior a la parte inferior de la etiqueta).
2. Establece Color de fondo3 a 255, 3, 0 para establecer el color de fondo del marco como color de fondo de reservado.
3. Establece Posición a {0.5, 0},{0.5, 0} para establecer el marco en el centro de su contenedor (50% desde la izquierda a la derecha de la etiqueta de padre, y 50% desde la parte superior a la inferior de la etiqueta de padre).
4. Establece Tamaño a {1, -2},{1, -2} para acortar el marco a la superficie del área de anuncios.
Inserta un objeto UICorner en Marco para completamente redondear las esquinas.
Inserta un objeto UIStroke en Marco para contorno del círculo del indicador.
Mover OtherPlayerIndicatorPrefab a ReplicatedStorage .
Referencia el siguiente ReplicatedStorage script dentro del ejemplo Laser Tag 1A lugar de archivo 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 estén ocultos.

El siguiente ReplicatedStorage.OtherPlayerIndicatorGuiSetup script se ejecuta cuando los jugadores aparecen en la arena para una ronda activa. Aplica el indicador de equipo al llamar la función addIndicatorToCharacter(), que localiza el objeto de Head

Si otros jugadores están en el mismo equipo, el indicador de equipo siempre se muestra, incluso si se esconden 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 para excluirlos.


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 los jugadores que participan en la ronda
		if not otherPlayer.Team then
			return
		end

		-- Evite agregar indicadores duplicados, crear 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

		-- La indicación 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, siempre que un jugador esté en una ronda activa, los indicadores de equipo se muestran sobre las cabezas de otros jugadores si no están en el equipo enemigo y detrás de un objeto.

Indicador de marcado desactivado

Un indicador de salida es un elemento de UI que informa a los jugadores cuando otros jugadores ya no están activos en la ronda y están en el proceso de reaparición en su zona de reaparición. Esta información es importante, ya que el gameplay de un juego de primera persona requiere que los jugadores se muevan a su siguiente objetivo tan pronto como salgan de un jugador para que no se vuelvan vulnerables en la arena jugando en la misma ubicación por demasiado tiempo.

Para reproducir exactamente el indicador marcado dentro de la experiencia Laser Tag :

Inserta un objeto BillboardGui en un rig temporal para que puedas visualizar los cambios en cada paso del proceso.
1. En la barra de menú, navega a la pestaña Avatar y luego haz clic en Rig Builder.
2. Seleccione de las opciones disponibles. El ejemplo usa un R15 introducirde modelo, una forma de cuerpo masculina y un Rthro avatar. El modelo muestra ambas en la ventana de vista 3D y en la ventana de 2> Explorador2> debajo del nombre 5> Rig5> .
3. En la ventana Explorador , navegue hasta el malla hija del rig, luego haga clic en el ícono ⊕ . Un menú contextual se muestra.
4. Del menú contextual, inserta un BillboardGui .
Seleccione el nuevo BillboardGui , luego en la ventana Propiedades ,
1. Establece LightInfluence a 0 para evitar que la luz ambiental afecte el color del indicador.
2. Establece Nombre a TaggedOutIndicatorGuiPrefab .
3. Establece Tamaño a {3, 0},{0.5, 0} para ampliar el espacio para una etiqueta.
4. Establece StudsOffset a 0, 3.25, 0 para colocarlo por encima de la cabeza de un jugador.
Inserta un objeto ImageLabel en TaggedOutIndicatorGuiPrefab .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Nombre a Marco .
4. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su contenedor (50% desde la izquierda a la derecha de la etiqueta padre, y 50% desde la parte superior a la inferior de la etiqueta padre).
5. Establece Tamaño a {1, 0},{1, 0} para ampliar la etiqueta a toda la BillboardGui (100% horizontalmente y 100% verticalmente de la padre BillboardGui).
6. Establece Imagen a rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
7. Establece Color de imagen a 245, 46, 46 para tonificar la etiqueta roja.
Para mejorar el ejecución, puede omitir la imágen y en su lugar usar un objeto UIGradient con una secuencia de número de transparencia personalizada. Para aprender más acerca de esta técnica de gradiente, see Apariencia de UI - Gradiente .
Inserta un objeto TextLabel en Marco .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
1. Establece AnchorPoint en 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí mismo (50% de la izquierda a la derecha de la etiqueta, y 50% de la parte superior a la parte inferior de la etiqueta).
2. Establece Transparencia de Fondo a 1 para hacer que el fondo de la etiqueta sea completamente transparente.
3. Establece Nombre a BodyTextLabel .
4. Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su contenedor (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la inferior de la etiqueta padre).
5. Establece Tamaño a {0.85, 0},{0.7, 0} para que el texto pueda ocupar la mayor parte de la zona de desaparición (85% horizontalmente y 70% verticalmente de la etiqueta de la imagen padre).
6. Establece FontFace a Montserrat para ajustar el futurista estético.
7. Establece Peso a Negrito para espesar el tipo.
8. Establece Texto a ETIQUETADO .
9. Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco.
10. Habilita TextScaled .
Mover TaggedOutIndicatorGuiPrefab a ReplicatedStorage .
Referencia los siguientes ServerScriptService scripts dentro del ejemplo Laser Tag 1A lugar de archivo que muestra programáticamente el indicador marcado mientras un jugador está reapareciendo de vuelta en la zona de reaparición de su equipo.

El siguiente ServerScriptService.SetupHumanoid script del servidor se ejecuta tan pronto como un jugador carga la experiencia. Se asegura de que siempre que un personaje de un jugador se agrega al aplicación de modeladode datos, setupHumanoidAsync es llamado con su Humanoid .


local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

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

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

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

Ahora, siempre que la salud de un jugador alcanza cero, el indicador de salud de encabezado se muestra encima de su cabeza hasta que reaparezcan.

¡Felicidades por completar el Curso de Diseño de Interfaz de Usuario! Ahora que tienes experiencia creando un estilo de arte, wireframing tu diseño y implementando tus diseños en Studio desde el principio hasta el final, puedes extender tu proyecto con nuevos UI y funciones, o seguir curricula adicionales, como el Curso de Script de Juego que te enseña sobre los detalles generales y de implementación clave de la experiencia de etiqueta láser