Maak interactieve UI

Een HUD (Heads-Up Display) in je game toont doorgaans niet-interactieve UI-elementen zoals de gezondheidsmeter die wordt gedemonstreerd in Maak HUD-meters. Daarnaast vereist bijna elke game interactieve UI, zoals knoppen die reageren op speleractivatie, animaties wanneer ze worden geactiveerd, en het in-/uitfaden van menu's met andere interactieve bedieningselementen, enzovoort.

Met UI Fundamentals - HUD Meter als startpunt en UI Fundamentals - Interactiviteit als een voltooide referentie, demonstreert deze tutorial:

• Hoe je een instellingenknop aan de bovenrand van het scherm plaatst.
• Ontwerp van een instellingenmenu met interactieve versleepbare schuifregelaars.
• Gebruik van een ModuleScripts om "controller" modules te vormen voor uitbreidbare controle van UI-objecten met stateful declaraties.
• Hoe je knoppen verbindt met speleractivatie om het instellingenmenu in/uit te schakelen.
• Hoe je versleepbare UI-schuifregelaars verbindt om het volume van geluidseffecten en achtergrondgeluid afzonderlijk aan te passen.

Schakel de Apparaatemulator in

Zoals opgemerkt in Maak HUD-meters, hebben telefoons en tablets de minste schermruimte, dus het is belangrijk dat je UI-elementen op kleinere schermen passen en duidelijk zichtbaar zijn voor spelers. Als je dit nog niet hebt gedaan, schakel dan de Apparaatemulator in Studio in:

1. Open de UI Fundamentals - HUD Meter sjabloon in Studio.

2. Schakel in het Test menu van Studio de Apparaatemulator in.

3. Selecteer in de balk direct boven het hoofdvenster een telefoonemulatie zoals iPhone X of Samsung Galaxy A51. Stel vervolgens de weergavegrootte in op Aanpassen aan Venster om de maximale ruimte in Studio te benutten.

   

Maak de instellingenknop

GuiButtons zijn interactieve gebruikersinterface-elementen met ingebouwde functionaliteit zoals het multi-platform Activated evenement dat wordt geactiveerd wanneer de knop wordt geklikt of getikt. De GuiButton klasse breidt zich uit naar twee variaties, TextButton en ImageButton, en deze tutorial gebruikt een "tandwiel" vormige ImageButton om het instellingenmenu open of gesloten te schakelen.

Om de instellingenknop te construeren:

1. Zoek in het Explorer venster HUDContainer binnen StarterGui.

   

2. Voeg een ImageButton toe aan HUDContainer en hernoem deze naar SettingsButton.

   

3. Selecteer de nieuwe knop en stel het volgende in het Eigenschappen venster in:

   • AnchorPoint = 0.5, 0.25 (horizontaal centrum en verticaal bovenste kwart)
   • BackgroundTransparency = 1 (volledig transparant)
   • Position = 0.5, 0, 0, 0 (boven-centrale positionering)
   • Size = 0.1, 0, 0.1, 0 (10% van de schermhoogte zodra de beeldverhouding is beperkt)
   • Image = rbxassetid://104919049969988 (asset ID van "tandwiel" symbool)

4. Voeg een UIAspectRatioConstraint toe aan de knop met standaard eigenschappen (1:1 breedte tot hoogte).

   

5. Om de maximale pixelhoogte van de knop te beperken, voeg een UISizeConstraint toe en stel de MaxSize in op inf, 44.

   

   

   

Maak het instellingenmenu

De nieuwe instellingenknop zal worden gescript om een instellingenmenu open en gesloten te schakelen, zodat spelers op aanvraag toegang hebben tot instellingen of andere informatie. In deze tutorial zal het menu interactieve schuifregelaars bevatten om de volumenniveaus van achtergrondgeluid en geluidseffecten onafhankelijk aan te passen.

Maak het bovenliggende frame

Zoals opgemerkt in Maak HUD-meters, dient een Frame als een container voor andere UI-objecten. Het hele instellingenmenu zal worden geconstrueerd met een enkel bovenliggend frame, waardoor het eenvoudig te beheren is als een stateful object dat anders reageert op invoer, afhankelijk van de huidige staat.

1. Voeg een Frame toe aan HUDContainer en hernoem deze naar SettingsMenu.

   

2. Selecteer SettingsMenu en stel de volgende eigenschappen in:

   • AnchorPoint = 0.5 (centraal anker)
   • BackgroundColor3 = 30, 30, 60 (marineblauw)
   • BackgroundTransparency = 0.25 (75% ondoorzichtig)
   • Position = 0.5, 0, 0.5, 0 (centrum van het scherm)
   • Size = 0.75, 0, 0.75, 0 (75% breedte/hoogte van het ingesloten schermgebied)

   

3. Voeg een UIAspectRatioConstraint toe aan SettingsMenu en stel de AspectRatio eigenschap in op 2.5. (2.5:1 breedte tot hoogte).

   

   

4. Voeg een UICorner modifier toe aan SettingsMenu en stel de CornerRadius in op 0.1, 0.

   

   

5. Om de pixelbreedte en -hoogte van SettingsMenu te beperken, voeg een UISizeConstraint toe. Stel de MaxSize in op 800, inf en de MinSize op 350, 0.

   

   

   

Construct een schuifregelaar

Om spelers in staat te stellen volumenniveaus aan te passen, zal het instellingenmenu twee versleepbare schuifwidgets bevatten die worden aangedreven door UIDragDetector, een handig object dat interactie met 2D-gebruikersinterface-elementen vergemakkelijkt.

Om een bovenliggende container voor de eerste schuifregelaar te maken:

1. Voeg een nieuw Frame toe aan de SettingsMenu container en hernoem deze naar EffectsVolumeSlider.

   

2. Selecteer het EffectsVolumeSlider frame en stel de volgende eigenschappen in:

   • AnchorPoint = 0.5 (centraal anker)

   • BackgroundTransparency = 1 (volledig transparant)

   • Position = 0.5, 0, 0.35, 0 (horizontaal centrum en 35% van de bovenkant van de container)

   • Size = 0.8, 0, 0.1, 0 (80% van de breedte van de container en 10% van de hoogte)

     

3. Voeg een nieuwe UIListLayout toe aan EffectsVolumeSlider. Deze lay-outmodifier is een krachtige manier om broeder GuiObjects automatisch te rangschikken in horizontale rijen of verticale kolommen binnen hun bovenliggende container, inclusief de mogelijkheid om flex concepten toe te passen.

   

4. Stel de volgende eigenschappen in voor de nieuwe UIListLayout:

   • Padding = 0.06, 0 (6% padding tussen lijst elementen)
   • FillDirection = Horizontal (links-naar-rechts rangschikking van elementen)
   • HorizontalFlex = Fill (vergroten van elementen in de breedte om de hele bovenliggende container te vullen, waarbij hun gedefinieerde breedte wordt overschreven)
   • VerticalAlignment = Center (elementen centreren langs hun verticale midden)

Schuifregelaar icoon

Een eenvoudig icoon met een audio-notitie en "burst" symbool helpt spelers de functie van de schuifregelaar te identificeren wanneer ze het instellingenmenu openen.

1. Voeg een ImageLabel toe aan het EffectsVolumeSlider frame en hernoem deze naar Icon. Dit icoon helpt spelers te begrijpen welk aspect van de game de schuifregelaar bedient.

   

   Let op dat het label een broeder van de UIListLayout moet zijn, niet een kind ervan.

2. Selecteer Icon en stel de volgende eigenschappen in:

   • BackgroundTransparency = 1 (volledig transparant)
   • Size = 2.5, 0, 2.5, 0 (250% hoogte van het bovenliggende frame zodra de beeldverhouding is beperkt)
   • Image = rbxassetid://90019827067389 (asset ID van audio-notitie en "burst" symbool)

3. Voeg een UIAspectRatioConstraint toe aan Icon en laat de eigenschappen als de standaardwaarden (1:1 breedte tot hoogte).

   

Bereik frame

Direct rechts van het icoon moet het interactieve gedeelte van de schuifregelaar worden contained binnen een andere Frame.

1. Voeg een nieuw Frame toe aan het EffectsVolumeSlider frame en hernoem deze naar SliderFrame. Let op dat het een directe broeder van de UIListLayout lay-outmodifier moet zijn.

   

2. Selecteer SliderFrame en stel de volgende eigenschappen in:

   • BackgroundColor3 = 0 (zwart)
   • BackgroundTransparency = 0.75 (25% ondoorzichtig)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (100% breedte/hoogte van het bovenliggende frame)

   Het is niet nodig om positionele wijzigingen zoals AnchorPoint of Position toe te wijzen, aangezien de UIListLayout de positionering van zijn broeders beheert, in dit geval ze horizontaal van links naar rechts rangschikt en ze verticaal gecentreerd houdt ten opzichte van elkaar.

   De LayoutOrder eigenschap is belangrijk bij het werken met lay-outmodifiers zoals UIListLayout, omdat het de volgorde bepaalt waarin broeders ten opzichte van elkaar worden geplaatst. Het wijzigen naar 1 voor SliderFrame zorgt ervoor dat het rechts van Icon wordt geplaatst, dat een standaard LayoutOrder van 0 heeft.

3. Voeg de volgende modifiers toe aan SliderFrame:

   • UICorner met zijn CornerRadius eigenschap ingesteld op 0.5, 0 ("pil" vorm)
   • UISizeConstraint met zijn MaxSize eigenschap ingesteld op inf, 30 (maximaal 30 pixels in hoogte)
   • UIStroke met zijn Color ingesteld op 0, Thickness op 3, en Transparency op 0.25 (75% ondoorzichtig zwarte omtrek)

   

Interactieve handgreep

Met de schuifcontainer geconstrueerd, kun je nu een versleepbare handgreep maken voor spelers om mee te interageren tijdens het spel.

1. Voeg een nieuw Frame toe aan de SliderFrame container en hernoem deze naar Handle.

   

2. Selecteer Handle en stel de volgende eigenschappen in:

   • AnchorPoint = 0.5 (centraal anker)
   • Position = 0.5, 0, 0.5, 0 (horizontaal en verticaal centrum van het bovenliggende frame)
   • Size = 1.2, 0, 1.2, 0 (120% hoogte van het bovenliggende frame zodra de beeldverhouding is beperkt)
   • ZIndex = 3 (laag handgreep visueel voor andere schuifelementen)

3. Voeg de volgende modifiers toe aan Handle:

   • UIAspectRatioConstraint met zijn standaard eigenschappen (1:1 breedte tot hoogte)
   • UICorner met zijn CornerRadius eigenschap ingesteld op 0.5, 0 (ronde vorm)
   • UIStroke met zijn Color ingesteld op [0, 150, 255] en Thickness op 8 (dikke blauwe omtrek)

4. Voeg een UIDragDetector object toe aan Handle. Dit handige object vergemakkelijkt en moedigt interactie met 2D-gebruikersinterface-elementen aan.

   

5. Stel de volgende eigenschappen in voor de nieuwe UIDragDetector:

   • DragStyle = TranslateLine (1D beweging langs de DragAxis van de detector.)
   • ResponseStyle = Scale (verplaatsen op basis van schaalwaarden van de positie van de ouder van de detector)

6. Om ervoor te zorgen dat het lineaire sleepbereik van de handgreep beperkt is tot zijn container, koppel je de BoundingUI eigenschap aan de SliderFrame container:

   1. Selecteer de UIDragDetector.
   2. Klik op zijn BoundingUI eigenschap in het Eigenschappen venster.
   3. Terug in het Explorer venster, klik op de bovenliggende SliderFrame.

   

   De BoundingUI eigenschap koppeling weerspiegelt nu de SliderFrame container:

   

Als je nu de game test, kun je de handgreep naar links en rechts slepen binnen zijn bovenliggende container:

Binnenvulling

Om duidelijker aan te geven dat de schuifregelaar een bereik van 0% tot 100% bedient, kun je een binnenvulling aan de linkerkant van de container toevoegen die synchroniseert met de variabele positie van de handgreep.

1. Voeg een nieuw Frame toe aan de SliderFrame container en hernoem deze naar InnerFill.

   

2. Stel de volgende eigenschappen in voor het InnerFill frame:

   • AnchorPoint = 0, 0.5 (linker rand en verticale centrum)
   • BackgroundColor3 = [0, 150, 255] (blauw dat overeenkomt met de handgreep van de schuifregelaar)
   • BackgroundTransparency = 0.35 (65% ondoorzichtig)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (50% breedte en 100% hoogte van het bovenliggende frame)
   • ZIndex = 2 (laag visueel voor de vulling/omtrek van het bovenliggende frame)

3. Om de "pil" vorm van de bovenliggende SliderFrame container te matchen, voeg een UICorner modifier toe en stel zijn CornerRadius eigenschap in op 0.5, 0.

   

   

   

Dupliceer de schuifregelaar

Met de eerste schuifregelaar geconstrueerd, kun je deze eenvoudig dupliceren en enkele visuele aspecten wijzigen om een ander doel aan te geven, in dit geval het volumenniveau van achtergrondgeluid gesymboliseerd door een icoon van muzikale noten.

1. Selecteer het voltooide EffectsVolumeSlider object.

   

2. Dupliceer het (CtrlD of ⌘D) en hernoem de duplicaat naar BackgroundVolumeSlider.

   

3. Wijzig de Position van de duplicaat naar 0.5, 0, 0.7, 0 om deze onder de eerste schuifregelaar te verplaatsen.

   

4. Breid de bovenliggende tak van BackgroundVolumeSlider uit, selecteer het Icon afbeeldingslabel en wijzig de Image eigenschap naar rbxassetid://101125859760167 (asset ID van symbool met muzikale noten).

   

   

   

5. Breid de SliderFrame ⟩ Handle tak uit, selecteer de UIStroke modifier binnenin, en stel zijn Color eigenschap in op [255, 0, 125] (magenta).

   

   

   

6. Selecteer het InnerFill frame binnen SliderFrame en wijzig de BackgroundColor3 eigenschap naar dezelfde magenta kleur ([255, 0, 125]).

   

   

   

Maak de sluitknop

Het laatste element van het instellingenmenu is een sluitknop die spelers een extra invoer biedt om het menu te sluiten (de SettingsButton in het bovenste midden zal hetzelfde doel dienen).

1. Voeg een nieuwe ImageButton toe aan de SettingsMenu container en hernoem deze naar CloseButton.

   

2. Selecteer CloseButton en stel de volgende eigenschappen in:

   • AnchorPoint = 1, 0 (rechterbovenhoek)
   • BackgroundTransparency = 1 (volledig transparant)
   • Position = 1, -10, 0, 10 (10 pixels van de rechterbovenhoek)
   • Size = 0.15, 0, 0.15, 0 (15% van de framehoogte zodra de beeldverhouding is beperkt)
   • Image = rbxassetid://5577404210 (asset ID van het sluitknop symbool)
   • ImageTransparency = 0.25 (75% ondoorzichtig)

3. Voeg een UIAspectRatioConstraint toe aan de knop met standaard eigenschappen (1:1 breedte tot hoogte).

   

Maak de controlemodules

Een uitbreidbare controlemodule setup maakt het beheer van interactieve UI eenvoudiger dan individuele scripts die binnen elk object zijn geplaatst. ModuleScripts vergemakkelijken deze uitbreidbare functionaliteit door je in staat te stellen code tussen scripts aan beide zijden van de client-server grens of aan dezelfde kant van de grens te hergebruiken.

Stateful object controller

De volgende stateful object controller module laat je gedrag aan UI-objecten zoals SettingsButton en SettingsMenu hechten, en eenvoudig schakelen/tweeneren tussen verschillende staten. Om de module te maken:

1. Voeg een ModuleScript toe aan de ReplicatedStorage container en hernoem deze naar StatefulObjectController.

   

2. Plak de volgende code in de 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)
   
   	-- Maak tweens voor hergebruik om te voorkomen dat er elke keer nieuwe tweens worden gemaakt wanneer de staat verandert
   	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("Poging om %s in te stellen op onbekende staat '%s'", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Zorg ervoor dat andere tweens niet conflicteren
   	for _, tween in self.tweens do
   		tween:Cancel()
   	end
   
   	stateTween:Play()
   end
   
   return StatefulObjectController

   Code Uitleg

   Regels	Doel
   6‑10	Definieert en exporteert de Luau types om autocompletion en linting te verbeteren bij het gebruik van deze module.
   12‑33	Functie die wordt gebruikt om gedrag aan een stateful UI-object te initialiseren en te hechten, waarbij een GuiObject als object, een tabel van staten en hun respectieve TweenInfo gegevens, en een initiële staat naam worden geaccepteerd. Binnen deze functie construeren regels 26‑28 Tweens voor elke staat, en regel 30 roept de setState() functie van de module aan om het object op de initiële staat in te stellen.
   35‑50	Functie die wordt gebruikt om de staat van een stateful object in te stellen/wijzigen. Binnen de functie zorgen regels 42 ervoor dat de currentStateName van het object wordt ingesteld op de staat die wordt ingesteld, regels 45‑47 annuleren eventuele lopende tweens om conflicten te voorkomen, en regel 49 voert de tween(s) van de staat uit.

Slider controller

Een aanvullende module initialiseert en controleert de twee volumeschuifregelaars. Het stelt je ook in staat om een callbackfunctie aan elke schuifregelaar te koppelen om spelerinteractie met de schuifregelaar te detecteren en gewenste wijzigingen in de game toe te passen.

1. Voeg een ModuleScript toe aan de ReplicatedStorage container en hernoem deze naar SliderController.

   

2. Plak de volgende code in de 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("Poging om schuifregelaar %s te hydrateren maar kon Handle niet vinden", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Poging om schuifregelaar %s te hydrateren maar kon InnerFill niet vinden", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Poging om schuifregelaar %s te hydrateren maar kon UIDragDetector niet vinden", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Stel initiële waarde in
   	self:setValue(self.value)
   
   	-- Verbind detector met speler manipulatie
   	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
   
   	-- Update de positie van de handgreep en de grootte van het binnenframe om overeen te komen
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Voer de callback van de gebruiker uit met de laatste waarde
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Fout in schuifcallback:", changeResult)
   	end
   end
   
   return SliderController

   Code Uitleg

   Regels	Doel
   7‑46	Functie die wordt gebruikt om gedrag aan een schuifregelaar element te initialiseren en te hechten, waarbij de bovenliggende Frame van de schuifregelaar als object, een onChanged callbackfunctie om schuifwijzigingen te verwerken, en een initiële waarde voor de positie van de handgreep van de schuifregelaar worden geaccepteerd. Binnen de functie bevestigen regels 14‑27 dat de schuifregelaar's handgreep, binnenvulling, en UIDragDetector elementen bestaan. Regel 38 roept de setValue() functie van de module aan en regels 41‑43 verbinden het DragContinue evenement van de drag detector met de setValue() functie van de module (zie volgende rij voor details).
   48‑61	Functie die wordt gebruikt om de waarde van de schuifregelaar in te stellen. Binnen de functie zorgen regels 53‑54 ervoor dat de positie van de handgreep en de grootte van de binnenvulling zijn gesynchroniseerd, en regel 57 geeft de gewijzigde waarde door aan de callbackfunctie zodat je de waarde kunt gebruiken zoals nodig.

Maak het instellingen script

Met de instellingenknop en instellingenmenu voltooid, kun je alles aan elkaar koppelen met een enkel script dat gebruikmaakt van de controlemodules.

1. Voeg een nieuw LocalScript toe aan HUDContainer en hernoem deze naar SettingsScript om het doel ervan te beschrijven. Let op dat dit script op hetzelfde niveau (broeder) moet zijn als SettingsMenu en SettingsButton, de top-level UI-objecten die het zal beheren.

   

2. Plak de volgende code in het 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
   
   -- Initialiseer instellingenknop
   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"
   })
   
   -- Initialiseer instellingenmenu frame
   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"
   })
   
   -- Initialiseer effecten volume schuifregelaar
   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,
   })
   
   -- Initialiseer achtergrond volume schuifregelaar
   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,
   })
   
   -- Verbind knoppen met spelerinteractie
   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. Raadpleeg de volgende secties om te verkennen hoe het script gebruikmaakt van de controlemodules.

   Instellingenknop

   Regels 10-27 initialiseren en hechten gedrag aan de instellingenknop als volgt:

   Regels	Doel
   10‑11	Een lokale referentie settingsButton wordt gedeclareerd en gehydrateerd met de StatefulObjectController.hydrate() functie, en de SettingsButton knop binnen HUDContainer wordt verwezen als het object om te hydrateren.
   12‑25	Een states tabel wordt doorgegeven met twee unieke staten, menuOpen en menuClosed. Elke staat bevat een overgang om te verklaren (via een TweenInfo) hoe de specifieke staat zijn doel-eigenschappen in de properties tabel zal bereiken. In dit geval verklaart menuOpen een staatsovergang naar 45° voor de Rotation van de knop met een Exponential tween van ½ seconde, terwijl menuClosed de knop effectief terugbrengt naar zijn standaardrotatie van 0.
   26	De initiёle staat van de knop wordt ingesteld op menuClosed (dit kan worden ingesteld op elke staat naam binnen de states tabel).

   Verderop in het script (regels 76-86), worden knoppen verbonden met spelerinteractie om UI-staatwijzigingen te activeren:

   Regels	Doel
   76‑82	SettingsButton is verbonden met het Activated evenement van de GuiButton klasse om een anonieme functie aan te roepen. Binnen de anonieme functie schakelen regels 77‑79 een targetState variabele tussen menuOpen en menuClosed. Regel 80 roept vervolgens setState() aan om de staat van de knop in te stellen op targetState en regel 81 doet hetzelfde voor SettingsMenu zodat het opent of sluit met de activatie van SettingsButton.
   83‑86	CloseButton is verbonden met het Activated evenement om een anonieme functie aan te roepen die de staat van zowel SettingsButton als SettingsMenu op menuClosed instelt.

   Instellingenmenu

   Regels 30-49 initialiseren en hechten gedrag aan het instellingenmenu als volgt:

   Regels	Doel
   30‑31	Een lokale referentie settingsMenu wordt gedeclareerd en gehydrateerd met de StatefulObjectController.hydrate() functie en het SettingsMenu frame binnen HUDContainer wordt verwezen als het object om te hydrateren.
   32‑46	Vergelijkbaar met de instellingenknop, wordt een states tabel doorgegeven met twee unieke staten, menuOpen en menuClosed. Hier verklaart menuOpen een staatsovergang naar UDim2.fromScale(0.5, 0.5) voor de Position van het frame met een Bounce tween van ½ seconde, evenals een Visible staat van true. In tegenstelling tot dat, verklaart menuClosed een positionele staatsovergang naar UDim2.fromScale(0.5, 0.4) en Visible naar false, maar de TweenInfo met 0 duur op regel 41 zorgt ervoor dat de staatsovergang onmiddellijk plaatsvindt.
   48	De initiёle staat van het frame wordt ingesteld op menuClosed.

   Verderop in het script (regels 76-86), wordt het instellingenmenu gekoppeld aan spelerinteractie:

   Regels	Doel
   81	Stelt dezelfde targetState voor SettingsMenu in om te synchroniseren met de activatie van SettingsButton.
   85	Stelt de staat van SettingsMenu in op menuClosed wanneer CloseButton wordt geactiveerd.

   Volume Schuifregelaars

   Regels 51-73 initialiseren en hechten gedrag aan EffectsVolumeSlider en BackgroundVolumeSlider als volgt:

   Regels	Doel
   52	Stelt een lokale referentie in naar de Effects SoundGroup binnen SoundService. Een SoundGroup stelt je in staat om meerdere Sounds met elkaar te relateren en het volume van elk geluid in de groep te regelen via de Volume eigenschap van de groep.
   53‑54	Een lokale referentie effectsVolumeSlider wordt gedeclareerd en gehydrateerd met de SliderController.hydrate() functie en het EffectsVolumeSlider frame binnen HUDContainer ⟩ SettingsMenu wordt verwezen als het object om te hydrateren. Let op dat de tweede parameter van true voor FindFirstChild() de methode vertelt om recursief naar beneden te kijken in de HUDContainer tak om EffectsVolumeSlider te vinden.
   55	De initiёle waarde van de schuifregelaar wordt ingesteld op het huidige Volume van de Effects geluidsgroep, of 0.5 als fallback.
   56‑60	Stelt de callbackfunctie in om schuifwaarde wijzigingen toe te passen op het volume van de Effects geluidsgroep.
   64‑73	Bijna hetzelfde als regels 52-61, behalve om het BackgroundVolumeSlider frame binnen HUDContainer ⟩ SettingsMenu te hydrateren en schuifwaarde wijzigingen toe te passen op het volume van de Background geluidsgroep.

Met SettingsScript op zijn plaats, biedt de game nu een volledig operationeel voorbeeld van interactieve UI dat een gerelateerde set UI-objecten koppelt aan spelerinteractie.