Implémenter des conceptions dans Studio | Documentation

Implémenter vos conceptions est le processus de création de vos maquettes dans Studio en utilisant à la fois des éléments d'interface utilisateur intégrés et personnalisés avec des scripts qui déclenchent votre interface utilisateur de manière contextuelle. Cette étape passionnante du tutoriel est celle où vous pouvez voir toutes vos conceptions et votre travail acharné se rassembler en un ensemble cohérent de flux de travail qui sont complets et prêts pour l'interaction des joueurs.

En utilisant le jeu de laser tag d'exemple fichier .rbxl comme référence, cette section du curriculum de conception d'interface utilisateur vous montre comment donner vie à votre planification d'interface utilisateur, y compris des conseils sur :

Récupérer les ID d'actifs de la bibliothèque d'actifs UI afin que vous puissiez recréer les composants UI du jeu de laser tag d'exemple.
Émuler divers appareils directement dans Studio pour voir comment votre interface utilisateur s'affiche sur différents écrans et rapports d'aspect.
Créer des objets ScreenGui, SurfaceGui et BillboardGui pour afficher votre interface utilisateur sur les écrans des joueurs, les surfaces des pièces et dans l'espace 3D, respectivement.

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

Les instructions dans cette section du tutoriel vous montrent comment recréer exactement les composants d'interface utilisateur en utilisant la bibliothèque d'actifs de conception UI. Ce processus prend environ 90 minutes ou moins du début à la fin. Si vous ne souhaitez pas utiliser les valeurs fournies, vous pouvez ajuster chaque élément d'interface utilisateur pour répondre aux spécifications de votre propre jeu, ou utiliser l'exemple lui-même pour le reste du tutoriel.

Obtenir la bibliothèque d'actifs

Les bibliothèques d'actifs sont des collections d'actifs que vous pouvez ajouter à votre inventaire pour un accès facile et une réutilisation. La bibliothèque d'actifs que vous utiliserez pour votre projet dans le Creator Store comprend neuf actifs d'éléments d'interface utilisateur 2D individuels, et les versions finales des composants d'objectif, de sélecteur de blaster et d'informations sur les joueurs que vous créez dans cette section du tutoriel.

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

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

**Icône Équipe Rose**
rbxassetid://14309678581

**Trapèze à l'envers**
rbxassetid://14304827304

**Icône Équipe Verte**
rbxassetid://14309678701

**Fondu multidirectionnel**
rbxassetid://14304827147

**Icône Bouton de Tir - Par Défaut**
rbxassetid://18308375067

**Icône Bouton de Tir - Pressé**
rbxassetid://18308372597

**Icône Réticule**
rbxassetid://14400935532

Icône Marqueur de Frappe
rbxassetid://14401148777

**Icône Flèche de Sélection**
rbxassetid://14309187282

**Fondu de Bordure**
rbxassetid://14309518632

Pour obtenir la bibliothèque d'actifs de votre inventaire dans votre jeu :

Ajoutez la bibliothèque d'actifs à votre inventaire.
1. Accédez à la page de détails de la bibliothèque d'actifs sur le Creator Store.
2. Dans le coin supérieur droit, cliquez sur le bouton Obtenir le Modèle. La bibliothèque d'actifs est maintenant dans votre inventaire, et vous pouvez réutiliser ces actifs dans n'importe quel projet sur la plateforme.
Dans Studio, accédez à l'onglet Accueil, puis cliquez sur le bouton Boîte à outils. La fenêtre Boîte à outils s'ouvre.
Dans la fenêtre Boîte à outils, cliquez sur l'onglet Inventaire. Le tri Mes Modèles s'affiche.
Cliquez sur le menu déroulant, puis sélectionnez le tri Mes Paquets.
Cliquez sur le carreau Composants UI Écran Final, puis dans la fenêtre Explorateur, sélectionnez Composants Complétés, puis faites-les glisser dans le service StarterGui. Vous pouvez maintenant activer n'importe lequel des composants finaux pour référencer leur conception.

Émuler des appareils

L'Émulateur de Dispositifs de Studio vous permet de tester comment les joueurs verront et interagiront avec votre interface utilisateur sur divers appareils. Cet outil est une partie vitale du processus d'implémentation car le rapport d'aspect de votre vue dans Studio ne reflète pas nécessairement le rapport d'aspect des écrans que les joueurs utilisent pour accéder à votre jeu, et il est important que votre interface utilisateur soit à la fois lisible et accessible sur chaque appareil.

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

Pour émuler votre interface utilisateur sur différentes tailles d'écran :

Dans le menu Test de Studio, activez Émulateur de Dispositifs.
Dans le menu déroulant de résolution, sélectionnez Résolution Réelle. Cela vous permet de voir la véritable résolution de vos éléments d'interface utilisateur sur l'appareil que vous émulez.
Dans le menu déroulant des appareils, sélectionnez au moins un appareil dans les sections Téléphone, Tablette, Bureau et Console.

Créer des objets ScreenGui

Pour afficher des éléments d'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 à l'écran, et le service StarterGui copie son contenu dans le conteneur PlayerGui de chaque joueur lorsqu'ils entrent dans un jeu.

Vous pouvez créer plusieurs objets ScreenGui pour organiser et afficher des regroupements d'éléments d'interface utilisateur de manière contextuelle tout au long du gameplay. Par exemple, le jeu de laser tag d'exemple comprend cinq objets ScreenGui distincts qui sont initialement désactivés jusqu'à ce que les joueurs remplissent différentes conditions pendant le flux utilisateur principal du jeu :

HUDGui - Affiche des informations clés sur le gameplay lorsque les joueurs sont actifs dans un round, telles que l'objectif et le total de points de chaque équipe.
PickABlasterGui - Affiche tous les choix de blasters lorsque les joueurs commencent ou rejoignent à nouveau un round.
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 éliminés.
RoundResultsGui - Affiche un superposition sombre en haut de l'écran avec des informations sur l'équipe qui a gagné le round.

Après avoir créé un objet ScreenGui, vous pouvez créer et personnaliser ses enfants GuiObjects en fonction de l'objectif de chaque conteneur. Pour démontrer, dans les sections immédiates qui suivent, vous apprendrez comment implémenter des éléments d'interface utilisateur pour les trois catégories d'informations que les joueurs doivent connaître pour réussir dans le jeu de laser tag d'exemple. Vous pouvez ajuster n'importe quelle partie du processus pour répondre aux spécifications de votre propre jeu.

Pour créer un objet ScreenGui :

Dans la fenêtre Explorateur, survolez 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 utilisateur enfants.
Répétez ce processus pour chaque regroupement d'éléments d'interface utilisateur que vous devez afficher sur l'écran de chaque joueur.

Interface utilisateur de l'objectif

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

Par exemple, l'échantillon fournit un composant d'interface utilisateur d'objectif que les joueurs consultent pour savoir ce qu'ils doivent faire pour réussir dans un round. Au fur et à mesure que les joueurs éliminent des membres de l'équipe ennemie et gagnent des points, ce composant suit le score de chaque équipe par rapport à l'objectif global dans l'invite de l'en-tête. Pour un examen de haut niveau de tous les scripts client et serveur qui travaillent ensemble pour suivre les points, voir Track points dans le curriculum de script de gameplay.

Pour recréer exactement l'interface utilisateur de l'objectif dans le jeu de Laser Tag d'exemple :

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, accédez 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 Frame, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0 pour définir le point d'origine du cadre en haut au milieu de lui-même (50 % de la gauche à la droite du cadre, et 0 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.03, 0} pour placer le cadre près du haut au milieu de l'écran (50 % de la gauche à la droite de l'écran, et 3 % du haut vers le bas de l'écran pour qu'il y ait un petit tampon).
  4. Définissez Size sur {0.5, 0},{0.13, 0} afin que les éléments du cadre occupent une grande partie du haut de l'écran pour attirer l'attention des joueurs (50 % horizontalement, et 13 % verticalement).
  5. Définissez Name sur Objective.
3. OPTIONNEL
  Insérez un UIAspectRatioConstraint dans Objective pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 7.
Créez un conteneur pour les objets d'invite de l'objectif.
1. Insérez un Frame dans Objective.
2. Sélectionnez le nouveau Frame, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0 pour définir le point d'origine du cadre en haut au milieu de lui-même (50 % de la gauche à la droite du cadre, et 0 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{0, 0} pour placer le cadre au milieu du conteneur (50 % de la gauche à la droite du cadre parent, et 0 % du haut vers le bas du cadre parent).
  4. Définissez Size sur {1, 0},{0.67, 0} afin que les composants d'interface utilisateur de sélection occupent plus de la moitié du conteneur de haut en bas (100 % horizontalement et 67 % verticalement du cadre parent).
  5. Définissez Name sur 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éfinissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette en bas au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 100 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez LayoutOrder sur -1.
  4. Définissez Position sur {0.5, 0},{0.34, 0} pour placer l'étiquette près du haut du cadre (50 % de la gauche à la droite du cadre parent, et 34 % du haut vers le bas du cadre parent).
  5. Définissez Size sur {0.46, 0},{0.34, 0} pour élargir la zone d'invite à presque la moitié du cadre (46 % horizontalement et 34 % verticalement du cadre parent).
  6. Définissez Name sur Header.
  7. Définissez Image sur rbxassetid://14304828123 pour afficher un trapèze.
  8. Définissez ImageTransparency sur 0.15 pour rendre l'en-tête semi-transparent.
3. OPTIONNEL
  Insérez un UIAspectRatioConstraint dans le ImageLabel pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 13.781.
4. Insérez un TextLabel dans Header pour afficher un titre.
5. Sélectionnez la nouvelle étiquette, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de son étiquette parent (50 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).
  4. Définissez Size sur {0.62, 0},{0.55, 0} pour élargir l'espace texte à plus de la moitié de l'étiquette parent (62 % horizontalement et 55 % verticalement de l'étiquette parent).
  5. Définissez Name sur HeaderTextLabel.
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Medium pour épaissir la police.
  8. Définissez Text sur OBJECTIF.
  9. Activez 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éfinissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette en bas au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 100 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez Position sur {0.5, 0},{1, 0} pour déplacer l'étiquette au bas du milieu de son cadre parent (50 % de la gauche à la droite du cadre parent, et 100 % du haut vers le bas du cadre parent).
  4. Définissez Size sur {0.89, 0},{0.66, 0} pour élargir l'espace texte à presque toute la largeur du cadre parent (89 % horizontalement et 66 % verticalement du cadre parent).
  5. Définissez Name sur Body.
  6. Définissez Image sur rbxassetid://14304827265 pour afficher un trapèze à l'envers.
  7. Définissez ImageColor3 sur 0, 0, 0 pour teinter l'image en noir.
  8. Définissez ImageTransparency sur 0.3 pour rendre l'en-tête semi-transparent.
3. OPTIONNEL
  Insérez un UIAspectRatioConstraint dans le ImageLabel pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 13.781.
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éfinissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de son étiquette parent (50 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).
  4. Définissez Size sur {0.85, 0},{0.39, 0} pour élargir l'espace texte à plus de la moitié de l'étiquette parent (85 % horizontalement et 39 % verticalement de l'étiquette parent).
  5. Définissez Name sur BodyTextLabel.
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Medium pour épaissir la police.
  8. Définissez TextColor3 sur 255, 255, 255 pour rendre le texte blanc contre l'arrière-plan sombre.
  9. Définissez Text sur Taguer les joueurs adverses pour marquer des points ! La première équipe à %d points gagne..
  10. Activez TextScaled.
Créez un conteneur pour les compteurs d'équipe de l'objectif.
1. Insérez un Frame dans Objective.
2. Sélectionnez le nouveau Frame, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette en bas au milieu de lui-même (50 % de la gauche à la droite du cadre, et 100 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{1, 0} pour placer le cadre au bas du milieu du conteneur (50 % de la gauche à la droite du cadre parent, et 100 % du haut vers le bas du cadre parent).
  4. Définissez Size sur {0.44, 0},{0.27, 0} afin que les composants d'interface utilisateur de sélection occupent moins de la moitié du conteneur de gauche à droite (44 % horizontalement et 27 % verticalement du cadre parent).
  5. Définissez Name sur TeamPointCounter.
Créez un espacement pour les compteurs d'équipe.
1. Insérez un objet UIListLayout dans le cadre de l'étape 5.
2. Sélectionnez l'objet UIListLayout, puis dans la fenêtre Propriétés,
  1. Définissez Padding sur 0.025, 0 pour fournir de l'espace entre les futurs compteurs d'équipe.
  2. Définissez FillDirection sur Horizontal pour que chaque compteur d'équipe s'affiche à côté de l'autre.
  3. Définissez HorizontalAlignment sur Center pour que chaque compteur d'équipe s'aligne au milieu les uns des autres.
Créez les éléments du compteur d'équipe verte.
1. Insérez un ImageLabel dans TeamPointCounter.
2. Sélectionnez le ImageLabel, puis dans la fenêtre Propriétés,
  1. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  2. Définissez Position sur {0.5, 0},{1, 0} pour déplacer l'étiquette au bas du milieu de son cadre parent (50 % de la gauche à la droite du cadre parent, et 100 % du haut vers le bas du cadre parent).
  3. Définissez Size sur {0.5, 0},{1, 0} pour élargir l'étiquette à la moitié de la largeur du cadre parent (50 % horizontalement et 100 % verticalement du cadre parent).
  4. Définissez Name sur TeamACounter.
  5. Définissez Image sur rbxassetid://14304826831 pour afficher un fondu directionnel.
  6. Définissez ImageColor3 sur 88, 218, 171 pour teinter l'image en vert menthe.
3. Configurez un attribut personnalisé pour suivre que cette étiquette est pour l'équipe verte.
  1. Dans la fenêtre Propriétés, accédez à la section Attributs, puis cliquez sur l'icône plus. Une boîte de dialogue contextuelle s'affiche.
  2. Dans le champ Nom, saisissez teamColor.
  3. Dans le menu déroulant Type, sélectionnez BrickColor.
  4. Cliquez sur le bouton Enregistrer.
  5. Définissez le nouvel attribut teamColor sur Mint.
4. Insérez un TextLabel dans TeamACounter pour afficher une invite.
5. Sélectionnez la nouvelle étiquette, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 1, 0.5 pour définir le point d'origine de la nouvelle étiquette à droite au milieu de lui-même (100 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez Position sur {0.95, 0},{0.5, 0} pour déplacer l'étiquette à droite de son étiquette parent (95 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).
  4. Définissez Size sur {0.85, 0},{0.39, 0} pour élargir l'espace texte à plus de la moitié de l'étiquette parent (85 % horizontalement et 39 % verticalement de l'étiquette parent).
  5. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  6. Définissez Weight sur Bold pour épaissir la police.
  7. Définissez TextColor3 sur 255, 255, 255 pour rendre le texte blanc contre l'arrière-plan sombre.
  8. Définissez Text sur -.
  9. Activez TextScaled.
  10. Définissez TextXAlignment sur Right.
6. Insérez un objet UIStroke dans le TextLabel, puis dans la fenêtre Propriétés, définissez Color sur 8, 78, 52 pour entourer le tiret d'un contour vert foncé.
Créez les éléments du compteur d'équipe rose.
1. Dupliquez TeamAICounter et ses enfants.
2. Sélectionnez le TeamACounter dupliqué, puis dans la fenêtre Propriétés,
  1. Définissez Name sur TeamBCounter.
  2. Définissez Image sur rbxassetid://14305849451 pour afficher un fondu directionnel dans la direction opposée.
  3. Définissez ImageColor3 sur 255, 170, 255 pour teinter l'image en rose carnation.
  4. Définissez l'attribut teamColor sur Carnation Pink.
3. Sélectionnez le TextLabel dupliqué enfant de TeamBCounter, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0, 0.5 pour définir le point d'origine de la nouvelle étiquette à gauche au milieu de lui-même (0 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
  2. Définissez Position sur {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 % du haut vers le bas de l'étiquette parent).
  3. Définissez TextXAlignment sur Left.
4. Sélectionnez le UIStroke dupliqué enfant de TeamBCounter, puis dans la fenêtre Propriétés, définissez Color sur 158, 18, 94 pour entourer le tiret d'un contour rose foncé.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier de lieu d'exemple Laser Tag qui mettent à jour programmatique l'invite de l'objectif et suivent les points d'équipe.

Le script suivant nécessite un ensemble de scripts de module qui travaillent ensemble pour configurer l'affichage principal Heads Up Display (HUD), y compris setObjective et startSyncingTeamPoints. Après qu'un joueur ait rejoint un round et sélectionné son blaster, ce script garantit que tous les éléments d'interface utilisateur HUD s'affichent correctement pour l'état, l'appareil et 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 de l'objectif s'affiche en haut de son écran et suit les points de chaque équipe.

Interface utilisateur du blaster

En suivant les meilleures pratiques de hiérarchie visuelle de Wireframe Your Layouts, cette section vous enseigne comment implémenter tous les éléments d'interface utilisateur à l'écran liés au blaster du joueur. Ce regroupement d'éléments d'interface utilisateur occupe la majeure partie de l'espace à l'écran près du centre de l'écran car il agit comme le point focal pour attirer l'attention des joueurs sur l'action dans l'espace 3D, et il a le plus de signification pour jouer au jeu.

Réticule

Un réticule est un élément d'interface utilisateur qui informe les joueurs où ils vont faire impact lorsqu'ils tirent avec leur arme. Cet élément d'interface utilisateur est une exigence de gameplay vitale pour les jeux de tir à la première personne car les joueurs doivent être capables de viser avec précision leur blaster et d'éliminer les membres de l'équipe ennemie.

Comme la plupart des autres jeux du genre de tir à la première personne, le jeu de laser tag d'exemple positionne le réticule au centre de l'écran afin que les joueurs aient quelque chose de statique sur lequel se concentrer pendant que leur avatar se déplace dans l'espace 3D. En plus de réduire le mal des transports, ce placement permet au réticule d'être perceptible tout en se fondant dans l'environnement global.

Pour recréer exactement le réticule dans le jeu de Laser Tag d'exemple :

Insérez un ImageLabel dans l'objet HUDGui ScreenGui.
1. Dans la fenêtre Explorateur, accédez 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. Définissez Image sur rbxassetid://14400935446.
2. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu de l'étiquette (50 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
3. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
4. Définissez Name sur Crosshair.
5. Définissez Position sur {0.5,0},{0.5,0} pour placer l'étiquette au milieu de l'écran.
6. Définissez ScaleType sur Fit afin que l'image s'adapte à son conteneur et ne s'étire pas sur différentes tailles d'écran.
OPTIONNEL
Insérez un UIAspectRatioConstraint dans Crosshair pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 0.895.

Marqueur de frappe

Un marqueur de frappe est un élément d'interface utilisateur qui ne s'affiche que lorsqu'un tir impacte un autre joueur de l'équipe ennemie. Comme le réticule, cet élément d'interface utilisateur est une exigence de gameplay vitale pour les jeux de tir à la première personne car il fournit un retour visuel lorsque les joueurs réussissent à éliminer leurs adversaires.

Pour recréer exactement le marqueur de frappe dans le jeu de Laser Tag d'exemple :

Insérez un ImageLabel dans l'objet Crosshair ImageLabel.
1. Dans la fenêtre Explorateur, accédez 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éfinissez Image sur rbxassetid://14401148736 pour afficher l'icône rectangulaire du marqueur de frappe.
2. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de l'étiquette au milieu de l'étiquette.
3. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
4. Définissez Position sur {0.5,0},{0.5,0} pour placer l'étiquette au milieu de l'écran.
5. Définissez Name sur Hitmarker.
6. Définissez Size sur {0.6, 0},{0.06, 0} pour réduire la taille des rectangles autour du milieu du réticule.
7. Définissez ImageTransparency sur 1 pour rendre le marqueur de frappe complètement transparent. Les scripts dans l'étape suivante ramènent la transparence à 0 chaque fois qu'un tir d'un joueur impacte un autre joueur de l'équipe ennemie.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier de lieu d'exemple Laser Tag qui affichent programmatique le marqueur de frappe lorsqu'un tir impacte un joueur de l'équipe ennemie.

Le script suivant nécessite un ensemble de scripts de module qui travaillent ensemble pour configurer l'affichage principal Heads Up Display (HUD), y compris setupHitmarker. Après qu'un joueur ait rejoint un round et sélectionné son blaster, ce script garantit que tous les éléments d'interface utilisateur HUD s'affichent correctement pour l'état, l'appareil et 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 tire avec son blaster et que le tir impacte un autre joueur, le marqueur de frappe s'affiche momentanément.

Sélecteur de blaster

Un sélecteur de blaster est un composant d'interface utilisateur que les joueurs utilisent pour sélectionner leur type de blaster avant de rejoindre ou de rejoindre à nouveau un round. Le jeu de laser tag d'exemple propose deux types de blasters : un qui produit plusieurs faisceaux avec une large dispersion horizontale, et un autre qui produit un seul faisceau. Le type de blaster que les joueurs sélectionnent influence leur stratégie pendant le round, ce qui rend ce composant d'interface utilisateur un flux de travail essentiel pour l'ensemble du jeu.

Les étapes suivantes détaillent comment créer plusieurs conteneurs pour les différents regroupements d'éléments d'interface utilisateur, un en-tête avec une invite, les boutons de navigation et de sélection, et un prefab de bouton de blaster. La logique de script pour l'ensemble du composant remplit différentes caractéristiques visuelles dans le prefab de bouton de blaster en fonction des instances Configuration qui représentent chaque type de blaster.

Cette configuration vous permet de créer des instances Configuration supplémentaires pour plus de types de blasters qui s'affichent automatiquement correctement dans le sélecteur de blaster sans avoir besoin de créer des boutons individuels dans StarterGui.PickABlasterGui.

Pour recréer exactement le sélecteur de blaster dans le jeu de Laser Tag d'exemple :

Créez un conteneur pour l'ensemble du composant.
1. Insérez un Frame dans l'objet PickABlaster ScreenGui.
  1. Dans la fenêtre Explorateur, accédez 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éfinissez AnchorPoint sur 0.5, 1 pour définir le point d'origine du cadre en bas au milieu de lui-même (50 % de la gauche à la droite du cadre, et 100 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.9, 0} pour placer le cadre près du bas au milieu de l'écran (50 % de la gauche à la droite de l'écran, et 92.4 % du haut vers le bas de l'écran).
  4. Définissez Size sur {0.8, 0},{0.25, 0} afin que les composants UI du sélecteur de blaster occupent une grande partie de l'écran pour attirer l'attention des joueurs (80 % horizontalement, et 25 % verticalement).
  5. Définissez Name sur Component.
3. OPTIONNEL
  Insérez un UIAspectRatioConstraint dans Component pour garantir que le rapport d'aspect du cadre et de ses éléments d'interface utilisateur enfants reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 5.
Créez un conteneur pour contenir les regroupements d'éléments d'interface utilisateur.
1. Insérez un Frame dans Component.
2. Sélectionnez le nouveau cadre, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine des cadres au milieu de lui-même (50 % de la gauche à la droite du cadre, et 50 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.375, 0} pour placer le cadre près du haut au milieu du conteneur (50 % de la gauche à la droite du cadre parent, et 37.5 % du haut vers le bas du cadre parent).
  4. Définissez Size sur {1, 0},{0.75, 0} afin que les composants d'interface utilisateur de sélection occupent 3/4 du conteneur (100 % horizontalement et 75 % verticalement du cadre parent).
  5. Définissez Name sur 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éfinissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette en bas au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 100 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez LayoutOrder sur -1.
  4. Définissez Position sur {0.5, 0},{0.22, 0} pour placer l'étiquette près du haut du cadre (50 % de la gauche à la droite du cadre parent, et 22 % du haut vers le bas du cadre parent).
  5. Définissez Size sur {0.45, 0},{0.22, 0} pour élargir la zone d'invite à presque la moitié du cadre (45 % horizontalement et 22 % verticalement du cadre parent).
  6. Définissez Name sur Header.
  7. Définissez Image sur rbxassetid://14304828123 pour afficher un trapèze.
  8. Définissez ImageTransparency sur 0.15 pour rendre l'en-tête semi-transparent.
3. OPTIONNEL
  Insérez un UIAspectRatioConstraint dans l'étiquette pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'échantillon définit sa propriété UIAspectRatioConstraint.AspectRatio sur 13.78.
4. Insérez un TextLabel dans Header pour afficher une invite.
5. Sélectionnez la nouvelle étiquette, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 50 % du haut vers le bas de l'étiquette).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour déplacer l'étiquette au milieu de son étiquette parent (50 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).
  4. Définissez Size sur {0.6, 0},{0.55, 0} pour élargir l'espace texte à plus de la moitié de l'étiquette parent (60 % horizontalement et 55 % verticalement de l'étiquette parent).
  5. Définissez Name sur HeaderTextLabel.
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Medium pour épaissir la police.
  8. Définissez Text sur CHOISISSEZ UN BLASTER.
  9. Activez TextScaled.
Créez le conteneur pour votre conteneur de boutons 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éfinissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette en bas au milieu de lui-même (50 % de la gauche à la droite de l'étiquette, et 100 % du haut vers le bas de l'étiquette).
  3. Définissez BackgroundColor sur 0, 0, 0 pour rendre l'étiquette noire.
  4. Définissez BackgroundTransparency sur 0.3 pour réduire l'opacité de l'étiquette de 30 %, et correspondre à tous les éléments d'interface utilisateur noirs dans le jeu.
  5. Définissez Position sur {0.5, 0},{1, 0} pour placer l'étiquette au bas du milieu du cadre (50 % de la gauche à la droite du cadre parent, et 100 % du haut vers le bas du cadre parent).
  6. Définissez Size sur {1, 0},{0.77, 0} pour élargir la zone d'étiquette à l'espace sous l'invite (100 % horizontalement et 77 % verticalement du cadre parent).
3. Arrondissez les coins du conteneur.
  1. Insérez un objet UICorner dans l'étiquette.
  2. Sélectionnez le nouvel objet de coin, 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 de l'étape 4.
2. Sélectionnez le nouveau cadre, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau cadre au milieu de lui-même (50 % de la gauche à la droite du cadre, et 50 % du haut vers le bas du cadre).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du cadre complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le cadre au milieu de son étiquette parent (50 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).
  4. Définissez Size sur {0.85, 0},{0.77, 0} pour élargir la zone du cadre à la plupart de l'étiquette (85 % horizontalement et 77 % verticalement de l'étiquette parent).
  5. Définissez Name sur Container.
Créez un espacement pour tous les futurs boutons de blaster.
1. Insérez un objet UIListLayout dans le cadre de l'étape 5.
2. Sélectionnez le nouvel objet de mise en page, puis dans la fenêtre Propriétés,
  1. Définissez Padding sur 0.035, 0 pour fournir de l'espace entre tous les futurs boutons.
  2. Définissez FillDirection sur Horizontal pour que chaque bouton s'affiche à côté de l'autre.
  3. Définissez HorizontalAlignment et VerticalAlignment sur Center pour que chaque bouton s'aligne au milieu les uns des autres.
Créez le bouton de navigation gauche.
1. Insérez un objet ImageButton dans l'ImageLabel de l'é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éfinissez AnchorPoint sur 0, 0.5 pour définir le point d'origine du nouveau bouton à gauche au milieu de lui-même (0 % de la gauche à la droite du bouton, et 50 % du haut vers le bas du bouton).
  3. Définissez BackgroundTransparency sur 0.15 pour fournir un retour visuel au survol que le bouton est sélectionnable.
  4. Définissez Position sur {0.02, 0},{0.5, 0} pour fournir un espacement à gauche du bouton par rapport à son conteneur parent (2 % de la gauche à la droite de l'étiquette parent, et 50 % du haut vers le bas de l'étiquette parent).1. Définissez Size sur {0.04, 0},{0.33, 0} pour rendre le bouton de sélection beaucoup plus petit que les boutons de blaster (4 % horizontalement et 33 % verticalement du cadre parent).
Définissez Name sur NavigationButtonLeft.

Arrondissez les coins du bouton.
1. Insérez un objet UICorner dans le bouton.
2. Sélectionnez le nouvel objet de coin, puis dans la fenêtre Properties, définissez CornerRadius sur 0.1, 0 pour arrondir les coins.

Insérez un objet ImageLabel dans le bouton.
Sélectionnez le nouvel label, puis dans la fenêtre Properties,
1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
2. Définissez Position sur {0.45, 0},{0.5, 0} pour placer le label près du milieu de son bouton parent (45 % de la gauche à la droite du bouton parent, et 50 % du haut vers le bas du bouton parent). Cette valeur n'est pas au milieu car une flèche ne semble pas visuellement être au milieu du bouton à {0.5, 0},{0.5, 0}.
3. Définissez Size sur {0.8, 0},{0.8, 0} pour élargir la zone du label pour l'espace sous l'invite (80 % horizontalement et 80 % verticalement du cadre parent).
4. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'image complètement transparent.
5. Définissez Image sur rbxassetid://14309187238.
6. Définissez ScaleType sur Fit.

Créez le bouton de navigation droit.
1. Dupliquez NavigationButtonLeft.
2. Sélectionnez le bouton dupliqué, puis dans la fenêtre Properties,
  1. Définissez AnchorPoint sur 1, 0.5 pour définir le point d'origine du nouveau bouton au milieu droit de lui-même (100 % de la gauche à la droite du bouton, et 50 % du haut vers le bas du bouton).
  2. Définissez Position sur {0.98, 0},{0.5, 0} pour fournir un espacement à droite du bouton par rapport à son conteneur parent (98 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
  3. Définissez Name sur NavigationButtonRight.
3. Sélectionnez son objet enfant ImageLabel.
  1. Définissez Rotation sur 180 pour retourner l'image.
  2. Définissez Position sur {0.55, 0},{0.5, 0} pour placer le label près du milieu de son bouton parent (55 % de la gauche à la droite du bouton parent, et 50 % du haut vers le bas du bouton parent). Cette valeur n'est pas au milieu car une flèche ne semble pas visuellement être au milieu du bouton à {0.5, 0},{0.5, 0}.

Créez le bouton SELECT.
1. Insérez un ImageButton dans Component. Remarquez comment ce processus garde le bouton de sélection séparé de SelectionFrame afin que vous puissiez ajouter un espacement entre la partie principale du composant et le bouton de sélection.
2. Sélectionnez le nouveau bouton, puis dans la fenêtre Properties,
  1. Supprimez la valeur par défaut de Image.
  2. Définissez AnchorPoint sur 0.5, 1 pour définir le point d'origine du nouveau bouton au milieu bas de lui-même (50 % de la gauche à la droite du bouton, et 100 % du haut vers le bas du bouton).
  3. Définissez BackgroundTransparency sur 0.15 pour fournir un retour visuel au survol que le bouton est sélectionnable.
  4. Définissez Position sur {0.5, 0},{0.99, 0} pour placer le bouton près du bas au milieu de son conteneur (50 % de la gauche à la droite du cadre parent, et 99 % du haut vers le bas du cadre parent).
  5. Définissez Size sur {0.17, 0},{0.18, 0} pour allonger le bouton sous les boutons de blaster (17 % horizontalement et 18 % verticalement du cadre parent).
  6. Définissez Name sur SelectButton.

Arrondissez les coins du bouton.
1. Insérez un objet UICorner dans le bouton.
2. Sélectionnez le nouvel objet de coin, puis dans la fenêtre Properties, définissez CornerRadius sur 0.2, 0 pour arrondir les coins.

Insérez un objet TextLabel dans le bouton afin de pouvoir afficher un appel à l'action.
Sélectionnez le nouvel label, puis dans la fenêtre Properties,
1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définissez Position sur {0.5, 0},{0.5, 0} pour déplacer le label au milieu du bouton (50 % de la gauche à la droite du bouton parent, et 50 % du haut vers le bas du bouton parent).
4. Définissez Size sur {0.9, 0},{0.55, 0} pour élargir l'espace texte à presque toute la largeur du label parent (90 % horizontalement et 55 % verticalement du label parent).
5. Définissez Name sur SelectTextLabel.
6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
7. Définissez Weight sur Medium pour épaissir la police.
8. Définissez Text sur SELECT.
9. Activez TextScaled.

Créez un prefab de bouton de blaster.
1. Dans le service ReplicatedStorage, créez une structure de dossier pour organiser vos objets UI. L'exemple utilise un dossier Instances avec un dossier enfant Guis.
2. Insérez un objet ImageButton dans le dossier Guis.
3. Sélectionnez le nouveau bouton, puis dans la fenêtre Properties,
  1. Supprimez la valeur par défaut de Image.
  2. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau bouton au milieu de lui-même (50 % de la gauche à la droite du bouton, et 50 % du haut vers le bas du bouton).
  3. Définissez BackgroundTransparency sur 0.65 pour fournir un retour visuel que le bouton n'est pas en focus. Les scripts à l'étape 12 fournissent un retour visuel programmatique lorsque le bouton est en focus.
  4. Définissez LayoutOrder sur 2.
  5. Définissez Name sur BlasterButtonPrefab.
  6. Définissez Size sur {0.8, 0},{0.8, 0}.
  7. Définissez ImageTransparency sur 1 pour rendre l'image complètement transparente.
4. Insérez un UIAspectRatioConstraint dans BlasterButtonPrefab pour garantir que le rapport d'aspect du bouton reste le même dans le composant, peu importe la taille de l'écran du joueur.
5. Arrondissez les coins du bouton.
  1. Insérez un objet UICorner dans BlasterButtonPrefab.
  2. Sélectionnez le UICorner, puis dans la fenêtre Properties, définissez CornerRadius sur 0.05, 0 pour arrondir les coins.
6. Insérez un ImageLabel dans BlasterButtonPrefab.
7. Sélectionnez le nouvel label, puis dans la fenêtre Properties,
  1. Supprimez la valeur par défaut de Image. Les scripts à l'étape 7 insèrent programmatique l'image du blaster dans le label.
  2. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  3. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  4. Définissez Position sur {0.52, 0},{0.497, 0} pour placer le label près du milieu de son bouton parent (52 % de la gauche à la droite du bouton parent, et 49,7 % du haut vers le bas du bouton parent). Cette valeur n'est pas au milieu car le blaster ne semble pas visuellement être au milieu du bouton à {0.5, 0},{0.5, 0}.
  5. Définissez Size sur {1.20, 0},{0.9, 0} pour élargir la zone du label en dehors du bouton (120 % horizontalement et 90 % verticalement du bouton parent).
  6. Définissez ScaleType sur Fit.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier d'exemple Laser Tag qui affichent programmatique les boutons pour chaque blaster, redimensionnent les boutons lorsqu'un joueur sélectionne un bouton qui n'est pas en focus, et attachent la sélection de blaster d'un joueur à son 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 le jeu ou respawn dans un round après que sa santé atteigne zéro, ce script active tous les éléments UI du sélecteur de blaster jusqu'à ce que le joueur fasse sa sélection.

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 le jeu ou respawn dans un round après que sa santé atteigne zéro, l'UI du sélecteur de blaster s'affiche, il peut faire une sélection, et chaque bouton fonctionne comme prévu.

Bouton de tir

Un bouton de tir est un composant UI que les joueurs utilisent pour tirer avec leur blaster s'ils accèdent au jeu via un appareil mobile ou une tablette. Le jeu de laser tag d'exemple utilise un bouton de tir avec une icône qui représente à la fois une réticule et un tir pour communiquer la fonction du bouton sans texte.

Pour recréer exactement le bouton de tir dans le jeu d'exemple Laser Tag :

Insérez un ImageButton dans l'objet HUDGui ScreenGui.
1. Dans la fenêtre Explorer, 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 le viewport, déplacez le bouton à l'endroit où le pouce d'un joueur repose naturellement afin d'obtenir une idée visuelle de ce à quoi ressemblera le bouton sur l'appareil d'un joueur, puis dans la fenêtre Properties,
1. Définissez Image sur rbxassetid://18308375035 pour afficher l'icône du bouton de tir.
2. Définissez PressedImage sur rbxassetid://18308372558 pour afficher une version inversée de l'icône du bouton de tir lorsque le joueur appuie sur le bouton.
3. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
4. Définissez Name sur BlastButton.
5. Définissez ScaleType sur Fit afin que l'image s'adapte à son conteneur et ne s'étire pas sur différentes tailles d'écran.
6. Définissez ImageTransparency sur 0.3 pour réduire l'opacité du label afin qu'elle corresponde à tous les éléments UI noirs du jeu.
Insérez un UIAspectRatioConstraint dans BlastButton pour garantir que le rapport d'aspect du bouton reste le même, peu importe la taille de l'écran du joueur.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier d'exemple Laser Tag qui affichent programmatique le bouton de tir lorsqu'un joueur utilise une entrée tactile sur un appareil qui accepte les contrôles tactiles.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer l'affichage principal (HUD), y compris setupTouchButtonAsync. Après qu'un joueur ait rejoint un round et sélectionné son blaster, ce script garantit que tous les éléments UI du HUD s'affichent correctement pour l'état, l'appareil et le statut d'é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 le jeu et utilise une entrée tactile sur un appareil qui accepte les contrôles tactiles, le bouton de tir s'affiche en haut à droite du bouton de saut.

UI du joueur

En suivant les meilleures pratiques de hiérarchie visuelle du document Wireframe Your Layouts, cette section vous apprend à implémenter tous les éléments UI à l'écran relatifs à l'état du joueur. Ce regroupement d'éléments UI est près des côtés de l'écran car les joueurs peuvent comprendre ces informations périphériques sans détourner leur attention du gameplay.

Indicateur de joueur

Un indicateur de joueur est un composant UI que les joueurs consultent pour déchiffrer rapidement à quelle équipe ils appartiennent dès qu'ils spawnent dans la zone de spawn de leur équipe. Le jeu de laser tag d'exemple fournit deux versions de l'indicateur de joueur selon que le joueur est dans l'équipe verte ou rose.

En suivant les conseils de Select a Color Theme, les deux versions de l'indicateur de joueur combinent la couleur de l'équipe avec une icône unique et simple avec peu de détails afin qu'elles restent lisibles sur de petits écrans. Fournir deux formes de retour visuel est important car cela aide à garder le design accessible pour les joueurs atteints de daltonisme.

Pour recréer exactement le composant d'indicateur de joueur dans le jeu d'exemple Laser Tag :

Insérez un Frame dans l'objet HUDGui ScreenGui.
1. Dans la fenêtre Explorer, 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 Frame, puis dans la fenêtre Properties,
1. Définissez AnchorPoint sur 0, 1 pour définir le point d'origine du cadre au milieu bas de lui-même (0 % de la gauche à la droite du cadre, et 100 % du haut vers le bas du cadre).
2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définissez Name sur PlayerDisplay.
4. Définissez Position sur {0.02, 0},{0.97, 0} pour placer le cadre près du bas à gauche de l'écran.
5. Définissez Size sur {0.23, 0},{0.08, 0} pour à la fois raccourcir et élargir le cadre.
6. Activez ClipsDescendants pour couper les GuiObjects enfants qui dépassent du cadre.
Créez la forme polygonale.
1. Insérez un ImageLabel dans PlayerDisplay.
2. Sélectionnez le nouvel label, puis dans la fenêtre Properties,
  1. Définissez Image sur rbxassetid://14304828123 pour afficher l'icône trapézoïdale.
  2. Définissez AnchorPoint sur 1, 1 pour définir le point d'origine du label en bas à droite de lui-même (100 % de la gauche à la droite du label, et 100 % du haut vers le bas du label).
  3. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  4. Définissez Name sur Block.
  5. Définissez Position sur {1,0},{1,0} pour placer le label sur le côté droit du cadre.
  6. Définissez Size sur {1.858, 0},{0.581, 0} pour élargir le label en dehors du cadre, et le raccourcir à un peu plus de la moitié de la longueur du cadre.
  7. Définissez ImageTransparency sur 0.15 pour rendre le label légèrement transparent.
  8. Définissez ScaleType sur Fit afin que l'image s'adapte à son conteneur et ne s'étire pas sur différentes tailles d'écran.
  1. Insérez un UIAspectRatioConstraint dans Block pour garantir que le label et ses éléments UI enfants conservent le même rapport d'aspect, peu importe la taille de l'écran du joueur.
  2. Sélectionnez la nouvelle contrainte, puis dans la fenêtre Properties, définissez AspectRatio sur 13.78.
Créez la boîte pour le portrait du joueur.
1. Insérez un ImageLabel dans PlayerDisplay.
2. Sélectionnez le nouvel label, puis dans la fenêtre Properties,
  1. Supprimez l'ID d'actif de remplacement dans la propriété Image. Les scripts à l'étape 7 insèrent programmatique le portrait du joueur dans le label image.
  2. Définissez AnchorPoint sur 0, 1 pour définir le point d'origine du label en bas à gauche de lui-même (0 % de la gauche à la droite du label, et 100 % du haut vers le bas du label).
  3. Définissez BackgroundColor3 sur 0, 0, 0 pour définir la couleur d'arrière-plan du label sur noir.
  4. Définissez BackgroundTransparency sur 0.3 pour réduire l'opacité du label de 30 %, et correspondre à tous les éléments UI noirs du jeu.
  5. Définissez Name sur PlayerPortrait.
  6. Définissez Position sur {0.11, 0},{1, 0} pour placer le label sur le côté gauche de la forme polygonale.
  7. Définissez Size sur {0.23, 0},{1, 0} pour réduire le label.
  8. Définissez ImageTransparency sur 0.15 pour rendre le label légèrement transparent.
  9. Définissez ScaleType sur Fit afin que l'image s'adapte à son conteneur et ne s'étire pas sur différentes tailles d'écran.
  1. Insérez un UIAspectRatioConstraint dans PlayerPortrait pour garantir que le label et ses éléments UI enfants conservent le même rapport d'aspect, peu importe la taille de l'écran du joueur.
  2. Insérez un UICorner dans PlayerPortrait, puis dans la fenêtre Properties, définissez CornerRadius sur 0.05, 0 pour arrondir légèrement les coins.
Créez le label de texte pour le nom du joueur.
1. Insérez un objet TextLabel dans PlayerDisplay.
2. Sélectionnez le nouvel label, puis dans la fenêtre Properties,
  1. Définissez AnchorPoint sur 0, 0.5 pour définir le point d'origine du nouveau bouton au milieu gauche de lui-même (0 % de la gauche à la droite du bouton, et 50 % du haut vers le bas du bouton).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définissez Name sur PlayerNameTextLabel.
  4. Définissez Position sur {0.35, 0},{0.72, 0} pour placer le label sur le côté droit de son conteneur (35 % de la gauche à la droite du label parent, et 72 % du haut vers le bas du label parent).
  5. Définissez Size sur {0.52, 0},{0.3, 0} afin que le texte puisse occuper la majeure partie de la zone de la forme polygonale (52 % horizontalement et 30 % verticalement du cadre parent).
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Bold pour épaissir la police.
  8. Supprimez le texte de remplacement dans la propriété Text. Les scripts à l'étape 7 insèrent programmatique le nom du joueur dans le label de texte.
  9. Activez TextScaled.
  10. Définissez TextXAlignment sur Left.
Créez les icônes et couleurs d'équipe qui s'affichent à gauche du portrait du joueur.
1. Insérez un Folder dans PlayerDisplay, puis renommez-le en TeamIcons.
2. Créez l'icône et la couleur de l'équipe verte.
  1. Insérez un ImageLabel dans TeamIcons.
  2. Sélectionnez le nouvel label, puis dans la fenêtre Properties,
    
    Définissez AnchorPoint sur 0, 1 pour définir le point d'origine du label en bas à gauche de lui-même (0 % de la gauche à la droite du label, et 100 % du haut vers le bas du label).
    
    Définissez BackgroundColor3 sur 88, 218, 171 pour définir la couleur d'arrière-plan du label sur vert menthe.
    
    Définissez Name sur TeamAIcon.
    
    Définissez Position sur {0, 0},{1, 0} pour placer le label sur le côté gauche du cadre.
    
    Définissez Size sur {0.135, 0},{0.58, 0} pour réduire le label à gauche du portrait du joueur.
    
    Définissez ImageTransparency sur 1 pour rendre le label transparent.
  1. Configurez un attribut personnalisé pour suivre que ce label est pour l'équipe verte. Cette étape est très importante pour les scripts à l'étape 7.
    
    Dans la fenêtre Properties, naviguez jusqu'à la section Attributes, puis cliquez sur l'icône plus. Une boîte de dialogue contextuelle s'affiche.
    
    Dans le champ Name, saisissez teamColor.
    
    Dans le menu déroulant Type, sélectionnez BrickColor.
    
    Cliquez sur le bouton Save.
    
    Définissez le nouvel attribut teamColor sur Mint.
  2. Insérez un UIAspectRatioConstraint dans TeamAIcon pour garantir que le label et ses éléments UI enfants conservent le même rapport d'aspect, peu importe la taille de l'écran du joueur.
  3. Créez l'icône.
    
    Insérez un ImageLabel dans TeamAIcon.
    
    Sélectionnez le nouvel label, puis dans la fenêtre Properties,
    
    Définissez Image sur rbxassetid://14309678670 pour afficher l'icône de l'équipe verte.
    
    Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
    
    Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
    
    Définissez Name sur Icon.
    
    Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son label parent.
    
    Définissez Size sur {0.7, 0},{0.6, 0} pour réduire le label.
    
    Définissez ScaleType sur Fit afin que l'image s'adapte à son conteneur et ne s'étire pas sur différentes tailles d'écran.
3. Créez l'icône et la couleur de l'équipe rose.
  1. Dupliquez TeamAIcon et ses enfants.
  2. Sélectionnez le TeamAIcon dupliqué, puis dans la fenêtre Properties,
    
    Définissez BackgroundColor3 sur 255, 170, 255 pour définir la couleur d'arrière-plan du label sur rose carnation.
    
    Définissez Name sur TeamBIcon.
    
    Définissez l'attribut teamColor sur Carnation Pink.
    
    Sélectionnez l'enfant Icon dupliqué de TeamBIcon, puis dans la fenêtre Properties, définissez Image sur rbxassetid://14309678549 pour afficher l'icône de l'équipe rose.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier d'exemple Laser Tag qui affichent programmatique l'indicateur de joueur avec la couleur et l'icône d'équipe appropriées pendant qu'un joueur est actif dans un round.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer l'affichage principal (HUD), y compris startSyncingTeamColor, setPlayerName, et setPlayerPortrait. Après qu'un joueur ait rejoint un round et sélectionné son blaster, ce script garantit que tous les éléments UI du HUD s'affichent correctement pour l'état, l'appareil et le statut d'é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 rejoint ou rejoint à nouveau le round après avoir respawn, l'indicateur de joueur s'affiche en bas à gauche de son écran.

Écran de champ de force

Un écran de champ de force est un élément UI qui superpose le viewport pour informer les joueurs qu'ils sont à l'abri des tirs de l'équipe ennemie pendant qu'ils rejoignent ou rejoignent un round. En suivant les directives esthétiques pour les icônes de Choose an Art Style, le jeu de laser tag d'exemple utilise un motif hexagonal semi-transparent pour symboliser un champ de force. Cette décision de design renforce non seulement le style artistique futuriste global pour tous les UI du jeu, mais elle communique également l'état du joueur sans aucun texte ou orientation supplémentaire.

Pour recréer exactement l'écran de champ de force dans le jeu d'exemple Laser Tag :

Insérez un ImageLabel dans l'objet ForceFieldGui ScreenGui.
1. Dans la fenêtre Explorer, 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 le nouvel label, puis dans la fenêtre Properties,
1. Définissez Image sur rbxassetid://14462567888.
2. Définissez BackgroundTransparency sur 0.8 pour rendre le champ de force translucide.
3. Définissez Size sur {1, 0},{1, 0} pour que l'image remplisse tout l'écran (100 % horizontalement et 100 % verticalement du ScreenGui parent).
4. Définissez ScaleType sur Tile pour que l'hexagone se répète sur tout l'écran.
5. Définissez TileSize sur {0, 104},{0, 180}.
Insérez un objet UIGradient dans le label.
Sélectionnez le nouvel objet de dégradé, puis dans la fenêtre Properties,
1. Définissez Color sur une séquence de couleurs qui commence par le bleu, devient blanc, puis redevient bleu.
  1. Définissez Color sur 120, 192, 250 pour appliquer une teinte bleu clair à tous les hexagones.
  2. Cliquez sur la propriété Color, puis cliquez sur le bouton ⋯. Une fenêtre contextuelle de séquence de couleurs s'affiche.
    
    Chaque triangle sur l'axe inférieur de la séquence de couleurs est un point clé qui détermine la valeur de couleur de la propriété à ce point de l'image de gauche à droite.
  3. Cliquez et faites glisser sur la séquence de couleurs jusqu'à atteindre une valeur Time de 0.05, puis cliquez sur le petit carré à côté de Color pour ouvrir la fenêtre contextuelle Colors.
  4. Sélectionnez un blanc éclatant, puis fermez la fenêtre contextuelle.
  5. Cliquez et faites glisser sur la séquence de couleurs jusqu'à atteindre une valeur Time de 0.95, puis ouvrez à nouveau la fenêtre contextuelle Colors, et sélectionnez la même couleur blanche qu'auparavant.
2. Définissez Rotation sur 225 pour que la partie bleue de votre séquence de couleurs s'affiche dans les coins supérieur gauche et inférieur droit.
3. Définissez Transparency sur une séquence de nombres qui donne au champ de force un aspect scintillant.
  1. Cliquez sur la propriété Transparency, puis cliquez sur le bouton ⋯. Une fenêtre contextuelle de séquence de nombres s'affiche. Chaque carré au début et à la fin de la séquence de nombres est un point clé qui détermine la valeur de transparence de la propriété à ce point de l'image de gauche à droite.
  2. Définissez les propriétés de temps et de valeur suivantes tout au long de la séquence de nombres :
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
Dupliquez le ImageLabel de l'étape 2.
Sélectionnez l'objet UIGradient dans le label dupliqué, puis dans la fenêtre Properties,
1. Définissez Rotation sur -45 pour retourner l'image afin qu'elle se reflète presque le long de l'axe Y.
2. Modifiez Transparency pour donner au scintillement un aspect plus organique.
  1. Cliquez sur la propriété Transparency, puis cliquez sur le bouton ⋯. Une fenêtre contextuelle de séquence de nombres s'affiche.
  2. Sélectionnez le troisième point clé, puis cliquez sur le bouton Delete.
Référez-vous aux scripts ReplicatedStorage suivants dans le fichier d'exemple Laser Tag qui affichent programmatique l'écran de champ de force pendant qu'un joueur rejoint ou rejoint à nouveau un round.

Le script client ReplicatedStorage.ForceFieldClientVisuals suivant remplace le visuel par défaut de ForceField par StarterGui.ForceFieldGui. Lorsque les joueurs entrent dans un jeu et apparaissent à un SpawnLocation avec une propriété Duration supérieure à 0, le comportement par défaut dans chaque jeu est de fournir à leur avatar un orbe bleu protecteur qui les empêche momentanément de perdre de la santé.

Ce script commence par écouter lorsque le ForceField est ajouté à un personnage, désactive les visuels de force field en première personne par défaut, puis active l'objet ForceFieldGui ScreenGui. Notez que cela n'impacte pas les visuels en troisième personne lorsque les joueurs regardent d'autres joueurs réapparaître dans le jeu.

Les visuels de force field en première personne incluent une grille hexagonale futuriste sur le périmètre de l'écran. — Visuels de force field en première personne

Les visuels de force field en troisième personne incluent un orbe bleu scintillant autour du joueur apparaissant dans le jeu. — Visuels de force field en 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 spawn 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 à nouveau le round après avoir réapparu, la nouvelle interface utilisateur de champ de force s'affiche au lieu des visuels de ForceField en première personne par défaut.

Écran de réapparition

Un écran de réapparition est un élément d'interface utilisateur qui assombrit le champ de vision pour informer les joueurs qu'ils ont été éliminés, et que le serveur est en train de les réapparaître dans leur zone de spawn. Cet élément d'interface utilisateur est important car il donne aux joueurs le temps de comprendre qu'ils ont été éliminés, et de planifier leur prochain mouvement avant de rejoindre à nouveau le round actif.

Pour plus d'informations sur le comportement de réapparition personnalisé dans le jeu de laser tag d'exemple, voir Réapparaître des personnages du programme de script de gameplay.

Pour recréer exactement l'écran de réapparition dans le jeu de Laser Tag d'exemple :

Créez la bannière d'information centrale.
1. Insérez un ImageLabel dans l'objet OutStateGui ScreenGui.
  1. Dans la fenêtre Explorer, 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 le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du nouveau bouton au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son conteneur (50 % de la gauche à la droite du parent ScreenGui, et 50 % du haut vers le bas du parent ScreenGui).
  4. Définissez Size sur {0.48, 0},{0.06, 0} pour élargir le label (48 % horizontalement et 6 % verticalement du parent ScreenGui).
  5. Définissez Name sur Block.
  6. Définissez Image sur rbxassetid://14304827265 pour faire de l'image un trapèze.
  7. Définissez ImageColor sur 0,0,0 pour rendre le trapèze noir.
  8. Définissez ImageTransparency sur 0.3 pour réduire l'opacité du label de 30 %, et faire correspondre tous les éléments d'interface utilisateur noirs dans le jeu.
3. Insérez un UIAspectRatioConstraint dans Block pour garantir que le label et ses éléments d'interface utilisateur enfants conservent le même rapport d'aspect quelle que soit 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 informatif.
6. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son label parent (50 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
  4. Définissez Size sur {.85, 0},{0.55, 0} pour que le texte puisse occuper la majeure partie de la zone du trapèze (85 % horizontalement et 55 % verticalement du label parent).
  5. Définissez Name sur BodyTextLabel.
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Bold pour épaissir la police.
  8. Définissez Text sur Réapparition….
  9. Définissez TextColor3 sur 255, 255, 255 pour rendre le texte blanc.
  10. Activez TextScaled.
Créez l'en-tête.
1. Insérez un ImageLabel dans Block.
2. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 1 pour définir le point d'origine du label au milieu du bas de lui-même (50 % de la gauche à la droite du label, et 100 % du haut vers le bas du label).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définissez Position sur {0.5, 0},{0, 0} pour placer le label en haut au milieu de son label parent (50 % de la gauche à la droite du label parent, et 0 % du haut vers le bas du label parent).
  4. Définissez Size sur {0.46, 0},{0.56, 0} pour élargir le label (46 % horizontalement et 56 % verticalement du label parent).
  5. Définissez Name sur Header.
  6. Définissez Image sur rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
  7. Définissez ImageColor sur 245, 46, 46 pour rendre le fondu rouge afin de signifier que le joueur est temporairement inactif pendant qu'il est éliminé du round.
3. Insérez un TextLabel dans Header pour le texte informatif.
4. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son label parent (50 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
  4. Définissez Size sur {.85, 0},{0.55, 0} pour que le texte puisse occuper la majeure partie de la zone de fondu (85 % horizontalement et 55 % verticalement du label parent).
  5. Définissez Name sur HeaderTextLabel.
  6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
  7. Définissez Weight sur Black pour épaissir la police.
  8. Définissez Text sur ÉLIMINÉ - VOUS ÊTES HORS JEU !
  9. Définissez TextColor3 sur 255, 255, 255 pour rendre le texte blanc.
  10. Activez TextScaled.
Créez le fondu autour des bords de l'écran.
1. Insérez un ImageLabel dans OutStateGui.
2. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  2. Définissez BackgroundColor3 sur 0,0,0 pour définir la couleur d'arrière-plan du label sur noir.
  3. Définissez BackgroundTransparency sur 0.5 pour rendre l'arrière-plan du label à moitié transparent.
  4. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son conteneur (50 % de la gauche à la droite du parent ScreenGui, et 50 % du haut vers le bas du parent ScreenGui).
  5. Définissez Size sur {1, 0},{1, 0} pour élargir le label à tout l'écran (100 % horizontalement et 100 % verticalement du parent ScreenGui).
  6. Définissez ZIndex sur -1 pour afficher le fondu derrière les autres éléments d'interface utilisateur.
  7. Définissez Name sur Header.
  8. Définissez Image sur rbxassetid://14309518613 pour faire de l'image un fondu de bord.
  9. Définissez ImageTransparency sur 0.1 pour rendre le fondu légèrement translucide.
Pour améliorer les performances, vous pouvez ignorer l'asset d'image et utiliser à la place un objet UIGradient avec une séquence de nombres de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir Modificateurs d'apparence de l'UI - Dégradé.
Référencez le script ReplicatedStorage suivant dans le fichier de place d'exemple Laser Tag qui affiche programmatique 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 de spawn de son équipe.

Le script client ReplicatedStorage.PlayerStateHandler suivant contient des fonctions qui déclenchent différents types de comportement selon l'attribut playerState. Toutes les réponses aux événements sont logiquement regroupées dans ce script car elles nécessitent un comportement similaire d'activation ou de désactivation des contrôles du joueur, du mouvement de la caméra, et de quel niveau d'interface utilisateur est visible.

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

Le joueur ne peut pas se déplacer 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, son playerState devient SelectingBlaster, ce qui déclenche la fonction onSelectingBlaster(). onSelectingBlaster() active alors exclusivement le StarterGui.PickABlasterGui, qui désactive automatiquement l'écran de réapparition. Pour plus d'informations sur ces conditions, voir Gérer l'état du client du programme de script de gameplay.

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

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

local localPlayer = Players.LocalPlayer

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

-- Désactiver tous les niveaux d'interface utilisateur sauf l'exception donnée
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contient une liste des guis qui doivent être définis 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 d'eux tout en sélectionnant un blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Désactiver le blaster pendant la sélection d'un blaster
	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)

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

local function onTaggedOut()
	-- Désactiver les contrôles pendant qu'il est éliminé
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Désactiver le blaster pendant qu'il est éliminé
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Activer les contrôles pendant qu'il est dans le lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Cacher tout le HUD pendant qu'il est dans le lobby
	setGuiExclusivelyEnabled(nil)

	-- Désactiver le blaster pendant qu'il est 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(`État de joueur invalide ({newPlayerState})`)
	end
end

-- Gérer l'état initial du joueur s'il est défini
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

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

-- Gérer les futures mises à jour de l'état du joueur
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Assurez-vous que les changements sont toujours appliqués 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 de spawn.

Maintenant que vous êtes familiarisé avec les GuiObjects courants pour l'interface utilisateur à l'écran, essayez de recréer l'objet RoundResultsGui ScreenGui et tous ses enfants pour l'affichage à l'écran lorsque les joueurs gagnent ou perdent un match. Vous pouvez utiliser le fichier d'exemple du jeu de laser tag Laser Tag .rbxl comme référence, ou ajuster les valeurs pour répondre aux exigences de gameplay de votre propre jeu.

Créer des objets SurfaceGui

Pour afficher une interface utilisateur sur la surface d'une pièce dans l'espace 3D qui répond à la logique de script pour chaque joueur individuel, vous pouvez parenté un objet SurfaceGui à la pièce sur laquelle vous souhaitez afficher votre interface utilisateur dans le service ReplicatedStorage. Cette technique garantit que votre interface utilisateur et sa logique de script sont disponibles à la fois pour le serveur et pour le client de chaque joueur.

Les objets SurfaceGui contiennent tous les GuiObjects qui s'affichent sur la surface d'une pièce dans l'espace 3D. Le jeu de laser tag d'exemple ne comprend qu'une seule instance d'un objet SurfaceGui : le compteur de temps de recharge qui s'affiche au-dessus de chaque blaster de joueur. Cet objet nécessite une logique de script pour chaque joueur car il répond activement à l'entrée de chaque joueur individuel et fournit un retour visuel sur le moment où ils peuvent tirer à nouveau.

Pour créer un objet SurfaceGui :

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

Compteur de temps de recharge

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

Pour recréer exactement le compteur de temps de recharge dans le jeu de Laser Tag d'exemple :

Créez une pièce pour contenir votre objet SurfaceGui.
1. Dans la fenêtre Explorer, survolez le Workspace, puis cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
2. Dans le menu contextuel, insérez une pièce block. C'est un emplacement temporaire pour la pièce afin que vous puissiez visualiser les changements à chaque étape du processus.
Positionnez et orientez la pièce autour de l'endroit où le personnage d'un joueur tiendrait son blaster, puis dans la fenêtre Propriétés,
1. Définissez Transparency sur 1 pour rendre la pièce complètement transparente.
2. Définissez Name sur CooldownBarPrefab.
3. Définissez Size sur 0.169, 0.027, 2.537 pour mettre la pièce à une taille d'environ 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éfinissez Face sur Top pour que l'interface utilisateur s'affiche vers le haut.
2. Définissez LightInfluence et MaxDistance sur 0.
3. Définissez PixelsPerStud sur 200.
Créez la barre noire.
1. Insérez un ImageLabel dans le SurfaceGui.
2. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Supprimez la valeur Image par défaut.
  2. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  3. Définissez BackgroundColor3 sur 0,0,0 pour définir la couleur d'arrière-plan du label sur noir.
  4. Définissez BackgroundTransparency sur 0.4 pour rendre l'arrière-plan du label semi-transparent.
  5. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son conteneur (50 % de la gauche à la droite du parent SurfaceGui, et 50 % du haut vers le bas du parent SurfaceGui).
  6. Définissez Size sur {1, 0},{1, 0} pour élargir le label à toute la pièce (100 % horizontalement et 100 % verticalement du parent SurfaceGui).
  7. Définissez Name sur Container.
Arrondissez les coins du conteneur.
1. Insérez un objet UICorner dans Container.
2. Sélectionnez le UICorner, puis dans la fenêtre Propriétés, définissez CornerRadius sur 0.15, 0 pour arrondir légèrement les coins.
Créez la barre rouge.
1. Insérez un ImageLabel dans Container.
2. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Supprimez la valeur Image par défaut.
  2. Définissez AnchorPoint sur 1, 0.5 pour définir le point d'origine du label au milieu à droite de lui-même (100 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
  3. Définissez BackgroundColor3 sur 172, 13, 13 pour définir la couleur d'arrière-plan du label sur un rouge foncé.
  4. Définissez BackgroundTransparency sur 0.2 pour rendre l'arrière-plan du label légèrement transparent.
  5. Définissez Name sur Bar.
  6. Définissez Position sur {1, 0},{0.5, 0} pour placer le label au milieu à droite de son conteneur (100 % de la gauche à la droite du parent label, et 50 % du haut vers le bas du parent label).
  7. Définissez Size sur {0, 0},{1, 0} pour allonger le label jusqu'au sommet de son label parent (0 % horizontalement et 100 % verticalement du parent label). Cette étape est également bénéfique pour le comportement de tweening qui se produit dans les scripts à l'étape 8.
Arrondissez les coins du label.
1. Insérez un objet UICorner dans Bar.
2. Sélectionnez le UICorner, puis dans la fenêtre Propriétés, définissez CornerRadius sur 0.15, 0 pour arrondir légèrement les coins.
Déplacez CooldownBarPrefab dans ReplicatedStorage.
1. Créez une structure de dossier pour organiser vos objets d'interface utilisateur. L'exemple utilise un dossier Instances avec un dossier enfant Guis.
2. Déplacez CooldownBarPrefab dans Guis.
Référencez les scripts ReplicatedStorage suivants dans le fichier de place d'exemple Laser Tag qui attachent programmatique le compteur de temps de recharge au blaster du joueur, puis animent la barre rouge après qu'un joueur tire avec son blaster.

Le script client ReplicatedStorage.FirstPersonBlasterVisuals suivant gère toute la logique visuelle pour le blaster en première personne du joueur. Il nécessite un ensemble de scripts de module qui travaillent ensemble pour configurer des visuels de blaster qui semblent plus réalistes pour le gameplay de 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 le rig en première personne
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Ajouter 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
		-- Cela détruit également la barre de temps de recharge puisqu'elle est parentée au rig
		rigModel:Destroy()
		rigModel = nil
	end
end

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

-- Liez le rig à la caméra si elle existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Mettez à jour le CFrame du rig par rapport à la position de la caméra et RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Gère le changement de visuels lorsque le blasterType change pendant le jeu
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Gère le changement de visuels lorsque l'état du joueur change
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Supprimez 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 fini de sélectionner le blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Maintenant, chaque fois qu'un joueur tire avec son blaster, la barre de temps de recharge s'anime pour communiquer quand le joueur peut tirer à nouveau.

Créer des objets BillboardGui

Pour afficher des éléments d'interface utilisateur dans l'espace 3D qui répondent à la logique de script et font toujours face à la caméra de chaque joueur, quel que soit leur angle de vue, comme les noms des joueurs ou les marqueurs de carte, vous pouvez créer un objet BillboardGui comme enfant d'un BasePart ou Attachment qui existe dans l'espace 3D.

Le jeu de laser tag d'exemple comprend deux objets BillboardGui distincts dans le service ReplicatedStorage :

OtherPlayerIndicatorGuiPrefab - Affiche un cercle rose ou vert au-dessus de la tête de chaque joueur lorsqu'ils sont actifs dans un round.
TaggedOutIndicatorGuiPrefab - Affiche au-dessus de la tête d'un joueur lorsqu'il est éliminé du round.

Après avoir créé un objet BillboardGui, vous pouvez créer et personnaliser ses enfants GuiObjects en fonction de l'objectif de chaque conteneur. Pour démontrer, dans les sections immédiates qui suivent, vous apprendrez à implémenter des éléments d'interface utilisateur pour les deux types d'indicateurs dans le jeu de laser tag d'exemple. Vous pouvez ajuster n'importe quelle partie du processus pour répondre aux spécifications de votre propre jeu.

Pour créer un objet BillboardGui :

Dans la fenêtre Explorer, survolez un BasePart ou Attachment, puis cliquez sur l'icône ⊕. 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 utilisateur enfants.
Répétez ce processus pour chaque élément d'interface utilisateur 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 à quelle équipe appartiennent les autres joueurs dans le round afin qu'ils puissent facilement différencier leurs alliés et les membres de l'équipe ennemie. Cette information est importante car le gameplay d'un jeu de tir à la première personne nécessite que les joueurs prennent des décisions stratégiques rapides pendant qu'ils sont dans des zones de combat afin de ne pas être éliminés et de perdre le match.

Pour recréer exactement l'indicateur d'équipe dans le jeu de Laser Tag d'exemple :

Insérez un objet BillboardGui dans un rig temporaire.
1. Dans l'onglet Home ou Avatar de la barre d'outils, cliquez sur Character.
2. Sélectionnez parmi les options disponibles. L'exemple utilise un type de rig R15, une forme de corps féminine, et un avatar Rthro. Le rig s'affiche à la fois dans la vue 3D et dans la fenêtre Explorer sous le nom Rig.
3. Dans la fenêtre Explorer, naviguez jusqu'à la maille Head de l'enfant du rig, puis cliquez sur l'icône ⊕. 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éfinissez LightInfluence sur 0 pour empêcher la lumière environnementale d'affecter la couleur de l'indicateur.
2. Définissez Name sur OtherPlayerIndicatorPrefab.
3. Définissez Size sur {0, 10},{0, 10} pour rendre le label significativement plus petit.
4. Définissez StudsOffsetWorldSpace sur 0, 4, 0 pour le positionner au-dessus de la tête du rig.
Insérez un objet Frame dans OtherPlayerIndicatorPrefab.
Sélectionnez le nouveau cadre, puis dans la fenêtre Propriétés,
1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du cadre au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
2. Définissez BackgroundColor3 sur 255, 3, 0 pour définir la couleur d'arrière-plan du cadre sur rouge comme couleur de remplacement.
3. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le cadre au milieu de son conteneur (50 % de la gauche à la droite du parent BillboardGui, et 50 % du haut vers le bas du parent BillboardGui).
4. Définissez Size sur {1, -2},{1, -2} pour raccourcir le cadre à la surface du BillboardGui.
Insérez un objet UICorner dans Frame pour arrondir complètement les coins.
Insérez un objet UIStroke dans Frame pour entourer le cercle de l'indicateur.
Déplacez OtherPlayerIndicatorPrefab dans ReplicatedStorage.
Référencez le script suivant ReplicatedStorage dans le fichier de place d'exemple Laser Tag 1A qui affiche programmatique l'indicateur d'équipe pour chaque joueur dans un round actif, sauf s'ils sont dans l'équipe ennemie et occlus.

Le script ReplicatedStorage.OtherPlayerIndicatorGuiSetup suivant s'exécute lorsque les joueurs apparaissent dans l'arène pour un round actif. Il attache l'indicateur d'équipe en appelant la fonction addIndicatorToCharacter(), qui localise l'objet Head de chaque personnage joueur participant au round. S'ils n'ont pas déjà un indicateur d'équipe, le script clone et ajoute l'interface utilisateur otherPlayerIndicatorPrefab au Head du personnage, et définit la couleur de l'indicateur d'équipe sur la couleur de leur équipe.

Si d'autres joueurs sont dans la même équipe, l'indicateur d'équipe s'affiche toujours, même s'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 s'il n'y a pas d'objet dans l'espace 3D pour les occlure.

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

		-- N'ajoutez des indicateurs qu'aux joueurs participant au round
		if not otherPlayer.Team then
			return
		end

		-- Évitez d'ajouter des indicateurs en double, créez-en un nouveau uniquement s'il n'existe 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 uniquement si le joueur est ami

		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 un round actif, des indicateurs d'équipe s'affichent au-dessus des têtes des autres joueurs, sauf s'ils sont dans l'équipe ennemie et derrière un objet.

Indicateur d'élimination

Un indicateur d'élimination est un élément d'interface utilisateur qui informe les joueurs lorsque d'autres joueurs ne sont plus actifs dans le round et sont en train de réapparaître dans leur zone de spawn. Cette information est importante car le gameplay d'un jeu de tir à la première personne nécessite que les joueurs passent à leur prochaine cible dès qu'ils éliminent un joueur afin de ne pas devenir vulnérables dans l'arène en jouant trop longtemps au même endroit.

Pour recréer exactement l'indicateur d'élimination dans le jeu de Laser Tag d'exemple :

Insérez un objet BillboardGui dans un rig temporaire afin que vous puissiez visualiser les changements à chaque étape du processus.
1. Dans l'onglet Home ou Avatar de la barre d'outils, cliquez sur Character.
2. Sélectionnez parmi les options disponibles. L'exemple utilise un type de rig R15, une forme de corps masculine, et un avatar Rthro. Le rig s'affiche à la fois dans la vue 3D et dans la fenêtre Explorer sous le nom Rig.
3. Dans la fenêtre Explorer, naviguez jusqu'à la maille Head de l'enfant du rig, puis cliquez sur l'icône ⊕. 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éfinissez LightInfluence sur 0 pour empêcher la lumière environnementale d'affecter la couleur de l'indicateur.
2. Définissez Name sur TaggedOutIndicatorGuiPrefab.
3. Définissez Size sur {3, 0},{0.5, 0} pour élargir l'espace pour un label.
4. Définissez StudsOffset sur 0, 3.25, 0 pour le positionner au-dessus de la tête d'un joueur.
Insérez un objet ImageLabel dans TaggedOutIndicatorGuiPrefab.
Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définissez Name sur Frame.
4. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son conteneur (50 % de la gauche à la droite du parent BillboardGui, et 50 % du haut vers le bas du parent BillboardGui).
5. Définissez Size sur {1, 0},{1, 0} pour élargir le label à tout le BillboardGui (100 % horizontalement et 100 % verticalement du parent BillboardGui).
6. Définissez Image sur rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
7. Définissez ImageColor sur 245, 46, 46 pour teinter le label en rouge.
Pour améliorer les performances, vous pouvez ignorer l'asset d'image et utiliser à la place un objet UIGradient avec une séquence de nombres de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir Modificateurs d'apparence de l'UI - Dégradé.
Insérez un objet TextLabel dans Frame.
Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine du label au milieu de lui-même (50 % de la gauche à la droite du label, et 50 % du haut vers le bas du label).
2. Définissez BackgroundTransparency sur 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définissez Name sur BodyTextLabel.
4. Définissez Position sur {0.5, 0},{0.5, 0} pour placer le label au milieu de son conteneur (50 % de la gauche à la droite du parent label, et 50 % du haut vers le bas du parent label).
5. Définissez Size sur {0.85, 0},{0.7, 0} pour que le texte puisse occuper la majeure partie de la zone de fondu (85 % horizontalement et 70 % verticalement de l'image label parent).
6. Définissez FontFace sur Montserrat pour correspondre à l'esthétique futuriste.
7. Définissez Weight sur Bold pour épaissir la police.
8. Définissez Text sur ÉLIMINÉ.
9. Définissez TextColor3 sur 255, 255, 255 pour rendre le texte blanc.
10. Activez TextScaled.
Déplacez TaggedOutIndicatorGuiPrefab dans ReplicatedStorage.
Référencez les scripts ServerScriptService suivants dans le fichier de place d'exemple Laser Tag 1A qui affichent programmatique l'indicateur d'élimination pendant qu'un joueur est en train de réapparaître dans la zone de spawn de son équipe.

Le script serveur ServerScriptService.SetupHumanoid suivant s'exécute dès qu'un joueur charge le jeu. Il garantit que chaque fois qu'un personnage de joueur est ajouté au modèle de 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 onCharacterAdded si le joueur a déjà un personnage
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Appeler onCharacterAdded pour tous les futurs spawn de personnages pour ce joueur
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

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

Maintenant, chaque fois que la santé d'un joueur atteint zéro, l'indicateur d'élimination s'affiche au-dessus de sa tête jusqu'à ce qu'il réapparaisse.

Félicitations pour avoir terminé le programme de conception d'interface utilisateur ! Maintenant que vous avez de l'expérience dans la création d'un style artistique, le wireframing de vos mises en page, et la mise en œuvre de vos conceptions dans Studio du début à la fin, vous pouvez étendre votre projet avec de nouvelles interfaces utilisateur et fonctionnalités, ou suivre des programmes de tutoriels supplémentaires, tels que le Programme de script de gameplay qui vous enseigne l'organisation générale et les détails clés de mise en œuvre du jeu de laser tag d'exemple. Bonne création !