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 jeu, tels que les affichages de score, les compteurs de santé et les boutons de menu. Inclure un HUD est essentiel 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 courant est un compteur de santé avec une icône à gauche qui peut être adapté en barre de chronométrage, barre de progression, ou similaire.

En utilisant le Hazardous Space Station comme point de départ et Fondamentaux de l'UI - Compteur HUD comme référence finale, ce tutoriel montre :

• Configuration et utilisation de l'Émulateur de Dispositif pour tester votre conception sur plusieurs écrans émulés.
• Utilisation de StarterGui comme conteneur de design et de stockage.
• Comment positionner/redimensionner les éléments d'interface utilisateur autour des contrôles Roblox intégrés et des encoches/îlots des dispositifs, comme l'encoche de caméra sur les téléphones modernes.
• Comment remplacer le compteur de santé Roblox par défaut 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 couleurs (rouge, orange, jaune, lime, vert).

Activer l'Émulateur de Dispositif

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

La meilleure façon de tester des conceptions d'interface utilisateur sur différentes plateformes est d'utiliser l'Émulateur de Dispositif de Studio. Cet outil fournit une sélection préétablie 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 Émulateur de Dispositif.

3. Dans la barre juste au-dessus de la fenêtre principale, sélectionnez une émulation de téléphone telle que iPhone X ou Samsung Galaxy A51. Ensuite, définissez la taille de vue sur Adapter à la Fenêtre pour utiliser l'espace maximum dans Studio.

   

Créer un conteneur d'écran

Un conteneur ScreenGui contient des objets UI (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.

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 objectif.

   

Utiliser les zones sûres

Les téléphones modernes utilisent l'intégralité de l'écran mais comprennent généralement des encoches, découpes et autres éléments qui occupent de l'espace à l'écran. Chaque expérience Roblox comprend également les contrôles de barre supérieure pour un accès rapide au menu principal, chat, classement, 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 insets de zone sûre pour le contenu d'un ScreenGui. Chaque objet UI 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 de l'interface utilisateur restent dégagés de l'UI de Roblox et des découpes de l'appareil, DeviceSafeInsets peut être une meilleure option pour utiliser un 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 défini sur DeviceSafeInsets, le contenu peut maintenant s'étendre directement jusqu'au bord supérieur de l'écran. Cependant, une petite quantité de rembourrage peut aider à éloigner le compteur de santé (et d'autres objets dans le conteneur) légèrement des bords de l'écran pour un aspect plus propre et pour éviter qu'ils ne soient coupés.

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

1. Insérez un modificateur UIPadding dans HUDContainer.

   

2. Avec le nouvel objet UIPadding sélectionné, saisissez 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, quel 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é à l'aide d'objets UI Roblox tels que cadres et un label d'image.

Créer le cadre parent

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

1. Insérez un Frame dans HUDContainer. Le nouveau cadre apparaît dans le coin supérieur gauche sous la forme d'un carré blanc vide.

   

   Si le nouveau cadre n'apparaît pas dans la fenêtre de visualisation, assurez-vous que vous avez activé Superposition GUI depuis le widget Options de Visualisation dans le coin supérieur droit de la fenêtre 3D.

2. Renommez la nouvelle instance de cadre en MeterBar.

   

Positionner le cadre

Dans Roblox, la position d'un objet UI 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, additionné de toutes les valeurs Offset.
• Les valeurs Offset représentent combien de pixels déplacer l'objet sur l'axe correspondant, additionnées de toutes les valeurs Scale.

Pour positionner un objet UI 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, quel que soit la taille physique des pixels de l'écran. De même, une valeur d'échelle 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, relatives à 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, saisissez 1, 0, 0, 0 pour Position et appuyez sur Entrée. Studio ajoutera automatiquement les crochets pour former le UDim2 de {1, 0},{0, 0}.

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

   

Redimensionner le cadre

Comme la position, la Size d'un objet UI 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 à la fois en largeur (X) et en hauteur (Y). Bien qu'une valeur pixel stricte soit utile dans certains cas, de nombreux éléments de l'interface utilisateur s'adaptent de manière plus réactive sur plusieurs écrans lorsqu'ils sont définis comme un 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. Saisissez une valeur de 0.35, 0, 0.05, 0 pour définir une taille en pourcentage de 35 % de largeur et 5 % de hauteur sans ajout de décalage pixels.

   

Styliser le cadre

Par défaut, les Frames sont remplis d'un blanc solide. Le compteur de santé final doit avoir un remplissage plus sombre et légèrement opaque, ainsi qu'un contour sombre, afin de mieux se détacher 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 modificateur UI puissant 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 "en gousse" au lieu d'un rectangle pointu.

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

   

2. Avec le nouvel UICorner sélectionné, définissez la propriété CornerRadius sur 0.5, 0. L'utilisation d'une valeur échelle de 0.5 (50 %) au lieu d'une valeur pixel est particulièrement pratique pour la barre de compteur car elle garantit un courbe complètement arrondie peu importe la hauteur ou la largeur du conteneur.

   

Créer le remplissage interne

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

1. Insérez un Frame enfant 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

   Comme les enfants des cadres sont positionnés et redimensionnés par rapport à leur parent, l'utilisation de l'échelle permet au cadre interne de remplir toute la largeur et la hauteur du parent, en commençant par le bord gauche du parent.

   

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

   

5. Avec le nouveau modificateur UICorner sélectionné, définissez sa propriété CornerRadius sur 0.5, 0 pour correspondre à la forme "en gousse" 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 un label 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 de label en Icon.

   

3. Avec Icon sélectionné, définissez sa propriété ZIndex sur 2. Bien que les objets UI 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 du 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 désiré, vous pouvez importer votre propre image et utiliser son ID d'actif).

   

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

   

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

   • AnchorPoint = 0.5, 0.5 (ancre au centre)
   • 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éphones modernes et les moniteurs de jeu qui ont un rapport d'aspect de 16:9 ou plus large, le compteur peut avoir l'air légèrement trop haut sur les écrans de tablettes 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 maintenir la hauteur de la barre de compteur plus constante entre les écrans larges, vous pouvez appliquer une UISizeConstraint pour limiter la hauteur maximale en pixels.

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

   

2. Avec la nouvelle contrainte sélectionnée, définissez sa propriété MaxSize sur inf, 20 pour limiter sa hauteur à 20 pixels tout en imposant aucune restriction de largeur.

   

Maintenant, la barre de compteur maintient une hauteur plus constante 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 dégâts. Si vous maintenez le compteur par défaut visible, il se duplicera et pourrait éventuellement superposer 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) à l'intérieur de 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 objectif. Les scripts à l'intérieur de 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.

   

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 principal service, 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 l'expérience.
   4	Appelle la méthode SetCoreGuiEnabled() du service et ordonne que le compteur de santé par défaut soit désactivé (false).

Si vous testezi l'expérience 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 prochaine section).

Écouter les changements de santé

Tous les modèles de personnages Roblox par défaut 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 répliquent à chaque client du 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 objectif. Les scripts à l'intérieur de 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, personnage et humanoïde
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Référence au cadre interne 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 une 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éterminez à quelle section la fraction demandée appartient
   	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
   
   	-- Normalisez la fraction pour être un nombre de 0 à 1 dans la section
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Executez une interpolation entre le début et la fin en fonction de la fraction normalisée
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calculez 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
   
   -- Écoutez les changements de santé de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialiser (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, au 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é en fonction des changements de santé du personnage.
   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 point clé de couleur de dégradé.
   43‑50	Fonction qui gère tous 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 renvoyée par la fonction getColorFromSequence().
   53	La principale connexion d'événement 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 définir la taille et la couleur de InnerFill au bon pourcentage. En général, cela sera la pleine largeur et la couleur verte.

Si vous testezi l'expérience maintenant, vous remarquerez que le compteur personnalisé se met à jour correctement à la fois en taille et en couleur au fur et à 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, en 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, personnage, et 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 interne 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 une 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éterminez à quelle section la fraction demandée appartient
   	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
   
   	-- Normalisez la fraction pour être un nombre de 0 à 1 dans la section
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Executez une interpolation entre le début et la fin en fonction de la fraction normalisée
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calculez 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
   
   -- Écoutez les changements de santé de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialiser (ou réinitialiser) la taille/couleur de la barre à la santé actuelle
   onHealthChanged()

   Principales Ajouts/Modifications

   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 prévue du tween, le style d'easing, et la direction d'easing.
   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 testezi l'expérience maintenant, vous remarquerez que le compteur personnalisé s'anime 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 mise en œuvre.

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, personnage, et 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/cache la santé du personnage
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obtenez (ou créez 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 interne 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 une 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éterminez à quelle section la fraction demandée appartient
   	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
   
   	-- Normalisez la fraction pour être un nombre de 0 à 1 dans la section
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Executez une interpolation entre le début et la fin en fonction de la fraction normalisée
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calculez 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()
   
   	-- Affichez l'effet de dégâts si la nouvelle santé est inférieure à la santé cachée
   	if healthFraction < cachedHealth then
   		-- Cachez la nouvelle valeur de santé
   		cachedHealth = healthFraction
   
   		-- Réglez la correction de couleur sur rouge comme teinte initiale avant tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween la teinture vers le 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
   
   -- Écoutez les changements de santé de l'humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initialiser (ou réinitialiser) la taille/couleur de la barre à la santé actuelle
   onHealthChanged()

   Principales Ajouts/Modifications

   Lignes	But
   14	Définit une référence de stockage (cachedHealth) pour suivre le montant de santé du personnage entre les changements, afin de pouvoir comparer si un changement est inférieur (dommages).
   17‑18	Lors de la première apparition 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 de réapparitions ultérieures. En matière de cet effet de post-traitement sur la caméra du joueur, cela ne s'applique qu'à leur écran local, pas à l'écran de chaque joueur sur le serveur.
   68‑83	Tout d'abord, effectue 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 teinture de l'ColorCorrectionEffect à [255, 25, 25] (rouge) avec une saturation plus élevée, puis tweene la teinture vers la valeur par défaut de blanc neutre ([255, 255, 255]) sans saturation.

Si vous testezi l'expérience maintenant, vous remarquerez que l'écran scintille brièvement en rouge chaque fois que le personnage subit des dégâts :