Créer une interface utilisateur interactive

Un HUD (Heads-Up Display) dans votre jeu affiche généralement des éléments d'interface utilisateur non interactifs tels que le compteur de santé démontré dans Créer des compteurs HUD. De plus, presque tous les jeux nécessitent une interface utilisateur interactive comme des boutons qui réagissent à l'activation du joueur, s'animent lorsqu'ils sont activés, font apparaître/disparaître des menus avec d'autres contrôles interactifs, etc.

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

• Comment positionner un bouton de paramètres le long du bord supérieur de l'écran.
• Conception d'un menu de paramètres contenant des curseurs interactifs et glissables.
• Utilisation d'un ModuleScripts pour former des modules "contrôleur" pour un contrôle extensible des objets UI avec des déclarations d'état.
• Comment connecter des boutons à l'activation du joueur pour faire apparaître/disparaître le menu de paramètres.
• Comment connecter des curseurs UI glissables pour ajuster séparément le volume des effets sonores et de l'ambiance de fond.

Activer l'émulateur de périphérique

Comme noté dans Créer des compteurs HUD, les téléphones et les tablettes ont le moins d'espace 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. Si vous ne l'avez pas encore fait, activez l'émulateur de périphérique dans Studio :

1. Ouvrez le modèle UI Fundamentals - HUD Meter dans Studio.

2. Dans le menu Test de Studio, activez Émulateur de périphérique.

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 le bouton de paramètres

GuiButtons sont des éléments d'interface utilisateur interactifs avec des fonctionnalités intégrées telles que l'événement multi-plateforme Activated qui se déclenche lorsque le bouton est cliqué ou touché. La classe GuiButton s'étend à deux variations, TextButton et ImageButton, et ce tutoriel utilise un ImageButton en forme de "roue dentée" pour ouvrir ou fermer le menu de paramètres.

Pour construire le bouton de paramètres :

1. Dans la fenêtre Explorer, localisez HUDContainer à l'intérieur de StarterGui.

   

2. Insérez un ImageButton dans HUDContainer et renommez-le en SettingsButton.

   

3. Avec le nouveau bouton sélectionné, définissez les éléments suivants dans la fenêtre Propriétés :

   • AnchorPoint = 0.5, 0.25 (centre horizontal et quart supérieur vertical)
   • BackgroundTransparency = 1 (entièrement transparent)
   • Position = 0.5, 0, 0, 0 (positionnement centre-haut)
   • Size = 0.1, 0, 0.1, 0 (10% de la hauteur de l'écran une fois le rapport d'aspect contraint)
   • Image = rbxassetid://104919049969988 (ID d'actif du symbole "roue dentée")

4. Insérez un UIAspectRatioConstraint dans le bouton avec les propriétés par défaut (rapport 1:1 largeur/hauteur).

   

5. Pour limiter la hauteur maximale en pixels du bouton, insérez un UISizeConstraint et définissez son MaxSize sur inf, 44.

   

   

   

Créer le menu de paramètres

Le nouveau bouton de paramètres sera scripté pour ouvrir et fermer un menu de paramètres, donnant aux joueurs un accès à la demande aux paramètres ou à d'autres informations. Dans ce tutoriel, le menu contiendra des curseurs interactifs pour ajuster indépendamment les niveaux de volume de l'audio de fond et des effets sonores.

Créer le cadre parent

Comme noté dans Créer des compteurs HUD, un Frame sert de conteneur pour d'autres objets UI. L'ensemble du menu de paramètres sera construit avec un seul cadre parent, ce qui le rend simple à gérer en tant qu'objet avec état qui réagit différemment à l'entrée en fonction de l'état actuel.

1. Insérez un Frame dans HUDContainer et renommez-le en SettingsMenu.

   

2. Avec SettingsMenu sélectionné, définissez les propriétés suivantes :

   • AnchorPoint = 0.5 (ancre centrale)
   • BackgroundColor3 = 30, 30, 60 (bleu marine)
   • BackgroundTransparency = 0.25 (75% opaque)
   • Position = 0.5, 0, 0.5, 0 (centre de l'écran)
   • Size = 0.75, 0, 0.75, 0 (75% de la largeur/hauteur de la zone d'écran insérée)

   

3. Insérez un UIAspectRatioConstraint dans SettingsMenu et définissez sa propriété AspectRatio sur 2.5. (2.5:1 largeur/hauteur).

   

   

4. Insérez un modificateur UICorner dans SettingsMenu et définissez sa propriété CornerRadius sur 0.1, 0.

   

   

5. Pour contraindre la largeur et la hauteur en pixels de SettingsMenu, insérez un UISizeConstraint. Définissez son MaxSize sur 800, inf et son MinSize sur 350, 0.

   

   

   

Construire un curseur

Pour permettre aux joueurs d'ajuster les niveaux de volume, le menu de paramètres contiendra deux widgets de curseur glissables alimentés par UIDragDetector, un objet pratique qui facilite l'interaction avec des éléments d'interface utilisateur 2D.

Pour créer un conteneur parent pour le premier curseur :

1. Insérez un nouveau Frame dans le conteneur SettingsMenu et renommez-le en EffectsVolumeSlider.

   

2. Avec le cadre EffectsVolumeSlider sélectionné, définissez les propriétés suivantes :

   • AnchorPoint = 0.5 (ancre centrale)

   • BackgroundTransparency = 1 (entièrement transparent)

   • Position = 0.5, 0, 0.35, 0 (centre horizontal et 35% du haut du conteneur)

   • Size = 0.8, 0, 0.1, 0 (80% de la largeur du conteneur et 10% de sa hauteur)

     

3. Insérez un nouveau UIListLayout dans EffectsVolumeSlider. Ce modificateur de mise en page est un moyen puissant d'auto-organiser les GuiObjects frères et sœurs en lignes horizontales ou colonnes verticales dans leur conteneur parent, y compris la capacité d'appliquer des concepts de flex.

   

4. Définissez les propriétés suivantes pour le nouveau UIListLayout :

   • Padding = 0.06, 0 (6% d'espacement entre les éléments de la liste)
   • FillDirection = Horizontal (disposition des éléments de gauche à droite)
   • HorizontalFlex = Fill (redimensionner les éléments horizontalement pour remplir l'ensemble du conteneur parent, en remplaçant leur largeur définie)
   • VerticalAlignment = Center (aligner les éléments le long de leur centre vertical)

Icône du curseur

Une simple icône comprenant une note audio et un symbole de "burst" aide les joueurs à identifier l'objectif du curseur lorsqu'ils ouvrent le menu de paramètres.

1. Insérez un ImageLabel dans le cadre EffectsVolumeSlider et renommez-le en Icon. Cette icône aidera les joueurs à comprendre quel aspect du jeu le curseur contrôle.

   

   Il est important de noter que l'étiquette doit être un frère du UIListLayout, et non un enfant de celui-ci.

2. Avec Icon sélectionné, définissez les propriétés suivantes :

   • BackgroundTransparency = 1 (entièrement transparent)
   • Size = 2.5, 0, 2.5, 0 (250% de la hauteur du cadre parent une fois le rapport d'aspect contraint)
   • Image = rbxassetid://90019827067389 (ID d'actif de la note audio et du symbole "burst")

3. Insérez un UIAspectRatioConstraint dans Icon et laissez ses propriétés par défaut (1:1 largeur/hauteur).

   

Cadre de plage

Directement à droite de l'icône, la partie interactive du curseur doit être contenue dans un autre Frame.

1. Insérez un nouveau Frame dans le cadre EffectsVolumeSlider et renommez-le en SliderFrame. Notez qu'il doit être un frère direct du modificateur de mise en page UIListLayout.

   

2. Avec SliderFrame sélectionné, définissez les propriétés suivantes :

   • BackgroundColor3 = 0 (noir)
   • BackgroundTransparency = 0.75 (25% opaque)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (100% de la largeur/hauteur du cadre parent)

   Notez qu'il n'est pas nécessaire d'assigner des changements positionnels tels que AnchorPoint ou Position, car le UIListLayout contrôle le positionnement de ses frères et sœurs, dans ce cas en les ordonnant horizontalement de gauche à droite et en les maintenant centrés verticalement les uns par rapport aux autres.

   La propriété LayoutOrder est importante lors de l'utilisation de modificateurs de mise en page tels que UIListLayout, car elle détermine la séquence dans laquelle les frères et sœurs sont placés les uns par rapport aux autres. En la changeant à 1 pour SliderFrame, cela garantit qu'il est placé à droite de Icon qui a un LayoutOrder par défaut de 0.

3. Insérez les modificateurs suivants dans SliderFrame :

   • UICorner avec sa propriété CornerRadius définie sur 0.5, 0 (forme "pilule")
   • UISizeConstraint avec sa propriété MaxSize définie sur inf, 30 (maximum 30 pixels de hauteur)
   • UIStroke avec sa Color définie sur 0, Thickness à 3, et Transparency à 0.25 (contour noir opaque à 75%)

   

Poignée interactive

Avec le conteneur de curseur construit, vous pouvez maintenant créer une poignée glissable pour que les joueurs interagissent pendant le jeu.

1. Insérez un nouveau Frame dans le conteneur SliderFrame et renommez-le en Handle.

   

2. Avec Handle sélectionné, définissez les propriétés suivantes :

   • AnchorPoint = 0.5 (ancre centrale)
   • Position = 0.5, 0, 0.5, 0 (centre horizontal et vertical du cadre parent)
   • Size = 1.2, 0, 1.2, 0 (120% de la hauteur du cadre parent une fois le rapport d'aspect contraint)
   • ZIndex = 3 (couche de la poignée visuellement devant les autres éléments du curseur)

3. Insérez les modificateurs suivants dans Handle :

   • UIAspectRatioConstraint avec ses propriétés par défaut (1:1 largeur/hauteur)
   • UICorner avec sa propriété CornerRadius définie sur 0.5, 0 (forme circulaire)
   • UIStroke avec sa Color définie sur [0, 150, 255] et Thickness à 8 (contour bleu épais)

4. Insérez un objet UIDragDetector dans Handle. Cet objet pratique facilite et encourage l'interaction avec des éléments d'interface utilisateur 2D.

   

5. Définissez les propriétés suivantes pour le nouveau UIDragDetector :

   • DragStyle = TranslateLine (mouvement 1D le long de l'axe DragAxis du détecteur.)
   • ResponseStyle = Scale (déplacer par des valeurs d'échelle de la position du parent du détecteur)

6. Pour s'assurer que la plage de glissement linéaire de la poignée est limitée à son conteneur, liez sa propriété BoundingUI au conteneur SliderFrame :

   1. Sélectionnez le UIDragDetector.
   2. Cliquez sur sa propriété BoundingUI dans la fenêtre Propriétés.
   3. De retour dans la fenêtre Explorer, cliquez sur le parent SliderFrame de la poignée.

   

   La liaison de la propriété BoundingUI reflète maintenant le conteneur SliderFrame :

   

Si vous testez le jeu maintenant, vous pourrez glisser la poignée de gauche à droite dans son conteneur parent :

Remplissage intérieur

Pour indiquer plus clairement que le curseur contrôle une plage de 0% à 100%, vous pouvez ajouter un remplissage intérieur sur le côté gauche du conteneur qui se synchronisera avec la position variable de la poignée.

1. Insérez un nouveau Frame dans le conteneur SliderFrame et renommez-le en InnerFill.

   

2. Définissez les propriétés suivantes pour le cadre InnerFill :

   • AnchorPoint = 0, 0.5 (bord gauche et centre vertical)
   • BackgroundColor3 = [0, 150, 255] (bleu correspondant à la poignée du curseur)
   • BackgroundTransparency = 0.35 (65% opaque)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (50% de largeur et 100% de hauteur du cadre parent)
   • ZIndex = 2 (couche visuellement devant le remplissage/contour du cadre parent)

3. Pour correspondre à la forme "pilule" du conteneur parent SliderFrame, insérez un modificateur UICorner et définissez sa propriété CornerRadius sur 0.5, 0.

   

   

   

Dupliquer le curseur

Avec le premier curseur construit, vous pouvez facilement le dupliquer et modifier certains aspects visuels pour indiquer un autre objectif, dans ce cas le niveau de volume de l'audio de fond symbolisé par une icône de notes musicales.

1. Sélectionnez l'objet EffectsVolumeSlider complété.

   

2. Dupliquez-le (CtrlD ou ⌘D) puis renommez le duplicata en BackgroundVolumeSlider.

   

3. Changez la Position du duplicata en 0.5, 0, 0.7, 0 pour le déplacer en dessous du premier curseur.

   

4. Développez la branche de premier niveau de BackgroundVolumeSlider, sélectionnez l'étiquette d'image Icon, et changez sa propriété Image en rbxassetid://101125859760167 (ID d'actif du symbole avec des notes musicales).

   

   

   

5. Développez la branche SliderFrame ⟩ Handle, sélectionnez le modificateur UIStroke à l'intérieur, et définissez sa propriété Color sur [255, 0, 125] (magenta).

   

   

   

6. Sélectionnez le cadre InnerFill dans SliderFrame et changez sa propriété BackgroundColor3 en la même couleur magenta ([255, 0, 125]).

   

   

   

Créer le bouton de fermeture

Le dernier élément du menu de paramètres est un bouton de fermeture qui fournit aux joueurs une entrée supplémentaire pour fermer le menu (le SettingsButton au centre supérieur servira le même objectif).

1. Insérez un nouveau ImageButton dans le conteneur SettingsMenu et renommez-le en CloseButton.

   

2. Avec CloseButton sélectionné, définissez les propriétés suivantes :

   • AnchorPoint = 1, 0 (coin supérieur droit)
   • BackgroundTransparency = 1 (entièrement transparent)
   • Position = 1, -10, 0, 10 (10 pixels d'inset du coin supérieur droit)
   • Size = 0.15, 0, 0.15, 0 (15% de la hauteur du cadre une fois le rapport d'aspect contraint)
   • Image = rbxassetid://5577404210 (ID d'actif du symbole de bouton de fermeture)
   • ImageTransparency = 0.25 (75% opaque)

3. Insérez un UIAspectRatioConstraint dans le bouton avec les propriétés par défaut (1:1 largeur/hauteur).

   

Créer les modules de contrôle

Une configuration de module de contrôle extensible rend la gestion de l'interface utilisateur interactive plus rationalisée que des scripts individuels placés dans chaque objet. ModuleScripts facilitent cette fonctionnalité extensible en vous permettant de réutiliser du code entre des scripts de différents côtés de la frontière client-serveur ou du même côté de la frontière.

Contrôleur d'objet avec état

Le module de contrôleur d'objet avec état suivant vous permet d'attacher un comportement aux objets UI tels que SettingsButton et SettingsMenu, et de basculer facilement entre divers états. Pour créer le module :

1. Insérez un ModuleScript dans le conteneur ReplicatedStorage et renommez-le en StatefulObjectController.

   

2. Collez le code suivant à l'intérieur du module :

   StatefulObjectController

   local TweenService = game:GetService("TweenService")
   
   local StatefulObjectController = {}
   StatefulObjectController.__index = StatefulObjectController
   
   export type StateName = string
   export type State = {
   	transition: TweenInfo,
   	properties: { [string]: any },
   }
   
   function StatefulObjectController.hydrate(props: {
   		object: Instance,
   		states: { [StateName]: State },
   		initialStateName: StateName
   	})
   	local object, states, initialStateName = props.object, props.states, props.initialStateName
   
   	local self = setmetatable({
   		states = states,
   		currentStateName = initialStateName,
   		tweens = {},
   	}, StatefulObjectController)
   
   	-- Créer des tweens pour réutilisation afin d'éviter de créer de nouveaux tweens chaque fois que l'état change
   	for stateName, state in states do
   		self.tweens[stateName] = TweenService:Create(object, state.transition, state.properties)
   	end
   
   	self:setState(self.currentStateName)
   
   	return self
   end
   
   function StatefulObjectController:setState(stateName: StateName)
   	local stateTween: Tween = self.tweens[stateName]
   	if not stateTween then
   		warn(string.format("Tentative de définir %s à un état inconnu '%s'", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Assurez-vous que d'autres tweens ne sont pas en conflit
   	for _, tween in self.tweens do
   		tween:Cancel()
   	end
   
   	stateTween:Play()
   end
   
   return StatefulObjectController

   Explication du code

   Lignes	But
   6‑10	Définit et exporte les types Luau pour améliorer l'autocomplétion et le linting lors de l'utilisation de ce module.
   12‑33	Fonction utilisée pour initialiser et attacher un comportement à un objet UI avec état, acceptant un GuiObject comme object, une table d'états et leurs données respectives TweenInfo, et un nom d'état initial. À l'intérieur de cette fonction, les lignes 26‑28 construisent des Tweens pour chaque état, et la ligne 30 appelle la fonction setState() du module pour définir l'objet à l'état initial.
   35‑50	Fonction utilisée pour définir/changer l'état d'un objet avec état. La ligne 42 définit le currentStateName de l'objet à l'état défini, les lignes 45‑47 annulent tous les tweens en cours pour éviter les conflits, et la ligne 49 exécute le(s) tween(s) de l'état.

Contrôleur de curseur

Un module supplémentaire initialise et contrôle les deux curseurs de volume. Il vous permet également de connecter une fonction de rappel à chaque curseur afin de détecter l'interaction du joueur avec le curseur et d'appliquer les changements souhaités dans le jeu.

1. Insérez un ModuleScript dans le conteneur ReplicatedStorage et renommez-le en SliderController.

   

2. Collez le code suivant à l'intérieur du module :

   SliderController

   local SliderController = {}
   SliderController.__index = SliderController
   
   export type Value = number
   export type OnChanged = (Value) -> ()
   
   function SliderController.hydrate(props: {
   		object: Instance,
   		onChanged: OnChanged,
   		initialValue: Value?
   	})
   	local object, onChanged, initialValue = props.object, props.onChanged, props.initialValue
   
   	local handle = object:FindFirstChild("Handle", true)
   	if not handle then
   		warn(string.format("Tentative d'hydrater le curseur %s mais impossible de trouver Handle", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Tentative d'hydrater le curseur %s mais impossible de trouver InnerFill", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Tentative d'hydrater le curseur %s mais impossible de trouver UIDragDetector", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Définir la valeur initiale
   	self:setValue(self.value)
   
   	-- Connecter le détecteur à la manipulation par le joueur
   	self.dragConnection = dragDetector.DragContinue:Connect(function()
   		self:setValue(handle.Position.X.Scale)
   	end)
   
   	return self
   end
   
   function SliderController:setValue(value: Value)
   	local clampedValue = math.clamp(value, 0, 1)
   	self.value = clampedValue
   
   	-- Mettre à jour la position de la poignée et la taille du cadre intérieur pour correspondre
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Exécuter le rappel de l'utilisateur avec la dernière valeur
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Erreur dans le rappel du curseur :", changeResult)
   	end
   end
   
   return SliderController

   Explication du code

   Lignes	But
   7‑46	Fonction utilisée pour initialiser et attacher un comportement à un élément de curseur, acceptant le parent Frame du curseur comme object, une fonction de rappel onChanged pour traiter les changements de curseur, et une valeur initiale pour la position de la poignée du curseur. À l'intérieur de la fonction, les lignes 14‑27 confirment que les éléments poignée, remplissage intérieur, et UIDragDetector existent. La ligne 38 appelle la fonction setValue() du module et les lignes 41‑43 connectent l'événement DragContinue du détecteur de glissement à la fonction setValue() du module (voir la ligne suivante pour plus de détails).
   48‑61	Fonction utilisée pour définir la valeur du curseur. À l'intérieur de la fonction, les lignes 53‑54 garantissent que la position de la poignée et la taille du remplissage intérieur sont synchronisées, et la ligne 57 passe la valeur changée à la fonction de rappel afin que vous puissiez utiliser la valeur comme nécessaire.

Créer le script de paramètres

Avec le bouton de paramètres et le menu de paramètres finalisés, vous pouvez tout relier avec un seul script qui utilise les modules de contrôle.

1. Insérez un nouveau LocalScript dans HUDContainer et renommez-le en SettingsScript pour décrire son objectif. Notez que ce script doit être au même niveau (frère) que SettingsMenu et SettingsButton, les objets UI de premier niveau qu'il gérera.

   

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

   SettingsScript

   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local SoundService = game:GetService("SoundService")
   
   local SliderController = require(ReplicatedStorage.SliderController)
   local StatefulObjectController = require(ReplicatedStorage.StatefulObjectController)
   
   local HUDContainer = script.Parent
   
   -- Initialiser le bouton de paramètres
   local settingsButton = StatefulObjectController.hydrate({
   	object = HUDContainer:FindFirstChild("SettingsButton"),
   	states = {
   		menuOpen = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
   			properties = {
   				Rotation = 45,
   			},
   		},
   		menuClosed = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
   			properties = {
   				Rotation = 0,
   			},
   		},
   	},
   	initialStateName = "menuClosed"
   })
   
   -- Initialiser le cadre du menu de paramètres
   local settingsMenu = StatefulObjectController.hydrate({
   	object = HUDContainer:FindFirstChild("SettingsMenu"),
   	states = {
   		menuOpen = {
   			transition = TweenInfo.new(0.5, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out),
   			properties = {
   				Position = UDim2.fromScale(0.5, 0.5),
   				Visible = true,
   			},
   		},
   		menuClosed = {
   			transition = TweenInfo.new(0),
   			properties = {
   				Position = UDim2.fromScale(0.5, 0.4),
   				Visible = false,
   			},
   		},
   	},
   	initialStateName = "menuClosed"
   })
   
   -- Initialiser le curseur de volume des effets
   local effectsAudio = SoundService:FindFirstChild("Effects")
   local effectsVolumeSlider = SliderController.hydrate({
   	object = HUDContainer:FindFirstChild("EffectsVolumeSlider", true),
   	initialValue = effectsAudio and effectsAudio.Volume or 0.5,
   	onChanged = function(value: SliderController.Value)
   		if effectsAudio then
   			effectsAudio.Volume = value
   		end
   	end,
   })
   
   -- Initialiser le curseur de volume de fond
   local backgroundAudio = SoundService:FindFirstChild("Background")
   local backgroundVolumeSlider = SliderController.hydrate({
   	object = HUDContainer:FindFirstChild("BackgroundVolumeSlider", true),
   	initialValue = backgroundAudio and backgroundAudio.Volume or 0.5,
   	onChanged = function(value: SliderController.Value)
   		if backgroundAudio then
   			backgroundAudio.Volume = value
   		end
   	end,
   })
   
   -- Connecter les boutons à l'interaction du joueur
   HUDContainer:FindFirstChild("SettingsButton").Activated:Connect(function()
   	local targetState = if settingsButton.currentStateName == "menuClosed"
   		then "menuOpen"
   		else "menuClosed"
   	settingsButton:setState(targetState)
   	settingsMenu:setState(targetState)
   end)
   HUDContainer:FindFirstChild("CloseButton", true).Activated:Connect(function()
   	settingsButton:setState("menuClosed")
   	settingsMenu:setState("menuClosed")
   end)

3. Référez-vous aux sections suivantes pour explorer comment le script utilise les modules de contrôle.

   Bouton de paramètres

   Les lignes 10-27 initialisent et attachent un comportement au bouton de paramètres comme suit :

   Lignes	But
   10‑11	Une référence locale settingsButton est déclarée et hydratée avec la fonction StatefulObjectController.hydrate(), et le bouton SettingsButton à l'intérieur de HUDContainer est référencé comme l'objet à hydrater.
   12‑25	Une table states est passée avec deux états uniques, menuOpen et menuClosed. Chaque état contient une transition pour déclarer (via un TweenInfo) comment l'état particulier atteindra ses propriétés cibles définies dans la table properties. Dans ce cas, menuOpen déclare un changement d'état à 45° pour la Rotation du bouton avec un tween Exponential de ½ seconde, tandis que menuClosed restaure effectivement le bouton à sa rotation par défaut de 0.
   26	L'état initial du bouton est défini sur menuClosed (cela pourrait être défini sur n'importe quel nom d'état dans la table states).

   Plus bas dans le script (lignes 76-86), les boutons sont connectés à l'interaction du joueur pour déclencher des changements d'état de l'UI :

   Lignes	But
   76‑82	SettingsButton est connecté à l'événement Activated de la classe GuiButton pour appeler une fonction anonyme. À l'intérieur de la fonction anonyme, les lignes 77‑79 basculent une variable targetState entre menuOpen et menuClosed. La ligne 80 appelle ensuite setState() pour définir l'état du bouton sur targetState et la ligne `81 fait de même pour SettingsMenu afin qu'il s'ouvre ou se ferme avec l'activation de SettingsButton.
   83‑86	CloseButton est connecté à l'événement Activated pour appeler une fonction anonyme qui définit l'état de SettingsButton et SettingsMenu sur menuClosed.

   Menu de paramètres

   Les lignes 30-49 initialisent et attachent un comportement au menu de paramètres comme suit :

   Lignes	But
   30‑31	Une référence locale settingsMenu est déclarée et hydratée avec la fonction StatefulObjectController.hydrate() et le cadre SettingsMenu à l'intérieur de HUDContainer est référencé comme l'objet à hydrater.
   32‑46	Semblable au bouton de paramètres, une table states est passée avec deux états uniques, menuOpen et menuClosed. Ici, menuOpen déclare un changement d'état à UDim2.fromScale(0.5, 0.5) pour la Position du cadre avec un tween Bounce de ½ seconde, ainsi qu'un état Visible de true. En revanche, menuClosed déclare un changement d'état de position à UDim2.fromScale(0.5, 0.4) et Visible à false, mais le TweenInfo avec une durée de 0 à la ligne 41 rend effectivement le changement d'état instantané.
   48	L'état initial du cadre est défini sur menuClosed.

   Plus bas dans le script (lignes 76-86), le menu de paramètres est lié à l'interaction du joueur :

   Lignes	But
   81	Définit le même targetState pour SettingsMenu pour se synchroniser avec l'activation de SettingsButton.
   85	Définit l'état de SettingsMenu sur menuClosed lorsque CloseButton est activé.

   Curseurs de volume

   Les lignes 51-73 initialisent et attachent un comportement aux EffectsVolumeSlider et BackgroundVolumeSlider comme suit :

   Lignes	But
   52	Définit une référence locale au SoundGroup Effects à l'intérieur de SoundService. Un SoundGroup vous permet d'interrelier plusieurs Sounds et de contrôler le volume de chaque son dans le groupe via la propriété Volume du groupe.
   53‑54	Une référence locale effectsVolumeSlider est déclarée et hydratée avec la fonction SliderController.hydrate() et le cadre EffectsVolumeSlider à l'intérieur de HUDContainer ⟩ SettingsMenu est référencé comme l'objet à hydrater. Notez que le deuxième paramètre de true pour FindFirstChild() indique à la méthode de rechercher récursivement dans la branche HUDContainer pour localiser EffectsVolumeSlider.
   55	La valeur initiale du curseur est définie sur le Volume actuel du groupe sonore Effects, ou 0.5 comme valeur de repli.
   56‑60	Établit la fonction de rappel pour appliquer les changements de valeur du curseur au volume du groupe sonore Effects.
   64‑73	Essentiellement le même que les lignes 52-61, sauf pour hydrater le cadre BackgroundVolumeSlider à l'intérieur de HUDContainer ⟩ SettingsMenu et appliquer les changements de valeur du curseur au volume du groupe sonore Background.

Avec SettingsScript en place, le jeu propose maintenant un exemple d'interface utilisateur interactive entièrement opérationnel qui relie un ensemble d'objets UI connexes à l'interaction du joueur.