Implementar tus diseños es el proceso de crear tus maquetas en Studio usando tanto elementos de interfaz de usuario integrados como personalizados con scripts que activan tu contexto de interfaz de usuario contextualmente.Este emocionante paso del tutorial es donde puedes ver todos tus diseños y el trabajo duro se reúnen en un conjunto cohesivo de flujos de trabajo que están completos y listos para la interacción del jugador.
Usando el archivo ejemplo de experiencia de etiqueta láser.rbxl como referencia, esta sección del programa de diseño de la interfaz de usuario te muestra cómo llevar tu planificación de UI a la vida, incluyendo instrucciones sobre:
- Recuperar 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 de muestra.
- Emular varios dispositivos directamente en Studio para ver cómo se muestra tu interfaz en diferentes pantallas y relaciones de aspecto.
- Crear ScreenGui , SurfaceGui y BillboardGui objetos para mostrar tu interfaz de usuario en las pantallas de los jugadores, las superficies de las piezas y dentro del espacio 3D, respectivamente.
Después de revisar las técnicas en esta sección, puede aplicarlas a sus propios proyectos para crear componentes de interfaz de usuario emocionantes que ayuden a los jugadores a navegar por lo que pueden hacer dentro de sus experiencias.
Las instrucciones de esta sección del tutorial te muestran cómo recrear exactamente los componentes de la interfaz de usuario usando la biblioteca de recursos de diseño de interfaz de usuario.Este proceso toma aproximadamente 90 minutos o menos desde el inicio hasta el final.Si no quieres usar los valores proporcionados, puedes ajustar cada elemento de interfaz de usuario para cumplir con las especificaciones de tu propia experiencia o usar la muestra misma para el resto del tutorial.
Obtener biblioteca de recursos
Las bibliotecas de recursos son colecciones de recursos que puedes agregar a tu inventario para acceso fácil y reutilización.La biblioteca de recursos que usarás para tu proyecto desde la Tienda del creador incluye nueve recursos individuales de interfaz de usuario 2D y las versiones finales de los componentes de información del objetivo, seleccionador de bláster y jugador que estás creando en esta sección del tutorial.
Puedes agregar la mayor parte de la biblioteca a tu inventario dentro de Studio haciendo clic en el enlace Añadir al inventario en el componente siguiente.Una vez que los activos estén dentro de tu inventario, puedes volver a utilizarlos en cualquier proyecto de la plataforma.
Para obtener la biblioteca de recursos de tu inventario en tu experiencia:
En la barra de herramientas, seleccione la pestaña Ver .
Haga clic en Caja de herramientas . Se muestra la ventana Caja de herramientas .
En la ventana Caja de herramientas , haga clic en la pestaña Inventario . Se muestran los ordenados Mis modelos .
Haga clic en el menú desplegable, luego seleccione la categoría Mis paquetes .
Haga clic en el azulejo componentes de interfaz de usuario final , luego en la ventana Explorador , seleccione componentes completados , luego arrástrelos al servicio StarterGui .Ahora puedes habilitar cualquiera de los componentes finales para referenciar su diseño.
Emular dispositivos
El emulador de dispositivo de Studio permite probar cómo los jugadores verán y interactuarán con tu interfaz de usuario en varios dispositivos.Esta herramienta es una parte vital del proceso de implementación porque la relación de aspecto de tu ventana en Studio no necesariamente refleja la relación de aspecto de las pantallas que usan los jugadores para acceder a tu experiencia, y es importante que tu interfaz de usuario sea legible y accesible en todos los dispositivos.
Por ejemplo, si no pruebas tu interfaz de usuario en una gama de tamaños de pantalla, los jugadores con pantallas grandes pueden no ser capaces de leer tu texto o descifrar tus iconos, y los jugadores con pantallas pequeñas pueden no ser capaces de ver el espacio 3D porque tus elementos de interfaz de usuario ocupan demasiado espacio en la pantalla.
Para emular tu pantalla al tamaño de pantalla más pequeño:
En la barra de herramientas, seleccione la pestaña Prueba .
Haga clic en Dispositivo . La ventana cambia para reflejar la relación de aspecto de una laptop promedio.
En el cuadro de resolución, seleccione Resolución actual .Esto te permite ver la resolución real de tus elementos de interfaz de usuario en el dispositivo que estás emulando.
En el menú desplegable del dispositivo, seleccione el dispositivo con el tamaño de pantalla más pequeño que los jugadores pueden usar para acceder a su experiencia.Aunque la mejor opción varía según los dispositivos que soporta tu experiencia, las pruebas de etiqueta láser de muestra se realizan con un iPhone 4S para verificar cómo se ve la interfaz con un espacio de pantalla limitado.
Crear objetos de ScreenGui
Para mostrar elementos de interfaz de usuario en la pantalla de cada jugador, puedes crear un objeto ScreenGui en el servicio StarterGui.Los objetos ScreenGui son los contenedores principales para la interfaz de usuario en la pantalla, y el servicio StarterGui copia su contenido al contenedor PlayerGui de cada jugador cuando ingresa a una experiencia.
Puedes crear múltiples objetos ScreenGui para organizar y mostrar agrupaciones de elementos de interfaz de usuario contextualmente durante el juego.Por ejemplo, la experiencia de etiqueta láser de muestra incluye cinco objetos separados que inicialmente están deshabilitados hasta que los jugadores cumplan diferentes condiciones durante el flujo de usuario principal de la experiencia:
- HUDGui - Muestra información clave sobre el juego de la experiencia cuando los jugadores están activos en una ronda, como el objetivo y los puntos totales de cada equipo.
- PickABlasterGui - Muestra todas las opciones de blaster cuando los jugadores comienzan o se unen a una ronda.
- ForceFieldGui - Muestra una cuadrícula hexagonal cuando los jugadores seleccionan un bláster y mientras son 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 de acuerdo con el propósito de cada contenedor.Para demostrar, en las secciones inmediatas que seguir, aprenderás cómo implementar elementos de interfaz de usuario para las tres categorías de información que los jugadores necesitan saber para tener éxito en la experiencia de etiqueta láser de muestra. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propia experiencia .
Para crear un objeto ScreenGui :
En la ventana Explorador , pasa el mouse sobre el servicio StarterGui , luego haz clic en el ícono ⊕ . Se muestra un menú contextual.
Inserta un ScreenGui .
Renombra el ScreenGui de acuerdo con el contexto de sus elementos de interfaz de usuario hijos.
Repita este proceso para cada agrupación de elementos de interfaz de usuario que necesita mostrar en la pantalla de cada jugador.
Interfaz de objetivo
Después de las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de interfaz de usuario en la pantalla relacionados con el objetivo de la experiencia.Este agrupamiento de elementos de interfaz de usuario está cerca de la parte superior de la pantalla porque el objetivo y los puntos de cada equipo tienen más importancia en cómo ganar el juego.
Por ejemplo, la muestra proporciona un componente de interfaz de usuario objetivo al que los jugadores se refieren para saber qué necesitan hacer para tener éxito en una ronda.A medida que los jugadores etiquetan a los miembros del equipo enemigo y ganan puntos, este componente realiza un seguimiento del puntaje de cada equipo contra el objetivo general dentro del encabezado.Para una revisión de alto nivel de todos los scripts del cliente y del servidor que trabajan juntos para rastrear puntos, vea Rastrear puntos en el Currículum de programación de juegos.
Para recrear exactamente la interfaz de usuario objetivo dentro de la experiencia de prueba Etiqueta láser:
Crea un contenedor para todo el componente.
Inserta un marco en el objeto HUDGui ScreenGui
- En la ventana Explorador , navegue al servicio StarterGui .
- Pase el mouse sobre su objeto hijo HUDGui , luego haga clic en el ícono⊕. Se muestra un menú contextual.
- Desde el menú contextual, insira un marco .
Seleccione el nuevo marco , luego en la ventana propiedades ,
- Establece Punto de anclaje a 0.5, 0 para establecer el punto de origen del marco en la parte superior del medio de sí mismo (50% desde la izquierda a la derecha del marco, y 0% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.03, 0} para establecer el marco cerca de la parte superior del monitor (50% desde la izquierda a la derecha del monitor y 3% desde la parte superior a la parte inferior del monitor para que haya un pequeño margen).
- Establece el tamaño a 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).
- Establece Nombre a Objetivo .
(Opcional) Inserte una restricción de aspecto de la interfaz de usuario en Objetivo para garantizar que la proporción de aspecto de la etiqueta se mantenga igual sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 7.
Crea un contenedor para los objetos de solicitud del objetivo.
Inserta un marco en objetivo .
Seleccione el nuevo marco , luego en la ventana propiedades ,
- Establece Punto de anclaje a 0.5, 0 para establecer el punto de origen del marco en la parte superior del medio de sí mismo (50% desde la izquierda a la derecha del marco, y 0% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- Establece Posición a para establecer el marco en el medio del contenedor (50% desde la izquierda a la derecha del marco padre, y 0% desde la parte superior a la inferior del marco padre).
- Establece tamaño a {1, 0},{0.67, 0} para que los componentes de la interfaz de selección ocupen aproximadamente más de la mitad del contenedor de arriba hacia abajo (100% horizontalmente y 67% verticalmente del marco padre).
- Establece Nombre a Mostrar objetivo .
Crea los elementos del título.
Inserta un Etiqueta de imagen en Mostrador de objetivos .
Seleccione el Etiqueta de imagen , luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Orden de diseño a .
- Establece Posición a {0.5, 0},{0.34, 0} para establecer la etiqueta cerca de la parte superior superior 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).
- Establece tamaño a {0.46, 0},{0.34, 0} para ampliar el área de aviso a casi la mitad del marco (46% horizontalmente y 34% verticalmente del marco padre).
- Establecer Nombre a Encabezado.
- Establece Imagen a rbxassetid://14304828123 para mostrar un trapezoide.
- Establece Transparencia de imagen a 0.15.
(Opcional) Insertar una restricción de aspecto de la interfaz de usuario en el Etiqueta de imagen para garantizar que la proporción de aspecto de la etiqueta se mantenga igual sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 13.781 .
Inserte un Etiqueta de texto en encabezado para mostrar un título.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
- Establece tamaño a {0.62, 0},{0.55, 0} para ampliar el espacio de texto a más de la mitad del etiqueta padre (62% horizontalmente y 55% verticalmente de la etiqueta padre).
- Establece Nombre a HeaderTextLabel .
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a medio para engrosar la fuente.
- Establecer Texto a OBJETIVO .
- Habilitar TextScaled .
Crea los elementos de la interfaz de usuario.
Inserta un Etiqueta de imagen en Mostrador de objetivos .
Seleccione el Etiqueta de imagen , luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{1, 0} para mover la etiqueta al centro inferior de su 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).
- Establece el tamaño a {0.89, 0},{0.66, 0} para ampliar el espacio de texto a casi la totalidad del ancho del marco padre (89% horizontalmente y 66% verticalmente del marco padre).
- Establecer Nombre a Cuerpo .
- Establece Imagen a rbxassetid://14304827265 para mostrar un trapezoide al revés.
- Establece ImageColor3 a 0, 0, 0 para teñir la imagen negra.
- Establece Transparencia de imagen a 0.3.
(Opcional) Insertar una restricción de aspecto de la interfaz de usuario en el Etiqueta de imagen para garantizar que la proporción de aspecto de la etiqueta se mantenga igual sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 13.781.
Inserte un Etiqueta de texto en Cuerpo para mostrar una solicitud.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
- Establece tamaño a {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más de la mitad del etiqueta padre (85% horizontalmente y 39% verticalmente de la etiqueta padre).
- Establece Nombre a BodyTextLabel .
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a medio para engrosar la fuente.
- Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
- Establece Texto a Etiqueta para marcar puntos. El primer equipo con %d puntos gana.
- Habilitar TextScaled .
Crea un contenedor para los contadores del equipo del objetivo.
Inserta un marco en objetivo .
Seleccione el nuevo marco , luego en la ventana propiedades ,
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% desde la izquierda a la derecha del marco, y 100% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{1, 0} para establecer el marco en el medio 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).
- Establece tamaño a {0.44, 0},{0.27, 0} para que los componentes de la interfaz de selección ocupen aproximadamente menos de la mitad del contenedor de izquierda a derecha (44% horizontalmente y 27% verticalmente del marco padre).
- Establece Nombre a TeamPointCounter .
Crea un relleno para los contadores de equipos.
- Inserta un objeto UIListLayout en el marco desde el paso 5.
- Seleccione el objeto UIListLayout , luego en la ventana Propiedades ,
- Establece relleno a 0.025, 0 para proporcionar espacio entre los contadores de equipo futuros.
- Establece Dirección de relleno a horizontal para que cada contador de equipo se muestre al lado de otro.
- Establece Alineación horizontal a Centro para que cada contador de equipo se alinee con el centro del otro.
Crea los elementos del contador de equipo verde.
Inserta un Etiqueta de imagen en TeamPointCounter .
Seleccione el Etiqueta de imagen , luego en la ventana Propiedades ,
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{1, 0} para mover la etiqueta al centro inferior de su 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).
- Establece tamaño a {0.5, 0},{1, 0} para ampliar la etiqueta a la mitad de la anchura del marco padre (50% horizontalmente y 100% verticalmente del marco padre).
- Establece Nombre a TeamACounter .
- Establece Imagen a rbxassetid://14304826831 para mostrar un desvanecimiento direccional.
- Establece ImageColor3 a 88, 218, 171 para teñir la imagen verde menta.
Configura un atributo personalizado para rastrear que esta etiqueta es para el equipo verde.
- En la ventana Propiedades , navegue hasta la sección Atributos , luego haga clic en el íconode más. Se muestra un diálogo emergente.
- En el campo nombre , ingrese color de equipo .
- En el menú desplegable Tipo , seleccione Color de ladrillo .
- Haga clic en el botón Guardar .
- Establece el nuevo atributo teamColor a Menta .
Inserte un Etiqueta de texto en TeamACounter para mostrar un mensaje de advertencia.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 1, 0.5 para establecer el punto de origen de la nueva etiqueta en el centro derecho de sí misma (100% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.95, 0},{0.5, 0} para mover la etiqueta a la derecha de su etiqueta padre (95% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
- Establece tamaño a {0.85, 0},{0.39, 0} para ampliar el espacio de texto a más de la mitad del etiqueta padre (85% horizontalmente y 39% verticalmente de la etiqueta padre).
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a negrita para engrosar la fuente.
- Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco contra el fondo oscuro.
- Establece Texto a - .
- Habilitar TextScaled .
- Establece Alineación de textoX a Derecha .
Inserte un objeto UIStroke en el TextLabel , luego en la ventana Propiedades , establezca Color a 8, 78, 52 para delinear el guión con un trazado verde oscuro.
Crea los elementos del contador del equipo rosa.
Duplica TeamAICounter y sus hijos.
Seleccione el duplicado TeamACounter , luego en la ventana Propiedades ,
- Establece Nombre a TeamBCounter .
- Establece Imagen a rbxassetid://14305849451 para mostrar un desvanecimiento direccional en la dirección opuesta.
- Establece ImageColor3 a 255, 170, 255 para teñir la carnación de imagen rosa.
- Establece el atributo teamColor a Carnation Pink .
Seleccione el hijo duplicado Etiqueta de texto de TeamBCounter , luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0, 0.5 para establecer el punto de origen de la nueva etiqueta en el centro izquierdo de sí misma (0% desde la izquierda a la derecha de la etiqueta, y 50% desde la parte superior a la parte inferior de la etiqueta).
- 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).
- Establece Alineación de textoX a Izquierda .
Seleccione el niño duplicado UIStroke de TeamBCounter , luego en la ventana Propiedades , establezca Color a 158, 18, 94 para delinear el guión con un trazado rosa oscuro.
Referencie los siguientes ReplicatedStorage scripts dentro del archivo de lugar de ejemplo Etiqueta láser que actualiza de forma programática el mensaje de objetivo y rastrea los puntos del equipo.
El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal display de advertencia (HUD), incluyendo 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.
Ahora, después de que un jugador seleccione su bláster, la interfaz de usuario objetivo se muestra en la parte superior de su pantalla y rastrea los puntos de cada equipo.
Interfaz de usuario Blaster
Después de las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de interfaz de usuario en la pantalla relacionados con el bláster del jugador.Este agrupamiento de elementos de interfaz de usuario ocupa la mayor parte del espacio de la pantalla cerca del centro de la pantalla porque actúa como punto focal para llamar la atención de los jugadores a la acción en el espacio 3D, y tiene la mayor importancia para jugar el juego.
Punto de mira
Un punto de mira es un elemento de interfaz de usuario que informa a los jugadores dónde van a hacer impacto cuando exploten su arma.Este elemento de interfaz de usuario es un requisito vital para las experiencias de disparador en primera persona porque los jugadores deben poder apuntar con precisión a sus blásteres y etiquetar a los miembros del equipo enemigo.
Al igual que la mayoría de las otras experiencias en el género de shooter en primera persona, la experiencia de etiqueta láser de muestra posiciona la mira en el centro de la pantalla para que los jugadores tengan algo estático en lo que enfocarse mientras su avatar se mueve por el espacio 3D.Además de reducir el mareo, esta colocación permite que el punto de mira sea perceptible mientras se mezcla con el entorno, ambientegeneral.
Para recrear exactamente el punto de mira dentro de la experiencia de etiqueta láser de muestra Laser Tag:
Inserta un Etiqueta de imagen en el objeto HUDGui ScreenGui
En la ventana Explorador , navegue al servicio StarterGui .
Pase el mouse sobre su objeto hijo HUDGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un Etiqueta de imagen .
Seleccione el nuevo Etiqueta de imagen , luego en la ventana Propiedades ,
- Establece Imagen a >.
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Nombre a Punto de mira .
- Establece Posición a {0.5,0},{0.5,0} para establecer la etiqueta en el medio de la pantalla.
- Establece Tipo de escala a Ajustar para que la imagen encaje dentro de su contenedor y no se estire en varios tamaños de pantalla.
(Opcional) Inserta una restricción de aspecto de la interfaz de usuario en puntería cruzada para garantizar que la proporción de aspecto de la etiqueta se mantenga igual sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 0.895 .
Marcador de golpe
Un marcador de golpe es un elemento de interfaz de usuario que solo se muestra cuando una explosión hace impacto con otro jugador en el equipo enemigo.Al igual que la mira cruzada, este elemento de interfaz de usuario es un requisito vital para las experiencias de disparo en primera persona porque proporciona retroalimentación visual de cuándo los jugadores tienen éxito en etiquetar a sus oponentes.
Para recrear exactamente el marcador de golpe dentro de la experiencia de etiqueta láser de muestra Laser Tag:
Inserta un Etiqueta de imagen en el objeto Flecha de cruce ImageLabel
En la ventana Explorador , navegue al servicio StarterGui .
Pase el mouse sobre su objeto hijo puntero cruzado , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un Etiqueta de imagen .
Seleccione el nuevo Etiqueta de imagen , luego en la ventana Propiedades ,
- Establece Imagen a rbxassetid://14401148736 para mostrar el íconode marcador de golpe rectangular.
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de la etiqueta.
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5,0},{0.5,0} para establecer la etiqueta en el medio de la pantalla.
- Establece Nombre a marcador de golpe .
- Establece el tamaño a {0.6, 0},{0.06, 0} para reducir el tamaño de los rectángulos alrededor del centro de la mira.
- Establece Transparencia de imagen a 1 hacer que el marcador de golpe sea completamente transparente.Los scripts en el siguiente paso devuelven la transparencia a 0 cada vez que la explosión de un jugador hace impacto con otro jugador en el equipo enemigo.
Referencie los siguientes ReplicatedStorage scripts dentro del archivo de lugar de ejemplo Etiqueta láser que muestre de forma programática el marcador de golpe cuando una explosión haga 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 display de advertencia (HUD), incluyendo 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.
Ahora, cada vez que un jugador lanza su bláster y la explosión hace impacto con otro jugador, el marcador de golpe se muestra momentáneamente.
Selector de bláster
Un seleccionador de bláster es un componente de interfaz de usuario que los jugadores usan para seleccionar su tipo de bláster antes de unirse o reincorporarse a una ronda.La experiencia de etiqueta láser de muestra proporciona dos tipos de láseres: uno que produce varios rayos con una difusión horizontal amplia y otro que produce un solo rayo.El tipo de bláster que los jugadores seleccionan influye en su estrategia durante la ronda, haciendo que este componente de la interfaz de usuario sea un flujo de trabajo esencial para la experiencia general.
Los siguientes pasos detallan cómo crear varios contenedores para los diferentes grupos de elementos de interfaz de usuario, un encabezado con un botón de advertencia, la navegación y los botones de selección, y un prefabricado de botón blaster.La lógica de programación para el componente general popula diferentes características visuales en el botón precargado del bláster según Configuration.
Esta configuración te permite crear instancias adicionales Configuration de más tipos de bláster que se muestren correctamente dentro del seleccionador de bláster sin necesidad de crear botones individuales dentro de StarterGui.PickABlasterGui .
Para recrear exactamente el seleccionador de bláster dentro de la experiencia de etiqueta láser de muestra Laser Tag:
Crea un contenedor para todo el componente.
Inserta un marco en el objeto PickABlaster ScreenGui
- En la ventana Explorador , navegue al servicio StarterGui .
- Pase el mouse sobre su objeto hijo PickABlaster , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
- Desde el menú contextual, insira un marco .
Seleccione el nuevo marco, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen del marco en la parte inferior del medio de sí mismo (50% desde la izquierda a la derecha del marco, y 100% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.9, 0} para establecer el marco cerca del medio 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).
- Establece el tamaño a para que los componentes de la interfaz de usuario del seleccionador de blásteres ocupen una gran parte de la pantalla para atraer la atención de los jugadores (80% horizontalmente y 25% verticalmente).
- Establece Nombre a Componente .
(Opcional) Insertar una restricción de aspecto de la interfaz de usuario en Componente para garantizar que la proporción de aspecto de la marco y sus elementos de interfaz de usuario siga siendo la misma sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 5 .
Crea un contenedor para contener agrupaciones de elementos de interfaz de usuario.
Inserta un marco en componente .
Seleccione el nuevo marco, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de los marcos en el medio de sí mismo (50% desde la izquierda a la derecha del marco, y 50% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- 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 a la parte inferior del marco padre).
- Establece tamaño a {1, 0},{0.75, 0} para que los componentes de la interfaz de selección ocupen 3/4 del contenedor (100% horizontalmente y 75% verticalmente del marco padre).
- Establece Nombre a Marco de selección .
Crea una solicitud para el seleccionador de blasters.
Inserta un Etiqueta de imagen en marco de selección .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Orden de diseño a .
- Establece Posición a {0.5, 0},{0.22, 0} para establecer la etiqueta cerca de la parte superior superior 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).
- Establece tamaño a {0.45, 0},{0.22, 0} para ampliar el área de aviso a casi la mitad del marco (45% horizontalmente y 22% verticalmente del marco padre).
- Establece Nombre a Cabeza .
- Establece Imagen a rbxassetid://14304828123 para mostrar un trapezoide.
- Establece Transparencia de imagen a 0.15.
(Opcional) Inserte una restricción de aspecto de la interfaz de usuario en la etiqueta para garantizar que la proporción de aspecto de la etiqueta se mantenga igual sin importar el tamaño de la pantalla del jugador.El conjunto de muestra establece su propiedad UIAspectRatioConstraint.AspectRatio a 13.78.
Inserte un Etiqueta de texto en encabezado para mostrar una solicitud.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
- Establece tamaño a {0.6, 0},{0.55, 0} para ampliar el espacio de texto a más de la mitad del etiqueta padre (60% horizontalmente y 55% verticalmente de la etiqueta padre).
- Establece Nombre a HeaderTextLabel .
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a medio para engrosar la fuente.
- Establece Texto a ELIGE UN BLASTER .
- Habilitar TextScaled .
Crea el contenedor para tu contenedor de botón blaster y flechas de selección.
Inserta un Etiqueta de imagen en marco de selección .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% 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 fondo a 0, 0, 0 para hacer que la etiqueta sea negra.
- Establece Transparencia de fondo a para reducir la opacidad de la etiqueta en un 30% y coincidir con todos los elementos de interfaz de usuario negros en la experiencia.
- Establece 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 a la parte inferior del marco padre).
- Establece tamaño a {1, 0},{0.77, 0} para ampliar el área de etiqueta al espacio debajo del cuadro de diálogo (100% horizontalmente y 77% verticalmente del marco padre).
Redondea las esquinas del contenedor.
- Inserta un objeto UICorner en la etiqueta.
- Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca Radio de esquina a 0.075, 0 para redondear las esquinas
Crea el contenedor para tus botones de blaster.
Inserta un marco en la etiqueta desde el paso 4.
Seleccione el nuevo marco, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen del nuevo marco en el medio de sí mismo (50% desde la izquierda a la derecha del marco, y 50% desde la parte superior a la parte inferior del marco).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.5, 0} para establecer el marco en el medio de su etiqueta padre (50% desde la izquierda a la derecha del marco padre y 50% desde la parte superior a la parte inferior del marco padre).
- Establece tamaño a {0.85, 0},{0.77, 0} para ampliar el área del marco a la mayor parte de la etiqueta (85% horizontalmente y 77% verticalmente de la etiqueta padre).
- Establecer Nombre a Contenedor .
Crea un relleno para todos los botones de bláster futuros.
- Inserta un objeto UIListLayout en el marco desde el paso 5.
- Seleccione el nuevo objeto de diseño, luego en la ventana Propiedades ,
- Establece relleno a 0.035, 0 para proporcionar espacio entre todos los botones futuros.
- Establece Dirección de relleno a horizontal para que cada botón se muestre al lado de otro.
- Establece tanto Alineación horizontal como Alineación vertical en Centro para que cada botón se alinee con el medio de los demás.
Crea el botón de navegación de la izquierda.
Inserta un objeto ImageButton en el Etiqueta de imagen desde el paso 4.
Seleccione el nuevo botón, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0, 0.5 para establecer el punto de origen del nuevo botón en el centro izquierdo de sí mismo (0% desde la izquierda a la derecha del botón, y 50% desde la parte superior a la inferior del botón).
- Establece Transparencia de fondo a 0.15 para proporcionar comentarios visuales al pasar el mouse sobre el botón que es seleccionable.
- Establece Posición a {0.02, 0},{0.5, 0} para proporcionar espacio a la izquierda del botón desde su contenedor padre (2% desde la izquierda a la derecha del etiqueta padre, y 50% desde la parte superior a la parte inferior del etiqueta padre).
- Establece el 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 blaster (4% horizontalmente y 33% verticalmente del marco padre).
- Establece Nombre a Botón de navegación izquierdo .
Redondea las esquinas del botón.
- Inserta un objeto UICorner en el botón.
- Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca Radio de esquina a 0.1, 0 para redondear las esquinas
Inserta un objeto ImageLabel en el botón.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- 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 flecha no se ve visualmente en el medio del botón en .
- Establece tamaño a {0.8, 0},{0.8, 0} para ampliar el área de etiqueta al espacio debajo del mensaje de inicio de sesión (80% horizontalmente y 80% verticalmente del marco padre).
- Establece Transparencia de fondo a 1.
- Establece Imagen a >.
- Establece Tipo de escala a Ajustar .
Crea el botón de navegación correcto.
Duplica NavigationButtonLeft .
Seleccione el botón duplicado, luego en la ventana Propiedades ,
- Establece AnchorPoint a 1, 0.5 para establecer el punto de origen del nuevo 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 parte inferior del botón).
- Establece Posición a {0.98, 0},{0.5, 0} para proporcionar espacio a la derecha del botón desde su contenedor padre (98% desde la izquierda a la derecha del etiqueta padre, y 50% desde la parte superior a la parte inferior del etiqueta padre).
- Establece Nombre a Botón de navegación derecho .
Seleccione su objeto hijo ImageLabel .
- Establece Rotación a 180 para voltear la imagen.
- 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 flecha no se ve visualmente en el medio del botón en .
Crea el botón SELECCIONAR .
Inserta un botón de imagen en componente .Observe cómo este proceso mantiene el botón de selección separado de SelectionFrame para que pueda agregar espacio entre la parte principal del componente desde el botón de selección.
Seleccione el nuevo botón, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen del nuevo botón en la parte inferior del medio 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).
- Establece Transparencia de fondo a 0.15 para proporcionar comentarios visuales al pasar el mouse sobre el botón que es seleccionable.
- 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 a la parte inferior del marco padre).
- Establece el tamaño a {0.17, 0},{0.18, 0} para extender el botón debajo de los botones del bláster (17% horizontalmente y 18% verticalmente del marco padre).
- Establece Nombre a Botón de selección .
Redondea las esquinas del botón.
- Inserta un objeto UICorner en el botón.
- Seleccione el nuevo objeto de esquina, luego en la ventana Propiedades , establezca Radio de esquina a 0.2, 0 para redondear las esquinas
Inserta un objeto TextLabel en el botón para que puedas mostrar una llamada a la acción.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Posición a {0.5, 0},{0.5, 0} para mover la etiqueta al centro del botón (50% desde la izquierda a la derecha del botón padre y 50% desde la parte superior a la parte inferior del botón padre).
- Establece tamaño a {0.9, 0},{0.55, 0} para ampliar el espacio de texto a casi toda la anchura de la etiqueta padre (90% horizontalmente y 55% verticalmente de la etiqueta padre).
- Establece Nombre a Seleccionar etiqueta de texto .
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a medio para engrosar la fuente.
- Establece Texto a SELECCIONAR .
- Habilitar TextScaled .
Crear una prefabricación de botón blaster.
- En el servicio ReplicatedStorage , crea una estructura de carpetas para organizar tus objetos de interfaz de usuario.La muestra utiliza una carpeta Instancias con una carpeta hija Guis .
- Inserte un objeto ImageButton en la carpeta Guis .
- Seleccione el nuevo botón, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen del nuevo botón en el medio de sí mismo (50% desde la izquierda a la derecha del botón, y 50% desde la parte superior a la parte inferior del botón).
- Establece Transparencia de fondo a 0.65 para proporcionar comentarios visuales de que el botón no está en foco.Los scripts en el paso 12 proporcionan comentarios visuales programáticos cuando el botón está en foco.
- Establece Orden de diseño a .
- Establece Nombre a BlasterButtonPrefab .
- Establecer tamaño a .
- Establece Transparencia de imagen a 1.
- Inserte una restricción de aspecto de la interfaz de usuario en BlasterButtonPrefab para garantizar que la proporción de aspecto del botón se mantenga igual dentro del componente sin importar el tamaño de la pantalla del jugador.
- Redondea las esquinas del botón.
- Inserte un objeto UICorner en BlasterButtonPrefab .
- Seleccione el UICorner , luego en la ventana Propiedades , establezca Radio de esquina a para redondear las esquinas.
- Inserta un Etiqueta de imagen en BlasterButtonPrefab .
- Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la nueva etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- 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 valor no está en el medio porque el bláster no se ve visualmente en el medio del botón en .
- 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).
- Establece Tipo de escala a Ajustar .
Referencia los siguientes ReplicatedStorage scripts dentro del archivo de ejemplo Etiqueta láser que muestran botones programáticamente para cada blaster, escalan los botones cuando un jugador selecciona un botón que no está en foco y adjuntan la selección del blaster de un jugador a su avatar.
El siguiente script requiere un conjunto de scripts que trabajan juntos para crear el seleccionador de blásteres.Cuando un jugador se une a la experiencia o reaparece en una ronda después de que su salud llegue a cero, este script activa todos los elementos de la interfaz de usuario del seleccionador de bláster hasta que el jugador haga su selección.
Ahora, cada vez que un jugador se une a la experiencia o reaparece en una ronda después de que su salud llegue a cero, se muestra la interfaz de usuario del seleccionador de blásteres, pueden hacer una selección y cada botón funciona como de esperado.
Botón de explosión
Un botón de explosión es un componente de interfaz de usuario que los jugadores usan para explotar su bláster si acceden a la experiencia a través de un dispositivo móvil o de tableta.La experiencia de etiqueta láser de muestra utiliza un botón blaster con un icono que representa tanto un punto de mira como una explosión para comunicar la función del botón sin texto.
Para recrear exactamente el botón de explosión dentro de la experiencia de etiqueta láser de muestra Laser Tag:
Inserte un botón de imagen en el objeto HUDGui ScreenGui
En la ventana Explorador , navegue al servicio StarterGui .
Pase el mouse sobre su objeto hijo HUDGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un Botón de imagen .
En la ventana de ventanilla, mueva el botón a donde descansa naturalmente el pulgar de un jugador para que pueda obtener un sentido visual de cómo se verá el botón en el dispositivo de un jugador, luego en la ventana Propiedades ,
- Establece Imagen a rbxassetid://18308375035 para mostrar el íconodel botón de explosión.
- Establece Imagen presionada a rbxassetid://18308372558 para mostrar una versión invertida del icono del botón de explosión cuando un jugador presiona el botón.
- Establece Transparencia de fondo a 1.
- Establece Nombre a Botón de explosión .
- Establece Tipo de escala a Ajustar para que la imagen encaje dentro de su contenedor y no se estire en varios tamaños de pantalla.
- Establece Transparencia de imagen a para reducir la opacidad de la etiqueta para que coincida con todos los elementos de interfaz de usuario negros en la experiencia.
Inserte una restricción de aspecto de la interfaz de usuario en Botón de explosión para garantizar que la proporción de aspecto del botón se mantenga igual sin importar el tamaño de la pantalla del jugador.
Consulte los siguientes ReplicatedStorage scripts dentro del archivo de lugar de ejemplo Etiqueta láser que muestran de forma programática el botón de disparo cuando un jugador está usando la entrada táctil en un dispositivo que admite controles táctiles.
El siguiente script requiere un conjunto de scripts de módulo que trabajan juntos para configurar el principal display de advertencia (HUD), incluyendo 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.
Ahora, cuando un jugador se une a la experiencia y usa la entrada táctil en un dispositivo que admite controles táctiles, el botón de disparo se muestra en la parte superior derecha del botón de salto.
Interfaz del jugador
Después de las mejores prácticas de jerarquía visual de Wireframe Your Layouts, esta sección te enseña cómo implementar todos los elementos de interfaz de usuario en la pantalla relacionados con el estado del jugador.Este agrupamiento de elementos de interfaz de usuario está cerca de los lados de la pantalla porque los jugadores pueden comprender esta información periférica sin desviar su atención del juego.
Indicador de jugador
Un indicador de jugador es un componente de interfaz de usuario al que los jugadores se refieren para descifrar rápidamente a qué equipo pertenecen tan pronto como aparezcan en la zona de generación de su equipo.La experiencia de etiqueta láser de muestra proporciona dos versiones del indicador del jugador dependiendo de si el jugador está en el equipo verde o rosa .
Según la guía de Seleccione un tema de color, ambas versiones del indicador del jugador combinan el color del equipo con un ícono único y simple con un mínimo de detalle para que se mantengan legibles en pequeñas pantallas.Proporcionar dos formas de retroalimentación visual es importante porque ayuda a mantener el diseño accesible para los jugadores con daltonismo.
Para recrear exactamente el componente de indicador de jugador dentro de la experiencia de prueba Etiqueta láser:
Inserta un marco en el objeto HUDGui ScreenGui
- En la ventana Explorador , navegue al servicio StarterGui .
- Pase el mouse sobre su objeto hijo HUDGui , luego haga clic en el ícono⊕. Se muestra un menú contextual.
- Desde el menú contextual, insira un marco .
Seleccione el nuevo marco , luego en la ventana propiedades ,
Establece Punto de anclaje a 0, 1 para establecer el punto de origen del marco en el centro inferior de sí mismo (0% desde la izquierda a la derecha del marco, y 100% desde la parte superior a la parte inferior del marco).
Establece Transparencia de fondo a 1.
Establece Nombre a PlayerDisplay .
Establece Posición a {0.02, 0},{0.97, 0} para establecer el marco cerca de la parte inferior izquierda de la pantalla.
Establece el tamaño a para acortar y ampliar el marco.
Habilita Descendentes de clips para recortar GuiObjects hijos que se extienden más allá del marco.
Crea la forma poligonal.
Inserta un Etiqueta de imagen en Mostrar jugador .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Imagen a rbxassetid://14304828123 para mostrar el íconode trapezoide.
- Establece Punto de anclaje a 1, 1 para establecer el punto de origen de la etiqueta en la parte inferior derecha de sí misma (100% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Nombre a Bloque .
- Establece Posición a {1,0},{1,0} para establecer la etiqueta en el lado derecho del marco.
- Establece el tamaño a {1.858, 0},{0.581, 0} para ampliar la etiqueta fuera del marco, y acortarla a un poco más de la mitad de la longitud del marco.
- Establece Transparencia de imagen a 0.15.
- Establece Tipo de escala a Ajustar para que la imagen encaje dentro de su contenedor y no se estire en varios tamaños de pantalla.
- Inserta una restricción de aspecto de la interfaz de usuario en bloque para asegurar que la apariencia de la etiqueta y sus elementos de interfaz de usuario siga siendo la misma sin importar el tamaño de la pantalla del jugador.
- Seleccione la nueva restricción, luego en la ventana Propiedades , establezca AspectRatio a 13.78.
Crea la caja para el retrato del jugador.
Inserta un Etiqueta de imagen en Mostrar jugador .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Elimina el ID de activo de marcador dentro de la propiedad Imagen .Los scripts en el paso 7 insertan programáticamente el retrato del jugador en la etiqueta de imagen.
- Establece Punto de anclaje a 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (0% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
- Establece FondoColor3 a 0, 0, 0 para establecer el color de fondo de la etiqueta en negro.
- Establece Transparencia de fondo a para reducir la opacidad de la etiqueta en un 30% y coincidir con todos los elementos de interfaz de usuario negros en la experiencia.
- Establece Nombre a Retrato de jugador .
- Establece Posición a {0.11, 0},{1, 0} para establecer la etiqueta en el lado izquierdo de la forma poligonal.
- Establece tamaño a {0.23, 0},{1, 0} para reducir la etiqueta.
- Establece Transparencia de imagen a 0.15.
- Establece Tipo de escala a Ajustar para que la imagen encaje dentro de su contenedor y no se estire en varios tamaños de pantalla.
- Inserte una restricción de aspecto de la interfaz de usuario en PlayerPortrait para garantizar que el aspecto de la etiqueta y sus elementos de interfaz de usuario siga siendo el mismo sin importar el tamaño de la pantalla del jugador.
- Inserte un UICorner en PlayerPortrait , luego en la ventana Propiedades , establezca Radio de esquina a para redondear ligeramente las esquinas.
Crea la etiqueta de texto para el nombre del jugador.
Inserta un objeto Etiqueta de texto en Mostrar jugador .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0, 0.5 para establecer el punto de origen del nuevo botón en el centro izquierdo de sí mismo (0% desde la izquierda a la derecha del botón, y 50% desde la parte superior a la inferior del botón).
- Establece Transparencia de fondo a 1.
- Establece Nombre a PlayerNameTextLabel .
- Establece Posición a {0.35, 0},{0.72, 0} para establecer la etiqueta en el lado derecho de su contenedor (35% desde la izquierda a la derecha de la etiqueta padre, y 72% desde la parte superior a la parte inferior de la etiqueta padre).
- Establece tamaño a {0.52, 0},{0.3, 0} para que el texto ocupe la mayor parte de la zona de forma poligonal (52% horizontalmente y 30% verticalmente de la forma padre).
- Establece FontFace a Montserrat para adaptarse a la estética futurista.
- Establece peso a negrita para engrosar la fuente.
- Elimina el texto de marcador dentro de la propiedad Texto . Los scripts en el paso 7 insertan programáticamente el nombre del jugador en la etiqueta de texto.
- Habilitar TextScaled .
- Establece Alineación de textoX a Izquierda .
Crea los iconos y colores del equipo que se muestran a la izquierda del retrato del jugador.
Inserta un carpeta en PlayerDisplay , luego renombrala iconos de equipo .
Crea el icono y el color del equipo verde y crea el equipo.
- Inserta un Etiqueta de imagen en Iconos de equipo .
- Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0, 1 para establecer el punto de origen de la etiqueta en la parte inferior izquierda de sí misma (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 reducir la etiqueta a la izquierda del retrato del jugador.
- Establece Transparencia de imagen a 1.
- Configura un atributo personalizado para rastrear que esta etiqueta es para el equipo verde. Este paso es muy importante para los scripts en el paso 7.
- En la ventana Propiedades , navegue hasta la sección Atributos , luego haga clic en el íconode más. Se muestra un diálogo emergente.
- En el campo nombre , ingrese color de equipo .
- En el menú desplegable Tipo , seleccione Color de ladrillo .
- Haga clic en el botón Guardar .
- Establece el nuevo atributo teamColor a Menta .
- Inserta una restricción de aspecto de la interfaz de usuario en TeamAIcon para asegurar que la relación de aspecto de la etiqueta y sus elementos de interfaz de usuario siga siendo la misma sin importar el tamaño de la pantalla del jugador.
- Crea el ícono.
- Inserta un Etiqueta de imagen en TeamAIcon .
- Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece imagen a rbxassetid://14309678670 para mostrar el íconodel equipo verde.
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- 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 reducir la etiqueta.
- Establece Tipo de escala a Ajustar para que la imagen encaje dentro de su contenedor y no se estire en varios tamaños de pantalla.
Crea el icono y el color del equipo rosa y crea el equipo.
- Duplica TeamAIcon y sus hijos.
- 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 a carmésar rosa.
- Establece Nombre a TeamBIcon .
- Establece el atributo teamColor a Carnation Pink .
- Seleccione el duplicado Icono hijo de TeamBIcon , luego en la ventana Propiedades , establezca Imagen a rbxassetid://14309678549 para mostrar el íconodel equipo rosa.
Referencie los siguientes ReplicatedStorage scripts dentro del archivo de lugar de ejemplo Etiqueta láser que muestre de forma programática el indicador del jugador con el color y el icono del equipo apropiado 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 cuadro de advertencia (HUD), incluyendo 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 apropiadamente para el estado, el dispositivo y el estado del equipo del jugador.
Ahora, cada vez que un jugador se une o se vuelve a unir a la ronda después de reaparecer, el indicador de jugador se muestra en la parte inferior izquierda de su pantalla.
Pantalla de campo de fuerza
Una pantalla de campo de fuerza es un elemento de interfaz de usuario que superpone el campo de visión para informar a los jugadores que están a salvo del fuego del equipo enemigo al unirse o reincorporarse a una ronda.Según las directrices estéticas para iconos de Elige un estilo artístico, la experiencia de etiqueta láser de muestra utiliza un patrón semi-transparente hexagonal para simbolizar un campo de fuerza.Esta decisión de diseño no solo refuerza el estilo artístico futurista general para toda la interfaz de usuario en la experiencia, sino que también comunica el estado del jugador sin ningún texto o guía adicional.
Para recrear exactamente la pantalla del campo de fuerza dentro de la experiencia de etiqueta láser de muestra Laser Tag:
Inserte un Etiqueta de imagen en el objeto ForceFieldGui .
En la ventana Explorador , navegue al servicio StarterGui .
Pase el mouse sobre su objeto hijo ForceFieldGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un Etiqueta de imagen .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Imagen a >.
Establece Transparencia de fondo a 0.8.
Establece el tamaño a {1, 0},{1, 0} para hacer que la imagen llene toda la pantalla (100% horizontalmente y 100% verticalmente de la pantalla padre ScreenGui).
Establece Tipo de escala a azulejo para hacer el azulejo hexagonal en toda la pantalla.
Establece Tamaño de azulejo a {0, 104},{0, 180}.
Inserta un objeto UIGradient en la etiqueta.
Seleccione el nuevo objeto de gradiente, luego en la ventana Propiedades ,
Establece Color a una secuencia de colores que comienza en azul, se vuelve blanca, luego se vuelve azul de nuevo.
Establece Color a 120, 192, 250 para aplicar un tinte azul claro a todos los hexágonos.
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 clave que determina el valor del color de la propiedad en ese punto de la imagen de izquierda a derecha.
Haga clic y arrastre la secuencia de colores hasta que llegue a un valor de Tiempo de 0.05, luego haga clic en el pequeño cuadrado junto a Color para abrir la ventana emergente de colores .
Seleccione un blanco brillante, luego cierre la ventana emergente.
Haga clic y arrastre la secuencia de colores hasta que llegue a un valor de Tiempo de 0.95 , luego vuelva a abrir la ventana emergente de Colores y seleccione el mismo color blanco que antes.
Establece Rotación a para mostrar la parte azul de tu secuencia de colores en los ángulos superior izquierdo y inferior derecho.
Establece Transparencia a una secuencia de números que hace que el campo de fuerza parezca que está brillando.
Haga clic en la propiedad Transparencia , luego haga clic en el botón ⋯ .Una secuencia de números aparece en la ventana emergente.Cada cuadrado al comienzo y al final de la secuencia de números es un punto clave que determina el valor de transparencia de la propiedad en ese punto de la imagen de izquierda a derecha.
Establezca las siguientes propiedades de tiempo y valor a lo largo de la secuencia de números:
- Tiempo = 0 , Valor = 0.25
- Tiempo = .101 , Valor = 0.875
- Tiempo = .183 , Valor = 0
- Tiempo = .3 , Valor = 1
- Tiempo = .7 , Valor = 1
- Tiempo = 1 , Valor = 0.9
Duplica el Etiqueta de imagen de paso 2.
Seleccione el objeto UIGradient dentro de la etiqueta duplicada, luego en la ventana Propiedades ,
Establece Rotación a -45 para voltear la imagen para que se refleje casi el uno al otro a lo largo del eje Y.
Modifica Transparencia para hacer que el destello luzca más orgánico.
- Haga clic en la propiedad Transparencia , luego haga clic en el botón ⋯ . Se muestra una secuencia de números.
- Seleccione el tercer fotograma claveclave, luego haga clic en el botón Eliminar .
Referencie los siguientes ReplicatedStorage scripts dentro del archivo de lugar de ejemplo Etiqueta láser que muestre de forma programática la pantalla del campo de fuerza mientras un jugador se une o se vuelve a unir a una ronda.
El siguiente ReplicatedStorage.ForceFieldClientVisuals guión del cliente sustituye el visual predeterminado ForceField con StarterGui.ForceFieldGui.Cuando los jugadores se cargan en una experiencia y aparecen en un SpawnLocation con una propiedad Duration que es mayor que 0, el comportamiento predeterminado en cada experiencia es proporcionarles a su avatar un orbe azul protector que momentáneamente les impide perder salud.
Este script comienza escuchando cuando se agrega el ForceField a un personaje, desactiva las visualizaciones predeterminadas del campo de fuerza en primera persona, luego habilita el objeto ForceFieldGui ScreenGui.Tenga en cuenta que esto no hace no impactar en las visuales de tercera persona cuando los jugadores miran a otros jugadores reapareciendo de nuevo en la experiencia.
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 generación con el campo de fuerza 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 vuelve a unir a la ronda después de reaparecer, la nueva interfaz de usuario del campo de fuerza muestra en lugar de los visuales predeterminados de primera persona ForceField .
Pantalla de reaparición
Una pantalla de reaparición es un elemento de interfaz de usuario que atenúa el campo de visión para informar a los jugadores que han sido etiquetados y que el servidor está en el proceso de reaparecerlos en su zona de generación.Este elemento de interfaz de usuario es importante porque les da a los jugadores tiempo para procesar que han sido etiquetados fuera, y estrategizar su próximo movimiento antes de que se vuelvan a unir a la ronda activa.
Para obtener más información sobre el comportamiento de reaparición personalizado en la experiencia de etiqueta láser de muestra, vea Reaparecer personajes del currículo de programación de juegos.
Para recrear exactamente la pantalla de reaparición dentro de la experiencia de prueba Etiqueta láser:
Crea el banner de información del centro.
Inserte un Etiqueta de imagen en el objeto OutStateGui ScreenGui
En la ventana Explorador , navegue al servicio StarterGui .
Pase el mouse sobre su objeto hijo OutStateGui , luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un Etiqueta de imagen .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen del nuevo 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).
Establece Transparencia de fondo a 1.
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).
Establece el tamaño a {0.48, 0},{0.06, 0} para ampliar la etiqueta (48% horizontalmente y 6% verticalmente de la pantalla padre de ScreenGui).
Establece Nombre a Bloque .
Establece Imagen a rbxassetid://14304827265 para hacer de la imagen un trapezoide.
Establece Color de imagen a 0,0,0 para hacer que el trapecio sea negro.
Establece Transparencia de imagen a para reducir la opacidad de la etiqueta en un 30% y coincidir con todos los elementos de interfaz de usuario negros en la experiencia.
Inserta una restricción de aspecto de la interfaz de usuario en bloque para asegurar que la apariencia de la etiqueta y sus elementos de interfaz de usuario siga siendo la misma sin importar el tamaño de la pantalla del jugador.
Seleccione la nueva restricción, luego en la ventana Propiedades , establezca AspectRatio a 13.78.
Inserta un Etiqueta de texto en Bloque para el texto informativo.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
Establece Transparencia de fondo a 1.
Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
Establece el tamaño a para que el texto ocupe la mayor parte de la zona trapezoidal (85% horizontalmente y 55% verticalmente de la etiqueta padre).
Establece Nombre a BodyTextLabel .
Establece FontFace a Montserrat para adaptarse a la estética futurista.
Establece peso a negrita para engrosar la fuente.
Establece Texto a Reapareciendo… .
Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco.
Habilitar TextScaled .
Crea el encabezado.
Inserta un Etiqueta de imagen en Bloque .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 1 para establecer el punto de origen de la etiqueta en la parte inferior del medio de sí misma (50% desde la izquierda a la derecha de la etiqueta, y 100% desde la parte superior a la parte inferior de la etiqueta).
Establece Transparencia de fondo a 1.
Establece Posición a {0.5, 0},{0, 0} para establecer la etiqueta en la parte superior media de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 0% desde la parte superior a la parte inferior de la etiqueta padre).
Establece el tamaño a {0.46, 0},{0.56, 0} para ampliar la etiqueta (46% horizontalmente y 56% verticalmente de la etiqueta padre).
Establece Nombre a Cabeza .
Establece Imagen a rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
Establece ImageColor a 245, 46, 46 para hacer que el desaparición rojo indique que el jugador está temporalmente inactivo mientras están etiquetados fuera de la ronda.
Inserta un Etiqueta de texto en encabezado para el texto informativo.
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
Establece Transparencia de fondo a 1.
Establece Posición a {0.5, 0},{0.5, 0} para establecer la etiqueta en el medio de su etiqueta padre (50% desde la izquierda a la derecha de la etiqueta padre y 50% desde la parte superior a la parte inferior de la etiqueta padre).
Establece el tamaño a para que el texto ocupe la mayor parte de la zona de desaparición (85% horizontalmente y 55% verticalmente de la etiqueta padre).
Establece Nombre a HeaderTextLabel .
Establece FontFace a Montserrat para adaptarse a la estética futurista.
Establece peso a negro para engrosar la fuente.
Establecer Texto a ETIQUETADO - ¡ESTÁS FUERA! 9. Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco.
Habilitar TextScaled .
Crea el desaparición alrededor de los bordes de la pantalla.
- Inserta un Etiqueta de imagen en OutStateGui .
- Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece FondoColor3 a 0,0,0 para establecer el color de fondo de la etiqueta en negro.
- Establece Transparencia de fondo a 0.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 pantalla padre, y 50% desde la parte superior a la parte inferior de la pantalla padre).
- Establece el 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).
- Establece ZIndex a -1 para mostrar el desvanecimiento detrás de los otros elementos de la interfaz de usuario.
- Establece Nombre a Cabeza .
- Establece Imagen a rbxassetid://14309518613 para hacer que la imagen sea un borde difuminado.
- Establece Transparencia de imagen a 0.1 para hacer que el desvanecimiento sea ligeramente translúcido.
Para mejorar el ejecución, puedes omitir el recurso de imagen y usar en su lugar un objeto UIGradient con una secuencia de números de transparencia personalizada.Para aprender más sobre esta técnica de desaparición, vea Modificadores de apariencia de la interfaz de usuario - Grado.
Referencia el siguiente ReplicatedStorage script dentro del archivo de lugar de ejemplo Etiqueta láser que muestra de forma programática la pantalla de reaparición cuando la salud de un jugador llega a cero y está en el proceso de reaparecer en la zona de generación de su equipo.
El siguiente ReplicatedStorage.PlayerStateHandler guión del cliente contiene funciones que activan diferentes tipos de comportamiento según el atributo playerState.Todas las respuestas de eventos se agrupan lógicamente juntas en este script porque requieren un comportamiento similar para habilitar o deshabilitar los controles del reproductor, el movimiento de la cámara y qué capa de interfaz de usuario es visible.
Cuando la salud de un jugador llega a cero, su playerState se convierte en TaggedOut, lo que activa la función onTaggedOut(). onTaggedOut() activa inmediatamente el siguiente comportamiento:
- El jugador no puede moverse en la arena.
- El jugador no puede mover su cámara.
- El jugador no puede usar su bláster.
- El StarterGui.OutStateGui se vuelve exclusivamente habilitado.
Cuando el jugador reaparece, su playerState se convierte en SelectingBlaster, lo que activa la función onSelectingBlaster(). onSelectingBlaster() entonces habilita exclusivamente el StarterGui.PickABlasterGui , que desactiva automáticamente la pantalla de reaparición.Para obtener más información sobre estas condiciones, vea Manejar el estado del cliente del curso de programación de juegos.
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 interfaz de usuario excepto la excepción dada
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- guiLayers contiene una lista de los guis que deben establecerse exclusivamente.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Habilita la cámara para que los jugadores puedan mirar alrededor mientras seleccionan un bláster
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- 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)
-- Habilitar el bláster mientras se juega
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Programar la lógica del campo de fuerza de destrucción cuando el jugador comienza a jugar
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Desactivar los controles mientras esté etiquetado fuera
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Desactivar el bláster mientras está etiquetado fuera
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Habilitar controles mientras estés en el vestíbulo
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Ocultar todo el HUD mientras estás en el vestíbulo
setGuiExclusivelyEnabled(nil)
-- Desactivar el bláster mientras estás en el vestíbulo
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlayerStateChanged(newPlayerState: string)
if newPlayerState == PlayerState.SelectingBlaster then
onSelectingBlaster()
elseif newPlayerState == PlayerState.Playing then
onPlaying()
elseif newPlayerState == PlayerState.TaggedOut then
onTaggedOut()
elseif newPlayerState == PlayerState.InLobby then
onInLobby()
else
warn(`Invalid player state ({newPlayerState})`)
end
end
-- Manija 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
-- Manija las actualizaciones futuras del estado del jugador
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Asegúrate de que los cambios sigan aplicándose después de reaparecer
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Ahora, cada vez que la salud de un jugador llega a cero, la pantalla de reaparición se muestra hasta que el jugador reaparece en su zona de generación.
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 en la que los jugadores ganan o pierden una coincidir.Puedes usar el archivo de ejemplo de etiqueta láser como referencia, o ajustar los valores para cumplir con los requisitos de juego de tu propia experiencia.
Crear objetos de SurfaceGui
Para mostrar la interfaz de usuario en la superficie de una parte en el espacio 3D que responda a la lógica de programación para cada jugador individual , puedes asignar un objeto SurfaceGui a la parte que quieres mostrar tu interfaz de usuario dentro del servicio ReplicatedStorage.Esta técnica garantiza que tu interfaz y su lógica de programación estén disponibles tanto para el servidor como para el cliente de cada jugador.
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 de muestra solo incluye una instancia de un objeto SurfaceGui : el medidor de reutilización que se muestra sobre el bláster de cada jugador.Este objeto necesita lógica de programación para cada jugador porque responde activamente a la entrada de cada jugador individual y proporciona retroalimentación visual de cuándo pueden volver a explotar su bláster.
Para crear un objeto SurfaceGui :
En la ventana Explorador , pasa el mouse sobre el servicio Almacenamiento replicado , luego haz clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un objeto Parte contextual.
Inserta un objeto ScreenGui en la parte.
Renombra el SurfaceGui de acuerdo con el contexto de sus elementos de interfaz de usuario hijos.
Repita este proceso para cada elemento de interfaz de usuario que necesite mostrar en la superficie de una pieza en el espacio 3D.
Medidor de enfriamiento
Un medidor de tiempo de reutilización es un componente de interfaz de usuario que informa a los jugadores cuánto tiempo tienen que esperar antes de que puedan volver a disparar su bláster.Esta pausa ligera impide que los jugadores puedan explotar tan rápido como puedan hacer clic o presionar un botón, lo cual es poco realista para el juego de etiqueta láser.
Para recrear exactamente el medidor de tiempo de reutilización dentro de la experiencia de prueba Etiqueta láser:
Crea una parte para sostener tu objeto SurfaceGui .
- En la ventana Explorador , pasa el mouse sobre el espacio de trabajo , luego haz clic en el ícono⊕. Se muestra un menú contextual.
- Desde el menú contextual, insira una parte de bloque parte.Esta es una ubicación temporal para la parte para que puedas visualizar los cambios en cada paso del proceso.
Posiciona y orienta la pieza alrededor de la posición de donde el personaje de un jugador sostendría su bláster, luego en la ventana Propiedades ,
Establece Transparencia a 1 para hacer que la parte sea completamente transparente.
Establece Nombre a CooldownBarPrefab .
Establece tamaño a para escalar la pieza a un tamaño aproximado de la longitud del láser.
Desactivar CanCollide y CanQuery .
Inserta un SuperficieGui en CooldownBarPrefab .
Seleccione el nuevo SurfaceGui , luego en la ventana Propiedades ,
Establece Cara a Superior para que la interfaz de usuario se muestre hacia arriba.
Establece Influencia de luz y Distancia máxima a >.
Establece píxeles por estudio a 200.
Crea la barra negra.
Inserta un Etiqueta de imagen en el SurfaceGui .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece FondoColor3 a 0,0,0 para establecer el color de fondo de la etiqueta en negro.
- Establece Transparencia de fondo a 0.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 del padre SurfaceGui, y 50% desde la parte superior a la inferior del padre SurfaceGui).
- 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 SurfaceGui).
- Establecer Nombre a Contenedor .
Redondea las esquinas del contenedor.
Inserta un objeto UICorner en Contenedor .
Seleccione el UICorner , luego en la ventana Propiedades , establezca Radio de esquina a 0.15, 0 para redondear ligeramente los bordes.
Crea la barra roja.
- Inserta un Etiqueta de imagen en Contenedor .
- Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Elimina el valor predeterminado de imagen .
- Establece Punto de anclaje a 1, 0.5 para establecer el punto de origen de la etiqueta en el centro derecho de sí misma (100% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Color de fondo3 a 172, 13, 13 para establecer el color de fondo de la etiqueta a un rojo oscuro.
- Establece Transparencia de fondo a 0.2 para hacer que el fondo de la etiqueta sea ligeramente transparente
- Establece Nombre a Bar .
- Establece 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).
- 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 transición que ocurre en los scripts en el paso 8.
Redondea las esquinas de la etiqueta.
- Inserta un objeto UICorner en Bar .
- Seleccione el UICorner , luego en la ventana Propiedades , establezca Radio de esquina a 0.15, 0 para redondear ligeramente los bordes.
Mueva CooldownBarPrefab a ReplicatedStorage .
Crea una estructura de carpetas para organizar tus objetos de interfaz de usuario. La muestra utiliza una carpeta Instancias con una carpeta hija Guis .
Mueva CooldownBarPrefab a Guis .
Referencia los siguientes ReplicatedStorage scripts dentro del archivo de lugar de muestra Etiqueta láser que programáticamente adjunta el medidor de tiempo de reutilización al bláster del jugador, luego anima la barra roja después de que un jugador dispare su bláster.
El siguiente ReplicatedStorage.FirstPersonBlasterVisuals guión del cliente maneja toda la lógica visual para el bláster de primera persona del jugador.Requiere un conjunto de scripts de módulo que trabajan juntos para configurar visuales de bláster que se sientan más realistas para el juego de etiqueta láser, incluyendo FirstPersonBlasterVisuals.addCooldownBar y FirstPersonBlasterVisuals.runCooldownBarEffect.
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")
local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)
local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)
local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent
local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)
local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera
local rigModel = nil
local cooldownBar = nil
local animations = {}
local function addFirstPersonVisuals()
local blasterConfig = getBlasterConfig()
-- Añade el primer rig de persona
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Añade la barra 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 espera ya que se le asigna al rig
rigModel:Destroy()
rigModel = nil
end
end
-- Ejecutar efectos visuales de 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 modelo a la cámara si existe
RunService.RenderStepped:Connect(function()
if rigModel then
-- Actualizar el CFrame del rig en relación con la posición de la cámara y RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Manija cambiando visuales cuando el tipo de bláster cambia mientras se juega
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Manija cambiar visuales cuando el estado del jugador cambia
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Eliminar las visuales cuando el jugador está seleccionando un blaster o está en el vestíbulo
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Añade los visuales de nuevo cuando el jugador termine de seleccionar el bláster.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Ahora, cada vez que un jugador lanza su lanzador, la barra de reutilización se anima a comunicarse cuando el jugador pueda volver a lanzar.
Crear objetos de BillboardGui
Para mostrar elementos de interfaz de usuario dentro del espacio 3D que respondan a la lógica de programación y siempre enfrenten la cámara de cada jugador independientemente de su ángulo de visión, como nombres de jugadores o marcadores de mapa, puedes crear un objeto BillboardGui como hijo de un BasePart o Attachment que existe en el espacio 3D.
La experiencia de etiqueta láser de muestra incluye dos objetos separados dentro del servicio ):
- OtherPlayerIndicatorGuiPrefab - Muestra un círculo rosa o verde sobre la cabeza de cada jugador cuando está activo en una ronda.
- TaggedOutIndicatorGuiPrefab - Se muestra por encima de la cabeza de un jugador cuando se etiqueta fuera de la ronda.
Después de crear un objeto BillboardGui , puedes crear y personalizar su hijo GuiObjects de acuerdo con el propósito de cada contenedor.Para demostrar, en las secciones inmediatas que seguir, aprenderá cómo implementar elementos de interfaz de usuario para ambos tipos de indicador dentro de la experiencia de etiqueta láser de muestra. Puedes ajustar cualquier parte del proceso para cumplir con las especificaciones de tu propia experiencia .
Para crear un objeto BillboardGui :
- En la ventana Explorador , pasa el mouse sobre un BasePart o Attachment, luego haz clic en el ícono ⊕ . Se muestra un menú contextual.
- Desde el menú contextual, insira un objeto BillboardGui .
- Renombra el BillboardGui de acuerdo con el contexto de sus elementos de interfaz de usuario hijos.
- Repita este proceso para cada elemento de interfaz de usuario que necesite para mostrar contextualmente sobre las cabezas de los jugadores.
Indicador de equipo
Un indicador de equipo es un elemento de interfaz de usuario que informa a los jugadores a qué equipo pertenecen otros jugadores en la ronda para que puedan diferenciar fácilmente entre sus aliados y los miembros del equipo enemigo.Esta información es importante porque el juego de un shooter de primera persona requiere que los jugadores tomen decisiones estratégicas rápidas mientras están en zonas de combate para que no sean etiquetados y pierdan la coincidir.
Para recrear exactamente el indicador de equipo dentro de la experiencia de prueba Etiqueta láser:
Inserta un objeto BillboardGui en un rigtemporal.
Desde la pestaña Avatar de la barra de herramientas, haga clic en Constructor de modelos .
Seleccione de las opciones disponibles.La muestra utiliza un introducirde perfil R15 , una forma de cuerpo femenina y un avatar Rthro .El modelo se muestra tanto en la ventana de visualización 3D como en la ventana Explorador con el nombre Rig .
En la ventana Explorador , navegue hasta la malla Cabeza del hijo de la rig, luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un BillboardGui .
Seleccione el nuevo BillboardGui , luego en la ventana Propiedades ,
Establece Influencia de luz a para evitar que la luz ambiental afecte el color del indicador.
Establece Nombre a Otro indicador de jugador prefabricado .
Establece tamaño a {0, 10},{0, 10} para hacer que la etiqueta sea significativamente menor.
Establece StudsOffsetWorldSpace a 0, 4, 0 para posicionarlo por encima de la cabeza del rig.
Inserte un objeto marco en Otro indicador de jugador prefabricado .
Seleccione el nuevo marco, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen del marco 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).
Establece Color de fondo3 a 255, 3, 0 para establecer el color de fondo del marco en rojo como color de relleno.
Establece Posición a {0.5, 0},{0.5, 0} para establecer el marco en el medio de su contenedor (50% desde la izquierda a la derecha del padre BillboardGui, y 50% desde la parte superior a la parte inferior del padre BillboardGui).
Establece el tamaño a {1, -2},{1, -2} para acortar el marco al área de superficie del BillboardGui.
Inserte un objeto UICorner en marco para redondear completamente las esquinas.
Inserta un objeto UIStroke en marco para delinear el círculo del indicador.
Mueva Otro indicador de jugador prefabricado a Almacenamiento replicado .
Referencie el siguiente ReplicatedStorage script dentro del archivo de lugar de ejemplo Etiqueta láser 1A que muestra de forma programática 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.Ata el indicador de equipo llamando la función addIndicatorToCharacter(), que localiza el objeto Head de cada personaje de jugador que participa en la ronda.Si aún no tienen un indicador de equipo, el script luego clona y agrega el otroPlayerIndicatorPrefab UI al personaje de Head y establece el color del indicador de equipo al color de su equipo.
Si otros jugadores están en el mismo equipo, el indicador de equipo siempre se muestra, incluso si se ocultan detrás de objetos en el espacio 3D; si otros jugadores están en el equipo enemigo, el indicador de equipo solo se muestra si no hay un objeto en el espacio 3D para ocultarlos.
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 agregue indicadores a los jugadores que participan en la ronda
if not otherPlayer.Team then
return
end
-- Evite agregar indicadores duplicados, cree uno nuevo solo si no existe
local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
if not gui then
gui = otherPlayerIndicatorPrefab:Clone()
gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
gui.Parent = otherHead
end
-- El indicador siempre está en la parte superior solo si el jugador es amigable
local isFriendly = otherPlayer.Team == localPlayer.Team
gui.AlwaysOnTop = isFriendly
end)
end
local function addIndicatorWhenCharacterSpawns(player: Player)
if characterSpawnConnectionsByPlayer[player] then
return
end
local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
characterSpawnConnectionsByPlayer[player] = connection
end
local function stopSyncingIndicators()
for _, connection in characterSpawnConnectionsByPlayer do
connection:Disconnect()
end
table.clear(characterSpawnConnectionsByPlayer)
if playerAddedConnection then
playerAddedConnection:Disconnect()
playerAddedConnection = nil
end
for _, player in Players:GetPlayers() do
removeIndicatorFromPlayer(player)
end
end
local function addIndicatorToPlayer(player: Player)
if player == localPlayer then
return
end
addIndicatorToCharacter(player.Character)
addIndicatorWhenCharacterSpawns(player)
end
local function startSyncingIndicators()
for _, player in Players:GetPlayers() do
addIndicatorToPlayer(player)
end
if not playerAddedConnection then
playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
end
end
local function onLocalTeamChanged()
local localTeam = localPlayer.Team
if localTeam then
startSyncingIndicators()
else
stopSyncingIndicators()
end
end
localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()
Ahora, cada vez que un jugador está en una ronda activa, los indicadores de equipo se muestran sobre la cabeza de otros jugadores a menos que estén en el equipo enemigo y detrás de un objeto.
Indicador etiquetado fuera
Un indicador etiquetado es un elemento de interfaz de usuario que informa a los jugadores cuando otros jugadores ya no están activos en la ronda y están en el proceso de reaparecer en su zona de generación.Esta información es importante porque el juego de un shooter de primera persona requiere que los jugadores se muevan a su siguiente objetivo tan pronto como etiqueten a un jugador para que no se vuelvan vulnerables en la arena al jugar en la misma ubicación por demasiado tiempo.
Para recrear exactamente el indicador etiquetado dentro de la experiencia de prueba Etiqueta láser:
Inserta un objeto BillboardGui en un brazo temporal para que puedas visualizar los cambios en cada paso del proceso.
Desde la pestaña Avatar de la barra de herramientas, haga clic en Constructor de modelos .
Seleccione de las opciones disponibles.La muestra utiliza un introducirde perfil R15 , una forma de cuerpo masculina y un avatar Rthro .El modelo se muestra tanto en la ventana de visualización 3D como en la ventana Explorador con el nombre Rig .
En la ventana Explorador , navegue hasta la malla Cabeza del hijo de la rig, luego haga clic en el ícono ⊕ . Se muestra un menú contextual.
Desde el menú contextual, insira un BillboardGui .
Seleccione el nuevo BillboardGui , luego en la ventana Propiedades ,
Establece Influencia de luz a para evitar que la luz ambiental afecte el color del indicador.
Establece Nombre a TaggedOutIndicatorGuiPrefab .
Establece tamaño a {3, 0},{0.5, 0} para ampliar el espacio para una etiqueta
Establece StudsOffset a 0, 3.25, 0 para posicionarlo por encima de la cabeza de un jugador.
Inserte un objeto Etiqueta de imagen en TaggedOutIndicatorGuiPrefab .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
- Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
- Establece Transparencia de fondo a 1.
- Establece Nombre a Marco .
- 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 del padre BillboardGui, y 50% desde la parte superior a la parte inferior del padre BillboardGui).
- Establece tamaño a {1, 0},{1, 0} para ampliar la etiqueta a todo el BillboardGui (100% horizontalmente y 100% verticalmente del padre BillboardGui).
- Establece Imagen a rbxassetid://14304826985 para hacer que la imagen sea un desvanecimiento multidireccional.
- Establece Color de imagen a 245, 46, 46 para teñir la etiqueta roja.
Para mejorar el ejecución, puedes omitir el recurso de imagen y usar en su lugar un objeto UIGradient con una secuencia de números de transparencia personalizada.Para aprender más sobre esta técnica de desaparición, vea Modificadores de apariencia de la interfaz de usuario - Grado.
Inserta un objeto Etiqueta de texto en marco .
Seleccione la nueva etiqueta, luego en la ventana Propiedades ,
Establece Punto de anclaje a 0.5, 0.5 para establecer el punto de origen de la etiqueta en el medio de sí misma (50% desde la izquierda a la derecha de la etiqueta y 50% desde la parte superior a la parte inferior de la etiqueta).
Establece Transparencia de fondo a 1.
Establece Nombre a BodyTextLabel .
Establece Posición a 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 parte inferior de la etiqueta padre).
Establece tamaño a {0.85, 0},{0.7, 0} para que el texto ocupe la mayor parte de la zona de desaparición (85% horizontalmente y 70% verticalmente de la etiqueta de imagen padre).
Establece FontFace a Montserrat para adaptarse a la estética futurista.
Establece peso a negrita para engrosar la fuente.
Establece Texto a ETIQUETADO .
Establece TextColor3 a 255, 255, 255 para hacer que el texto sea blanco.
Habilitar TextScaled .
Mueva TaggedOutIndicatorGuiPrefab a ReplicatedStorage .
Referencie los siguientes ServerScriptService scripts dentro del archivo de lugar de ejemplo Etiqueta láser 1A que muestre de forma programática el indicador etiquetado mientras un jugador está reapareciendo en la zona de generación de su equipo.
El siguiente ServerScriptService.SetupHumanoid script del servidor se ejecuta tan pronto como un jugador cargue la experiencia.Asegura que cada vez que se agrega el personaje de un jugador al aplicación de modeladode datos, se llama setupHumanoidAsync con su Humanoid .
local Players = game:GetService("Players")
local setupHumanoidAsync = require(script.setupHumanoidAsync)
local function onCharacterAdded(player: Player, character: Model)
local humanoid = character:WaitForChild("Humanoid")
setupHumanoidAsync(player, humanoid)
end
local function onPlayerAdded(player: Player)
-- Llama a CharacterAdded si el jugador ya tiene un personaje
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Llama a CharacterAdded para todos los futuros engendros de personajes para este jugador
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Llama a onPlayerAdded para cualquier jugador ya en el juego
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Llama a onPlayerAdded para todos los jugadores futuros
Players.PlayerAdded:Connect(onPlayerAdded)
Ahora, cada vez que la salud de un jugador llega a cero, el indicador etiquetado se muestra por encima de su cabeza hasta que reaparezca.
¡Felicidades por completar el programa de diseño de interfaz de usuario! Ahora que tienes experiencia en la creación de un estilo artístico, el diseño de tus maquetas y la implementación de tus diseños en Studio desde el principio hasta el fin, puedes extender tu proyecto con nuevas interfaces y funciones, o seguir curricula de tutorial adicionales, como el Curriculum de programación de juegos que te enseña sobre la organización general y los detalles de implementación clave de la experiencia de etiqueta láser de muestra.¡Feliz creación!