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 complets et prêts pour l'interaction des joueurs.

En utilisant le exemple d'expérience de laser tag .rbxl comme référence, cette section du curriculum de design 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 depuis la bibliothèque d'actifs UI afin que vous puissiez recréer les composants UI de l'expérience de laser tag.
Émuler divers appareils directement dans Studio pour voir comment votre interface utilisateur s'affiche sur différents écrans et ratios d'aspect.
Créer des objets ScreenGui, SurfaceGui et BillboardGui pour afficher votre interface utilisateur sur les écrans des joueurs, les surfaces de parties 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 expériences.

Les instructions de cette section du tutoriel vous montrent comment recréer exactement les composants UI en utilisant la bibliothèque d'actifs de conception d'interface utilisateur. 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 expérience, 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 à partir du Creator Store comprend neuf éléments d'interface utilisateur 2D individuels, ainsi que les versions finales des composants d'objectif, de sélection de blaster, et d'information sur le joueur 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 Inversé**
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 Impact
rbxassetid://14401148777

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

**Fondu de Bord**
rbxassetid://14309518632

Pour obtenir la bibliothèque d'actifs depuis votre inventaire dans votre expérience :

Ajoutez la bibliothèque d'actifs à votre inventaire.
1. Allez sur la page de détails de la bibliothèque d'actifs dans 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 carrelage 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 quel des composants finaux pour faire référence à 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 ratio d'aspect de votre vue dans Studio ne reflète pas nécessairement le ratio d'aspect des écrans que les joueurs utilisent pour accéder à votre expérience, 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 voir l'espace 3D car vos éléments d'interface utilisateur prennent trop de place sur l'affichage.

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

Dans le menu Test de Studio, activez Émulateur de Dispositifs.
Dans le menu déroulant de la 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 à leur entrée dans une expérience.

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

HUDGui - Affiche des informations clés sur le gameplay de l'expérience lorsque les joueurs sont actifs dans un round, comme 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 superposé sombre en haut de l'écran avec des informations sur l'équipe qui a remporté le round.

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

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 selon le contexte de ses éléments UI 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 mettre en œuvre tous les éléments d'interface utilisateur à l'écran relatifs à l'objectif de l'expérience. Ce regroupement d'éléments d'interface utilisateur est près du haut de l'écran car l'objectif et le total de points de chaque équipe sont les plus significatifs pour gagner le jeu.

Par exemple, l'exemple fournit un composant UI 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 étiquettent les membres de l'équipe ennemie et gagnent des points, ce composant garde une trace du score de chaque équipe par rapport à l'objectif global dans l'invite de l'en-tête. Pour un aperçu des scripts clients et serveurs qui fonctionnent ensemble pour suivre les points, voir Suivre les points dans le curriculum de Script de Gameplay.

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

Créez un conteneur pour l'ensemble du composant.
1. Insérez un Frame dans l'objet HUDGui ScreenGui.
  1. Dans la fenêtre Explorateur, allez 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 au milieu du haut (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 du milieu de l'écran (50 % de la gauche à la droite de l'écran, et 3 % du haut vers le bas).
  4. Définissez Size sur {0.5, 0},{0.13, 0} pour que les éléments du cadre occupent une grande portion du haut de l'écran (50 % horizontalement, et 13 % verticalement).
  5. Définissez Name sur Objectif.
3. (Optionnel) Insérez un UIAspectRatioConstraint dans Objectif pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'exemple définit son attribut UIAspectRatioConstraint.AspectRatio sur 7.
Créez un conteneur pour les objets d'invite de l'objectif.
1. Insérez un Frame dans Objectif.
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 au milieu du haut (50 % de la gauche à la droite du cadre, et 0 % du haut vers le bas).
  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} pour 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 AffichageObjectif.
Créez les éléments de titre.
1. Insérez un ImageLabel dans AffichageObjectif.
2. Sélectionnez l'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 au milieu de son bas (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 En-tête.
  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'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'exemple définit son attribut UIAspectRatioConstraint.AspectRatio sur 13.781.
4. Insérez un TextLabel dans En-tête pour afficher un titre.
5. Sélectionnez la nouvelle étiquette, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 0.5, 0.5 pour définir le point d'origine de la nouvelle étiquette au milieu de son bas (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 centre 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 AffichageObjectif.
2. Sélectionnez l'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 au milieu de son bas (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).
  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 Corps.
  6. Définissez Image sur rbxassetid://14304827265 pour afficher un trapèze inverse.
  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 l'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'exemple définit son attribut UIAspectRatioConstraint.AspectRatio sur 13.781.
4. Insérez un TextLabel dans Corps 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 son bas (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 centre 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 le fond sombre.
  9. Définissez Text sur Tagguez les joueurs adverses pour marquer des points ! La première équipe à atteindre %d points gagne..
  10. Activez TextScaled.
Créez un conteneur pour les compteurs d'équipe de l'objectif.
1. Insérez un Frame dans Objectif.
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 au milieu du bas (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} pour que les composants d'interface utilisateur de sélection occupent environ 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 des marges 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 soit affiché côte à côte.
  3. Définissez HorizontalAlignment sur Center pour que chaque compteur d'équipe s'aligne au milieu des autres.
Créez les éléments du compteur d'équipe verte.
1. Insérez un ImageLabel dans TeamPointCounter.
2. Sélectionnez l'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).
  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 indiquer que cette étiquette est pour l'équipe verte.
  1. Dans la fenêtre Propriétés, allez à 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 Menthe.
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 au milieu de son côté droit (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 le fond 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 avec 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 au milieu de son côté gauche (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 avec 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 fonctionnent ensemble pour configurer le principal Affichage Tête Haute (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 UI de 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.

UI Blaster

En suivant les meilleures pratiques de hiérarchie visuelle de Wireframe Your Layouts, cette section vous enseigne comment mettre en œuvre tous les éléments d'interface utilisateur à l'écran relatifs au blaster du joueur. Ce regroupement d'éléments d'interface utilisateur occupe la majorité de l'espace d'écran près du centre de l'écran car il sert de point focal pour attirer l'attention des joueurs sur l'action dans l'espace 3D, et il a le plus d'importance pour jouer le jeu.

Réticule

Un réticule est un élément d'interface utilisateur qui informe les joueurs où ils vont faire un impact lorsqu'ils tirent leur arme. Cet élément d'interface utilisateur est un besoin de jeu vital pour les expériences de tir à la première personne car les joueurs doivent être en mesure de viser précisément leur blaster et de taguer les membres de l'équipe ennemie.

Comme la plupart des autres expériences dans le genre de tir à la première personne, l'expérience de laser tag fournie 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 général.

Pour recréer exactement le réticule dans l'exemple Laser Tag :

Insérez un ImageLabel dans l'objet HUDGui ScreenGui.
1. Dans la fenêtre Explorateur, allez 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 nouvel 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 Réticule.
5. Définissez Position sur {0.5,0},{0.5,0} pour placer l'étiquette au centre 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 Réticule pour garantir que le rapport d'aspect de l'étiquette reste le même peu importe la taille de l'écran du joueur. L'exemple définit son attribut 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 touche un autre joueur de l'équipe ennemie. Comme le réticule, cet élément d'interface utilisateur est un besoin de jeu vital pour les expériences de tir à la première personne car il fournit un retour visuel lorsque les joueurs réussissent à taguer leurs adversaires.

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

Insérez un ImageLabel dans l'objet Réticule ImageLabel.
1. Dans la fenêtre Explorateur, allez au service StarterGui.
2. Survolez son objet enfant Réticule, puis cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
3. Dans le menu contextuel, insérez un ImageLabel.
Sélectionnez le nouvel ImageLabel, puis dans la fenêtre Propriétés,
1. Définissez Image sur rbxassetid://14401148736 pour afficher l'icône rectangulaire de 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 centre de l'écran.
5. Définissez Name sur Marqueur de Frappe.
6. Définissez Size sur {0.6, 0},{0.06, 0} pour réduire la taille des rectangles autour du centre du réticule.
7. Définissez ImageTransparency sur 1 pour rendre le marqueur de frappe complètement transparent. Les scripts dans l'étape suivante remettent la transparence à 0 chaque fois qu'un tir d'un joueur touche 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 programmatically le marqueur de frappe lorsqu'un tir touche un joueur de l'équipe ennemie.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal Affichage Tête Haute (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 UI de 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 touche 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. L'expérience de laser tag fournie 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, rendant ce composant d'interface utilisateur un flux de travail essentiel pour l'expérience globale.

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 préfabriqué de bouton de blaster. La logique de script pour le composant global peuple différentes caractéristiques visuelles dans le préfabriqué de bouton de blaster selon les instances Configuration qui représentent chaque type de blaster.

Cette configuration vous permet de créer des instances supplémentaires de Configuration 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 l'exemple Laser Tag :

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, allez 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 au milieu du bas (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 du 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} pour que les composants UI du sélecteur de blaster occupent une grande portion de l'écran pour capter l'attention des joueurs (80 % horizontalement, et 25 % verticalement).
  5. Définissez Name sur Composant.
3. (Optionnel) Insérez un UIAspectRatioConstraint dans Composant pour garantir que le rapport d'aspect du cadre et de ses enfants reste le même peu importe la taille de l'écran du joueur. L'exemple définit son attribut UIAspectRatioConstraint.AspectRatio sur 5.
Créez un conteneur pour contenir des regroupements d'éléments d'interface utilisateur.
1. Insérez un Frame dans Composant.
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 (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 du 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 le nouvel é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 au milieu de son bas (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 milieu 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 de l'étiquette parent).
  6. Définissez Name sur En-tête.
  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'exemple définit son attribut UIAspectRatioConstraint.AspectRatio sur 13.78.
4. Insérez un TextLabel dans En-tête 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 son bas (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 centre 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 bouton de blaster et les flèches de sélection.
1. Insérez un ImageLabel dans SelectionFrame.
2. Sélectionnez le nouvel étiquette, puis dans la fenêtre Propriétés,
  1. Supprimez la valeur Image par défaut.
  2. Définissez AnchorPoint sur 0.5, 1 pour définir le point d'origine de l'étiquette au milieu de son bas (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 faire correspondre tous les éléments d'interface utilisateur noirs dans l'expérience.
  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 en dessous de 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 centre de son cadre parent (50 % de la gauche à la droite du cadre parent, et 50 % du haut vers le bas du cadre parent).
  4. Définissez Size sur {0.85, 0},{0.77, 0} pour élargir la zone cadre à la plupart de l'étiquette (85 % horizontalement et 77 % verticalement de l'étiquette parent).
  5. Définissez Name sur Conteneur.
Créez des marges 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 disposition, 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 soit affiché côte à côte.
  3. Définissez à la fois HorizontalAlignment et VerticalAlignment sur Center pour que chaque bouton s'aligne au milieu des autres.
3. Arrondissez les coins du bouton.
  1. Insérez un objet UICorner dans le bouton.
  2. Sélectionnez le nouvel objet coin, puis dans la fenêtre Propriétés, définissez CornerRadius sur 0.1, 0 pour arrondir les coins.
4. Insérez un objet ImageLabel dans le bouton.
5. Sélectionnez le nouvel 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 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 positionner 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 parce qu'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 qu'il y ait de l'espace en dessous de 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 à droite.
1. Dupliquez NavigationButtonLeft.
2. Sélectionnez le bouton dupliqué, puis dans la fenêtre Propriétés,
  1. Définissez AnchorPoint sur 1, 0.5 pour définir le point d'origine du nouveau bouton au milieu de sa droite (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 positionner 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 parce qu'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 Propriétés,
  1. Supprimez la valeur d'Image par défaut.
  2. Définissez AnchorPoint sur 0.5, 1 pour définir le point d'origine du nouveau bouton au milieu de sa base (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 indiquant que le bouton est sélectionnable.
  4. Définissez Position sur {0.5, 0},{0.99, 0} pour positionner le bouton près du bas du 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.
3. Arrondissez les coins du bouton.
  1. Insérez un objet UICorner dans le bouton.
  2. Sélectionnez le nouvel objet coin, puis dans la fenêtre Propriétés, définissez CornerRadius sur 0.2, 0 pour arrondir les coins.
4. Insérez un objet TextLabel dans le bouton afin de pouvoir afficher un appel à l'action.
5. 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 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 de texte pour 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 s'adapter à 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 Propriétés,
  1. Supprimez la valeur d'Image par défaut.
  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 indiquant que le bouton n'est pas en focus. Les scripts de 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 objet 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 Propriétés, 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 Propriétés,
  1. Supprimez la valeur d'Image par défaut. Les scripts de l'étape 7 insèrent programmatique le portrait du joueur dans le label d'image.
  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 positionner 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 parce que 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érencez les scripts suivants de ReplicatedStorage 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 l'expérience ou respawn dans un tour 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 l'expérience ou respawn dans un tour après que sa santé atteigne zéro, l'interface utilisateur du sélecteur de blaster s'affiche, ils peuvent faire une sélection, et chaque bouton fonctionne comme prévu.

Bouton de blast

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

Pour recréer exactement le bouton de blast dans l'expérience 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 que vous puissiez avoir une idée visuelle de ce à quoi ressemblera le bouton sur l'appareil d'un joueur, puis dans la fenêtre Propriétés,
1. Définissez Image sur rbxassetid://18308375035 pour afficher l'icône du bouton de blast.
2. Définissez PressedImage sur rbxassetid://18308372558 pour afficher une version inversée de l'icône du bouton de blast 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'il corresponde à tous les éléments UI noirs de l'expérience.
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érencez les scripts suivants de ReplicatedStorage dans le fichier d'exemple Laser Tag qui affichent programmatique le bouton de blast lorsque le joueur utilise une saisie tactile sur un appareil acceptant les commandes tactiles.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal affichage de tête (HUD), y compris setupTouchButtonAsync. Après qu'un joueur ait rejoint un tour et sélectionné son blaster, ce script s'assure que tous les éléments UI du HUD s'affichent de manière appropriée 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, lorsqu'un joueur rejoint l'expérience et utilise une saisie tactile sur un appareil acceptant les contrôles tactiles, le bouton de blast s'affiche en haut à droite du bouton de saut.

UI du joueur

Suivant les meilleures pratiques de hiérarchie visuelle tirées de Wireframe Your Layouts, cette section vous apprend comment implémenter tous les éléments UI à l'écran relatifs à l'état du joueur. Ce regroupement d'éléments UI est situé 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 référencent pour déchiffrer rapidement à quelle équipe ils appartiennent dès qu'ils spawnent dans la zone de spawn de leur équipe. L'expérience de laser tag d'exemple fournit deux versions de l'indicateur de joueur en fonction de si le joueur est dans l'équipe verte ou rose.

Suivant les conseils de Sélectionnez un thème de couleur, les deux versions de l'indicateur de joueur combinent la couleur d'équipe avec une icône unique et simple avec un détail minimal afin qu'elles restent lisibles sur de petits écrans. Fournir deux formes de retour visuel est important car cela contribue à garder la conception accessible pour les joueurs souffrant de daltonisme.

Pour recréer exactement le composant indicateur de joueur dans l'expérience 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 Propriétés,
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 positionner le cadre près du bas-gauche de l'écran.
5. Définissez Size sur {0.23, 0},{0.08, 0} pour raccourcir et élargir le cadre.
6. Activez ClipsDescendants pour couper les GuiObjects enfants qui s'étendent au-delà du cadre.
Créez la forme polygonale.
1. Insérez un ImageLabel dans PlayerDisplay.
2. Sélectionnez le nouveau label, puis dans la fenêtre Propriétés,
  1. Définissez Image sur rbxassetid://14304828123 pour afficher l'icône trapèze.
  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 positionner 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 Propriétés, 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 nouveau label, puis dans la fenêtre Propriétés,
  1. Supprimez l'identifiant d'actif d'espace réservé dans la propriété Image. Les scripts de l'étape 7 insèrent programmatique le portrait du joueur dans le label d'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 de l'expérience.
  5. Définissez Name sur PlayerPortrait.
  6. Définissez Position sur {0.11, 0},{1, 0} pour positionner 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 Propriétés, 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 nouveau label, puis dans la fenêtre Propriétés,
  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 positionner le label sur le côté droit de son conteneur (35 % de la gauche à la droite du parent label, et 72 % du haut vers le bas du parent label).
  5. Définissez Size sur {0.52, 0},{0.3, 0} afin que le texte puisse occuper la plupart de l'aire de la forme polygonale (52 % horizontalement et 30 % verticalement du cadre parent).
  6. Définissez FontFace sur Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définissez Weight sur Bold pour épaissir la police.
  8. Supprimez le texte d'espace réservé dans la propriété Text. Les scripts de 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 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 nouveau label, puis dans la fenêtre Propriétés,
    
    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 positionner 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 de l'étape 7.
    
    Dans la fenêtre Propriétés, navigatez 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 nouveau label, puis dans la fenêtre Propriétés,
    
    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 positionner 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 la TeamAIcon dupliquée, puis dans la fenêtre Propriétés,
    
    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 Propriétés, définissez Image sur rbxassetid://14309678549 pour afficher l'icône de l'équipe rose.
Référencez les scripts suivants de ReplicatedStorage 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 tour.

Le script suivant nécessite un ensemble de scripts de module qui fonctionnent ensemble pour configurer le principal affichage de tête (HUD), y compris startSyncingTeamColor, setPlayerName, et setPlayerPortrait. Après qu'un joueur rejoint un tour et sélectionne son blaster, ce script s'assure que tous les éléments UI du HUD s'affichent de manière appropriée 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 rejoint ou rejoint à nouveau le tour 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 du feu de l'équipe ennemie pendant qu'ils rejoignent ou rejoignent à nouveau un tour. Suivant les lignes directrices esthétiques pour les icônes de Choisir un style artistique, l'expérience 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 toute l'interface utilisateur de l'expérience, mais elle communique également l'état du joueur sans texte ni autres indications.

Pour recréer exactement l'écran du champ de force dans l'expérience 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 nouveau label, puis dans la fenêtre Propriétés,
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 faire en sorte que l'image remplisse tout l'écran (100 % horizontalement et 100 % verticalement du parent ScreenGui).
4. Définissez ScaleType sur Tile pour faire en sorte 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 gradient, puis dans la fenêtre Propriétés,
1. Définissez Color sur une séquence de couleur qui commence par du bleu, devient blanc, puis devient à nouveau 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 couleur s'affiche.
    
    Chaque triangle sur l'axe inférieur de la séquence de couleur 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 couleur jusqu'à atteindre une valeur de 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 vif, puis fermez la fenêtre contextuelle.
  5. Cliquez et faites glisser sur la séquence de couleur jusqu'à atteindre une valeur de Time de 0.95, puis ouvrez à nouveau la fenêtre contextuelle Colors, et sélectionnez le même blanc 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 numérique qui donne un aspect scintillant au champ de force.
  1. Cliquez sur la propriété Transparency, puis cliquez sur le bouton ⋯. Une fenêtre contextuelle de séquence numérique s'affiche. Chaque carré au début et à la fin de la séquence numérique 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 dans toute la séquence numérique :
  - 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 l'ImageLabel de l'étape 2.
Sélectionnez l'objet UIGradient dans le label dupliqué, puis dans la fenêtre Propriétés,
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 un aspect plus organique au scintillement.
  1. Cliquez sur la propriété Transparency, puis cliquez sur le bouton ⋯. Une fenêtre contextuelle de séquence numérique s'affiche.
  2. Sélectionnez le troisième keyframe, puis cliquez sur le bouton Delete.
Référencez les scripts suivants de ReplicatedStorage 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 tour.

Le script client ReplicatedStorage.ForceFieldClientVisuals suivant remplace le visuel par défaut ForceField par StarterGui.ForceFieldGui. Lorsque les joueurs entrent dans une expérience et apparaissent sur un SpawnLocation avec une propriété Duration supérieure à 0, le comportement par défaut dans chaque expérience est de fournir à leur avatar un orbe bleu protecteur qui les empêche temporairement 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 l'expérience.

Les visuels de force field en première personne incluent une grille hexagonale futuriste autour 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 qui réapparaît dans l'expérience. — 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 le 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 rejoigne le round après avoir réapparu, le nouvel écran UI de force field s'affiche au lieu des visuels par défaut du ForceField en première personne.

Écran de réapparition

Un écran de réapparition est un élément UI 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 UI est important car il donne aux joueurs le temps de réaliser qu'ils ont été éliminés, et de réfléchir à leur prochaine action avant de rejoindre à nouveau le round actif.

Pour plus d'informations sur le comportement de réapparition personnalisé dans l'expérience de tag laser d'exemple, voir Respawn Characters du curriculum de script de gameplay.

Pour recréer exactement l'écran de réapparition dans l'expérience sample Laser Tag :

Créer la bannière d'information centrale.
1. Insérer un ImageLabel dans l'objet OutStateGui ScreenGui.
  1. Dans la fenêtre Explorer, naviguer vers le service StarterGui.
  2. Survoler son enfant OutStateGui, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
  3. Dans le menu contextuel, insérer un ImageLabel.
2. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Définir AnchorPoint à 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éfinir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définir Position à {0.5, 0},{0.5, 0} pour positionner le label au milieu de son conteneur (50 % de la gauche à la droite du ScreenGui parent, et 50 % du haut vers le bas du ScreenGui parent).
  4. Définir Size à {0.48, 0},{0.06, 0} pour élargir le label (48 % horizontalement et 6 % verticalement du ScreenGui parent).
  5. Définir Name à Block.
  6. Définir Image à rbxassetid://14304827265 pour faire de l'image un trapèze.
  7. Définir ImageColor à 0,0,0 pour rendre le trapèze noir.
  8. Définir ImageTransparency à 0.3 pour réduire l'opacité du label de 30 %, et faire correspondre tous les éléments d'interface utilisateur noirs dans l'expérience.
3. Insérer un UIAspectRatioConstraint dans Block pour s'assurer que l'aspect du label et de ses enfants UI reste le même peu importe la taille de l'écran du joueur.
4. Sélectionner la nouvelle contrainte, puis dans la fenêtre Properties, définir AspectRatio à 13.78.
5. Insérer un TextLabel dans Block pour le texte d'information.
6. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Définir AnchorPoint à 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éfinir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définir Position à {0.5, 0},{0.5, 0} pour positionner le label au milieu de son conteneur parent (50 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
  4. Définir Size à {.85, 0},{0.55, 0} pour que le texte occupe la majeure partie de la zone du trapèze (85 % horizontalement et 55 % verticalement du label parent).
  5. Définir Name à BodyTextLabel.
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Weight à Bold pour épaissir la police.
  8. Définir Text à Respawning….
  9. Définir TextColor3 à 255, 255, 255 pour rendre le texte blanc.
  10. Activer TextScaled.
Créer l'en-tête.
1. Insérer un ImageLabel dans Block.
2. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Définir AnchorPoint à 0.5, 1 pour définir le point d'origine du label au bas du milieu de lui-même (50 % de la gauche à la droite du label, et 100 % du haut vers le bas du label).
  2. Définir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définir Position à {0.5, 0},{0, 0} pour positionner le label en haut du milieu de son conteneur parent (50 % de la gauche à la droite du label parent, et 0 % du haut vers le bas du label parent).
  4. Définir Size à {0.46, 0},{0.56, 0} pour élargir le label (46 % horizontalement et 56 % verticalement du label parent).
  5. Définir Name à Header.
  6. Définir Image à rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
  7. Définir ImageColor à 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érer un TextLabel dans Header pour le texte d'information.
4. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Définir AnchorPoint à 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éfinir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
  3. Définir Position à {0.5, 0},{0.5, 0} pour positionner le label au milieu de son conteneur parent (50 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
  4. Définir Size à {.85, 0},{0.55, 0} pour que le texte occupe la majeure partie de la zone de fondu (85 % horizontalement et 55 % verticalement du label parent).
  5. Définir Name à HeaderTextLabel.
  6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
  7. Définir Weight à Black pour épaissir la police.
  8. Définir Text à TAGGED - YOU'RE OUT!
  9. Définir TextColor3 à 255, 255, 255 pour rendre le texte blanc.
  10. Activer TextScaled.
Créer le fondu autour des bords de l'écran.
1. Insérer un ImageLabel dans OutStateGui.
2. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Définir AnchorPoint à 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éfinir BackgroundColor3 à 0,0,0 pour définir la couleur d'arrière-plan du label en noir.
  3. Définir BackgroundTransparency à 0.5 pour rendre l'arrière-plan du label à moitié transparent.
  4. Définir Position à {0.5, 0},{0.5, 0} pour positionner le label au milieu de son conteneur (50 % de la gauche à la droite du ScreenGui parent, et 50 % du haut vers le bas du ScreenGui parent).
  5. Définir Size à {1, 0},{1, 0} pour élargir le label sur tout l'écran (100 % horizontalement et 100 % verticalement du ScreenGui parent).
  6. Définir ZIndex à -1 pour afficher le fondu derrière les autres éléments UI.
  7. Définir Name à Header.
  8. Définir Image à rbxassetid://14309518613 pour faire de l'image un fondu de bordure.
  9. Définir ImageTransparency à 0.1 pour rendre le fondu légèrement translucide.
Pour améliorer les performances, vous pouvez ignorer l'asset d'image et utiliser plutôt un objet UIGradient avec une séquence numérique de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir UI Appearance Modifiers - Gradient.
Référencez le script ReplicatedStorage suivant dans le fichier d'expérience 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 respawn, 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 Handle Client State du curriculum 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'UI sauf l'exception donnée
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contient une liste des guis qui doivent être activés exclusivement.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Activer la caméra afin que les joueurs puissent regarder autour d'eux 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 force field 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'ils sont dans le lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Cacher tout le HUD pendant qu'ils sont dans le lobby
	setGuiExclusivelyEnabled(nil)

	-- Désactiver le blaster pendant qu'ils sont dans le lobby
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

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

-- Gé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)

-- S'assurer que les changements sont toujours appliqués après 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 ressuscite dans sa zone de spawn.

Maintenant que vous êtes familiarisé avec les objets GuiObjects courants pour l'UI à 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'expérience sample laser tag .rbxl comme référence, ou ajuster les valeurs pour répondre aux exigences de gameplay de votre propre expérience.

Créer des objets SurfaceGui

Pour afficher l'UI sur la surface d'une partie dans l'espace 3D qui réagit à la logique de script pour chaque joueur individuel, vous pouvez parenté un objet SurfaceGui à la partie où vous souhaitez afficher votre UI dans le service ReplicatedStorage. Cette technique garantit que votre UI et sa logique de script sont disponibles à la fois pour le serveur et au client de chaque joueur.

Les objets SurfaceGui contiennent tous les GuiObjects qui affichent sur la surface d'une partie dans l'espace 3D. L'expérience de tag laser d'exemple n'inclut qu'une seule instance d'un objet SurfaceGui : le compteur de cooldown 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, survoler le service ReplicatedStorage, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
Dans le menu contextuel, insérer un objet Part.
Insérer un objet ScreenGui dans la partie.
Renommer le SurfaceGui en fonction du contexte de ses éléments UI enfants.
Répéter ce processus pour chaque élément UI que vous devez afficher sur la surface d'une partie dans l'espace 3D.

Compteur de cooldown

Un compteur de cooldown est un composant UI 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 tag laser.

Pour recréer exactement le compteur de cooldown dans l'expérience sample Laser Tag :

Créer une partie pour tenir votre objet SurfaceGui.
1. Dans la fenêtre Explorer, survoler Workspace, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
2. Dans le menu contextuel, insérer une partie block. Ceci est un emplacement temporaire pour la partie afin que vous puissiez visualiser les changements à chaque étape du processus.
Positionner et orienter la partie autour de la position où le personnage d'un joueur tiendrait son blaster, puis dans la fenêtre Properties,
1. Définir Transparency à 1 pour rendre la partie complètement transparente.
2. Définir Name à CooldownBarPrefab.
3. Définir Size à 0.169, 0.027, 2.537 pour mettre à l'échelle la partie à une taille d'environ la longueur du blaster.
4. Désactiver CanCollide et CanQuery.
Insérer un SurfaceGui dans CooldownBarPrefab.
Sélectionner le nouveau SurfaceGui, puis dans la fenêtre Properties,
1. Définir Face à Top pour que l'UI s'affiche face vers le haut.
2. Définir LightInfluence et MaxDistance à 0.
3. Définir PixelsPerStud à 200.
Créer la barre noire.
1. Insérer un ImageLabel dans le SurfaceGui.
2. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Supprimer la valeur par défaut de Image.
  2. Définir AnchorPoint à 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éfinir BackgroundColor3 à 0,0,0 pour définir la couleur d'arrière-plan du label en noir.
  4. Définir BackgroundTransparency à 0.4 pour rendre l'arrière-plan du label semi-transparent.
  5. Définir Position à {0.5, 0},{0.5, 0} pour positionner le label au milieu de son conteneur (50 % de la gauche à la droite du SurfaceGui parent, et 50 % du haut vers le bas du SurfaceGui parent).
  6. Définir Size à {1, 0},{1, 0} pour élargir le label sur toute la partie (100 % horizontalement et 100 % verticalement du parent SurfaceGui).
  7. Définir Name à Container.
Arrondir les coins du conteneur.
1. Insérer un objet UICorner dans Container.
2. Sélectionner le UICorner, puis dans la fenêtre Properties, définir CornerRadius à 0.15, 0 pour légèrement arrondir les coins.
Créer la barre rouge.
1. Insérer un ImageLabel dans Container.
2. Sélectionner le nouveau label, puis dans la fenêtre Properties,
  1. Supprimer la valeur par défaut de Image.
  2. Définir AnchorPoint à 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éfinir BackgroundColor3 à 172, 13, 13 pour définir la couleur d'arrière-plan du label en rouge foncé.
  4. Définir BackgroundTransparency à 0.2 pour rendre l'arrière-plan du label légèrement transparent.
  5. Définir Name à Bar.
  6. Définir Position à {1, 0},{0.5, 0} pour positionner 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éfinir Size à {0, 0},{1, 0} pour allonger le label jusqu'en haut de son 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.
Arrondir les coins du label.
1. Insérer un objet UICorner dans Bar.
2. Sélectionner le UICorner, puis dans la fenêtre Properties, définir CornerRadius à 0.15, 0 pour légèrement arrondir les coins.
Déplacer CooldownBarPrefab vers ReplicatedStorage.
1. Créer une structure de dossier pour organiser vos objets UI. L'échantillon utilise un dossier Instances avec un dossier enfant Guis.
2. Déplacer CooldownBarPrefab dans Guis.
Référencez les scripts ReplicatedStorage suivants dans le fichier d'expérience sample Laser Tag qui attachent programatiquement le compteur de cooldown 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 fonctionnent ensemble pour mettre en place des visuels de blaster qui semblent plus réalistes pour le gameplay de tag laser, 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 cooldown car elle est parentée au rig
		rigModel:Destroy()
		rigModel = nil
	end
end

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

-- Lien du rig à la caméra si elle existe
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Mettre à jour la position du rig en fonction de la position de la caméra et de 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)
	-- Supprimer les visuels lorsque le joueur sélectionne un blaster ou est dans le lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Ajouter les visuels de nouveau lorsque le joueur a terminé 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 cooldown s'anime pour communiquer quand le joueur peut tirer à nouveau.

Créer des objets BillboardGui

Pour afficher des éléments UI dans l'espace 3D qui réagissent à la logique de script et sont toujours face à la caméra de chaque joueur, peu importe leur angle de vue, tels que les noms de 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.

L'expérience de tag laser 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 - S'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 selon le but de chaque conteneur. Pour démontrer, dans les sections immédiates qui suivent, vous apprendrez comment mettre en œuvre des éléments UI pour les deux types d'indicateurs dans l'expérience de tag laser d'exemple. Vous pouvez ajuster n'importe quelle partie du processus pour répondre aux spécifications de votre propre expérience.

Pour créer un objet BillboardGui :

Dans la fenêtre Explorer, survoler un BasePart ou Attachment, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
Dans le menu contextuel, insérer un objet BillboardGui.
Renommer le BillboardGui en fonction du contexte de ses éléments UI enfants.
Répéter ce processus pour chaque élément UI que vous devez afficher au-dessus de la tête des joueurs.

Indicateur d'équipe

Un indicateur d'équipe est un élément UI qui informe les joueurs à quelle équipe appartiennent les autres joueurs dans le round afin qu'ils puissent facilement différencier leurs alliés des membres de l'équipe ennemie. Cette information est importante car le gameplay d'une expérience de tir à la première personne nécessite que les joueurs prennent des décisions stratégiques rapides lorsqu'ils se trouvent 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 l'expérience sample Laser Tag :

Insérer un objet BillboardGui dans un rig temporaire.
1. Depuis l'onglet Home ou Avatar de la barre d'outils, cliquer sur Character.
2. Sélectionner parmi les options disponibles. L'échantillon utilise un type de rig R15, une forme de corps féminine, et un avatar Rthro. Le rig s'affiche à la fois dans le champ de vision 3D et dans la fenêtre Explorer sous le nom Rig.
3. Dans la fenêtre Explorer, naviguer vers le maillage Head du rig, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
4. Dans le menu contextuel, insérer un BillboardGui.
Sélectionner le nouveau BillboardGui, puis dans la fenêtre Properties,
1. Définir LightInfluence à 0 pour empêcher la lumière environnementale d'affecter la couleur de l'indicateur.
2. Définir Name à OtherPlayerIndicatorPrefab.
3. Définir Size à {0, 10},{0, 10} pour rendre le label significativement plus petit.
4. Définir StudsOffsetWorldSpace à 0, 4, 0 pour le positionner au-dessus de la tête du rig.
Insérer un objet Frame dans OtherPlayerIndicatorPrefab.
Sélectionner le nouveau cadre, puis dans la fenêtre Properties,
1. Définir AnchorPoint à 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éfinir BackgroundColor3 à 255, 3, 0 pour définir la couleur d'arrière-plan du cadre en rouge comme couleur de remplacement.
3. Définir Position à {0.5, 0},{0.5, 0} pour centrer le cadre dans son conteneur (50 % de la gauche à la droite de la parent BillboardGui, et 50 % du haut vers le bas de la parent BillboardGui).
4. Définir Size à {1, -2},{1, -2} pour réduire le cadre à la surface de la BillboardGui.
Insérer un objet UICorner dans Frame pour arrondir complètement les coins.
Insérer un objet UIStroke dans Frame pour contourer le cercle de l'indicateur.
Déplacer OtherPlayerIndicatorPrefab vers ReplicatedStorage.
Référencez le script ReplicatedStorage suivant dans le fichier d'expérience sample 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 cachés.

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. Si ceux-ci n'ont pas déjà d'indicateur d'équipe, le script clone et ajoute l'UI otherPlayerIndicatorPrefab au Head du personnage, et définit la couleur de l'indicateur d'équipe à 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 occulter.


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'ajouter des indicateurs qu'aux joueurs participant au round
		if not otherPlayer.Team then
			return
		end

		-- Éviter d'ajouter des indicateurs en double, créer un nouveau seulement 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 seulement 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 d'autres joueurs à moins qu'ils ne soient dans l'équipe ennemie et derrière un objet.

Indicateur d'élimination

Un indicateur d'élimination est un élément UI 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'une expérience de tir à la première personne nécessite que les joueurs se déplacent vers leur prochaine cible dès qu'ils éliminent un joueur afin de ne pas devenir vulnérables dans l'arène en restant trop longtemps au même endroit.

Pour recréer exactement l'indicateur d'élimination dans l'expérience sample Laser Tag :

Insérer un objet BillboardGui dans un rig temporaire afin de visualiser les changements à chaque étape du processus.
1. Depuis l'onglet Home ou Avatar de la barre d'outils, cliquer sur Character.
2. Sélectionner parmi les options disponibles. L'échantillon utilise un type de rig R15, une forme de corps masculine, et un avatar Rthro. Le rig s'affiche à la fois dans le champ de vision 3D et dans la fenêtre Explorer sous le nom Rig.
3. Dans la fenêtre Explorer, naviguer vers le maillage Head du rig, puis cliquer sur l'icône ⊕. Un menu contextuel s'affiche.
4. Dans le menu contextuel, insérer un BillboardGui.
Sélectionner le nouveau BillboardGui, puis dans la fenêtre Properties,
1. Définir LightInfluence à 0 pour empêcher la lumière environnementale d'affecter la couleur de l'indicateur.
2. Définir Name à TaggedOutIndicatorGuiPrefab.
3. Définir Size à {3, 0},{0.5, 0} pour élargir l'espace pour un label.
4. Définir StudsOffset à 0, 3.25, 0 pour le positionner au-dessus de la tête d'un joueur.
Insérer un objet ImageLabel dans TaggedOutIndicatorGuiPrefab.
Sélectionner le nouveau label, puis dans la fenêtre Properties,
1. Définir AnchorPoint à 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éfinir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définir Name à Frame.
4. Définir Position à {0.5, 0},{0.5, 0} pour centrer le label dans son conteneur (50 % de la gauche à la droite de la parent BillboardGui, et 50 % du haut vers le bas de la parent BillboardGui).
5. Définir Size à {1, 0},{1, 0} pour élargir le label sur l'ensemble de la BillboardGui (100 % horizontalement et 100 % verticalement de la parent BillboardGui).
6. Définir Image à rbxassetid://14304826985 pour faire de l'image un fondu multidirectionnel.
7. Définir ImageColor à 245, 46, 46 pour teinter le label en rouge.
Pour améliorer les performances, vous pouvez ignorer l'asset d'image et utiliser plutôt un objet UIGradient avec une séquence numérique de transparence personnalisée. Pour en savoir plus sur cette technique de fondu, voir UI Appearance Modifiers - Gradient.
Insérer un objet TextLabel dans Frame.
Sélectionner le nouveau label, puis dans la fenêtre Properties,
1. Définir AnchorPoint à 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éfinir BackgroundTransparency à 1 pour rendre l'arrière-plan du label complètement transparent.
3. Définir Name à BodyTextLabel.
4. Définir Position à {0.5, 0},{0.5, 0} pour centrer le label dans son conteneur (50 % de la gauche à la droite du label parent, et 50 % du haut vers le bas du label parent).
5. Définir Size à {0.85, 0},{0.7, 0} pour que le texte prenne la majeure partie de la zone de fondu (85 % horizontalement et 70 % verticalement de l'image label parent).
6. Définir FontFace à Montserrat pour s'adapter à l'esthétique futuriste.
7. Définir Weight à Bold pour épaissir la police.
8. Définir Text à TAGGED.
9. Définir TextColor3 à 255, 255, 255 pour rendre le texte blanc.
10. Activer TextScaled.
Déplacer TaggedOutIndicatorGuiPrefab vers ReplicatedStorage.
Référencez les scripts ServerScriptService suivants dans le fichier d'expérience sample Laser Tag 1A qui affichent programatiquement l'indicateur d'élimination pendant qu'un joueur respawn dans la zone de spawn de son équipe.

Le script serveur ServerScriptService.SetupHumanoid suivant s'exécute dès qu'un joueur charge l'expérience. Il s'assure 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 aparitions de personnage 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 leur tête jusqu'à ce qu'ils respawn.

Félicitations pour avoir complété le Curriculum de Design 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 de A à Z, vous pouvez étendre votre projet avec une nouvelle UI et des fonctionnalités, ou suivre d'autres curricula de tutoriels, tels que le Gameplay Scripting Curriculum qui vous enseigne l'organisation générale et les détails clés de mise en œuvre de l'expérience de tag laser d'exemple. Bonne création !