Créer des compteurs HUD

Un HUD ou écran de tête est un ensemble d'éléments d'interface utilisateur qui sont toujours visibles ou accessibles pendant le partie, tels que les affichages de score, les compteurs de santé et les boutons de menu.L'inclusion d'un HUD est essentielle pour la plupart des expériences car il affiche des informations qui aident les joueurs à réussir dans leurs objectifs de jeu.

Un élément HUD commun est un compteur de santé avec une icône à gauche qui peut être adapté en barre de temps, barre de progression ou similaire.

In-game view showing custom health meter in upper-right region.

En utilisant station spatiale dangereuse comme lieu de départ et fondamentaux d'interface utilisateur - compteur HUD comme emplacementde référence terminé, ce tutoriel montre :

Mise en place et utilisation du simulateur d'appareil pour tester votre conception sur plusieurs écrans émulés.
Utilisation de StarterGui comme conteneur de conception et de stockage à la fois.
Comment positionner/dimensionner les éléments d'interface utilisateur autour des contrôles Roblox intégrés et des notches/îles de périphérique, tels que le notch de la caméra sur les téléphones modernes.
Comment remplacer le compteur de santé par défaut de Roblox par votre propre compteur et le connecter au niveau de santé du personnage.
Comment animer la partie centrale du compteur de santé et définir sa couleur entre cinq points de gradation de couleur (rouge, orange, jaune, citron vert, vert).

Activer l'émulateur de périphérique

Roblox est par nature cross-plateforme, car les joueurs peuvent découvrir et rejoindre des expériences sur un PC ou une console, puis plus tard prendre leur téléphone et poursuivre là où ils ont off.Les appareils mobiles (téléphones et tablettes) ont la moins grande quantité d'espace d'écran, il est donc important que vos éléments d'interface utilisateur s'adaptent à des écrans plus petits et soient clairement visibles pour les joueurs.

Le meilleur moyen de tester les conceptions d'interface utilisateur sur plusieurs plates-formes est l'émulateur de périphérique de Studio .Cet outil fournit une sélection prédéfinie de dispositifs et vous permet d'ajouter vos propres préset personnalisés.

Ouvrez le modèle station spatiale dangereuse dans Studio.
Dans l'onglet test , activez l'outil appareil .
À partir de la barre directement au-dessus de la fenêtre de jeuprincipale, sélectionnez une émulation de téléphone telle que iPhone X ou Samsung Galaxy A51 .Ensuite, définissez la taille de la vue sur S'adapter à la fenêtre pour utiliser l'espace maximum dans Studio.

Créer un conteneur d'écran

Un conteneur ScreenGui contient des objets d'interface utilisateur (GuiObjects) à afficher sur l'écran d'un joueur (dans ce tutoriel, l'intégralité du compteur de santé).Pour afficher un ScreenGui et ses objets enfants à chaque joueur qui rejoint l'expérience, placez-le à l'intérieur du conteneur StarterGui.Lorsqu'un joueur rejoint et que son personnage apparaît pour la première fois, le ScreenGui et son contenu se clonent dans le conteneur PlayerGui pour ce joueur, situé dans le conteneur Players.

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

Pour insérer un vide ScreenGui :

Dans la fenêtre Explorateur , localisez le conteneur StarterGui.
Passez la souris sur le conteneur, cliquez sur le bouton ⊕ et insérez un ScreenGui .
Renommez le nouveau conteneur HUDContainer pour refléter son but.

Utiliser des zones sûres

Les téléphones modernes tirent parti de l'ensemble de l'écran, mais incluent généralement des encoches, des découpes et d'autres éléments qui occupent de l'espace d'écran.Chaque expérience Roblox inclut également les contrôles de barre supérieure pour un accès rapide au menu principal, chat, classement, et plus encore.

Mobile device showing Roblox top bar buttons and device cutout.

Pour assurer que les joueurs peuvent voir et accéder à toutes les interfaces utilisateur sans obstruction, Roblox fournit la propriété qui contrôle les insérats de la zone de sécurité pour le contenu d'un .Chaque objet d'interface utilisateur que vous positionnez à l'intérieur d'un ScreenGui est relatif aux limites d'insertion.

Mobile device showing the core UI safe area.

Bien que la valeur par défaut de CoreUISafeInsets garantisse que tous les objets d'interface utilisateur restent clairs de l'interface utilisateur et des coupes d'appareil de Roblox, DeviceSafeInsets peut être une meilleure option pour utiliser l'espace d'écran limité, comme illustré ci-dessous.

CoreUISafeInsets garde le compteur dégagé de toutes les obstructions, mais il ajoute un grand écart entre le compteur et le bord supérieur physique de l'écran.

Dans la fenêtre Explorateur , sélectionnez HUDContainer .
Dans la fenêtre propriétés, définissez la propriété ScreenInsets à DeviceSafeInsets.

Définir le rembourrage des bords

Avec ScreenInsets défini à DeviceSafeInsets, le contenu peut désormais s'étendre directement jusqu'au bord physique du écran.Cependant, une petite quantité de rembourrage peut aider à pousser le compteur de santé (et d'autres objets à l'intérieur du conteneur) légèrement loin des bords de l'écran pour un aspect plus propre et pour les empêcher d'être coupés.

Screen container with padding around all edges.

Une façon d'appliquer un rembourrage à un conteneur d'interface utilisateur est par l'insertion d'un modifieur UIPadding :

Insérez un modifieur UIPadding dans HUDContainer .
Avec l'objet nouveau sélectionné, entrez une valeur de pour tous les bords du conteneur ( , , , ).Cela s'applique au rembourrage de 16 pixels autour du conteneur, indépendamment de la résolution de l'écran.

Construire le compteur de santé

Avec le conteneur d'écran configuré, vous pouvez commencer à construire le compteur de santé en utilisant des objets d'interface utilisateur Roblox tels que cadres et un étiquette d'image.

Basic components used for the health meter.

Créer le cadre parent

Semblable aux applications de conception comme Figma et Photoshop, un Frame dans Roblox sert de conteneur pour d'autres objets d'interface utilisateur.Pour ce tutoriel, l'ensemble de la jauge de santé sera contenu dans un seul cadre parent, ce qui facilite sa réposition sur différents modèles HUD.

Insérez un Frame dans HUDContainer . La nouvelle fenêtre apparaît dans le coin supérieur gauche comme un carré blanc vide.

Si la nouvelle fenêtre n'apparaît pas dans la fenêtre de jeud'affichage, assurez-vous d'avoir activé recouvrement GUI dans le widget Options de visualisation dans le coin supérieur droit de la fenêtre de jeu3D, ou d'avoir activé visibilité de l'interface utilisateur dans l'onglet Affichage ».
Renommez l'instance de cadre nouvelle à MeterBar .

Positionner le cadre

Dans Roblox, la position d'un objet d'interface utilisateur est représentée par un ensemble de coordonnées UDim2 contenant des valeurs Scale et Offset pour les axes X et Y :

Scale les valeurs représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnel de toute valeur Offset.
Offset les valeurs représentent le nombre de pixels pour déplacer l'objet sur l'axe correspondant, additionnel de toute valeur Scale.

Pour positionner un objet d'interface utilisateur dans le coin supérieur droit du conteneur d'écran, Scale est la meilleure approche car une valeur X de 1 (100%) représente le bord droit du conteneur, indépendamment de la taille physique des pixels de l'écran.De même, une valeur de Y échelle de 0 (0%) représente le bord supérieur du conteneur.

Scale ranges for the X and Y axes of a container.

En outre, vous devrez définir un point d'ancrage supérieur droit pour que la fenêtre parent définisse son point d'origine.Les valeurs acceptables se situent entre 0 et 1 , relatives à la taille de l'objet, donc une valeur d'ancrage de 1, 0 met le point d'ancrage du cadre dans son coin supérieur droit.

Frame anchor point in its upper-right corner.

Dans la fenêtre Explorateur , sélectionnez le cadre barre de mesure que vous avez inséré précédemment.
Dans la fenêtre propriétés , entrez 1, 0, 0, 0 pour Position et appuyez sur Enter .Studio ajoutera automatiquement les parenthèses pour former le UDim2 de {1, 0},{0, 0} ..
Entrez 1, 0 pour la propriété AnchorPoint.Le cadre devrait maintenant être positionné dans le coin supérieur droit de la zone de sécurité de l'appareil , légèrement enfoncé à partir du bord en raison du rembourrage .

Redimensionner le cadre

Comme la position, le Size d'un objet d'interface utilisateur est représenté par un ensemble de coordonnées UDim2 contenant des valeurs Scale et Offset pour les axes X et Y .

Par défaut, la taille du nouveau cadre est de {0, 100},{0, 100} , ce qui signifie 100 pixels dans la largeur ( X ) et la hauteur ( Y ).Bien que la valeur de pixel stricte soit utile dans certains cas, de nombreux éléments d'interface utilisateur s'adaptent plus rapidement à travers plusieurs écrans lorsqu'ils sont réglés à un pourcentage de de la taille globale du conteneur d'écran.

Avec le cadre barre de mesure sélectionné, accédez à la fenêtre propriétés et naviguez jusqu'à la propriété ».
Entrez une valeur de 0.35, 0, 0.05, 0 pour définir une taille de pourcentage de 35% large et de 5% haut avec aucun décalage de pixel ajouté.

Stylez le cadre

Par défaut, Frames sont remplis en blanc solide.Le dernier compteur de santé devrait avoir une teinte plus sombre et légèrement opaque, ainsi qu'un contour sombre, afin de se démarquer mieux sur les fonds clairs et sombres.

Frame styled with opacity, border, and rounded corners.

Avec le cadre barre de mesure sélectionné, entrez 0 pour la propriété BackgroundColor3.Studio le convertira automatiquement en valeur RGB de .
Entrez 0.75 pour la propriété BackgroundTransparency.Dans Roblox, la transparence varie de à pour être entièrement opaque à pour être entièrement transparente, donc équivaut à 25 % d'opacité dans d'autres applications telles que Figma ou Photoshop.
Insérez un objet UIStroke puissant modifiant l'interface utilisateur qui ajoute un contour personnalisable au cadre.
Avec la nouvelle sélection UIStroke, définissez les propriétés suivantes :
- Thickness = 3
- Transparency = 0.25 (75 % opaque)

Pour finaliser le style du cadre de compteur, vous pouvez arrondir les coins pour former une forme de "pilule" au lieu d'un rectangle aiguisé.

Insérez une instance UICorner dans le cadre MeterBar .
Avec la nouvelle sélection sélectionnée, définissez le à .L'utilisation d'une valeur de échelle de (50%) au lieu d'une valeur de pixel est particulièrement pratique pour la barre de compteur car elle garantit une courbe complètement arrondie, peu importe la hauteur ou la largeur du conteneur.

Créer le remplissage intérieur

Maintenant que la partie du cadre contenant le compteur de santé est terminée, vous pouvez ajouter une partie de remplissage intérieur inner fill pour représenter la santé variable du personnage.Puisqu'il n'a besoin que d'être une région remplie de solide, un sous-enfant Frame à l'intérieur du cadre parent est approprié.

Inner fill frame added to parent frame to represent the character's variable health.

Insérez un enfant Frame dans le cadre MeterBar .
Renommez l'instance de cadre nouvelle à InnerFill .
Avec remplissage intérieur sélectionné, définissez les propriétés suivantes :
- AnchorPoint = 0, 0.5 (bord gauche et centre vertical)
- Position = 0, 0, 0.5, 0
- Size = 1, 0, 1, 0
Puisque les enfants de cadres sont positionnés et dimensionnés par rapport à leur parent, l'utilisation d'une échelle remplit le cadre intérieur de la largeur et de la hauteur du parent, à partir de l'extrémité gauche du parent.
Pour correspondre à la forme de "pilule" de la fenêtre parent, insérez un supplément de UICorner dans Remplissage intérieur .
Avec le nouvel modifieur sélectionné, définissez sa propriété à pour correspondre à la forme "pilule" du cadre parent MeterBar .
Pour mieux représenter le fait qu'un compteur complet indique une bonne santé, sélectionnez Remplissage intérieur et définissez sa propriété à (dans une tâche ultérieure, vous scripterez cette couleur pour qu'elle change en fonction de la santé réelle).

Ajouter l'icône

Pour indiquer plus clairement le but du compteur, vous pouvez ajouter une balise d'image à la gauche, dans ce cas un cœur rouge qui symbolise généralement la santé ou la vie.

Insérez un ImageLabel dans le cadre Barre de mesure . Cet objet vous permet d'appliquer une ressource d'image 2D qui a été téléchargée en tant qu'autocollant sur Roblox.
Renommez l'instance de label nouvelle à icône .
Avec icône sélectionnée, définissez sa propriété à >.Bien que les objets d'interface utilisateur nouvellement insérés se superposent toujours devant les objets insérés précédemment, ce changement garantit que l'icône s'affiche toujours devant les éléments du cadre du compteur.
Localisez la propriété de l'icône et entrez , la référence à une image de cœur préchargée (si vous le souhaitez, vous pouvez importer votre propre image et utiliser son ID de ressource).
Pour garantir que l'icône ImageLabel reste toujours à un rapport d'aspect de 1:1, insérez un UIAspectRatioConstraint.Bien que cette contrainte puisse être personnalisée pour contrôler la proportionnalité de l'aspect, vous pouvez laisser ses valeurs par défaut intactes.
Avec icône sélectionnée, finalisez l'apparence et la position en modifiant les propriétés suivantes :
- AnchorPoint = 0.5, 0.5 (ancre centrale)
- BackgroundTransparency = 1 (100% transparent)
- Position = 0, 0, 0.5, 0 (côté gauche du compteur et centre vertical)
- Size = 2, 0, 2, 0 (200% de la taille globale du cadre MeterBar , contraint à 1:1 par le UIAspectRatioConstraint )

Contraindre la taille

Bien que la hauteur d'échelle de (5%) à 16:9 ou plus ait l'air bonne sur les écrans de téléphone modernes et les moniteurs de jeu, le compteur peut sembler légèrement trop grand sur les écrans de tablette et les téléphones plus anciens.Vous pouvez vérifier cela en émulant une tablette comme iPad 7e génération à partir de émulateur d'appareil .

Device Emulator set to emulate a tablet device.

Emulation on tablet device with meter bar taller than desired.

Pour maintenir la hauteur de la barre de compteur plus cohérente avec des écrans plus larges, vous pouvez appliquer un UISizeConstraint pour limiter la hauteur maximale des pixels.

Insérez un UISizeConstraint dans le cadre Barre de mesure .
Avec la nouvelle contrainte sélectionnée, définissez sa propriété MaxSize à inf, 20 pour restreindre sa hauteur à 20 pixels tout en appliquant aucune restriction de largeur.

Maintenant, la barre de compteur maintient une hauteur plus cohérente entre les écrans plus larges et plus hauts.

Remplacer le compteur de santé par défaut

Les expériences Roblox incluent un compteur de santé par défaut qui devient visible lorsque les personnages subissent des dommages.Si vous gardez le compteur par défaut visible, il dupliquera et potentiellement chevauchera le compteur personnalisé.

Default health meter overlapping and duplicating the custom health meter.

Désactiver le compteur par défaut

Pour désactiver le compteur de santé par défaut, vous utiliserez un script client ( LocalScript ) dans StarterPlayerScripts qui appelle StarterGui:SetCoreGuiEnabled() .

Dans la fenêtre Explorateur , étendez le conteneur StarterPlayer et localisez le conteneur StarterPlayerScripts à l'intérieur.
Insérez un nouveau LocalScript dans le conteneur et renommez-le en Masquer le compteur de santé par défaut pour décrire son but.Les scripts dans StarterPlayerScripts s'exécutent automatiquement lorsque le joueur local rejoint une expérience, ce qui en fait un conteneur idéal pour exécuter un script qui cache définitivement le compteur par défaut.

Lorsque vous insérez un nouveau script, il s'ouvre automatiquement dans une nouvelle fenêtre d'éditeur de scripts (s'il ne l'est pas, double-cliquez sur le script dans la fenêtre Explorateur ).

Collez le code suivant à l'intérieur du script HideDefaultHealthMeter :

Masquer le compteur de santé par défaut
local StarterGui = game:GetService("StarterGui")

-- Masquer le compteur de santé par défaut
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

Explication du code

Ligne	Objectif
1	Obtient une référence à un service de base service, StarterGui, qui représente le même conteneur dans lequel vous avez créé le compteur de santé personnalisé et dont le contenu se clone dans le conteneur PlayerGui pour chaque joueur qui rejoint l'expérience
4	Appelle la méthode du service SetCoreGuiEnabled() et indique au compteur de santé par défaut d'être désactivé (false).

Si vous testez l'expérience maintenant et subissez des dommages, vous remarquerez que le compteur par défaut est désactivé et caché (vous scripterez le compteur personnalisé pour refléter les modifications de santé dans la section suivante).

Écouter les changements de santé

Tous les modèles de personnage Roblox par défaut contiennent une classe Humanoid qui fournit des comportements et des fonctionnalités spéciaux au personnage, tels que le réglage de sa vitesse de marche/course et la gestion de sa santé.Health modifications sur le serveur répliquer aux clients de chaque joueur et vous pouvez détecter ces modifications pour mettre à jour à la fois la taille et la couleur du compteur de santé personnalisé.

Dans la fenêtre Explorateur , localisez le conteneur dans >.
Insérez un nouveau LocalScript dans le conteneur et renommez-le en mettre à jour le compteur personnalisé pour décrire son but.Les scripts dans StarterCharacterScripts s'exécutent automatiquement à chaque fois que le personnage du joueur apparaît, ce qui en fait un conteneur idéal pour exécuter un script qui réinitialise entièrement le compteur de santé à chaque réapparition.

Dans la fenêtre de l'éditeur pour le script UpdateCustomMeter , collez le code suivant :

Mise à jour du compteur personnalisé
local Players = game:GetService("Players")

-- Référence au joueur local, au personnage et à l'humanoïde
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- Référence au cadre intérieur de la barre de compteur
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Couleurs de séquence graduée (rouge, orange, jaune, citron vert, vert)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- Fonction pour obtenir la couleur dans une séquence de gradients à partir du point fractionnel
local function getColorFromSequence(fraction: number): Color3
	-- Chaque couleur dans la gradation définit le début et/ou la fin d'une section
	local numSections = #gradient - 1

	-- Chaque section représente une partie de 1
	local sectionSize = 1 / numSections

	-- Déterminez dans quelle section la fraction demandée tombe
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Obtenez les couleurs au début et à la fin de la section
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normaliser la fraction pour être un nombre allant de 0 à 1 dans la section
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp entre le début et la fin en fonction de la fraction normalisée
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- Calculer la nouvelle santé en pourcentage du maximum
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- Définir la barre sur de nouvelles cibles de taille/couleur
	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
end

-- Écouter les changements de santé des humanoïdes
humanoid.HealthChanged:Connect(onHealthChanged)

-- Initialement définir (ou réinitialiser) la taille et la couleur de la barre à la santé actuelle
onHealthChanged()

Explication du code

Lignes	Objectif
4 ‑ 6	Obtient des références à la local Player , leur modèlisationCharacter et la classe Humanoid à l'intérieur.
9 ‑ 10	Obtient une référence à l'objet remplissage intérieur du compteur qui doit être redimensionné et recoloré en fonction des changements de santé du personnage.
13 ‑ 19	Déclare un ensemble de cinq couleurs (rouge, orange, jaune, lime, vert) pour recolorer le compteur à différents points ; par exemple, vert pour 100% de santé, jaune pour 50%, rouge pour 0%, ou un mélange à n'importe quelle fraction entre les points clés.
22 ‑ 41	Fonction d'aide qui renvoie la combinaison de couleurs entre n'importe quel point de couleur degradé.
43 ‑ 50	Fonction qui gère tout changement de santé.Ici, il calcule la nouvelle santé en pourcentage de la santé du caractère , redimensionne Remplissage intérieur à ce pourcentage de santé, et recolore à la couleur retournée par la fonction ».
53	La connexion principale événement qui détecte les modifications Health du serveur et appelle la fonction onHealthChanged().
56	Initialement (au moment de la génération ou de la réapparition du personnage), appellez la fonction onHealthChanged() pour définir la taille et la couleur de Remplissage intérieur au pourcentage correct.Typiquement, ce sera la largeur complète et verte.

Si vous testez l'expérience maintenant, vous remarquerez que le compteur personnalisé met à jour correctement la taille et la couleur à mesure que le personnage subit des dommages :

Par défaut, le système de mesure de la santé Roblox inclut un effet de guérison progressive qui permet aux personnages de régénérer lentement la santé.Si vous souhaitez désactiver cet effet, insérez un vide Script nommé santé dans le conteneur StarterCharacterScripts.Cela empêchera le script interne par défaut de se charger pour chaque personnage de joueur, en supprimant efficacement l'effet de régénération.

Animer la barre de compteur

Pour ajouter un niveau supplémentaire de polonais à la mesure personnalisée, vous pouvez animer les changements de santé via tweening , en modifiant progressivement la taille et la couleur de la barre de mesure pendant plus de ½ seconde.

Accédez à l'onglet éditeur de scripts pour le script UpdateCustomMeter que vous avez édité précédemment.

Sélectionnez toutes les lignes ( CtrlA ou ⌘A ) et collez-les ensuite ( CtrlV ou ⌘V ) avec le code suivant :

Mise à jour du compteur personnalisé
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

-- Référence au joueur local, au personnage et à l'humanoïde
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- Propriétés d'adolescent
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- Référence au cadre intérieur de la barre de compteur
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Couleurs de séquence graduée (rouge, orange, jaune, citron vert, vert)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- Fonction pour obtenir la couleur dans une séquence de gradients à partir du point fractionnel
local function getColorFromSequence(fraction: number): Color3
	-- Chaque couleur dans la gradation définit le début et/ou la fin d'une section
	local numSections = #gradient - 1

	-- Chaque section représente une partie de 1
	local sectionSize = 1 / numSections

	-- Déterminez dans quelle section la fraction demandée tombe
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Obtenez les couleurs au début et à la fin de la section
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normaliser la fraction pour être un nombre allant de 0 à 1 dans la section
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp entre le début et la fin en fonction de la fraction normalisée
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- Calculer la nouvelle santé en pourcentage du maximum
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- Glisser la barre vers de nouvelles cibles de taille/couleur
	local tweenGoal = {
		Size = UDim2.new(healthFraction, 0, 1, 0),
		BackgroundColor3 = getColorFromSequence(healthFraction)
	}
	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
	meterBarTween:Play()
end

-- Écouter les changements de santé des humanoïdes
humanoid.HealthChanged:Connect(onHealthChanged)

-- Initialement définir (ou réinitialiser) la taille et la couleur de la barre à la santé actuelle
onHealthChanged()

Ajouts/modifications de clés >

Lignes	Objectif
2	Obtient une référence à TweenService pour implémenter la fonctionnalité de mise en sourdine dans le script.
10	Crée un constructeur TweenInfo qui définit la durée de l'tweenprévue, le style d'amorçage et la direction d'amorçage .
52 ‑ 57	Au lieu de simplement définir la taille et la couleur de la barre comme dans la version précédente, déclare une table tweenGoal avec la taille/couleur cible, crée une nouvelle pré-adolescente en utilisant les paramètres tweenInfo et tweenGoal, et joue la nouvelle tween.

Si vous testez l'expérience maintenant, vous remarquerez que les adolescents métriques personnalisés se situent entre chaque changement de santé :

Ajouter un effet de dommage

Le système de compteur de santé par défaut inclut une teinte rouge légère et subtile aux bords de l'écran lorsque le personnage est endommagé.En désactivant le compteur par défaut , cet effet est supprimé, mais vous pouvez le remplacer par votre propre implémentation.

Accédez à l'onglet éditeur de scripts pour le script UpdateCustomMeter que vous avez édité précédemment.

Sélectionnez toutes les lignes et collez-les avec le code suivant :

Mise à jour du compteur personnalisé
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

-- Référence au joueur local, au personnage et à l'humanoïde
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- Propriétés d'adolescent
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- Variable pour stocker/缓存 le santé du personnage
local cachedHealth = humanoid.Health / humanoid.MaxHealth

-- Obtenir (ou créer un nouvel) effet de correction de couleur à l'intérieur de la caméra du joueur
local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
colorCorrection.Name = "DamageColorEffect"

-- Référence au cadre intérieur de la barre de compteur
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- Couleurs de séquence graduée (rouge, orange, jaune, citron vert, vert)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- Fonction pour obtenir la couleur dans une séquence de gradients à partir du point fractionnel
local function getColorFromSequence(fraction: number): Color3
	-- Chaque couleur dans la gradation définit le début et/ou la fin d'une section
	local numSections = #gradient - 1

	-- Chaque section représente une partie de 1
	local sectionSize = 1 / numSections

	-- Déterminez dans quelle section la fraction demandée tombe
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- Obtenez les couleurs au début et à la fin de la section
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- Normaliser la fraction pour être un nombre allant de 0 à 1 dans la section
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- Lerp entre le début et la fin en fonction de la fraction normalisée
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- Calculer la nouvelle santé en pourcentage du maximum
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- Glisser la barre vers de nouvelles cibles de taille/couleur
	local tweenGoal = {
		Size = UDim2.new(healthFraction, 0, 1, 0),
		BackgroundColor3 = getColorFromSequence(healthFraction)
	}
	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
	meterBarTween:Play()

	-- Afficher l'effet des dommages si la nouvelle santé est inférieure à la santé en mémoire tampon
	if healthFraction < cachedHealth then
		-- Enregistrer une nouvelle valeur de santé
		cachedHealth = healthFraction

		-- Définir la correction de couleur sur rouge comme teinte initiale avant la transition
		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
		colorCorrection.Saturation = 2.5

		-- Revenir à la teinte blanche (neutre et sans changement de teinte par rapport à la normale)
		local colorCorrectionTweenGoal = {
			TintColor = Color3.fromRGB(255, 255, 255),
			Saturation = 0
		}
		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
		colorCorrectionTween:Play()
	end
end

-- Écouter les changements de santé des humanoïdes
humanoid.HealthChanged:Connect(onHealthChanged)

-- Initialement définir (ou réinitialiser) la taille et la couleur de la barre à la santé actuelle
onHealthChanged()

Ajouts/modifications de clés >

Lignes	Objectif
14	Définissez une référence de remplacement ( cachedHealth ) pour suivre la quantité de santé du personnage entre les modifications, afin que vous puissiez comparer si une modification est inférieure (dommages).
17 ‑ 18	Lors du régénération, apparitioninitial du personnage, crée une nouvelle à l'intérieur de la instance actuelle du joueur, ou obtient une référence à la même instance lors des réapparitions ultérieures.En parentalant cet effet de post-traitement à la caméra du joueur, il ne s'applique qu'à son écran local, et non à l'écran de chaque joueur sur le serveur.
68 ‑ 83	Effectue d'abord une vérification conditionnelle pour confirmer que le changement de santé est inférieur à la valeur cachedHealth indiquant des dommages ; si c'est le cas, il définit cachedHealth à la nouvelle valeur.Ensuite, il définit la teinte à (rouge) avec une plus grande saturation, puis tweene la teinte de retour à la valeur par défaut de blanc neutre ( ) sans saturation.

Si vous testez l'expérience maintenant, vous remarquerez que l'écran clignote brièvement en rouge chaque fois que le personnage subit des dommages :

Si vous décidez d'adapter la barre de compteur personnalisée à un autre but, comme un compteur de mana ou un compteur de poison, vous pouvez modifier le TintColor à la ligne 73 en quelque chose de plus approprié à l'événement, comme le bleu clair ( [200, 225, 255] ) ou le vert toxique ( [0, 255, 75] ) .

Si votre compteur de santé ne correspond pas à l'apparence ou au comportement affiché dans ce tutoriel, rappelez-vous que vous pouvez inspecter fondamentaux de l'interface utilisateur - compteur HUD comme modèle de référence terminé.

Sur cette page