Crea un'interfaccia utente interattiva

Un HUD (Heads-Up Display) nel tuo gioco mostra comunemente elementi dell'interfaccia utente non interattivi come il misuratore di salute dimostrato in Crea misuratori HUD. Inoltre, quasi ogni gioco richiede un'interfaccia utente interattiva come pulsanti che rispondono all'attivazione del giocatore, animano quando attivati, tween in/out menu con altri controlli interattivi, ecc.

Utilizzando Fondamenti UI - Misuratore HUD come punto di partenza e Fondamenti UI - Interattività come riferimento finale, questo tutorial dimostra:

• Come posizionare un pulsante delle impostazioni lungo il bordo superiore dello schermo.
• Progettazione di un menu delle impostazioni contenente cursori interattivi trascinabili.
• Utilizzo di un ModuleScripts per formare moduli "controller" per il controllo estensibile degli oggetti UI con dichiarazioni di stato.
• Come collegare i pulsanti all'attivazione del giocatore per attivare/disattivare il menu delle impostazioni.
• Come collegare i cursori UI trascinabili per regolare separatamente il volume degli effetti sonori e dell'ambiente di sottofondo.

Abilita l'emulatore di dispositivo

Come notato in Crea misuratori HUD, telefoni e tablet hanno la minor quantità di spazio sullo schermo, quindi è importante che i tuoi elementi UI si adattino a schermi più piccoli e che siano chiaramente visibili ai giocatori. Se non lo hai già fatto, abilita l'Emulatore di dispositivo in Studio:

1. Apri il modello Fondamenti UI - Misuratore HUD in Studio.

2. Dal menu Test di Studio, attiva Emulatore di dispositivo.

3. Dalla barra direttamente sopra la vista principale, seleziona un'emulazione telefonica come iPhone X o Samsung Galaxy A51. Quindi, imposta la dimensione della vista su Adatta alla finestra per utilizzare il massimo spazio in Studio.

   

Crea il pulsante delle impostazioni

GuiButtons sono elementi dell'interfaccia utente interattivi con funzionalità integrate come l'evento multi-piattaforma Activated che si attiva quando il pulsante viene cliccato o toccato. La classe GuiButton si estende a due variazioni, TextButton e ImageButton, e questo tutorial utilizza un ImageButton a forma di "ingranaggio" per attivare o disattivare il menu delle impostazioni.

Per costruire il pulsante delle impostazioni:

1. Nella finestra Explorer, individua HUDContainer all'interno di StarterGui.

   

2. Inserisci un ImageButton in HUDContainer e rinominalo in SettingsButton.

   

3. Con il nuovo pulsante selezionato, imposta i seguenti valori nella finestra Proprietà:

   • AnchorPoint = 0.5, 0.25 (centro orizzontale e quarto superiore verticale)
   • BackgroundTransparency = 1 (completamente trasparente)
   • Position = 0.5, 0, 0, 0 (posizionamento al centro in alto)
   • Size = 0.1, 0, 0.1, 0 (10% dell'altezza dello schermo una volta vincolato il rapporto d'aspetto)
   • Image = rbxassetid://104919049969988 (ID asset del simbolo "ingranaggio")

4. Inserisci un UIAspectRatioConstraint nel pulsante con proprietà predefinite (rapporto 1:1 tra larghezza e altezza).

   

5. Per limitare l'altezza massima in pixel del pulsante, inserisci un UISizeConstraint e imposta il suo MaxSize su inf, 44.

   

   

   

Crea il menu delle impostazioni

Il nuovo pulsante delle impostazioni sarà programmato per attivare e disattivare un menu delle impostazioni, dando ai giocatori accesso on-demand a impostazioni o altre informazioni. In questo tutorial, il menu conterrà cursori interattivi per regolare i livelli di volume dell'audio di sottofondo e degli effetti sonori in modo indipendente.

Crea il frame genitore

Come notato in Crea misuratori HUD, un Frame funge da contenitore per altri oggetti UI. L'intero menu delle impostazioni sarà costruito con un singolo frame genitore, rendendolo semplice da gestire come oggetto con stato che reagisce all'input in modo diverso a seconda dello stato attuale.

1. Inserisci un Frame in HUDContainer e rinominalo in SettingsMenu.

   

2. Con SettingsMenu selezionato, imposta le seguenti proprietà:

   • AnchorPoint = 0.5 (ancora centrale)
   • BackgroundColor3 = 30, 30, 60 (blu navy)
   • BackgroundTransparency = 0.25 (75% opaco)
   • Position = 0.5, 0, 0.5, 0 (centro dello schermo)
   • Size = 0.75, 0, 0.75, 0 (75% della larghezza/altezza dell'area dello schermo interna)

   

3. Inserisci un UIAspectRatioConstraint in SettingsMenu e imposta la sua proprietà AspectRatio su 2.5. (rapporto 2.5:1 tra larghezza e altezza).

   

   

4. Inserisci un modificatore UICorner in SettingsMenu e imposta il suo CornerRadius su 0.1, 0.

   

   

5. Per vincolare la larghezza e l'altezza in pixel di SettingsMenu, inserisci un UISizeConstraint. Imposta il suo MaxSize su 800, inf e il suo MinSize su 350, 0.

   

   

   

Costruisci un cursore

Per consentire ai giocatori di regolare i livelli di volume, il menu delle impostazioni conterrà due widget cursore trascinabili alimentati da UIDragDetector, un oggetto conveniente che facilita l'interazione con elementi dell'interfaccia utente 2D.

Per creare un contenitore genitore per il primo cursore:

1. Inserisci un nuovo Frame nel contenitore SettingsMenu e rinominalo in EffectsVolumeSlider.

   

2. Con il frame EffectsVolumeSlider selezionato, imposta le seguenti proprietà:

   • AnchorPoint = 0.5 (ancora centrale)

   • BackgroundTransparency = 1 (completamente trasparente)

   • Position = 0.5, 0, 0.35, 0 (centro orizzontale e 35% dall'alto del contenitore)

   • Size = 0.8, 0, 0.1, 0 (80% della larghezza del contenitore e 10% della sua altezza)

     

3. Inserisci un nuovo UIListLayout in EffectsVolumeSlider. Questo modificatore di layout è un modo potente per disporre automaticamente gli oggetti GuiObjects fratelli in righe orizzontali o colonne verticali all'interno del loro contenitore genitore, inclusa la possibilità di applicare concetti di flex.

   

4. Imposta le seguenti proprietà per il nuovo UIListLayout:

   • Padding = 0.06, 0 (6% di padding tra gli elementi della lista)
   • FillDirection = Horizontal (disposizione da sinistra a destra degli elementi)
   • HorizontalFlex = Fill (ridimensiona gli elementi orizzontalmente per riempire l'intero contenitore genitore, sovrascrivendo la loro larghezza definita)
   • VerticalAlignment = Center (allinea gli elementi lungo il loro centro verticale)

Icona del cursore

Un'icona semplice che include una nota audio e un simbolo di "esplosione" aiuta i giocatori a identificare lo scopo del cursore quando aprono il menu delle impostazioni.

1. Inserisci un ImageLabel nel frame EffectsVolumeSlider e rinominalo in Icon. Questa icona aiuterà i giocatori a capire quale aspetto del gioco controlla il cursore.

   

   È importante notare che l'etichetta deve essere un fratello del UIListLayout, non un suo figlio.

2. Con Icon selezionato, imposta le seguenti proprietà:

   • BackgroundTransparency = 1 (completamente trasparente)
   • Size = 2.5, 0, 2.5, 0 (250% dell'altezza del frame genitore una volta vincolato il rapporto d'aspetto)
   • Image = rbxassetid://90019827067389 (ID asset della nota audio e simbolo di "esplosione")

3. Inserisci un UIAspectRatioConstraint in Icon e lascia le sue proprietà come predefinite (rapporto 1:1 tra larghezza e altezza).

   

Frame di intervallo

Direttamente a destra dell'icona, la parte interattiva del cursore dovrebbe essere contenuta all'interno di un altro Frame.

1. Inserisci un nuovo Frame nel frame EffectsVolumeSlider e rinominalo in SliderFrame. Nota che deve essere un fratello diretto del modificatore di layout UIListLayout.

   

2. Con SliderFrame selezionato, imposta le seguenti proprietà:

   • BackgroundColor3 = 0 (nero)
   • BackgroundTransparency = 0.75 (25% opaco)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (100% della larghezza/altezza del frame genitore)

   Nota che non è necessario assegnare modifiche posizionali come AnchorPoint o Position, poiché il UIListLayout controlla il posizionamento dei suoi fratelli, in questo caso ordinandoli orizzontalmente da sinistra a destra e mantenendoli verticalmente centrati tra loro.

   La proprietà LayoutOrder è importante quando si lavora con modificatori di layout come UIListLayout, poiché determina la sequenza in cui i fratelli vengono posizionati rispetto agli altri. Cambiarla in 1 per SliderFrame assicura che venga posizionata a destra di Icon che ha un valore predefinito di LayoutOrder di 0.

3. Inserisci i seguenti modificatori in SliderFrame:

   • UICorner con la sua proprietà CornerRadius impostata su 0.5, 0 (forma "pillola")
   • UISizeConstraint con la sua proprietà MaxSize impostata su inf, 30 (massimo 30 pixel di altezza)
   • UIStroke con il suo Color impostato su 0, Thickness su 3, e Transparency su 0.25 (contorno nero opaco al 75%)

   

Maniglia interattiva

Con il contenitore del cursore costruito, puoi ora creare una maniglia trascinabile con cui i giocatori possono interagire durante il gioco.

1. Inserisci un nuovo Frame nel contenitore SliderFrame e rinominalo in Handle.

   

2. Con Handle selezionato, imposta le seguenti proprietà:

   • AnchorPoint = 0.5 (ancora centrale)
   • Position = 0.5, 0, 0.5, 0 (centro orizzontale e verticale del frame genitore)
   • Size = 1.2, 0, 1.2, 0 (120% dell'altezza del frame genitore una volta vincolato il rapporto d'aspetto)
   • ZIndex = 3 (strato della maniglia visivamente davanti ad altri elementi del cursore)

3. Inserisci i seguenti modificatori in Handle:

   • UIAspectRatioConstraint con le sue proprietà predefinite (rapporto 1:1 tra larghezza e altezza)
   • UICorner con la sua proprietà CornerRadius impostata su 0.5, 0 (forma circolare)
   • UIStroke con il suo Color impostato su [0, 150, 255] e Thickness su 8 (contorno blu spesso)

4. Inserisci un oggetto UIDragDetector in Handle. Questo oggetto conveniente facilita e incoraggia l'interazione con elementi dell'interfaccia utente 2D.

   

5. Imposta le seguenti proprietà per il nuovo UIDragDetector:

   • DragStyle = TranslateLine (movimento 1D lungo l'asse DragAxis del detector.)
   • ResponseStyle = Scale (muovi in base ai valori di scala della posizione del genitore del detector)

6. Per garantire che l'intervallo di trascinamento lineare della maniglia sia limitato al suo contenitore, collega la sua proprietà BoundingUI al contenitore SliderFrame:

   1. Seleziona il UIDragDetector.
   2. Fai clic sulla sua proprietà BoundingUI nella finestra Proprietà.
   3. Torna nella finestra Explorer e fai clic sul genitore SliderFrame della maniglia.

   

   La proprietà BoundingUI ora riflette il contenitore SliderFrame:

   

Se ora provi a giocare al gioco, sarai in grado di trascinare la maniglia a sinistra e a destra all'interno del suo contenitore genitore:

Riempimento interno

Per indicare più chiaramente che il cursore controlla un intervallo dal 0% al 100%, puoi aggiungere un riempimento interno sul lato sinistro del contenitore che si sincronizzerà con la posizione variabile della maniglia.

1. Inserisci un nuovo Frame nel contenitore SliderFrame e rinominalo in InnerFill.

   

2. Imposta le seguenti proprietà per il frame InnerFill:

   • AnchorPoint = 0, 0.5 (bordo sinistro e centro verticale)
   • BackgroundColor3 = [0, 150, 255] (blu che corrisponde alla maniglia del cursore)
   • BackgroundTransparency = 0.35 (65% opaco)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (50% di larghezza e 100% di altezza del frame genitore)
   • ZIndex = 2 (strato visivamente davanti al riempimento/contorno del frame genitore)

3. Per abbinare la forma "pillola" del contenitore genitore SliderFrame, inserisci un modificatore UICorner e imposta la sua proprietà CornerRadius su 0.5, 0.

   

   

   

Duplica il cursore

Con il primo cursore costruito, puoi facilmente duplicarlo e modificare alcuni aspetti visivi per indicare un altro scopo, in questo caso il livello di volume dell'audio di sottofondo simboleggiato da un'icona di note musicali.

1. Seleziona l'oggetto EffectsVolumeSlider completato.

   

2. Duplica (CtrlD o ⌘D) e poi rinomina il duplicato in BackgroundVolumeSlider.

   

3. Cambia la Position del duplicato in 0.5, 0, 0.7, 0 per spostarlo sotto il primo cursore.

   

4. Espandi il ramo di primo livello di BackgroundVolumeSlider, seleziona l'etichetta dell'immagine Icon e cambia la sua proprietà Image in rbxassetid://101125859760167 (ID asset del simbolo con note musicali).

   

   

   

5. Espandi il ramo SliderFrame ⟩ Handle, seleziona il modificatore UIStroke all'interno e imposta la sua proprietà Color su [255, 0, 125] (magenta).

   

   

   

6. Seleziona il frame InnerFill all'interno di SliderFrame e cambia la sua proprietà BackgroundColor3 nello stesso colore magenta ([255, 0, 125]).

   

   

   

Crea il pulsante di chiusura

L'ultimo elemento del menu delle impostazioni è un pulsante di chiusura che fornisce ai giocatori un'ulteriore input per chiudere il menu (il SettingsButton al centro in alto servirà allo stesso scopo).

1. Inserisci un nuovo ImageButton nel contenitore SettingsMenu e rinominalo in CloseButton.

   

2. Con CloseButton selezionato, imposta le seguenti proprietà:

   • AnchorPoint = 1, 0 (angolo in alto a destra)
   • BackgroundTransparency = 1 (completamente trasparente)
   • Position = 1, -10, 0, 10 (10 pixel di margine dall'angolo in alto a destra)
   • Size = 0.15, 0, 0.15, 0 (15% dell'altezza del frame una volta vincolato il rapporto d'aspetto)
   • Image = rbxassetid://5577404210 (ID asset del simbolo del pulsante di chiusura)
   • ImageTransparency = 0.25 (75% opaco)

3. Inserisci un UIAspectRatioConstraint nel pulsante con proprietà predefinite (rapporto 1:1 tra larghezza e altezza).

   

Crea i moduli di controllo

Un setup di moduli di controllo estensibili rende la gestione dell'interfaccia utente interattiva più snella rispetto a script individuali posizionati all'interno di ciascun oggetto. ModuleScripts facilitano questa funzionalità estensibile consentendo di riutilizzare il codice tra script su lati diversi del confine client-server o sullo stesso lato del confine.

Controller di oggetti con stato

Il seguente modulo controller di oggetti con stato ti consente di allegare comportamenti agli oggetti UI come SettingsButton e SettingsMenu, e di attivare facilmente il passaggio tra vari stati. Per creare il modulo:

1. Inserisci un ModuleScript nel contenitore ReplicatedStorage e rinominalo in StatefulObjectController.

   

2. Incolla il seguente codice all'interno del modulo:

   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)
   
   	-- Crea tweens per riutilizzo per evitare di creare nuovi tweens ogni volta che lo stato cambia
   	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("Tentativo di impostare %s su stato sconosciuto '%s'", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Assicurati che altri tweens non siano in conflitto
   	for _, tween in self.tweens do
   		tween:Cancel()
   	end
   
   	stateTween:Play()
   end
   
   return StatefulObjectController

   Spiegazione del codice

   Linee	Scopo
   6‑10	Definisce ed esporta i tipi Luau per migliorare l'autocompletamento e il linting quando si utilizza questo modulo.
   12‑33	Funzione utilizzata per inizializzare e allegare comportamenti a un oggetto UI con stato, accettando un GuiObject come object, una tabella di stati e i rispettivi dati TweenInfo, e un nome di stato iniziale. All'interno di questa funzione, le righe 26‑28 costruiscono Tweens per ciascuno stato, e la riga 30 chiama la funzione setState() del modulo per impostare l'oggetto nello stato iniziale.
   35‑50	Funzione utilizzata per impostare/cambiare lo stato di un oggetto con stato. La riga 42 imposta il currentStateName dell'oggetto sullo stato impostato, le righe 45‑47 annullano eventuali tweens in esecuzione per prevenire conflitti, e la riga 49 esegue il tween dello stato.

Controller del cursore

Un modulo aggiuntivo inizializza e controlla i due cursori di volume. Consente anche di collegare una funzione di callback a ciascun cursore per rilevare l'interazione del giocatore con il cursore e applicare le modifiche desiderate nel gioco.

1. Inserisci un ModuleScript nel contenitore ReplicatedStorage e rinominalo in SliderController.

   

2. Incolla il seguente codice all'interno del modulo:

   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("Tentativo di idratare il cursore %s ma non è stato possibile trovare Handle", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Tentativo di idratare il cursore %s ma non è stato possibile trovare InnerFill", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Tentativo di idratare il cursore %s ma non è stato possibile trovare UIDragDetector", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Imposta il valore iniziale
   	self:setValue(self.value)
   
   	-- Collega il detector alla manipolazione del giocatore
   	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
   
   	-- Aggiorna la posizione della maniglia e la dimensione del riempimento interno per corrispondere
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Esegui la callback dell'utente con l'ultimo valore
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Errore nella callback del cursore:", changeResult)
   	end
   end
   
   return SliderController

   Spiegazione del codice

   Linee	Scopo
   7‑46	Funzione utilizzata per inizializzare e allegare comportamenti a un elemento cursore, accettando il Frame genitore del cursore come object, una funzione di callback onChanged per elaborare le modifiche del cursore, e un valore iniziale per la posizione della maniglia del cursore. All'interno della funzione, le righe 14‑27 confermano che gli elementi maniglia, riempimento interno e UIDragDetector del cursore esistono. La riga 38 chiama la funzione setValue() del modulo e le righe 41‑43 collegano l'evento DragContinue del detector alla funzione setValue() del modulo (vedi la riga successiva per i dettagli).
   48‑61	Funzione utilizzata per impostare il valore del cursore. All'interno della funzione, le righe 53‑54 assicurano che la posizione della maniglia e la dimensione del riempimento interno siano sincronizzate, e la riga 57 passa il valore cambiato alla funzione di callback in modo da poter utilizzare il valore come necessario.

Crea lo script delle impostazioni

Con il pulsante delle impostazioni e il menu delle impostazioni finalizzati, puoi collegare tutto insieme con un singolo script che utilizza i moduli di controllo.

1. Inserisci un nuovo LocalScript in HUDContainer e rinominalo in SettingsScript per descriverne lo scopo. Nota che questo script dovrebbe essere allo stesso livello (fratello) di SettingsMenu e SettingsButton, gli oggetti UI di primo livello che gestirà.

   

2. Incolla il seguente codice all'interno dello 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
   
   -- Inizializza il pulsante delle impostazioni
   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"
   })
   
   -- Inizializza il frame del menu delle impostazioni
   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"
   })
   
   -- Inizializza il cursore del volume degli effetti
   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,
   })
   
   -- Inizializza il cursore del volume di sottofondo
   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,
   })
   
   -- Collega i pulsanti all'interazione del giocatore
   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. Riferisciti alle seguenti sezioni per esplorare come lo script utilizza i moduli di controllo.

   Pulsante delle impostazioni

   Le righe 10-27 inizializzano e allegano comportamenti al pulsante delle impostazioni come segue:

   Linee	Scopo
   10‑11	Viene dichiarato un riferimento locale settingsButton e idratato con la funzione StatefulObjectController.hydrate(), e il pulsante SettingsButton all'interno di HUDContainer viene referenziato come oggetto da idratare.
   12‑25	Viene passata una tabella states con due stati unici, menuOpen e menuClosed. Ogni stato contiene una transizione per dichiarare (attraverso un TweenInfo) come il particolare stato raggiungerà le proprietà target definite nella tabella properties. In questo caso, menuOpen dichiara un cambiamento di stato a 45° per la Rotation del pulsante con un tween di Exponential di ½ secondo, mentre menuClosed ripristina effettivamente il pulsante alla sua rotazione predefinita di 0.
   26	Lo stato iniziale del pulsante è impostato su menuClosed (questo potrebbe essere impostato su qualsiasi nome di stato all'interno della tabella states).

   Più in basso nello script (righe 76-86), i pulsanti sono collegati all'interazione del giocatore per attivare i cambiamenti di stato dell'interfaccia utente:

   Linee	Scopo
   76‑82	SettingsButton è collegato all'evento Activated della classe GuiButton per chiamare una funzione anonima. All'interno della funzione anonima, le righe 77‑79 alternano una variabile targetState tra menuOpen e menuClosed. La riga 80 chiama quindi setState() per impostare lo stato del pulsante su targetState e la riga `81 fa lo stesso per SettingsMenu in modo che si apra o si chiuda con l'attivazione di SettingsButton.
   83‑86	CloseButton è collegato all'evento Activated per chiamare una funzione anonima che imposta lo stato di entrambi SettingsButton e SettingsMenu su menuClosed.

   Menu delle impostazioni

   Le righe 30-49 inizializzano e allegano comportamenti al menu delle impostazioni come segue:

   Linee	Scopo
   30‑31	Viene dichiarato un riferimento locale settingsMenu e idratato con la funzione StatefulObjectController.hydrate() e il frame SettingsMenu all'interno di HUDContainer viene referenziato come oggetto da idratare.
   32‑46	Simile al pulsante delle impostazioni, viene passata una tabella states con due stati unici, menuOpen e menuClosed. Qui, menuOpen dichiara un cambiamento di stato a UDim2.fromScale(0.5, 0.5) per la Position del frame con un tween di Bounce di ½ secondo, così come uno stato Visible di true. Al contrario, menuClosed dichiara un cambiamento di stato posizionale a UDim2.fromScale(0.5, 0.4) e Visible su false, ma il TweenInfo con durata 0 alla riga 41 rende effettivamente il cambiamento di stato istantaneo.
   48	Lo stato iniziale del frame è impostato su menuClosed.

   Più in basso nello script (righe 76-86), il menu delle impostazioni è collegato all'interazione del giocatore:

   Linee	Scopo
   81	Imposta lo stesso targetState per SettingsMenu per sincronizzarsi con l'attivazione di SettingsButton.
   85	Imposta lo stato di SettingsMenu su menuClosed quando CloseButton viene attivato.

   Cursori di volume

   Le righe 51-73 inizializzano e allegano comportamenti a EffectsVolumeSlider e BackgroundVolumeSlider come segue:

   Linee	Scopo
   52	Imposta un riferimento locale al SoundGroup Effects all'interno di SoundService. Un SoundGroup consente di interrelare più Sounds e controllare il volume di ogni suono nel gruppo attraverso la proprietà Volume del gruppo.
   53‑54	Viene dichiarato un riferimento locale effectsVolumeSlider e idratato con la funzione SliderController.hydrate() e il frame EffectsVolumeSlider all'interno di HUDContainer ⟩ SettingsMenu viene referenziato come oggetto da idratare. Nota che il secondo parametro di true per FindFirstChild() dice al metodo di cercare ricorsivamente lungo il ramo HUDContainer per localizzare EffectsVolumeSlider.
   55	Il valore iniziale del cursore è impostato sul valore attuale di Volume del gruppo Effects, o 0.5 come fallback.
   56‑60	Stabilisce la funzione di callback per applicare le modifiche del valore del cursore al volume del gruppo Effects.
   64‑73	Fondamentalmente lo stesso delle righe 52-61, tranne per idratare il frame BackgroundVolumeSlider all'interno di HUDContainer ⟩ SettingsMenu e applicare le modifiche del valore del cursore al volume del gruppo Background.

Con SettingsScript in posizione, il gioco ora offre un esempio di interfaccia utente interattiva completamente operativo che collega un insieme correlato di oggetti UI all'interazione del giocatore.