Mettre en œuvre les designs dans Studio | Documentation

Implémenter vos designs est le processus de création de vos wireframes dans Studio en utilisant à la fois les éléments d'interface utilisateur intégrés et personnalisés avec des scripts qui déclenchent votre contexte UI. Ce pas exaltant du tutoriel est où vous voyez tous vos designs et votre dur travail se rassembler en un ensemble cohérent de workflows qui sont complets et prêts pour l'interaction du joueur.

En utilisant l'expérience de laser de Sample Laser Tag comme référence, cette section du cours de conception de l'interface utilisateur montre comment apporter votre planification d'interface à la vie, y compris des conseils sur :

Récupération des ID des ressources à partir de la bibliothèque de ressources de l'interface utilisateur afin que vous puissiez recréer les composants de l'interface utilisateur de l'expérience de marquage laser.
Émulation de divers appareils directement dans Studio pour voir comment votre interface utilisateur s'affiche sur différents écrans et ratios d'aspect.
Créer ScreenGui, SurfaceGui et BillboardGui objets pour afficher votre interface utilisateur sur les écrans des joueurs, les parties de la surface et dans l'espace 3D, respectivement.

Après avoir examiné les techniques dans cette section, vous pouvez les appliquer à vos propres projets pour créer des composantes d'interface utilisateur passionnantes qui aident les joueurs à naviguer dans ce qu'ils peuvent faire dans vos expériences.

Les instructions dans cette section du tutoriel vous montrent comment reproduire exactement les composants de l'interface utilisateur en utilisant la bibliothèque d'objets de conception de l'interface. Ce processus prend environ 90 minutes ou moins du début à la fin. Si vous ne voulez pas utiliser les valeurs fournies, vous pouvez ajuster chaque élément de l'interface pour refléter les spécifications de votre propre expérience, ou utiliser l'exemple lui-même pour le reste du tutoriel.

Obtenir la bibliothèque des ressources

Les bibliothèques des ressources sont des collections de ressources que vous pouvez ajouter à votre inventaire pour un accès facile et une réutilisation. La bibliothèque des ressources que vous utiliserez pour votre projet à partir de la boutique des créateurs inclut neuf ressources individuelles de l'interface utilisateur 2D et les versions finales des objectifs, des sélecteurs de blaster et des composants de joueur que vous créez dans cette section du tutoriel.

**Icône de MultiBlaster** rbxassetid://14309094777

**Icône de SingleBlaster** rbxassetid://14309094641

**Icône d'équipe rose** rbxassetid://14309678581

**Piège à trapézoïdes** rbxassetid://14304828203

**Piège à l'envers Trapezoidale** rbxassetid://14304827304

**Icône de l'équipe verte** rbxassetid://14309678701

**Fade multidirectionnel** rbxassetid://14304827147

**Icône de bouton d'explosion par défaut** rbxassetid://18308375067

**Icône de bouton d'explosion - Presse** rbxassetid://18308372597

**Icône de crosseur** rbxassetid://14400935532

Icône de marqueur de frappe rbxassetid://14401148777

**Icône de flèche de sélection** rbxassetid://14309187282

**Fade de bordure** rbxassetid://14309518632

Vous pouvez ajouter la plupart de la bibliothèque à votre inventaire dans Studio en cliquant sur le lien Ajouter à l'inventaire dans le composant suivant. Une fois que les ressources sont dans votre inventaire, vous pouvez les réutiliser dans n'importe quel projet sur la plateforme.

Final Screen UI Components

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

Pour obtenir la bibliothèque des ressources de votre inventaire dans votre expérience :

Dans la barre de menu, sélectionnez l' Affichage onglet.
Dans la section Afficher , cliquez sur Boîte à outils . La Boîte à outils fenêtre s'affiche.
Dans la boîte à outils fenêtre, cliquez sur l'onglet Inventaire . L'affichage de mes modèles .
Cliquez sur le menu déroulant, puis sélectionnez le trierMy Packages .
Cliquez sur la case Final Screen UI Components , puis dans la fenêtre Explorer , sélectionnez Components terminés , puis glissez-les dans le service 1> StarterGui1>. Vous pouvez maintenant activer l'un des composants terminés pour référencer leur conception.

Éмуuler des appareils

L'émulateur de dispositifs Studio vous permet de tester comment les joueurs verront et interagiront avec votre interface utilisateur sur différents appareils. Cet outil est une partie vitale du processus d'implémentation car la proportionnalité des aspects de votre fenêtre dans Studio n'est pas nécessairement la proportionnalité des aspects que les joueurs utilisent pour accéder à votre expérience, et il est important que votre interface soit à la fois lisible et accessible sur tous les appareils.

Par exemple, si vous n'avez pas testé votre interface utilisateur sur une gamme de tailles d'écran, les joueurs avec de grands écrans peuvent ne pas pouvoir lire votre texte ou déchiffrer vos icônes, et les joueurs avec de petits écrans peuvent ne pas pouvoir voir l'espace 3D car vos éléments d'interface prennent trop de place sur l'affiche.

Pour éмуler votre écran à la plus petite taille d'écran :

Dans la barre de menu, sélectionnez l' Test onglet.
Dans la section Émulation , cliquez sur Dispositif . La fenêtre change pour refléter le ratio d'aspect d'un ordinateur portable moyen.
Dans le menu déroulant de la résolution, sélectionnez Résolution actuelle . Cela vous permet de voir la résolution réelle de vos éléments d'interface utilisateur sur le dispositif sur lequel vous éмуlez.
Dans le menu déroulant des appareils, sélectionnez l'appareil avec la plus petite taille de l'écran que les joueurs peuvent utiliser pour accéder à votre expérience. Bien que l'option la plus appropriée varie selon les appareils pris en charge par votre expérience, l'expérience de laser de samuil teste avec un iPhone 4S pour vérifier à quoi ressemble l'interface avec un espace d'écran limité.

Créer des objets GUI

Pour afficher les éléments de l'interface utilisateur sur l'écran de chaque joueur, vous pouvez créer un objet ScreenGui dans le service StarterGui. Les objets ScreenGui sont les conteneurs principaux pour l'interface utilisateur sur l'écran, et le service 1> Class

Vous pouvez créer plusieurs objets ScreenGui pour organiser et afficher les groupements d'éléments de l'interface utilisateur contextuellement dans le jeu. Par exemple, l'expérience de laser de poche inclut cinq objets ScreenGui séparés qui sont initialement désactivés jusqu'à ce que les joueurs remplissent différentes conditions pendant le principal l'expérience d'utilisateur du jeu :

HUDGui - Affiche les informations clés sur le jeu de l'expérience lorsque les joueurs sont actifs dans une manche, telles que les objectifs et les points totaux de chaque équipe.
PickABlasterGui - affiche toutes les choix de blaster lorsque les joueurs commencent ou rejoignent une manche.
ForceFieldGui - Affiche une grille hexagonale lorsque les joueurs sélectionnent un blaster et pendant qu'ils sont temporairement invincibles.
OutStateGui - Affiche une bordure sombre autour de l'écran lorsque les joueurs sont marqués comme sortis.
RoundResultsGui - affiche une couche sombre au-dessus de l'écran avec des informations sur l'équipe qui a gagné le tour.

Après avoir créé un objet ScreenGui, vous pouvez créer et personnaliser son enfant GuiObjects selon le but de chaque conteneur. Pour démontrer, dans les sections immédiates qui s'abonner, vous apprendrez à implémenter des éléments d'interface pour les joueurs de la catégorie d'information t

Pour créer un objet ScreenGui :

Dans la fenêtre Explorateur , passez la souris sur le service StarterGui , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
Insérez un ScreenGUI .
Renommez le ScreenGUI en fonction du contexte de ses éléments d'interface enfants.
Répétez ce processus pour chaque groupe d'éléments d'interface que vous devez afficher sur l'écran de chaque joueur.

Interface utilisateur objet

En suivant les meilleures pratiques de la hiérarchie visuelle, décrites dans Wireframe Your Layouts, cette section vous apprend à implémenter tous les éléments d'interface utilisateur sur l'écran qui sont liés à l'objectif de l'expérience. Ce regroupement des éléments d'interface est près du haut de l'écran car l'objectif et les points de chaque équipe ont la plus grande signification sur la façon de gagner le jeu.

Par exemple, l'échantillon fournit un composant d'interface utilisateur objectif que les joueurs référents pour savoir ce qu'ils doivent faire pour réussir dans une manche. Comme les joueurs taguent les membres de l'équipe ennemis et gagnent des points, ce composant suit le score de chaque équipe contre le but global dans le menu contextuel dans le script de jeu. Pour une revue de niveau high de tous les scripts clients et serveurs qui fonctionnent ensemble pour suivre les points, voir Suivre

Pour reconstituer exactement l'interface utilisateur de l'objectif dans l'expérience Laser Tag :

Créez un conteneur pour l'ensemble du composant.
1. Insérez un Frame dans l'objet HUDGui ScreenGui.
  1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
  2. Survolez son objet enfant HUDGui , puis cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
  3. Dans le menu contextuel, insérez un Frame .
2. Sélectionnez le nouveau cadre, puis dans la fenêtre propriétés,
  1. Définir AnchorPoint à 0.5, 0 pour définir le point d'origine du cadre dans le coin supérieur droit de lui (50% de la gauche à la droite du cadre et 0% de la droite à la gauche du cadre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.03, 0} pour définir le cadre près du haut du milieu de l'écran (50% de la gauche à la droite de l'écran, et 3% du haut au bas de l'écran pour qu'il y ait un peu de tampon).
  4. Définir la taille taille à {0.5, 0},{0.13, 0} afin que les éléments du cadre prennent une grande partie de la partie supérieure de l'écran pour attirer l'attention des joueurs (50% horizontalement et 13% verticalement).
  5. Définir nom à objectif .
3. (Facultatif) Insérer un UIAspectRatioConstraint dans Objectif pour garantir que le ratio de l'aspect de la étiquettereste le même, peu importe la taille de l'écran du joueur. Le script définit sa propriété 0> Class.UIAspectRatioConstraint.AspectRatio 0> sur 3> 7 3> .
Créez un conteneur pour les objets d'invite de l'objectif.
1. Insérer un cadre dans objectif .
2. Sélectionnez le nouveau cadre, puis dans la fenêtre propriétés,
  1. Définir AnchorPoint à 0.5, 0 pour définir le point d'origine du cadre dans le coin supérieur droit de lui (50% de la gauche à la droite du cadre et 0% de la droite à la gauche du cadre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{0, 0} pour définir le cadre au milieu du conteneur (50% de la gauche à la droite de la position parent, et 0% de la haut de la position parent).
  4. Définir la taille Size à {1, 0},{0.67, 0} afin que les composants de l'interface de sélection prennent environ la moitié du conteneur du haut au bas (100 % horizontalement et 67 % verticalement de la parent-框).
  5. Définir nom à ObjectiveDisplay .
Créez les éléments de titre.
1. Insérez un ImageLabel dans ObjectiveDisplay .
2. Sélectionnez le ImageLabel , puis dans la fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de l'étiquette et 100% de la haut de la gauche à la droite de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir LayoutOrder à -1.
  4. Définir la position Position à {0.5, 0},{0.34, 0} pour définir l'étiquette près du haut du milieu de la fenêtre (50% de la gauche à la droite de la parent-框, et 34% de la haut de la parent-框).
  5. Définir la taille Taille à {0.46, 0},{0.34, 0} pour élargir la zone d'invite à presque la moitié de la zone de cadre (46% horizontalement et 34% verticalement du cadre parent).
  6. Définir nom à l'en-tête.
  7. Définir Image à rbxassetid://14304828123 pour afficher un trapezoid.
  8. Définir ImageTransparency à 0.15 pour rendre le en-tête semi- transparent.
3. (Facultatif) Insérez un UIAspectRatioConstraint dans le ImageLabel pour assurer que le ratio de l'aspect de la étiquettereste le même, peu importe la taille de l'écran du joueur. Les exemples définissent sa propriété 0> Class.UIAspectRatioConstraint.AspectRatio0> sur 3>13.781 3>.
4. Insérez un TextLabel dans En-tête pour afficher un titre.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de sa balise parent (50% de la gauche à la droite de la balise parent, et 50% du haut au bas de la balise parent).
  4. Définir la taille Size à {0.62, 0},{0.55, 0} pour élargir l'espace d'écriture à plus de la moitié de l'étiquette parent (62% horizontalement et 55% verticalement de l'étiquette parent).
  5. Définir nom à étiquette de texte en en-tête .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Moyen pour rendre la police plus épaisse.
  8. Set Texte to OBJECTIF .
  9. Activer TextScaled .
Créez les éléments d'invite.
1. Insérez un ImageLabel dans ObjectiveDisplay .
2. Sélectionnez le ImageLabel , puis dans la fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de l'étiquette et 100% de la haut de la gauche à la droite de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir Position à {0.5, 0},{1, 0} pour déplacer l'étiquette en bas du milieu de son cadre parent (50% de la gauche à la droite du cadre parent, et 100% de la haut de la droite du cadre parent).
  4. Définir la taille Size à {0.89, 0},{0.66, 0} pour élargir l'espace d'écriture à presque la largeur complète du cadre parent (89 % horizontalement et 66 % verticalement du cadre parent).
  5. Définir nom à corps .
  6. Définir Image à rbxassetid://14304827265 pour afficher un trapezoid inversé.
  7. Définir ImageColor3 à 0, 0, 0 pour teindre l'image noire.
  8. Définir ImageTransparency à 0.3 pour rendre le en-tête semi- transparent.
3. (Facultatif) Insérez un UIAspectRatioConstraint dans le ImageLabel pour assurer que le ratio de l'aspect de la étiquettereste le même, peu importe la taille de l'écran du joueur. Les exemples définissent sa propriété 0> Class.UIAspectRatioConstraint.AspectRatio0> sur 3> 13.781 3>.
4. Insérez un TextLabel dans Body pour afficher une invite.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de sa balise parent (50% de la gauche à la droite de la balise parent, et 50% du haut au bas de la balise parent).
  4. Définir la taille Size à {0.85, 0},{0.39, 0} pour élargir l'espace d'écriture à plus de la moitié de l'étiquette parent (85% horizontalement et 39% verticalement de l'étiquette parent).
  5. Définir nom à BodyTextLabel .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Moyen pour rendre la police plus épaisse.
  8. Définir couleur de texte3 à 255, 255, 255 pour rendre le texte blanc contre le fond sombre.
  9. Set texte to balise les joueurs pour marquer des points! La première équipe à atteindre %d points gagne. .
  10. Activer TextScaled .
Créez un conteneur pour les comptoirs d'équipe de l'objectif.
1. Insérer un cadre dans objectif .
2. Sélectionnez le nouveau cadre, puis dans la fenêtre propriétés,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de la fenêtre et 100% de la droite à la gauche de la fenêtre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{1, 0} pour définir le cadre en bas du conteneur (50% de la gauche à la droite de la cadre parent, et 100% de la haut de la cadre parent).
  4. Définir la taille Size à {0.44, 0},{0.27, 0} afin que les composants de l'interface de sélection prennent environ la moitié du conteneur de gauche à droite (44% horizontalement et 27% verticalement de la parent-框).
  5. Définir nom à point de vente d'équipe .
Créer un coussin d'équipe.
1. Insérez un objet UIListLayout dans le cadre à partir de la étape 5.
2. Sélectionnez l'objet UIListLayout, puis dans la fenêtre propriétés,
  1. Définir l'écart à 0.025, 0 pour fournir de l'espace entre les futurs comptoirs d'équipe.
  2. Définir Remplir la direction à horizontale afin que chaque panneau de direction soit affiché à côté l'un de l'autre.
  3. Définir HorizontalAlignment à Center afin que chaque équipe se mette en rang au milieu l'une de l'autre.
Créez les éléments de l'équipe verte.
1. Insérez un ImageLabel dans TeamPointCounter .
2. Sélectionnez le ImageLabel , puis dans la fenêtre propriétés ,
  1. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  2. Définir Position à {0.5, 0},{1, 0} pour déplacer l'étiquette en bas du milieu de son cadre parent (50% de la gauche à la droite du cadre parent, et 100% de la haut de la droite du cadre parent).
  3. Définir la taille Size à {0.5, 0},{1, 0} pour élargir l'étiquette de la moitié de la largeur du cadre parent (50% horizontalement et 100% verticalement du cadre parent).
  4. Définir nom à TeamACounteur .
  5. Définir Image à rbxassetid://14304826831 pour afficher une directionnalité fondu.
  6. Définir ImageColor3 à 88, 218, 171 pour teinter l'image vert menthe.
3. Configurez une attribut personnalisé pour suivre que cette étiquette est pour l'équipe verte.
  1. Dans la fenêtre propriétés , naviguez dans la section attributs , puis cliquez sur l'icône de plus. Une boîte de dialogue s'affiche.
  2. Dans le Nom champ, saisissez teamColor .
  3. Dans le menu déroulant Type , sélectionnez Couleur brique .
  4. Cliquez sur le bouton Enregistrer .
  5. Définissez la nouvelle attribution de couleur d'équipe équipeColor à Mint .
4. Insérez un TextLabel dans TeamACountoir pour afficher une invite.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 1, 0.5 pour définir le point d'origine de la nouvelle étiquette dans le coin supérieur droit de lui-même (100% de la gauche à la droite de l'étiquette, et 50% de la haut de la page de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir Position à {0.95, 0},{0.5, 0} pour déplacer l'étiquette à droite de son étiquette parent (95% de la gauche à droite de l'étiquette parent, et 50% de la haut de la page de l'étiquette parent).
  4. Définir la taille Size à {0.85, 0},{0.39, 0} pour élargir l'espace d'écriture à plus de la moitié de l'étiquette parent (85% horizontalement et 39% verticalement de l'étiquette parent).
  5. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  6. Définir Poids à Bold pour rendre la police plus épaisse.
  7. Définir couleur de texte3 à 255, 255, 255 pour rendre le texte blanc contre le fond sombre.
  8. Set Texte to - .
  9. Activer TextScaled .
  10. Set TextXAlignment to Right .
6. Insérez un UIStroke objet dans le TextLabel, puis dans la propriétés fenêtre, définissez 2> Couleur2> à 5> 8, 78, 525> pour contourner le tiret avec un coup de crayon vert foncé.
Créez les éléments de l'équipe rose.
1. Dupliquer TeamAICount et ses enfants.
2. Sélectionnez le TeamACounteur en double, puis dans la fenêtre propriétés,
  1. Définir nom à TeamBCounter .
  2. Définir Image à rbxassetid://14305849451 pour afficher une directionnalité féade dans la direction opposée.
  3. Définir ImageColor3 à 255, 170, 255 pour teinter l'image rose jaunâtre.
  4. Définissez l'attribut teamColor sur Carnation Pink .
3. Sélectionnez le TexterLabel enfant de TeamBCounter , puis dans la fenêtre propriétés ,
  1. Définir AnchorPoint à 0, 0.5 pour définir le point d'origine de la nouvelle étiquette dans le coin supérieur gauche de lui (0% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la position Position à {0.05, 0},{0.5, 0} pour déplacer l'étiquette à gauche de son étiquette parent (5 % de la gauche à la droite de l'étiquette parent, et 50 % de la haut à la bas de l'étiquette parent).
  3. Set TextXAlignment à Gauche .
4. Sélectionnez le fille de l'interface utilisateur double de TeamBCounter, puis dans la fenêtre propriétés, définissez 2> couleur2> à 5> 158, 18, 945> pour encadrer le tiret avec un trait de couleur foncé rose.
Référez-vous aux scripts suivants ReplicatedStorage dans l'emplacement de fichier Laser Tag qui met à jour automatiquement le mot d'ordre et les points d'équipe de manière programmée.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal Heads Up Display (HUD), y compris setObjective et startSyncingTeamPoints. Après qu'un joueur rejoint une manche et sélectionne leur blaster, ce script garantit que tous les éléments de l'interface HUD s'affichent correctement pour l'état, le appareilet le statut de l'équipe du joueur.


local Players = game:GetService("Players")

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

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

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

Maintenant, après qu'un joueur ait sélectionné son blaster, l'interface utilisateur principale s'affiche en haut de leur écran et suit les points de chaque équipe.

IU Blaster

En suivant les meilleures pratiques de la hiérarchie visuelle, décrites dans Wireframe Your Layouts, cette section vous apprend à implémenter tous les éléments d'interface utilisateur relatifs au blaster du joueur. Ce groupement d'éléments d'interface prend la majorité de l'espace d'écran près du centre de l'écran car il agit comme le point focal pour attirer l'attention des jeusur l'action dans l'espace 3D, et il a la plus grande signification

Carrosserie

Un crosseur est un élément d'interface utilisateur qui informe les joueurs où ils vont faire impact lorsqu'ils explosent leur arme. Ce crosseur est un requis de jeu vital pour les expériences de tir en première personne parce que les joueurs doivent être en mesure de viser précisément leur arme et de marquer les membres de l'équipe ennemis.

Comme la plupart des autres expériences dans le genre shooter en première personne, l'expérience de marquage laser de l'échantillon permet aux joueurs de se concentrer sur quelque chose de statique pendant que leur avatar se déplace dans l'espace 3D. En réduisant la maladie des mouvements, cela permet à l'échantillon de être perceptible tout en se fondant dans l'environnement global.

Pour reconstituer exactement le crosseur dans l'expérience Laser Tag :

Insérez un ImageLabel dans l'objet HUDGui ScreenGui .
1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
2. Survolez son objet enfant HUDGui , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un ImageLabel .
Sélectionnez le nouveau ImageLabel, puis dans la fenêtre propriétés,
1. Set Image to rbxassetid://14400935446 .
2. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu de l'étiquette (50% de gauche à droite de l'étiquette, et 50% de haut en bas de l'étiquette).
3. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
4. Définir nom à crosseur .
5. Définir la position Position à {0.5,0},{0.5,0} pour définir l'étiquette au milieu de l'écran.
6. Définir ScaleType à Fit afin que l'image s'adapte dans son conteneur et ne se déplace pas sur différentes tailles d'écran.
(Facultatif) Insérez un UIAspectRatioConstraint dans Crosshair pour garantir que le ratio de l'aspect de la étiquettereste le même, peu importe la taille de l'écran du joueur. Les échantillons définissent sa propriété 0> Class.UIAspectRatioConstraint.AspectRatio0> sur 3> 0.895 3>.

Marqueur de frappe

Un marqueur de hit est un élément UI qui ne s'affiche que lorsqu'un choc a lieu avec un autre joueur dans l'équipe ennemie. Comme le crosshair, cet élément UI est une exigence de jeu vital pour les expériences de tir en première personne parce qu'il fournit un retour visuel de quand les joueurs réussissent à taguer leurs adversaires.

Pour reproduire exactement le marqueur de coup dans l'expérience Laser Tag :

Insérez un ImageLabel dans l'objet Crosshair ImageLabel .
1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
2. Survolez son objet enfant Crosshair , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un ImageLabel .
Sélectionnez le nouveau ImageLabel, puis dans la fenêtre propriétés,
1. Définir Image à rbxassetid://14401148736 pour afficher l'icône de marqueur de coup rectangulaire.
2. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu de l'étiquette.
3. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
4. Définir la position Position à {0.5,0},{0.5,0} pour définir l'étiquette au milieu de l'écran.
5. Définir nom à marqueur d'impact .
6. Définir la taille Taille à {0.6, 0},{0.06, 0} pour réduire la taille des rectangles autour du milieu du crosse.
7. Définir ImageTransparency à 1 pour rendre le marqueur de coup complètement transparent. Les scripts dans la prochaine étape retournent la transparence à 0 chaque fois qu'un joueur fait un impact avec un autre joueur sur l'équipe ennemi.
Référez-vous aux scripts suivants ReplicatedStorage dans l'échantillon Laser Tag place le fichier de lieu qui affiche programmiquement le marqueur d'impact lorsqu'un laser fait un impact avec un joueur sur l'équipe ennemi.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal Heads Up Display (HUD), y compris setupHitmarker. Après qu'un joueur rejoint une manche et sélectionne leur blaster, ce script garantit que tous les éléments de l'interface utilisateur HUD s'affichent correctement pour l'état, le appareilet le statut de l'équipe du joueur.


local Players = game:GetService("Players")

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

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

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

Maintenant, chaque fois qu'un joueur lance son blaster et que l'explosion a un impact sur un autre joueur, le marqueur de coup s'affiche temporairement.

Sélecteur de blaster

Un sélecteur de blaster est un composant de l'interface utilisateur qui les joueurs utilisent pour sélectionner leur type de blaster avant de rejoindre ou de rejoindre à nouveau une manche. L'expérience de laser de type d'exemple fournit deux types de blasters : un qui produit plusieurs rayons avec une large bande horizontale et un autre qui produit un seul rayon. Le type de blaster que les joueurs sélectionnent influence leur stratégie pendant la manche, ce qui fait de cet composant de l'interface utilisateur un workflow essentiel pour l'expérience

Les étapes suivantes détaillent comment créer plusieurs conteneurs pour les différents éléments de l'interface utilisateur, un en-tête avec une demande, des boutons de navigation et de sélection et un bouton de prédilection blaster. La logique de script pour le composant global popule différentes caractéristiques visuelles dans le bouton de prédilection blaster en fonction des instances Configuration que représentent chaque taperde blaster.

Ce paramètre vous permet de créer des instances supplémentaires de Configuration pour plus de types de blaster qui s'affichent automatiquement correctement dans le sélecteur de blaster sans avoir à créer des boutons individuels dans StarterGui.PickABlasterGui .

Pour reproduire exactement le sélecteur de blaster dans l'expérience Laser Tag :

Créez un conteneur pour l'ensemble du composant.
1. Insérez un cadre dans l'objet PickABlaster Class.ScreenGui .
  1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
  2. Survolez son objet enfant PickABlaster , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
  3. Dans le menu contextuel, insérez un Frame .
2. Sélectionnez le nouveau cadre, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine du cadre en bas du milieu de lui (50% de la gauche à la droite du cadre et 100% de la droite au cadre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.9, 0} pour définir le cadre près du milieu inférieur de l'écran (50% de la gauche à la droite de l'écran et 92,4% de la haut à la bas de l'écran).
  4. Définir la taille Size à {0.8, 0},{0.25, 0} afin que les composants de l'interface utilisateur du sélecteur de blaster prennent une grande partie de l'écran pour attirer l'attention des joueurs (80% horizontalement et 25% verticalement).
  5. Définir nom à composant .
3. (Facultatif) Insérez un UIAspectRatioConstraint dans composant pour garantir que le cadre et ses éléments d'interface utilisateur restent le même, peu importe la taille de l'écran du joueur. Le script définit sa propriété 0> Class.UIAspectRatioConstraint.AspectRatio 0> sur 3> 5 3>.
Créez un conteneur pour contenir des groupements d'éléments UI.
1. Insérez un cadre dans un composant .
2. Sélectionnez le nouveau cadre, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine des cadres au milieu de lui (50% de la gauche à la droite du cadre, et 50% du haut au bas du cadre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.375, 0} pour définir le cadre près du haut du conteneur (50% de la gauche à la droite de la cadre parent, et 37.5% de la haut de la cadre parent).
  4. Définir la taille Size à {1, 0},{0.75, 0} afin que les composants de l'interface de sélection prennent 3/4 de la conteneur (100% horizontalement et 75% verticalement de la parent-框).
  5. Définir Nom à SelectionFrame .
Créez une invite pour le sélecteur de blaster.
1. Insérez un ImageLabel dans SelectionFrame .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de l'étiquette et 100% de la haut de la gauche à la droite de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir LayoutOrder à -1.
  4. Définir la position Position à {0.5, 0},{0.22, 0} pour définir l'étiquette près du haut du milieu de la fenêtre (50% de la gauche à la droite de la parent-框, et 22% de la haut de la parent-框).
  5. Définir la taille Taille à {0.45, 0},{0.22, 0} pour élargir la zone d'invite à presque la moitié de la zone de cadre (45% horizontalement et 22% verticalement du cadre parent).
  6. Définir nom à en-tête .
  7. Définir Image à rbxassetid://14304828123 pour afficher un trapezoid.
  8. Définir ImageTransparency à 0.15 pour rendre le en-tête semi- transparent.
3. (Facultatif) Insérez un UIAspectRatioConstraint dans l'étiquette pour vous assurer que le ratio de l'aspect du labo reste le même, peu importe la taille de l'écran du joueur. Le script définit sa propriété UIAspectRatioConstraint.AspectRatio sur « 13.78 ».
4. Insérez un TextLabel dans En-tête pour afficher une demande.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de sa balise parent (50% de la gauche à la droite de la balise parent, et 50% du haut au bas de la balise parent).
  4. Définir la taille Size à {0.6, 0},{0.55, 0} pour élargir l'espace d'écriture à plus de la moitié de l'étiquette parent (60% horizontalement et 55% verticalement de l'étiquette parent).
  5. Définir nom à étiquette de texte en en-tête .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Moyen pour rendre la police plus épaisse.
  8. Set texte to choisir un blaster .
  9. Activer TextScaled .
Créez le conteneur pour votre bouton de blaster et les flèches de sélection.
1. Insérez un ImageLabel dans SelectionFrame .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de l'étiquette et 100% de la haut de la gauche à la droite de l'étiquette).
  3. Définir la couleur de l'arrière-plan sur <a href="/reference/engine/ BackgroundColor"> 0, 0, 0</a> pour rendre l'étiquette noire.
  4. Définir Transparence de l'arrière-plan à 0.3 pour réduire l'opacité de l'étiquette de 30 % et correspondre à tous les éléments d'interface utilisateur noirs dans l'expérience.
  5. Définir la position Position à {0.5, 0},{1, 0} pour définir l'étiquette en bas du milieu du cadre (50% de la gauche à la droite du cadre parent, et 100% de la droite au cadre parent).
  6. Définir la taille Size à {1, 0},{0.77, 0} pour élargir la zone de labellation à l'espace en dessous de la demande (100% horizontalement et 77% verticalement de la parent-框).
3. Rondez les coins du conteneur.
  1. Insérez un objet Coin UIC dans l'étiquette.
  2. Sélectionnez le nouvel objet d'angle, puis dans la fenêtre propriétés , définissez CornerRadius sur 0.075, 0 pour arrondir les coins.
Créez le conteneur pour vos boutons de blaster.
1. Insérez un Frame dans l'étiquette à partir de la étape 4.
2. Sélectionnez le nouveau cadre, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine du nouveau cadre au milieu de lui (50% de la gauche à la droite du cadre, et 50% du haut au bas du cadre).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond du cadre complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour définir le cadre au milieu de son étiquette parent (50 % de la gauche à la droite de l'étiquette parent, et 50 % de la hauteur à la bas de l'étiquette parent).
  4. Définir la taille Size à {0.85, 0},{0.77, 0} pour élargir la zone de cadre à la majorité de l'étiquette (85% horizontalement et 77% verticalement de l'étiquette parent).
  5. Définir nom à conteneur .
Créer un coussin pour tous les futurs boutons de blaster.
1. Insérez un objet UIListLayout dans le cadre à partir de la étape 5.
2. Sélectionnez l'objet de nouvelle conception, puis dans la Fenêtre propriétés ,
  1. Définir l'écart à 0.035, 0 pour fournir de l'espace entre tous les boutons futurs.
  2. Définir Remplir la direction à horizontale afin que chaque bouton s'affiche à côté l'un de l'autre.
  3. Définissez les éléments suivants : HorizontalAlignment et VerticalAnimation à Center afin que chaque bouton s'alignent à l'extérieur l'un de l'autre.
Créer le bouton de navigation à gauche.
1. Insérez un ImageButton objet dans le ImageLabel à partir de la étape 4.
2. Sélectionnez le nouveau bouton, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0, 0.5 pour définir le point d'origine du nouveau bouton dans le coin supérieur gauche de lui (0% à partir de la gauche à droite du bouton et 50% du haut au bas du bouton).
  3. Définir la transparence de l'arrière-plan à 0.15 pour fournir un retour visuel sur le bouton sélectable.
  4. Définir Position à {0.02, 0},{0.5, 0} pour fournir du remplissage à gauche du bouton de son conteneur parent (2% de la gauche à la droite de l'étiquette parent, et 50% de la haut à la bas de l'étiquette parent).
  5. Définir la taille Size à {0.04, 0},{0.33, 0} pour rendre le bouton de sélection beaucoup plus petit que les boutons du blaster (4% horizontalement et 33% verticalement de la cadre parent).
  6. Définir nom à bouton de navigation gauche .
3. Rondez les coins du bouton.
  1. Insérez un objet Corner UIC dans le bouton.
  2. Sélectionnez le nouvel objet d'angle, puis dans la Fenêtre propriétés , définissez Rayon d'angle à 0.1, 0 pour arrondir les coins.
4. Insérez un ImageLabel objet dans le bouton.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la position Position à {0.45, 0},{0.5, 0} à la position du labelle près du milieu de son bouton parent (45% de la gauche à la droite du bouton parent, et 50% de la haut à la bas du bouton parent). Cette valeur n'est pas dans le
  3. Définir la taille Size à {0.8, 0},{0.8, 0} pour élargir la zone de labellation à l'espace en dessous de la zone de commande (80% horizontalement et 80% verticalement de la zone parent).
  4. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'image complètement transparent.
  5. Set Image to rbxassetid://14309187238 .
  6. Définir ScaleType à Fit .
Créez le bon bouton de navigation.
1. Duplicate Bouton de navigation gauche .
2. Sélectionnez le bouton du duplicat, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 1, 0.5 pour définir le point d'origine du nouveau bouton dans le milieu droit de lui (100% à partir de la gauche à droite du bouton et 50% du haut à la bas de le bouton).
  2. Définir Position à {0.98, 0},{0.5, 0} pour fournir un coussin à droite du bouton de son conteneur parent (98% de la gauche à la droite du parent étiquette, et 50% du haut au bas du parent étiquette).
  3. Définir nom à bouton de navigation droite .
3. Sélectionnez son objet enfant ImageLabel .
  1. Définir Rotation à 180 pour retourner l'image.
  2. Définir la position Position à {0.55, 0},{0.5, 0} pour définir l'étiquette près du milieu de son bouton parent (55% de la gauche à la droite du bouton parent, et 50% de la haut à la bas de son bouton parent). Cette valeur n'
Créer le bouton SÉLECTIONNEZ .
1. Insérez un bouton d'image dans composant. Remarquez comment ce processus maintient le bouton de sélection séparé de sélectionner un cadre afin que vous puissiez ajouter un 2> remplissage2> entre la partie principale du composant à partir du bouton de sélection.
2. Sélectionnez le nouveau bouton, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine du nouveau bouton en bas au milieu de lui (50% de la gauche à la droite du bouton, et 100% de la haut de la bouton).
  3. Définir la transparence de l'arrière-plan à 0.15 pour fournir un retour visuel sur le bouton sélectable.
  4. Définir la position Position à {0.5, 0},{0.99, 0} pour définir le bouton près du milieu du conteneur (50% de la gauche à la droite de la parent-框, et 99% de la hauteur du parent-框).
  5. Définir la taille Size à {0.17, 0},{0.18, 0} pour longueur le bouton en dessous des boutons du blaster (17% horizontalement et 18% verticalement du parent frame).
  6. Set Nom to Bouton de sélection .
3. Rondez les coins du bouton.
  1. Insérez un objet Corner UIC dans le bouton.
  2. Sélectionnez le nouvel objet d'angle, puis dans la Fenêtre propriétés , définissez Rayon d'angle à 0.2, 0 pour arrondir les coins.
4. Insérez un TextLabel objet dans le bouton afin de pouvoir afficher un appel à l'action.
5. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu du bouton (50% de la gauche à la droite du bouton parent, et 50% du haut au bas du bouton parent).
  4. Définir la taille Size à {0.9, 0},{0.55, 0} pour élargir l'espace d'écriture à presque tous les deux de la balise parent (90% horizontalement et 55% verticalement de la étiquetteparent).
  5. Définir nom à sélectionner l'étiquette de texte .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Moyen pour rendre la police plus épaisse.
  8. Set Texte to SÉLECTIONNEZ .
  9. Activer TextScaled .
Créez un blaster button prefab.
1. Dans le service ReplicatedStorage , créez une structure de dossier pour organiser vos objets d'interface utilisateur. L'exemple utilise un dossier instances avec un dossier guis enfant.
2. Insérez un ImageButton objet dans le dossier Guis.
3. Sélectionnez le nouveau bouton, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine du nouveau bouton au milieu de lui (50% de la gauche à la droite du bouton, et 50% du haut au bas du bouton).
  3. Définir la transparence de l'arrière-plan à 0.65 pour fournir un retour visuel que le bouton n'est pas en focus. Les scripts dans la étape 12 fournissent des commentaires visuels programmatiques lorsque le bouton est en focus.
  4. Définir LayoutOrder à 2.
  5. Définir nom à BlasterButtonPrefab .
  6. Définir la taille 0.8, 0,0.8, 0 .
  7. Définir ImageTransparency à 1 pour rendre l'image complètement transparente.
4. Insérez un UIAspectRatioConstraint dans BlasterButtonPrefab pour vous assurer que le ratio de l'aspect du bouton reste le même dans le composant, peu importe la taille de l'écran du joueur.
5. Rondez les coins du bouton.
  1. Insérez un objet UICorner dans BlasterButtonPrefab .
  2. Sélectionnez le coin UICorner , puis dans la fenêtre propriétés , définissez CornerRadius à 1> 0.05, 01> pour arrondir les coins.
6. Insérez un ImageLabel dans BlasterButtonPrefab .
7. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  3. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  4. Définir Position à {0.52, 0},{0.497, 0} pour définir l'étiquette près du milieu de son bouton parent (52% de la gauche à la droite du bouton parent, et 49.7% du haut au bas du bouton parent). Cette
  5. Définir la taille Size à {1.20, 0},{0.9, 0} pour élargir la zone de labellation en dehors du bouton (120% horizontalement et 90% verticalement du bouton parent).
  6. Définir ScaleType à Fit .
Référez-vous aux scripts suivants ReplicatedStorage dans le lieu de l'échantillon Laser Tag que le fichier de programme qui affiche automatiquement les boutons pour chaque blaster, met à l'échelle les boutons lorsqu'un joueur sélectionne un bouton qui n'est pas en focus, et attache la sélection du blaster d'un joueur à leur avatar.

Le script suivant nécessite un ensemble de scripts qui fonctionnent ensemble pour créer le sélecteur de blaster. Lorsqu'un joueur rejoint l'expérience ou réapparaît dans une manche après que sa santé atteigne zéro, ce script active tous les éléments de l'interface utilisateur du sélecteur de blaster jusqu'à ce que le joueur fasse son choix.


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

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

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

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

Maintenant, chaque fois qu'un joueur rejoint l'expérience ou réapparaît dans une manche après que leur santé atteigne le zéro, l'interface utilisateur du sélecteur de blaster s'affiche, ils peuvent faire une sélection, et chaque bouton fonctionne comme prévu.

Bouton d'explosion

Un bouton de génération est une composante de l'interface utilisateur qui permet aux joueurs d'exploser leur blaster s'ils accèdent à l'expérience via un appareil mobile ou tablette. L'expérience de génération de laser au sample utilise un bouton de génération avec une icône qui représente à la fois une crosse et un blast pour communiquer la fonction du bouton sans texte.

Pour reproduire exactement le bouton d'explosion dans l'expérience Laser Tag :

Insérez un ImageButton dans l'objet HUDGui Class.ScreenGui .
1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
2. Survolez son objet enfant HUDGui , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un ImageButton .
Dans la fenêtre de jeu, déplacez le bouton pour que le pouce d'un joueur repose naturellement sur le bouton afin de pouvoir obtenir un sens visuel de ce à quoi le bouton ressemblera sur l'appareil d'un joueur, puis dans la Propriétés fenêtre,
1. Définir Image à rbxassetid://18308375035 pour afficher l'icône de bouton d'explosion.
2. Définir PressedImage à rbxassetid://18308372558 pour afficher une version inversée de l'icône de bouton d'explosion lorsqu'un joueur appuie sur le bouton.
3. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
4. Définir nom à bouton d'explosion .
5. Définir ScaleType à Fit afin que l'image s'adapte dans son conteneur et ne se déplace pas sur différentes tailles d'écran.
6. Définir ImageTransparency à 0.3 pour réduire l'opacité de l'étiquette afin qu'elle correspond à tous les éléments d'interface utilisateur noirs dans l'expérience.
Insérez un UIAspectRatioConstraint dans BlastButton pour vous assurer que le ratio de l'aspect du bouton reste le même, peu importe la taille de l'écran du joueur.
Référez-vous aux scripts suivants ReplicatedStorage dans le lieu d'échantillon Laser Tag qui affichent programmiquement le bouton du laser lorsqu'un joueur utilise l'entrée tactile sur un appareil qui accepte les commandes contrôles.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal Heads Up Display (HUD), y compris setupTouchButtonAsync. Après qu'un joueur rejoint une manche et sélectionne leur blaster, ce script garantit que tous les éléments de l'interface HUD s'affichent correctement pour l'état, le appareilet le statut de l'équipe du joueur.


local Players = game:GetService("Players")

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

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

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

Maintenant, lorsqu'un joueur rejoint l'expérience et utilise l'entrée tactile sur un appareil qui accepte les commandes contrôles, le bouton du blaster s'affiche en haut à droite du bouton de saut.

Joueur UI

En suivant les meilleures pratiques de la hiérarchie visuelle, décrites dans Wireframe Your Layouts, cette section vous apprend à implémenter tous les éléments d'interface utilisateur sur l'écran liés à l'état du joueur. Ce regroupement d'éléments d'interface est près des bords de l'écran car les joueurs peuvent comprendre cette information périphérique sans détourner leur attention du partie.

Indicateur de joueur

Un composant d'interface utilisateur est un composant de l'interface utilisateur que les joueurs référent à l'aide de la zone de génération de leur équipe pour déchiffrer rapidement à quelle équipe ils appartiennent une fois qu'ils apparaissent dans leur zone de génération. L'expérience de balise laser fournie deux versions du composant d'interface utilisateur en fonction de si le joueur est sur l'équipe vert ou rose .

En suivant les directives de sélectionner un thème de couleur, les deux versions de l'indicateur du joueur combinent la couleur de l'équipe avec un icône unique, simple avec un détail minimal afin qu'elles restent lisibles sur les petits écrans. Fournir deux formes de commentaires visuels est important car cela aide à garder le design accessible pour les joueurs aveugles.

Pour reconstituer exactement le composant de l'indicateur du joueur dans l'expérience Laser Tag :

Insérez un Frame dans l'objet HUDGui ScreenGui.
1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
2. Survolez son objet enfant HUDGui , puis cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un Frame .
Sélectionnez le nouveau cadre, puis dans la fenêtre propriétés,
1. Définir AnchorPoint à 0, 1 pour définir le point d'origine du cadre en bas au milieu du cadre (0% à partir de la gauche à la droite du cadre, et 100% de la haut de la cadre).
2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
3. Définir Nom à PlayerDisplay .
4. Définir Position à {0.02, 0},{0.97, 0} pour définir le cadre près du bas gauche de l'écran.
5. Définir la taille Taille à {0.23, 0},{0.08, 0} pour raccourcir et élargir le cadre.
6. Activer ClipsDescendants pour couper les objets Gui enfants qui s'étendent au-delà du cadre.
Créez la forme polygonale.
1. Insérez un ImageLabel dans PlayerDisplay .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir Image à rbxassetid://14304828123 pour afficher l'icône du trapezoid.
  2. Définir AnchorPoint à 1, 1 pour définir le point d'origine de l'étiquette en bas à droite de lui (100% à partir de la gauche à droite de l'étiquette, et 100% à partir de la haut de à droite de l'étiquette).
  3. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  4. Définir nom à bloc .
  5. Définir Position à {1,0},{1,0} pour définir l'étiquette sur le côté droit du cadre.
  6. Définir la taille Size à {1.858, 0},{0.581, 0} pour élargir l'étiquette en dehors du cadre, et la raccourcir de un peu plus de la moitié de la longueur du cadre.
  7. Définir ImageTransparency à 0.15 pour rendre la balise légèrement transparente.
  8. Définir ScaleType à Fit afin que l'image s'adapte dans son conteneur et ne se déplace pas sur différentes tailles d'écran.
  1. Insérez un UIAspectRatioConstraint dans Bloquer pour assurer que le labyrinthe et ses éléments d'interface utilisateur restent le même, peu importe la taille de l'écran du joueur.
  2. Sélectionnez la nouvelle contrainte, puis dans la fenêtre propriétés , définissez AspectRatio sur 13.78.
Créer la boîte pour le portrait du joueur.
1. Insérez un ImageLabel dans PlayerDisplay .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Supprimez l'attribut de ressource ID dans la propriété Image . Les scripts dans la étape 7 insèrent programmiquement le portrait du joueur dans l'étiquette d'image.
  2. Définir AnchorPoint à 0, 1 pour définir le point d'origine de l'étiquette en bas à gauche de lui (0% de la gauche à la droite de l'étiquette, et 100% de la droite à la gauche de l'étiquette).
  3. Définir Couleur de l'arrière-plan3 à 0, 0, 0 pour définir la couleur de l'arrière-plan de l'étiquette à noir.
  4. Définir Transparence de l'arrière-plan à 0.3 pour réduire l'opacité de l'étiquette de 30 % et correspondre à tous les éléments d'interface utilisateur noirs dans l'expérience.
  5. Définir nom à portrait du joueur .
  6. Définir Position à {0.11, 0},{1, 0} pour définir l'étiquette sur le côté gauche de la forme polygonale.
  7. Définir la taille Taille à {0.23, 0},{1, 0} pour réduire l'étiquette.
  8. Définir ImageTransparency à 0.15 pour rendre la balise légèrement transparente.
  9. Définir ScaleType à Fit afin que l'image s'adapte dans son conteneur et ne se déplace pas sur différentes tailles d'écran.
  1. Insérez un UIAspectRatioConstraint dans PlayerPortrait pour vous assurer que le labyrinthe et ses éléments d'interface utilisateur restent le même, peu importe la taille de l'écran du joueur.
  2. Insérez un coin UICorner dans PlayerPortrait, puis dans la fenêtre propriétés, définissez 2> CornerRadius2> sur 5> 0.05, 05> pour légèrement arrondir les coins.
Créez l'étiquette de texte pour le nom du joueur.
1. Insérez un TextLabel objet dans PlayerDisplay.
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0, 0.5 pour définir le point d'origine du nouveau bouton dans le coin supérieur gauche de lui (0% à partir de la gauche à droite du bouton et 50% du haut au bas du bouton).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir nom à PlayerNameTextLabel .
  4. Définir la position Position à {0.35, 0},{0.72, 0} pour définir l'étiquette sur le côté droit de son conteneur (35% de la gauche à la droite de l'étiquette parent, et 72% de la haut à la bas de l'étiquette parent).
  5. Définir la taille Taille à {0.52, 0},{0.3, 0} afin que le texte puisse couvrir la plus grande partie de la zone de forme polygonale (52% horizontalement et 30% verticalement de la zone parent).
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Bold pour rendre la police plus épaisse.
  8. Supprimez le texte de sélection dans la propriété texte . Les scripts dans la étape 7 insèrent programmiquement le nom du joueur dans l'étiquette de texte.
  9. Activer TextScaled .
  10. Set TextXAlignment à Gauche .
Créez les icônes d'équipe et les couleurs qui s'affichent à gauche du portraitdu joueur.
1. Insérez un dossier dans PlayerDisplay , puis renommez-le en TeamIcons .
2. Créer l'icône de l'équipe vert et la couleur.
  1. Insérez un ImageLabel dans TeamIcons .
  2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
    
    Définir AnchorPoint à 0, 1 pour définir le point d'origine de l'étiquette en bas à gauche de lui (0% de la gauche à la droite de l'étiquette, et 100% de la droite à la gauche de l'étiquette).
    
    Définir Couleur de l'arrière-plan3 à 88, 218, 171 pour définir la couleur de l'arrière-plan de l'étiquette en vert menthe.
    
    Définir nom à TeamAIcon .
    
    Définir Position à {0, 0},{1, 0} pour définir l'étiquette sur le côté gauche du cadre.
    
    Définir la taille à 0.135, 0,0.58, 0 pour rétrécir l'étiquette à gauche du portraitdu joueur.
    
    Définir ImageTransparency à 1 pour rendre l'étiquette transparente.
  1. Configurez une attribut personnalisé pour suivre que ce label est pour l'équipe verte. Ce pas est très important pour les scripts dans la étape 7.
    
    Dans la fenêtre propriétés , naviguez dans la section attributs , puis cliquez sur l'icône de plus. Une boîte de dialogue s'affiche.
    
    Dans le Nom champ, saisissez teamColor .
    
    Dans le menu déroulant Type , sélectionnez Couleur brique .
    
    Cliquez sur le bouton Enregistrer .
    
    Définissez la nouvelle attribution de couleur d'équipe équipeColor à Mint .
  2. Insérez un UIAspectRatioConstraint dans TeamAIcon pour vous assurer que le labyrinthe et ses éléments d'interface utilisateur restent le même, peu importe la taille de l'écran du joueur.
  3. Créez l'icône.
    
    Insérez un ImageLabel dans TeamAIcon .
    
    Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
    
    Définir Image à rbxassetid://14309678670 pour afficher l'icône de l'équipe verte.
    
    Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
    
    Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
    
    Définir nom à icône .
    
    Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son étiquette parent.
    
    Définir la taille 0.7, 0,0.6, 0 pour réduire l'étiquette.
    
    Définir ScaleType à Fit afin que l'image s'adapte dans son conteneur et ne se déplace pas sur différentes tailles d'écran.
3. Créez l'icône de l'équipe rose et couleur.
  1. Dupliquer l'icône d'équipe et ses enfants.
  2. Sélectionnez le icône d'équipe, puis dans la fenêtre propriétés,
    
    Définir Couleur de l'arrière-plan3 à 255, 170, 255 pour définir la couleur de l'arrière-plan de l'étiquette en carnation rose.
    
    Définir nom à TeamBIcon .
    
    Définissez l'attribut teamColor sur Carnation Pink .
    
    Sélectionnez le Icon enfant de TeamBIcon, puis dans la fenêtre propriétés, définissez 1> Image1> comme 4> rbxassetid://143096785494> pour afficher l'icône de l'équipe rose.
Référez-vous aux scripts suivants ReplicatedStorage dans l'emplacement de fichier Laser Tag qui affichent programmiquement l'indicateur du joueur avec la couleur et l'icône de l'équipe appropriées pendant qu'un joueur est actif dans une manche.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal Heads Up Display (HUD), y compris startSyncingTeamColor, setPlayerName, et setPlayerPortrait. Après qu'un joueur rejoint une manche et sélectionne leur blaster, ce script garantit que tous les éléments de l'interface HUD s'affichent correctement pour l'état, le appareilet le statut de l'équipe


local Players = game:GetService("Players")

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

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

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

Maintenant, chaque fois qu'un joueur rejoint ou rejoint la manche après avoir rejoint le serveur, l'indicateur du joueur s'affiche en bas à gauche de leur écran.

Forcer le champ de vision

Un écran de forcefield est un élément d'interface utilisateur qui superpose la fenêtre sur la fenêtre pour informer les joueurs qu'ils sont en sécurité du feu d'équipe ennemi en rejoignant ou rejoignant une manche. Selon les lignes directrices esthétiques pour les icônes de Choose an Art Style, l'expérience de laser tag utilise un motif hexagonal semi- transparent pour symboliser un champ de force

Pour reconstituer exactement l'écran du champ de force dans l'expérience Laser Tag :

Insérez un ImageLabel dans l'objet ForceFieldGui ScreenGui .
1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
2. Survolez son objet enfant ForceFieldGui , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un ImageLabel .
Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
1. Set Image to rbxassetid://14462567888 .
2. Définir Transparence de l'arrière-plan à 0.8 pour rendre le champ de force translucide.
3. Définir la taille Size à {1, 0},{1, 0} pour remplir l'image entière de l'écran (100% horizontalement et 100% verticalement de la parent ScreenGUI).
4. Définir ScaleType à Tile pour faire le carrelage hexagonal sur l'ensemble de l'écran.
5. Définir la taille de la case à {0, 104},{0, 180}.
Insérez un objet UIGradient dans l'étiquette.
Sélectionnez l'objet degradé nouveau, puis dans la Fenêtre propriétés ,
1. Définir couleur à une séquence de couleurs qui commence en bleu, devient blanche, puis devient bleue à nouveau.
  1. Définir couleur à 120, 192, 250 pour appliquer une teinte bleu clair à tous les hexagones.
  2. Cliquez sur la propriété Couleur, puis cliquez sur le bouton ⋯. Une séquence de couleurs s'affiche.
    
    Chaque triangle sur l'axe inférieur de la séquence de couleurs est un point d'accès qui détermine la valeur de couleur de la propriété à cet endroit de l'image, de gauche à droite.
  3. Cliquez et faites glisser la séquence de couleurs jusqu'à ce que vous atteigniez une valeur de Temps de 0.05, puis cliquez sur le petit carré à côté de Couleur pour ouvrir la fenêtre pop-up 1> Couleurs1>.
  4. Sélectionnez un blanc vif, puis fermez la fenêtre contextuelle.
  5. Cliquez et faites glisser la séquence de couleurs jusqu'à ce que vous atteigniez une valeur de Temps de 0.95, puis ouvrez la Colors pop-up window again, et sélectionnez la même couleur blanche que avant.
2. Définir Rotation à 225 pour afficher la partie bleue de votre séquence de couleurs dans les coins supérieur gauche et inférieur droit.
3. Définir la transparence à une séquence de numéros qui fait en sorte que le champ de force ressemble à un scintillement.
  1. Cliquez sur la propriété Transparence, puis cliquez sur le bouton ⋯. Une séquence de numéros s'affiche. Chaque carré au début et à la fin de la séquence de numéros est un point d'arrêt qui détermine la valeur de transparence de la propriété à ce moment de l'image à partir de gauche à droite.
  2. Définir les propriétés de temps et de valeur suivantes tout au long de la séquence de numéros :
  - Temps = 0 , Valeur = 0> 0.250>
  - Temps = .101, Valeur = 0> 0.8750>
  - Temps = .183 , Valeur = 0> 00>
  - Temps = .3 , Valeur = 0> 10>
  - Temps = .7 , Valeur = 0> 10>
  - Temps = 1 , Valeur = 0> 0.90>
Dupliquez le ImageLabel à partir de la étape 2.
Sélectionnez l'objet UIGradient dans le étiquettede sobriété, puis dans la Fenêtre propriétés ,
1. Définir Rotation à -45 pour fliper l'image afin qu'elle soit presque miroir l'une de l'autre le long de l'axe Y.
2. Modifyez la transparence pour faire paraître le shimmer plus organique.
  1. Cliquez sur la propriété Transparence, puis cliquez sur le bouton ⋯. Une séquence de numéros s'affiche.
  2. Sélectionnez le troisième cadre de clé, puis cliquez sur le bouton Supprimer .
Référez-vous aux scripts suivants ReplicatedStorage dans l'emplacement de fichier Laser Tag qui affiche en programmation la forcefield lorsqu'un joueur rejoint ou rejoint une manche.

Le script client suivant ReplicatedStorage.ForceFieldClientVisuals remplace le visuel par défaut ForceField par un visuel StarterGui.ForceFieldGui avec une propriété de durée 1> Duration1> qui est supérieure à 0. Lorsque les joueurs se chargent dans

Ce script commence par écouter quand le ForceField est ajouté à un personnage, désactive les vues de champ de force par défaut, puis active l'objet Class.ScreenGui Class.ForceFieldGui. Notez que cela n'affecte pas les vues de tiers lorsque les joueurs regardent d'autres joueurs se rallier dans l'expérience.

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen. — Visuel de forcefield en première personne

Third-person force field visuals include a blue sparkling orb around the player spawning into the experience. — Visuel de force field de troisième personne


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 le joueur apparaît à un point de génération avec ForceField désactivé
		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)

Maintenant, chaque fois qu'un joueur rejoint ou rejoint la manche après avoir réapparu, l'interface utilisateur de l'écran du champ de force par défaut est affichée au lieu des visuels par défaut de ForceField .

Réapparition de l'écran

Un élément de réapparition est un élément d'interface utilisateur qui fait pâlir la fenêtre pour informer les joueurs qu'ils ont été marqués, et que le serveur est en cours de réapparition dans leur zone de réapparition. Cet élément d'interface est important car il donne aux joueurs le temps de traiter ce qu'ils ont été marqués, et stratégiser leur prochain mouvement avant qu'ils rejoignent la manche active.

Pour plus d'informations sur le comportement de réapparition personnalisé dans l'expérience de balise laser, voir Réapparition des personnages dans le programme de script de jeu.

Pour reproduire exactement l'écran de réapparition dans l'expérience Laser Tag :

Créez le bannière d'information au centre.
1. Insérez un ImageLabel dans l'objet OutStateGui Class.ScreenGui .
  1. Dans la fenêtre Explorateur , naviguez jusqu'au service StarterGui .
  2. Survolez son objet enfant OutStateGui , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
  3. Dans le menu contextuel, insérez un ImageLabel .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine du nouveau bouton au milieu de lui (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son conteneur (50% de la gauche à la droite de la barre d'alimentation, et 50% du haut au bas de la barre d'alimentation).
  4. Définir la taille Size à {0.48, 0},{0.06, 0} pour élargir l'étiquette (48% horizontalement et 6% verticalement de la parent ScreenGUI).
  5. Définir nom à bloc .
  6. Définir Image à rbxassetid://14304827265 pour que l'image soit un trapèze.
  7. Définir couleur d'image à 0,0,0 pour rendre le trapezoid noir.
  8. Définir ImageTransparency à 0.3 pour réduire l'opacité de l'étiquette de 30 % et correspondre à tous les éléments d'interface utilisateur noirs dans l'expérience.
3. Insérez un UIAspectRatioConstraint dans Bloquer pour assurer que le labyrinthe et ses éléments d'interface utilisateur restent le même, peu importe la taille de l'écran du joueur.
4. Sélectionnez la nouvelle contrainte, puis dans la fenêtre propriétés , définissez AspectRatio sur 13.78.
5. Insérez un TextLabel dans Block pour le texte d'information.
6. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de sa balise parent (50% de la gauche à la droite de la balise parent, et 50% du haut au bas de la balise parent).
  4. Définir la taille Size à {.85, 0},{0.55, 0} afin que le texte puisse couvrir la plupart de la zone de trapezoid (85% horizontalement et 55% verticalement de l'étiquette parent).
  5. Définir nom à BodyTextLabel .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Bold pour rendre la police plus épaisse.
  8. Définir texte à réapparaître… .
  9. Définir couleur de texte3 à 255, 255, 255 pour rendre le texte blanc.
  10. Activer TextScaled .
Créer l'en-tête.
1. Insérez un ImageLabel dans Bloquer .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine de l'étiquette en bas du milieu de lui-même (50% de la gauche à la droite de l'étiquette et 100% de la haut de la gauche à la droite de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0, 0} pour définir l'étiquette au sommet du parent de l'étiquette (50% de la gauche à la droite du parent de l'étiquette, et 0% de la haut de la parent de l'étiquette).
  4. Définir la taille Size à {0.46, 0},{0.56, 0} pour élargir l'étiquette (46% horizontalement et 56% verticalement de l'étiquette parent).
  5. Définir nom à en-tête .
  6. Définir Image à rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
  7. Définir couleur d'image à 245, 46, 46 pour faire en sorte que le rouge fondu signifie que le joueur est temporairement inactif pendant qu'il est marqué hors de la manche.
3. Insérez un TextLabel dans En-tête pour le texte informatif.
4. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
  3. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de sa balise parent (50% de la gauche à la droite de la balise parent, et 50% du haut au bas de la balise parent).
  4. Définir la taille Size à {.85, 0},{0.55, 0} afin que le texte puisse couvrir la plupart de la zone de disparition (85% horizontalement et 55% verticalement de l'étiquette parent).
  5. Définir nom à étiquette de texte en en-tête .
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Poids à Noir pour rendre la police plus épaisse.
  8. Set Texte to ETIQUETTÉ - VOUS ÊTES DEHORS! 9. Définir couleur de texte3 à 255, 255, 255 pour rendre le texte blanc.
  9. Activer TextScaled .
Créez la dégradation autour des bords de l'écran.
1. Insérez un ImageLabel dans OutStateGui .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  2. Définir Couleur de l'arrière-plan3 à 0,0,0 pour définir la couleur de l'arrière-plan de l'étiquette en noir.
  3. Définir la transparence de l'arrière-plan à 0.5 pour rendre le fond de l'étiquette invisible.
  4. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son conteneur (50% de la gauche à la droite de la barre d'alimentation, et 50% du haut au bas de la barre d'alimentation).
  5. Définir la taille Size à {1, 0},{1, 0} pour élargir l'étiquette à l'ensemble de l'écran (100% horizontalement et 100% verticalement de la parent ScreenGUI).
  6. Définir ZIndex à -1 pour afficher la dégradation derrière les autres éléments de l'interface utilisateur.
  7. Définir nom à en-tête .
  8. Définir Image à rbxassetid://14309518613 pour faire en sorte que l'image soit un fondu de bord.
  9. Définir ImageTransparency à 0.1 pour rendre le fondu légèrement translucent.
Pour améliorer les performances, vous pouvez sauter la ressource d'image et utiliser un objet UIGradient avec une séquence de numéro de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir Apparence de l'interface utilisateur - Gradient.
Référez-vous au script suivant ReplicatedStorage dans le lieu de l'échantillon Laser Tag qui affiche programmiquement l'écran de réapparition lorsque la santé d'un joueur atteint zéro et qu'il est en train de réapparaître dans la zone d'apparition de leur équipe.

Le script client suivant ReplicatedStorage.PlayerStateHandler contient des fonctions qui déclenchent différents types de comportement en fonction de l'attribut playerState. Toutes les réponses d'événements sont groupées logiquement ensemble dans ce script car elles nécessitent un comportement similaire pour activer ou désactiver les contrôles du joueur, la déplacement de la caméra et quelle couche d'interface est visible.

Lorsque la santé d'un joueur atteint zéro, son playerState devient TaggedOut, ce qui déclenche la fonction onTaggedOut(). 2>onTaggedOut2> immédiatement, ce qui déclenche le comportement suivant :

Le joueur ne peut pas bouger dans l'arène.
Le joueur ne peut pas déplacer sa caméra.
Le joueur ne peut pas utiliser son blaster.
Le StarterGui.OutStateGui devient exclusivement activé.

Lorsque le joueur réapparaît, leur playerState devient SelectingBlaster, ce qui déclenche la fonction onSelectingBlaster(). 1> onSelectingBlaster1> puis active exclusivement la fonction 4> StarterGui.PickABlasterGui


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

-- Désactivez toutes les couches d'interface à l'exception de l'exception donnée
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contient une liste des guis qui devraient être définies exclusivement.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Activer la caméra pour que les joueurs puissent regarder autour de eux tout en sélectionnant un blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Désactivez le laser pendant la sélection d'un laser
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Activer le mouvement du joueur après avoir choisi un blaster
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Activer le blaster pendant le jeu
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Planifiez la logique de champ de force de destruction lorsque le joueur commence à jouer
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Désactiver les contrôles lorsqu'il est démarqué
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Désactivez le blaster pendant que vous êtes désactivé
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Activer les contrôles dans le lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Masquer tout HUD dans le lobby
	setGuiExclusivelyEnabled(nil)

	-- Désactivez le blaster dans le lobby
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Invalid player state ({newPlayerState})`)
	end
end

-- Gérez l'état initial du joueur si vous l'avez configurer
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

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

-- Gérez les futures mises à jour du state des joueurs
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Assurez-vous que les modifications sont toujours appliquées après la réapparition
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Maintenant, chaque fois que la santé d'un joueur atteint zéro, l'écran de réapparition s'affiche jusqu'à ce que le joueur réapparaisse dans sa zone d'apparition.

Maintenant que vous êtes familier avec les GuiObjects ordinaires pour l'interface de l'utilisateur sur l'écran, essayez de recréer l'objet RoundResultsGuiScreenGui et tous ses enfants pour l'affichage de l'écran lorsque les joueurs gagn

Créer des objets SurfaceGui

Pour afficher l'interface utilisateur sur la surface d'une partie dans l'espace 3D qui répond à la logique d'écriture pour chaque joueur individuel, vous pouvez parentaliser un objet Class.SurfaceGui à la partie que vous souhaitez afficher votre UI dans le service SurfaceGui. Cette technique garantit que votre interface et son scripting logique sont disponibles à la fois pour le serveur et chaque client du joueur.

SurfaceGui objets contiennent tous les GuiObjects qui s'affichent sur la surface d'une partie dans l'espace 3D. L'expérience de balise laser ne nécessite qu'une seule instance d'un SurfaceGui objet : le cooldown métreur qui s'affiche sur chaque

Pour créer un objet SurfaceGui :

Dans la fenêtre Explorateur , passez la souris sur le service ReplicatedStorage , puis cliquez sur l'icône ⊕ . Un menu contextuel s'affiche.
Dans le menu contextuel, insérez un Pièce objet.
Insérez un objet ScreenGUI dans la partie.
Renommez le SurfaceGui en fonction du contexte de ses éléments d'interface enfants.
Répétez ce processus pour chaque élément d'interface que vous devez afficher sur la surface d'une partie dans l'espace 3D.

Compteur de temps de recharge

Un indicateur de temps de recharge est un composant de l'interface utilisateur qui informe les joueurs combien de temps ils doivent attendre avant qu'ils puissent exploser leur blaster à nouveau. Cette pause légère empêche les joueurs d'exploser aussi rapidement que ils peuvent cliquer ou appuyer sur un bouton, ce qui est irréaliste pour le partielaser tag.

Pour reconstituer exactement le minuteur de recharge dans l'expérience Laser Tag :

Créez une partie pour contenir votre objet SurfaceGui.
1. Dans la fenêtre Explorateur , passez la souris sur le espace de travail , puis cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
2. Dans le menu contextuel, insérez une partie bloque . Ceci est un emplacement temporaire pour la partie afin que vous puissiez visualiser les changements dans chaque étape du processus.
Positionnez et orientez la partie autour de la position où un personnage de joueur détenirait son blaster, puis dans la Fenêtre propriétés ,
1. Définir la transparence sur 1 pour rendre la partie complètement transparente.
2. Définir nom à CooldownBarPrefab .
3. Définir la taille Taille à 0.169, 0.027, 2.537 pour redimensionner la partie pour une taille au sujet de la longueur du blaster.
4. Désactivez CanCollide et CanQuery .
Insérez un SurfaceGui dans CooldownBarPrefab .
Sélectionnez le nouveau SurfaceGui, puis dans la fenêtre propriétés,
1. Définir <a href="/reference/engine/datasets">Face</a> à <a href="/reference/engine/datasets">Haut</a> afin que l'interface utilisateur s'affiche vers le haut.
2. Définir Influence de lumière et Distance maximale à 0.
3. Définir PixelsPerStud sur 200 .
Créer la barre noire.
1. Insérez un ImageLabel dans le SurfaceGui .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
  3. Définir Couleur de l'arrière-plan3 à 0,0,0 pour définir la couleur de l'arrière-plan de l'étiquette en noir.
  4. Définir la transparence de l'arrière-plan à 0.4 pour rendre le fond de l'étiquette semi-透明.
  5. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son conteneur (50% de la gauche à la droite de la surface parent, et 50% du haut au bas de la surface parent).
  6. Définir la taille Size à {1, 0},{1, 0} pour élargir l'étiquette à l'ensemble de la partie (100% horizontalement et 100% verticalement de la parent SurfaceGui).
  7. Définir nom à conteneur .
Rondez les coins du conteneur.
1. Insérez un objet Coin UIC dans un Container .
2. Sélectionnez le coin UICorner , puis dans la fenêtre propriétés , définissez CornerRadius sur 1> 0.15, 01> pour arrondir légèrement les coins.
Créer la barre rouge.
1. Insérez un ImageLabel dans Container .
2. Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
  1. Supprimez la valeur par défaut Image .
  2. Définir AnchorPoint à 1, 0.5 pour définir le point d'origine de l'étiquette dans le milieu droit de lui-même (100% de la gauche à la droite de l'étiquette et 50% de la haut de la page de l'étiquette).
  3. Définir Couleur de l'arrière-plan3 à 172, 13, 13 pour définir la couleur de l'arrière-plan de l'étiquette en rouge foncé.
  4. Définir la transparence de l'arrière-plan à 0.2 pour rendre le fond de l'étiquette légèrement transparent.
  5. Définir nom à barre .
  6. Définir la position Position à {1, 0},{0.5, 0} pour définir l'étiquette au milieu droit de son conteneur (100% de la gauche à la droite de la balise parent, et 50% de la haut de la balise parent).
  7. Définir la taille Size à {0, 0},{1, 0} pour allonger l'étiquette au sommet de sa balise parent (0% horizontalement et 100% verticalement de la balise parent). Cette étape est également bénéfique pour le comportement de tweening qui se produit dans les scripts dans la section 8.
Rondez les coins de l'étiquette.
1. Insérez un objet d'angle UICorner dans Bar .
2. Sélectionnez le coin UICorner , puis dans la fenêtre propriétés , définissez CornerRadius sur 1> 0.15, 01> pour arrondir légèrement les coins.
Déplacer CooldownBarPrefab dans ReplicatedStorage .
1. Créez une structure de dossier pour organiser vos objets UI. L'exemple utilise un dossier Instances avec un enfant Guis dossier.
2. Déplacer CooldownBarPrefab dans Guis .
Référez-vous aux scripts suivants ReplicatedStorage dans le lieu de échantillon Laser Tag, qui attache le cooldown du laser au blaster du joueur, puis l'anime après qu'un joueur ait fait exploser leur blaster.

Le script client suivant ReplicatedStorage.FirstPersonBlasterVisuals gère toute la logique visuelle pour le premier blaster du joueur. Il nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer les visuels de blaster qui se sentent plus réalistes pour le partiede laser tag, y compris FirstPersonBlasterVisuals.addCooldownBar et 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()

	-- Ajouter la première personne plateforme
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Ajoutez le cooldownBar
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- Ceci détruit également la barre de refroidissement car elle est parentée à la plateforme
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Exécutez les effets visuels de première personne lorsqu'une explosion se produit
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Lier le rig à la caméra s'il existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Mise à jour du CFrame du système de cadre relatif à la position de la caméra et RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Gestion des commandes lorsque le blasterType change pendant que vous jouez
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Gestion des fenêtres lorsque le joueur change d'état
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Enlevez les visuels lorsque le joueur sélectionne un blaster ou est dans le lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Ajoutez les visuels lorsque le joueur a terminé de sélectionner le blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Maintenant, chaque fois qu'un joueur lance son blaster, la barre de recharge se met à jour pour communiquer quand le joueur peut lancer à nouveau.

Créer des objets BillboardGui

Afin d'afficher les éléments de l'interface utilisateur dans l'espace 3D qui répondent à la logique de script et qui sont toujours visibles de la caméra de chaque joueur, quelle que soit leur angle de vision, tels que les noms des joueurs ou les marqueurs de carte, vous pouvez créer un objet BillboardGui en tant qu'enfant d'un BasePart ou d'un Attachment

L'expérience de laser tag de l'échantillon inclut deux objets séparés BillboardGui dans le service ReplicatedStorage :

OtherPlayerIndicatorGuiPrefab - Décharge un cercle rose ou vert au-dessus de la tête de chaque joueur lorsqu'ils sont actifs dans une manche.
TaggedOutIndicatorGuiPrefab - Affiche au-dessus de la tête d'un joueur lorsqu'il est tagué hors du tour.

Après avoir créé un objet BillboardGui, vous pouvez créer et personnaliser son enfant GuiObjects en fonction du but de chaque conteneur. Pour démontrer, dans les sections immédiates qui s'abonner, vous apprendrez à implémenter des éléments d'interface utilisateur pour les deux types de balises laser dans l'expérience de laser de pointe. Vous pouvez ajuster n'importe

Pour créer un objet BillboardGui :

Dans la fenêtre Explorateur , passez la souris sur un BasePart ou Attachment, puis cliquez sur l'icône 1> ⊕1>. Un menu contextuel s'affiche.
Dans le menu contextuel, insérez un objet BillboardGui .
Renommez le BillboardGui en fonction du contexte de ses éléments d'interface enfants.
Répétez ce processus pour chaque élément d'interface que vous devez afficher contextuellement au-dessus des têtes des joueurs.

Indicateur d'équipe

Un indicateur d'équipe est un élément d'interface utilisateur qui informe les joueurs appartenant à quelle équipe les autres joueurs dans la manche appartiennent afin qu'ils puissent facilement différentier entre leurs alliés et les membres de l'équipe ennemie. Cette information est importante car la façon dont le gameplay d'une expérience de tir à la première personne exige que les joueurs prennent des décisions stratégiques rapides lorsqu'ils sont dans les zones de combat afin qu'ils ne soient pas étiquetés et perdent le correspondre.

Pour reproduire exactement l'indicateur d'équipe dans l'expérience Laser Tag :

Insérez un objet BillboardGui dans un plateformetemporaire.
1. Dans la barre de menu, naviguez jusqu'à l'Avatar onglet, puis cliquez sur Rig Builder.
2. Sélectionnez à partir des options disponibles. L'échantillon utilise un R15 taperde rig, une forme de corps féminine et un Rthro avatar. Le 2>Rig2> affiche à la fois dans la fenêtre 3D et dans la fenêtre 5>Explorateur5> sous le nom 8>Rig8>.
3. Dans la fenêtre Explorateur , naviguez jusqu'au maillagede l'enfant du plateforme, puis cliquez sur l'icône 2> ⊕ 2>. Un menu contextuel s'affiche.
4. Dans le menu contextuel, insérez un BillboardGui .
Sélectionnez le nouveau BillboardGui , puis dans la fenêtre propriétés ,
1. Définir LightInfluence à 0 pour empêcher que la lumière environnementale affecte la couleur de l'indicateur.
2. Définir nom à OtherPlayerIndicatorPrefab .
3. Définir la taille taille à {0, 10},{0, 10} pour rendre l'étiquette beaucoup plus petite.
4. Définir StudsOffsetWorldSpace à 0, 4, 0 pour le positionner au-dessus de la tête du plateforme.
Insérez un Frame objet dans OtherPlayerIndicatorPrefab.
Sélectionnez le nouveau cadre, puis dans la Fenêtre propriétés ,
1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine du cadre au milieu de lui (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
2. Définir Couleur de l'arrière-plan3 à 255, 3, 0 pour définir la couleur de l'arrière-plan de la fenêtre en rouge comme couleur de coupe.
3. Définir la position Position à {0.5, 0},{0.5, 0} pour définir le cadre au milieu de son conteneur (50% de la gauche à la droite de la parent BillboardGui, et 50% du haut au bas de la parent BillboardGui).
4. Définir la taille Size à {1, -2},{1, -2} pour raccourcir le cadre à la surface de la zone d'affichage du BillboardGui.
Insérez un objet UICorner dans Frame pour complètement arrondir les coins.
Insérez un objet UIStroke dans Frame pour encadrer le cercle de l'indicateur.
Déplacer OtherPlayerIndicatorPrefab dans ReplicatedStorage .
Référez-vous au script suivant ReplicatedStorage dans l'échantillon Laser Tag 1A place de fichier qui programme la visibilité de l'indicateur d'équipe pour chaque joueur dans une manche active s'il n'est pas dans l'équipe ennemi et est bloqué.

Le script suivant ReplicatedStorage.OtherPlayerIndicatorGuiSetup s'exécute lorsque les joueurs apparaissent dans l'arène pour une manche active. Il attache l'indicateur d'équipe en appelant la fonction addIndicatorToCharacter(), qui localise l'objet

Si d'autres joueurs sont dans la même équipe, l'indicateur d'équipe s'affiche toujours, même si ils se cachent derrière des objets dans l'espace 3D ; si d'autres joueurs sont dans l'équipe ennemie, l'indicateur d'équipe ne s'affiche que si il n'y a pas d'objet dans l'espace 3D pour les empêcher.


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

		-- Ne pas ajouter d'indicateurs aux joueurs participants à la manche
		if not otherPlayer.Team then
			return
		end

		-- Évitez d'ajouter des指icateurs en double, créant un nouveau seulement si elles n'existent pas
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- L'indicateur est toujours au-dessus seulement si le joueur est amical

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

Maintenant, chaque fois qu'un joueur est dans une manche active, les indicateurs d'équipe s'affichent sur les têtes des autres joueurs s'ils ne sont pas dans l'équipe ennemi et derrière un objet.

Indicateur de sortie avec balise

Un élément de balise est un élément d'interface utilisateur qui informe les joueurs quand d'autres joueurs ne sont plus actifs dans la manche et sont en train de réapparaître dans leur zone de génération. Cette information est importante car la façon dont le gameplay d'un jeu de tir à la première personne exige que les joueurs se déplacent sur leur prochain objectif dès qu'ils taguent un joueur pour qu'ils ne deviennent pas vulnérables dans l'arène en jouant dans le même lieu pendant trop longtemps.

Pour reproduire exactement l'indicateur de marquage dans l'expérience Laser Tag :

Insérez un BillboardGui objet dans un rig temporaire afin que vous puissiez visualiser les changements dans chaque étape du processus.
1. Dans la barre de menu, naviguez jusqu'à l'Avatar onglet, puis cliquez sur Rig Builder.
2. Sélectionnez à partir des options disponibles. L'échantillon utilise un R15 taperde rig, une forme de corps masculine et un Rthro avatar. Le 2> Rig2> affiche à la fois dans la fenêtre 3D et dans la fenêtre 5> Explorer5> sous le nom 8> Rig8>.
3. Dans la fenêtre Explorateur , naviguez jusqu'au maillagede l'enfant du plateforme, puis cliquez sur l'icône 2> ⊕ 2>. Un menu contextuel s'affiche.
4. Dans le menu contextuel, insérez un BillboardGui .
Sélectionnez le nouveau BillboardGui , puis dans la fenêtre propriétés ,
1. Définir LightInfluence à 0 pour empêcher que la lumière environnementale affecte la couleur de l'indicateur.
2. Définir nom à TaggedOutIndicatorGuiPrefab .
3. Définir la taille à {3, 0},{0.5, 0} pour élargir l'espace pour une étiquette.
4. Définir StudsOffset à 0, 3.25, 0 pour le positionner au-dessus de la tête d'un joueur.
Insérez un ImageLabel objet dans TaggedOutIndicatorGuiPrefab .
Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
3. Définir nom à cadre .
4. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son conteneur (50% de la gauche à la droite du parent BillboardGui, et 50% du haut au bas du parent BillboardGui).
5. Définir la taille Size à {1, 0},{1, 0} pour élargir l'étiquette à l'ensemble du BillboardGui (100% horizontalement et 100% verticalement du parent BillboardGui).
6. Définir Image à rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
7. Définir ImageColor à 245, 46, 46 pour teinter le label rouge.
Pour améliorer les performances, vous pouvez sauter la ressource d'image et utiliser un objet UIGradient avec une séquence de numéro de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir Apparence de l'interface utilisateur - Gradient.
Insérez un TextLabel objet dans Frame .
Sélectionnez la nouvelle étiquette, puis dans la Fenêtre propriétés ,
1. Définir AnchorPoint à 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu d'elle (50% de la gauche à la droite de l'étiquette, et 50% du haut au bas de l'étiquette).
2. Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
3. Définir nom à BodyTextLabel .
4. Définir la position Position à {0.5, 0},{0.5, 0} pour définir l'étiquette au milieu de son conteneur (50% de la gauche à la droite de l'étiquette parent, et 50% de la haut de la page de l'étiquette parent).
5. Définir la taille Size à {0.85, 0},{0.7, 0} afin que le texte puisse couvrir la plupart de la zone de dégradé (85% horizontalement et 70% verticalement de l'étiquette de l'image parent).
6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
7. Définir Poids à Bold pour rendre la police plus épaisse.
8. Set texte to TAGGED .
9. Définir couleur de texte3 à 255, 255, 255 pour rendre le texte blanc.
10. Activer TextScaled .
Déplacez TaggedOutIndicatorGuiPrefab dans ReplicatedStorage .
Référez-vous aux scripts suivants ServerScriptService dans l'échantillon Laser Tag 1A place le fichier de lieu qui affiche programmiquement l'indicateur de sortie lorsqu'un joueur est réapparaissant à leur zone d'apparition.

Le script du serveur suivant ServerScriptService.SetupHumanoid s'exécute dès que joueur rejoint l'expérience. Il garantit que chaque fois qu'un personnage de joueur est ajouté au modèlisationde données, setupHumanoidAsync est appelé avec leur 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)
	-- Appeler surCharacterAdded si le joueur a déjà un personnage
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Appeler surCharacterAdded pour tous les futurs spawns de personnages pour ce joueur
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Appeler onPlayerAdded pour n'importe quel joueur déjà dans le jeu
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Appeler onPlayerAdded pour tous les nouveaux joueurs
Players.PlayerAdded:Connect(onPlayerAdded)

Maintenant, chaque fois que la santé d'un joueur atteint zéro, l'indicateur de santé de leur tête est affiché au-dessus de leur tête jusqu'à ce qu'ils réapparaissent.

Félicitations pour avoir terminé le cours de conception de l'interface utilisateur ! Maintenant que vous avez de l'expérience dans la création d'un style d'art, la wireframing de vos布局 et l'implémentation de vos designs dans Studio from start to finish, vous pouvez étendre votre projet avec de nouveaux UI et fonctionnalités, ou suivre des curricules de tutoriel supplémentaires, tels que le Gameplay Scripting Curriculum qui vous apprend les détails de l'organ