Créer des compteurs HUD

Un HUD ou Affichage Tête Haute est un ensemble d'éléments d'interface utilisateur qui sont toujours visibles ou accessibles pendant le gameplay, tels que les affichages de score, les compteurs de santé et les boutons de menu. Inclure un HUD est essentiel pour la plupart des jeux car il affiche des informations qui aident les joueurs à réussir dans leurs objectifs de jeu.

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

En utilisant Hazardous Space Station comme point de départ et UI Fundamentals - HUD Meter comme référence terminée, ce tutoriel démontre :

• Configuration et utilisation de l'Émulateur de Dispositif pour tester votre design sur plusieurs écrans émulés.
• Utilisation de StarterGui comme conteneur de design et de stockage.
• Comment positionner/redimensionner les éléments de l'interface utilisateur autour des contrôles Roblox intégrés et des encoches/îlots de dispositifs, tels que l'encoche 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 clés de dégradé de couleur (rouge, orange, jaune, lime, vert).

Activer l'Émulateur de Dispositif

Roblox est intrinsèquement multiplateforme, car les joueurs peuvent découvrir et rejoindre des jeux sur leur téléphone ou tablette, puis continuer plus tard là où ils s'étaient arrêtés sur leur PC ou console. Les appareils mobiles (téléphones et tablettes) ont le moins d'espace d'écran, il est donc important que vos éléments d'interface utilisateur s'adaptent aux petits écrans et qu'ils soient clairement visibles pour les joueurs.

Le meilleur moyen de tester les designs d'interface utilisateur sur plusieurs plateformes est l'Émulateur de Dispositif de Studio. Cet outil fournit une sélection prédéfinie de dispositifs et vous permet d'ajouter vos propres préréglages personnalisés.

1. Ouvrez le modèle Hazardous Space Station dans Studio.

2. Dans le menu Test de Studio, activez l'Émulateur de Dispositif.

3. Dans la barre directement au-dessus de la vue principale, 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 Ajuster à 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 le jeu, 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.

Pour insérer un ScreenGui vide :

1. Dans la fenêtre Explorer, localisez le conteneur StarterGui.

   

2. Survolez le conteneur, cliquez sur le bouton ⊕ et insérez un ScreenGui.

   

3. Renommez le nouveau conteneur en HUDContainer pour refléter son but.

   

Utiliser des zones sûres

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

Pour garantir que les joueurs peuvent voir et accéder à tous les éléments de l'interface utilisateur sans obstruction, Roblox fournit la propriété ScreenInsets qui contrôle les zones sûres pour le contenu d'un ScreenGui. Chaque objet d'interface utilisateur que vous positionnez à l'intérieur d'un ScreenGui est relatif aux limites des insets.

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

1. Dans la fenêtre Explorer, sélectionnez HUDContainer.

   

2. Dans la fenêtre Propriétés, définissez la propriété ScreenInsets sur DeviceSafeInsets.

   

Définir le rembourrage des bords

Avec ScreenInsets réglé sur DeviceSafeInsets, le contenu peut maintenant s'étendre directement jusqu'au bord supérieur physique de l'écran. Cependant, une petite quantité de rembourrage peut aider à éloigner légèrement le compteur de santé (et d'autres objets à l'intérieur du conteneur) des bords de l'écran pour une apparence plus propre et pour éviter qu'ils ne soient coupés.

Une façon d'appliquer un rembourrage à un conteneur d'interface utilisateur est d'insérer un modificateur UIPadding :

1. Insérez un modificateur UIPadding dans HUDContainer.

   

2. Avec le nouvel objet UIPadding sélectionné, entrez une valeur de 0, 16 pour tous les bords du conteneur (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Cela applique un rembourrage de 16 pixels tout autour du conteneur, quelle que soit 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 une étiquette d'image.

Créer le cadre parent

Semblable aux applications de design comme Figma et Photoshop, un Frame dans Roblox sert de conteneur pour d'autres objets d'interface utilisateur. Pour ce tutoriel, l'intégralité du compteur de santé sera contenue dans un seul cadre parent, ce qui facilite son repositionnement à travers divers agencements de HUD.

1. Insérez un Frame dans HUDContainer. Le nouveau cadre apparaît dans le coin supérieur gauche comme un carré blanc vide.

   

   Si le nouveau cadre n'apparaît pas dans la vue, assurez-vous d'avoir activé superposition GUI à partir du widget Options de Visualisation dans le coin supérieur droit de la vue 3D.

2. Renommez la nouvelle instance de cadre en 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 :

• Les valeurs Scale représentent un pourcentage de la taille du conteneur le long de l'axe correspondant, additionnelles à toutes les valeurs Offset.
• Les valeurs Offset représentent combien de pixels déplacer l'objet sur l'axe correspondant, additionnelles à toutes les valeurs 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, quelle que soit la taille physique en pixels de l'écran. De même, une valeur de Y de 0 (0%) représente le bord supérieur du conteneur.

De plus, vous devrez définir un point d'ancrage supérieur droit pour le cadre parent afin de définir son point d'origine. Les valeurs acceptables sont comprises entre 0 et 1, par rapport à la taille de l'objet, donc une valeur d'ancrage de 1, 0 place le point d'ancrage du cadre dans son coin supérieur droit.

1. Dans la fenêtre Explorer, sélectionnez le cadre MeterBar que vous avez inséré précédemment.

   

2. Dans la fenêtre Propriétés, entrez 1, 0, 0, 0 pour Position et appuyez sur Enter. Studio ajoutera automatiquement les crochets pour former le UDim2 de {1, 0},{0, 0}.

3. Entrez 1, 0 pour la propriété AnchorPoint. Le cadre devrait maintenant être positionné dans le coin supérieur droit de la zone sûre du dispositif, légèrement en retrait du bord en raison du rembourrage.

   

Redimensionner le cadre

Comme pour la position, la Size 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.

Par défaut, la taille du nouveau cadre est {0, 100},{0, 100}, ce qui signifie 100 pixels de largeur (X) et de hauteur (Y). Bien qu'une valeur stricte en pixels soit utile dans certains cas, de nombreux éléments d'interface utilisateur s'adaptent plus facilement sur plusieurs écrans lorsqu'ils sont définis en tant que pourcentage de la taille globale du conteneur d'écran.

1. Avec le cadre MeterBar sélectionné, accédez à la fenêtre Propriétés et naviguez jusqu'à la propriété Size.

2. Entrez une valeur de 0.35, 0, 0.05, 0 pour définir une taille en pourcentage de 35% de large et 5% de haut sans décalages en pixels ajoutés.

   

Styliser le cadre

Par défaut, les Frames sont remplis de blanc solide. Le compteur de santé final devrait avoir un remplissage plus sombre et légèrement opaque, ainsi qu'un contour sombre, afin de mieux se démarquer sur des arrière-plans clairs et sombres.

1. Avec le cadre MeterBar sélectionné, entrez 0 pour la propriété BackgroundColor3. Studio le convertira automatiquement en valeur RGB de [0, 0, 0].

2. Entrez 0.75 pour la propriété BackgroundTransparency. Dans Roblox, la transparence varie de 0 pour complètement opaque à 1 pour complètement transparent, donc 0.75 équivaut à 25% d'opacité dans d'autres applications telles que Figma ou Photoshop.

   

3. Insérez un objet UIStroke, un puissant modificateur d'interface utilisateur qui ajoute un contour personnalisable au cadre.

   

4. Avec le nouvel UIStroke sélectionné, définissez les propriétés suivantes :

   • Thickness = 3
   • Transparency = 0.25 (75% opaque)

   

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

1. Insérez une instance UICorner dans le cadre MeterBar.

   

2. Avec le nouvel modificateur UICorner sélectionné, définissez le CornerRadius sur 0.5, 0. Utiliser une valeur de scale de 0.5 (50%) au lieu d'une valeur en pixels est particulièrement pratique pour la barre de compteur car cela garantit une courbe complètement arrondie peu importe la hauteur ou la largeur que prend le conteneur.

   

Créer le remplissage intérieur

Maintenant que le cadre contenant du compteur de santé est complet, vous pouvez ajouter une portion de remplissage intérieur pour représenter la santé variable du personnage. Comme il doit seulement être une région remplie solide, un sous-enfant Frame à l'intérieur du cadre parent est approprié.

1. Insérez un enfant Frame dans le cadre MeterBar.

2. Renommez la nouvelle instance de cadre en InnerFill.

   

3. Avec InnerFill 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

   Étant donné que les enfants des cadres sont positionnés et dimensionnés par rapport à leur parent, l'utilisation de l'échelle permet au cadre intérieur de remplir la largeur et la hauteur complètes du parent, en commençant par le bord gauche du parent.

   

4. Pour correspondre à la forme "pilule" du cadre parent, insérez un UICorner supplémentaire dans InnerFill.

   

5. Avec le nouvel modificateur UICorner sélectionné, définissez sa propriété CornerRadius sur 0.5, 0 pour correspondre à la forme "pilule" du cadre parent MeterBar.

   

6. Pour mieux représenter qu'un compteur plein indique une bonne santé, sélectionnez InnerFill et définissez sa propriété BackgroundColor3 sur [0, 225, 50] (dans une tâche ultérieure, vous scripterez cette couleur pour changer en fonction de la santé réelle).

   

Ajouter l'icône

Pour indiquer plus clairement l'objectif du compteur, vous pouvez ajouter une étiquette d'image sur le côté gauche, dans ce cas un cœur rouge qui symbolise couramment la santé ou la vie.

1. Insérez un ImageLabel dans le cadre MeterBar. Cet objet vous permet d'appliquer un actif d'image 2D qui a été téléchargé en tant que décalque sur Roblox.

2. Renommez la nouvelle instance d'étiquette en Icon.

   

3. Avec Icon sélectionné, définissez sa propriété ZIndex sur 2. Bien que les objets d'interface utilisateur nouvellement insérés se superposent toujours aux objets insérés précédemment, ce changement garantit que l'icône s'affiche toujours devant les éléments de cadre du compteur.

   

4. Localisez la propriété Image de l'icône et entrez rbxassetid://91715286435585, la référence à une image de cœur pré-téléchargée (si vous le souhaitez, vous pouvez importer votre propre image et utiliser son ID d'actif).

   

5. Pour garantir que l'icône ImageLabel reste toujours à un rapport d'aspect de 1:1, insérez un UIAspectRatioConstraint. Bien que ce contraint ait des propriétés personnalisables pour contrôler le rapport d'aspect, vous pouvez laisser ses valeurs par défaut intactes.

   

6. Avec Icon sélectionné, finalisez l'apparence et la position en changeant les propriétés suivantes :

   • AnchorPoint = 0.5, 0.5 (ancrage central)
   • 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 qu'une hauteur d'échelle de 0.05 (5%) ait l'air bien sur les écrans de téléphone modernes et les moniteurs de jeu qui ont un rapport d'aspect de 16:9 ou plus large, le compteur peut sembler légèrement trop haut sur les écrans de tablette et les anciens téléphones. Vous pouvez vérifier cela en émulant une tablette comme l'iPad 7ème Génération depuis l'Émulateur de Dispositif.

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

1. Insérez un UISizeConstraint dans le cadre MeterBar.

   

2. Avec la nouvelle contrainte sélectionnée, définissez sa propriété MaxSize sur inf, 20 pour restreindre sa hauteur à 20 pixels tout en n'imposant 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 jeux Roblox incluent un compteur de santé par défaut qui devient visible lorsque les personnages subissent des dégâts. Si vous gardez le compteur par défaut visible, il se dupliquera et pourrait potentiellement chevaucher le compteur personnalisé.

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

1. Dans la fenêtre Explorer, développez le conteneur StarterPlayer et localisez le conteneur StarterPlayerScripts à l'intérieur.

   

2. Insérez un nouveau LocalScript dans le conteneur et renommez-le en HideDefaultHealthMeter pour décrire son but. Les scripts dans StarterPlayerScripts s'exécutent automatiquement lorsque le joueur local rejoint un jeu, ce qui en fait un conteneur idéal pour exécuter un script qui cache définitivement le compteur par défaut.

   

3. Lorsque vous insérez un nouveau script, il s'ouvre automatiquement dans un nouvel onglet de l'éditeur de script (s'il ne s'ouvre pas, double-cliquez sur le script dans la fenêtre Explorer).

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

   HideDefaultHealthMeter

   local StarterGui = game:GetService("StarterGui")
   
   -- Cacher le compteur de santé par défaut
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Explication du code

   Ligne	But
   1	Obtient une référence à un service de base, StarterGui, qui représente le même conteneur où vous avez créé le compteur de santé personnalisé et dont le contenu se clone dans le conteneur PlayerGui pour chaque joueur qui rejoint le jeu.
   4	Appelle la méthode SetCoreGuiEnabled() du service et demande que le compteur de santé par défaut soit désactivé (false).

Si vous testez le jeu maintenant et subissez des dégâts, vous remarquerez que le compteur par défaut est désactivé et caché (vous scripterez le compteur personnalisé pour réfléter les changements de santé dans la section suivante).

Écouter les changements de santé

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

1. Dans la fenêtre Explorer, localisez le conteneur StarterCharacterScripts à l'intérieur de StarterPlayer.

   

2. Insérez un nouveau LocalScript dans le conteneur et renommez-le en UpdateCustomMeter 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 complètement le compteur de santé à chaque réapparition.

   

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

   UpdateCustomMeter

   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 de dégradé (rouge, orange, jaune, lime, 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 la séquence de dégradé à partir d'un point fractionnaire
   local function getColorFromSequence(fraction: number): Color3
   	-- Chaque couleur dans le dégradé définit le début et/ou la fin d'une section
   	local numSections = #gradient - 1
   
   	-- Chaque section représente une portion de 1
   	local sectionSize = 1 / numSections
   
   	-- Détermine dans quelle section la fraction demandée se situe
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenir 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 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 à de nouvelles cibles de taille/couleur
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Écouter les changements de santé de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialement définir (ou réinitialiser) la taille/couleur de la barre à la santé actuelle
   onHealthChanged()

   Explication du code

   Lignes	But
   4‑6	Obtient des références au Player local, à son modèle Character, et à la classe Humanoid à l'intérieur.
   9‑10	Obtient une référence à l'objet InnerFill du compteur qui doit être redimensionné et recoloré à mesure que la santé du personnage change.
   13‑19	Déclare un tableau de cinq couleurs (rouge, orange, jaune, lime, vert) pour recolorer le compteur à divers 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'assistance qui retourne le mélange de couleur entre n'importe quel des points clés de couleur du dégradé.
   43‑50	Fonction qui gère les changements de santé. Ici, elle calcule la nouvelle santé en pourcentage du MaxHealth du personnage, redimensionne InnerFill à ce pourcentage d'échelle, et le recolore à la couleur retournée par la fonction getColorFromSequence().
   53	La connexion à l'événement principal qui détecte les changements de Health répliqués depuis le serveur et appelle la fonction onHealthChanged().
   56	Initialement (lors de l'apparition ou de la réapparition du personnage) appelle la fonction onHealthChanged() pour dimensionner et colorer InnerFill au bon pourcentage. Typiquement, cela sera la pleine largeur et verte.

Si vous testez le jeu maintenant, vous remarquerez que le compteur personnalisé met à jour correctement à la fois la taille et la couleur à mesure que le personnage subit des dégâts :

Animer la barre de compteur

Pour ajouter un niveau supplémentaire de finition au compteur personnalisé, vous pouvez animer les changements de santé par le biais de tweening, changeant progressivement la taille et la couleur de la barre de compteur sur ½ seconde.

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

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

   UpdateCustomMeter

   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 de tween
   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 de dégradé (rouge, orange, jaune, lime, 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 la séquence de dégradé à partir d'un point fractionnaire
   local function getColorFromSequence(fraction: number): Color3
   	-- Chaque couleur dans le dégradé définit le début et/ou la fin d'une section
   	local numSections = #gradient - 1
   
   	-- Chaque section représente une portion de 1
   	local sectionSize = 1 / numSections
   
   	-- Détermine dans quelle section la fraction demandée se situe
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenir 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 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)
   
   	-- Tween 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é de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialement définir (ou réinitialiser) la taille/couleur de la barre à la santé actuelle
   onHealthChanged()

   Ajouts/Changements clés

   Lignes	But
   2	Obtient une référence à TweenService pour implémenter la fonctionnalité de tweening dans le script.
   10	Crée un constructeur TweenInfo qui définit la durée du tween prévu, le style d'assouplissement, et la direction d'assouplissement.
   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 un tableau tweenGoal avec la taille/couleur cible, crée un nouveau tween en utilisant les paramètres tweenInfo et tweenGoal, et joue le nouveau tween.

Si vous testez le jeu maintenant, vous remarquerez que le compteur personnalisé effectue un tween entre chaque changement de santé :

Ajouter un effet de dégâts

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

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

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

   UpdateCustomMeter

   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 de tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variable pour stocker/cacher la santé du personnage
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obtenir (ou créer un nouveau) 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 de dégradé (rouge, orange, jaune, lime, 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 la séquence de dégradé à partir d'un point fractionnaire
   local function getColorFromSequence(fraction: number): Color3
   	-- Chaque couleur dans le dégradé définit le début et/ou la fin d'une section
   	local numSections = #gradient - 1
   
   	-- Chaque section représente une portion de 1
   	local sectionSize = 1 / numSections
   
   	-- Détermine dans quelle section la fraction demandée se situe
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenir 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 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)
   
   	-- Tween 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 de dégâts si la nouvelle santé est inférieure à la santé mise en cache
   	if healthFraction < cachedHealth then
   		-- Mettre en cache la nouvelle valeur de santé
   		cachedHealth = healthFraction
   
   		-- Définir la correction de couleur sur rouge comme teinte initiale avant le tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween la teinte de retour au blanc (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é de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialement définir (ou réinitialiser) la taille/couleur de la barre à la santé actuelle
   onHealthChanged()

   Ajouts/Changements clés

   Lignes	But
   14	Définit une référence de remplacement (cachedHealth) pour suivre la quantité de santé du personnage entre les changements, afin que vous puissiez comparer si un changement est inférieur (dommages).
   17‑18	Lors de l'apparition initiale du personnage, crée un nouvel ColorCorrectionEffect à l'intérieur de la Camera actuelle du joueur, ou obtient une référence à la même instance lors des réapparitions ultérieures. En parentant 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 de cachedHealth, indiquant des dégâts ; si c'est le cas, il définit cachedHealth sur la nouvelle valeur. Ensuite, il définit la teinte de l'ColorCorrectionEffect sur [255, 25, 25] (rouge) avec une saturation plus élevée, puis tweens la teinte de retour à la valeur par défaut de blanc neutre ([255, 255, 255]) sans saturation.

Si vous testez le jeu maintenant, vous remarquerez que l'écran clignote brièvement en rouge chaque fois que le personnage subit des dégâts :