Interaktive Benutzeroberfläche erstellen

Ein HUD (Heads-Up-Display) in Ihrem Erlebnis zeigt typischerweise nicht-interaktive UI-Elemente an, wie z. B. die Gesundheitsanzeige, die in HUD-Messgeräte erstellen demonstriert wird. Darüber hinaus erfordert fast jedes Erlebnis eine interaktive Benutzeroberfläche, wie z. B. Schaltflächen, die auf die Aktivierung durch Spieler reagieren, animieren, wenn sie aktiviert werden, Menüs mit anderen interaktiven Steuerelementen ein- und ausblenden usw.

Mit UI-Grundlagen - HUD-Meter als Ausgangspunkt und UI-Grundlagen - Interaktivität als fertigem Referenzpunkt demonstriert dieses Tutorial:

• Wie man eine Einstellungen-Schaltfläche am oberen Bildschirmrand positioniert.
• Design eines Einstellungsmenüs mit interaktiven, ziehbaren Schiebereglern.
• Verwendung von Modul-Skripten, um "Controller"-Module zu erstellen, die eine erweiterbare Steuerung von UI-Objekten mit zustandsbehafteten Deklarationen ermöglichen.
• Wie man Schaltflächen mit der Aktivierung durch Spieler verbindet, um das Einstellungsmenü ein- und auszublenden.
• Wie man Zieh-Schieber für die Benutzeroberfläche verbindet, um die Lautstärke von Soundeffekten und Hintergrundgeräuschen unabhängig anzupassen.

Aktivieren Sie den Geräte-Emulator

Wie in HUD-Messgeräte erstellen erwähnt, haben Smartphones und Tablets den geringsten Bildschirmplatz, daher ist es wichtig, dass Ihre UI-Elemente auf kleinere Bildschirme passen und für die Spieler deutlich sichtbar sind. Wenn Sie dies noch nicht getan haben, aktivieren Sie den Geräte-Emulator im Studio:

1. Öffnen Sie die UI-Grundlagen - HUD-Meter Vorlage im Studio.

2. Schalten Sie im Test-Menü von Studio Geräte-Emulator ein.

3. Wählen Sie aus der Leiste direkt über dem Hauptansichtsfenster eine Handy-Emulation wie iPhone X oder Samsung Galaxy A51. Stellen Sie dann die Ansicht auf An Fenster anpassen ein, um den maximalen Platz im Studio zu nutzen.

   

Erstellen Sie die Einstellungen-Schaltfläche

GuiButtons sind interaktive Benutzeroberflächenelemente mit integrierter Funktionalität, wie das plattformübergreifende Aktiviert-Ereignis, das ausgelöst wird, wenn die Schaltfläche angeklickt oder angetippt wird. Die GuiButton-Klasse erweitert um zwei Variationen, TextButton und ImageButton, und dieses Tutorial verwendet eine "Zahnrad"-förmige ImageButton, um das Einstellungsmenü zu öffnen oder zu schließen.

Um die Einstellungen-Schaltfläche zu erstellen:

1. Suchen Sie im Explorer-Fenster HUDContainer innerhalb von StarterGui.

   

2. Fügen Sie eine ImageButton in HUDContainer ein und benennen Sie sie in SettingsButton um.

   

3. Wählen Sie mit der neuen Schaltfläche die folgenden Eigenschaften im Eigenschaften-Fenster aus:

   • AnchorPoint = 0.5, 0.25 (horizontal zentriert und vertikal oberes Viertel)
   • BackgroundTransparency = 1 (vollständig transparent)
   • Position = 0.5, 0, 0, 0 (oben-zentrierte Positionierung)
   • Size = 0.1, 0, 0.1, 0 (10% der Bildschirmhöhe, wenn das Seitenverhältnis eingeschränkt ist)
   • Image = rbxassetid://104919049969988 (Asset-ID des "Zahnrad"-Symbols)

4. Fügen Sie einen UIAspectRatioConstraint in die Schaltfläche mit den Standardwerten (1:1 Breite zu Höhe) ein.

   

5. Um die maximale Pixelhöhe der Schaltfläche zu begrenzen, fügen Sie einen UISizeConstraint ein und setzen Sie dessen MaxSize auf inf, 44.

   

   

   

Erstellen Sie das Einstellungsmenü

Die neue Einstellungen-Schaltfläche wird so programmiert, dass sie ein Einstellungsmenü öffnet und schließt, wodurch die Spieler auf Abruf auf Einstellungen oder andere Informationen zugreifen können. In diesem Tutorial wird das Menü interaktive Schieberegler enthalten, um die Lautstärke von Hintergrundmusik und Soundeffekten unabhängig anzupassen.

Erstellen Sie den übergeordneten Rahmen

Wie in HUD-Messgeräte erstellen erwähnt, dient ein Frame als Container für andere UI-Objekte. Das gesamte Einstellungsmenü wird mit einem einzigen übergeordneten Rahmen konstruiert, was die Verwaltung als zustandsbehaftetes Objekt einfach macht, das auf Eingaben je nach aktuellem Zustand unterschiedlich reagiert.

1. Fügen Sie ein Frame in HUDContainer ein und benennen Sie es in SettingsMenu um.

   

2. Wählen Sie SettingsMenu aus und setzen Sie die folgenden Eigenschaften:

   • AnchorPoint = 0.5 (Zentranker)
   • BackgroundColor3 = 30, 30, 60 (marineblau)
   • BackgroundTransparency = 0.25 (75% opak)
   • Position = 0.5, 0, 0.5, 0 (Mitte des Bildschirms)
   • Size = 0.75, 0, 0.75, 0 (75% der Breite/Höhe des eingefügten Bildschirmbereichs)

   

3. Fügen Sie einen UIAspectRatioConstraint in SettingsMenu ein und setzen Sie dessen AspectRatio auf 2.5. (2.5:1 Breite zu Höhe).

   

   

4. Fügen Sie einen UICorner-Modifikator in SettingsMenu ein und setzen Sie dessen CornerRadius auf 0.1, 0.

   

   

5. Um die Pixelbreite und -höhe von SettingsMenu einzuschränken, fügen Sie einen UISizeConstraint ein. Setzen Sie dessen MaxSize auf 800, inf und dessen MinSize auf 350, 0.

   

   

   

Erstellen Sie einen Schieberegler

Um Spielern zu ermöglichen, die Lautstärke anzupassen, wird das Einstellungsmenü zwei ziehbare Schieberegler enthalten, die durch UIDragDetector angetrieben werden, einem praktischen Objekt, das die Interaktion mit 2D-Benutzeroberflächen-Elementen erleichtert.

Um einen übergeordneten Container für den ersten Schieberegler zu erstellen:

1. Fügen Sie ein neues Frame in den SettingsMenu-Container ein und benennen Sie es in EffectsVolumeSlider um.

   

2. Wählen Sie den EffectsVolumeSlider-Rahmen aus und setzen Sie die folgenden Eigenschaften:

   • AnchorPoint = 0.5 (Zentranker)
   • BackgroundTransparency = 1 (vollständig transparent)
   • Position = 0.5, 0, 0.35, 0 (horizontal zentriert und 35% vom oberen Rand des Containers)
   • Size = 0.8, 0, 0.1, 0 (80% der Breite des Containers und 10% seiner Höhe)

   

3. Fügen Sie ein neues UIListLayout in EffectsVolumeSlider ein. Dieser Layoutmodifikator ist eine leistungsstarke Möglichkeit, Geschwister GuiObjects automatisch in horizontalen Reihen oder vertikalen Spalten innerhalb ihres übergeordneten Containers anzuordnen, einschließlich der Möglichkeit, Flex Konzepte anzuwenden.

   

4. Setzen Sie die folgenden Eigenschaften für den neuen UIListLayout:

   • Padding = 0.06, 0 (6% Padding zwischen Listen-Elementen)
   • FillDirection = Horizontal (Anordnung der Elemente von links nach rechts)
   • HorizontalFlex = Fill (Elemente horizontal anpassen, um den gesamten übergeordneten Container auszufüllen, das definierte Breite überschreiben)
   • VerticalAlignment = Center (Elemente entlang ihrer vertikalen Mitte ausrichten)

Schieberegler-Symbol

Ein einfaches Symbol, das eine Audio-Note und ein "Burst"-Symbol enthält, hilft Spielern, den Zweck des Schiebers zu erkennen, wenn sie das Einstellungsmenü öffnen.

1. Fügen Sie ein ImageLabel in den EffectsVolumeSlider-Rahmen ein und benennen Sie es in Icon um. Dieses Symbol hilft Spielern, zu verstehen, welchen Aspekt des Erlebnisses der Schieberegler steuert.

   

   Wichtig ist, dass das Label ein Geschwister von der UIListLayout, nicht ein Kind davon sein muss.

2. Wählen Sie Icon aus und setzen Sie die folgenden Eigenschaften:

   • BackgroundTransparency = 1 (vollständig transparent)
   • Size = 2.5, 0, 2.5, 0 (250% der Höhe des übergeordneten Rahmens, wenn das Seitenverhältnis eingeschränkt ist)
   • Image = rbxassetid://90019827067389 (Asset-ID der Audio-Note und des "Burst"-Symbols)

3. Fügen Sie einen UIAspectRatioConstraint in Icon ein und lassen Sie die Eigenschaften auf den Standardeinstellungen (1:1 Breite zu Höhe).

   

Bereichsrahmen

Direkt rechts vom Symbol sollte der interaktive Teil des Schiebers in einem weiteren Frame eingeschlossen sein.

1. Fügen Sie ein neues Frame in den EffectsVolumeSlider-Rahmen ein und benennen Sie es in SliderFrame um. Beachten Sie, dass es ein direkter Geschwister des Layoutmodifikators UIListLayout sein muss.

   

2. Wählen Sie SliderFrame aus und setzen Sie die folgenden Eigenschaften:

   • BackgroundColor3 = 0 (schwarz)
   • BackgroundTransparency = 0.75 (25% opak)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (100% Breite/Höhe des übergeordneten Rahmens)

   Es ist nicht erforderlich, positionale Änderungen wie AnchorPoint oder Position zuzuweisen, da der UIListLayout die Positionierung seiner Geschwister steuert, in diesem Fall sie horizontal von links nach rechts ordnet und sie vertikal zentriert hält.

   Die LayoutOrder-Eigenschaft ist wichtig, wenn Sie mit Layoutmodifikatoren wie UIListLayout arbeiten, da sie die Reihenfolge bestimmt, in der Geschwister zueinander platziert werden. Wenn Sie sie für SliderFrame auf 1 ändern, wird sichergestellt, dass sie rechts von Icon platziert wird, das eine Standard LayoutOrder von 0 hat.

3. Fügen Sie die folgenden Modifikatoren in SliderFrame ein:

   • UICorner mit seiner CornerRadius-Eigenschaft auf 0.5, 0 ("Pillen"-Form)
   • UISizeConstraint mit seiner MaxSize-Eigenschaft auf inf, 30 (maximal 30 Pixel hoch)
   • UIStroke mit seiner Color auf 0, Thickness auf 3, und Transparency auf 0.25 (75% opake schwarze Umrandung)

   

Interaktiver Griff

Mit dem Schieberegler-Container, den Sie erstellt haben, können Sie jetzt einen ziehbaren Griff erstellen, mit dem Spieler während des Spiels interagieren können.

1. Fügen Sie ein neues Frame in den SliderFrame-Container ein und benennen Sie es in Handle um.

   

2. Wählen Sie Handle aus und setzen Sie die folgenden Eigenschaften:

   • AnchorPoint = 0.5 (Zentranker)
   • Position = 0.5, 0, 0.5, 0 (horizontal und vertikal zentriert im übergeordneten Rahmen)
   • Size = 1.2, 0, 1.2, 0 (120% der Höhe des übergeordneten Rahmens, wenn das Seitenverhältnis eingeschränkt ist)
   • ZIndex = 3 (den Griff visuell vor anderen Schieberelementen anordnen)

3. Fügen Sie die folgenden Modifikatoren in Handle ein:

   • UIAspectRatioConstraint mit den Standardwerten (1:1 Breite zu Höhe)
   • UICorner mit seiner CornerRadius-Eigenschaft auf 0.5, 0 (runder Form)
   • UIStroke mit seiner Color auf [0, 150, 255] und Thickness auf 8 (dicke blaue Umrandung)

4. Fügen Sie ein UIDragDetector-Objekt in Handle ein. Dieses praktische Objekt erleichtert und fördert die Interaktion mit 2D-Benutzeroberflächen-Elementen.

   

5. Setzen Sie die folgenden Eigenschaften für den neuen UIDragDetector:

   • DragStyle = TranslateLine (1D-Bewegung entlang der DragAxis des Detektors.)
   • ResponseStyle = Scale (Bewegung durch Skalierungswerte der Position des übergeordneten Detektors)

6. Um sicherzustellen, dass der lineare Ziehbereich des Griffs auf seinen Container beschränkt ist, verknüpfen Sie die BoundingUI-Eigenschaft mit dem SliderFrame-Container:

   1. Wählen Sie den UIDragDetector aus.
   2. Klicken Sie in den Eigenschaften auf die BoundingUI-Eigenschaft.
   3. Klicken Sie im Explorer-Fenster auf den übergeordneten SliderFrame.

   

   Die BoundingUI-Eigenschaftsverknüpfung spiegelt jetzt den SliderFrame-Container wider:

   

Wenn Sie das Erlebnis jetzt testen, können Sie den Griff innerhalb seines übergeordneten Containers nach links und rechts ziehen:

Innere Füllung

Um deutlicher zu zeigen, dass der Schieberegler einen Bereich von 0% bis 100% steuert, können Sie auf der linken Seite des Containers eine innere Füllung hinzufügen, die mit der variablen Position des Griffs synchronisiert wird.

1. Fügen Sie ein neues Frame in den SliderFrame-Container ein und benennen Sie es in InnerFill um.

   

2. Setzen Sie die folgenden Eigenschaften für den InnerFill-Rahmen:

   • AnchorPoint = 0, 0.5 (linke Kante und vertikale Mitte)
   • BackgroundColor3 = [0, 150, 255] (blau, das dem Griff des Schiebers entspricht)
   • BackgroundTransparency = 0.35 (65% opak)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (50% Breite und 100% Höhe des übergeordneten Rahmens)
   • ZIndex = 2 (visuell vor der Füllung/Umrandung des übergeordneten Rahmens anordnen)

3. Um die "Pillen"-Form des übergeordneten SliderFrame-Containers anzupassen, fügen Sie einen UICorner-Modifikator hinzu und setzen Sie dessen CornerRadius-Eigenschaft auf 0.5, 0.

   

   

   

Duplizieren Sie den Schieberegler

Mit dem ersten Schieberegler können Sie ihn einfach duplizieren und einige visuelle Aspekte ändern, um einen anderen Zweck anzuzeigen, in diesem Fall das Lautstärkeniveau von Hintergrundmusik, symbolisiert durch ein Symbol mit Noten.

1. Wählen Sie das abgeschlossene EffectsVolumeSlider-Objekt aus.

   

2. Duplizieren Sie es (StrgD oder ⌘D) und benennen Sie die Duplikation in BackgroundVolumeSlider um.

   

3. Ändern Sie die Position des Duplikats auf 0.5, 0, 0.7, 0, um es unter dem ersten Schieberegler zu positionieren.

   

4. Erweitern Sie den oberen Zweig von BackgroundVolumeSlider, wählen Sie das Icon-Bildlabel aus und ändern Sie dessen Image-Eigenschaft auf rbxassetid://101125859760167 (Asset-ID des Symbols mit Musiknoten).

   

   

   

5. Erweitern Sie den SliderFrame ⟩ Handle-Zweig, wählen Sie den innerhalb befindlichen UIStroke-Modifikator aus und setzen Sie dessen Color-Eigenschaft auf [255, 0, 125] (magenta).

   

   

   

6. Wählen Sie den InnerFill-Rahmen innerhalb von SliderFrame aus und ändern Sie dessen BackgroundColor3-Eigenschaft in dieselbe magentafarbene Farbe ([255, 0, 125]).

   

   

   

Erstellen Sie die Schaltfläche "Schließen"

Das letzte Element des Einstellungsmenüs ist eine Schließen-Schaltfläche, die den Spielern eine zusätzliche Eingabe ermöglicht, um das Menü zu schließen (die SettingsButton in der oberen Mitte erfüllt denselben Zweck).

1. Fügen Sie eine neue ImageButton in den SettingsMenu-Container ein und benennen Sie sie in CloseButton um.

   

2. Wählen Sie CloseButton aus und setzen Sie die folgenden Eigenschaften:

   • AnchorPoint = 1, 0 (obere rechte Ecke)
   • BackgroundTransparency = 1 (vollständig transparent)
   • Position = 1, -10, 0, 10 (10 Pixel Abstand von der oberen rechten Ecke)
   • Size = 0.15, 0, 0.15, 0 (15% der Höhe des Rahmens, wenn das Seitenverhältnis eingeschränkt ist)
   • Image = rbxassetid://5577404210 (Asset-ID des Symbols der Schließen-Schaltfläche)
   • ImageTransparency = 0.25 (75% opak)

3. Fügen Sie einen UIAspectRatioConstraint in die Schaltfläche mit den Standardwerten (1:1 Breite zu Höhe) ein.

   

Erstellen Sie die Steuerungs-Module

Ein erweiterbares Steuerungsmodul-Setup macht das Management interaktiver UI einfacher als einzelne Skripte, die in jedem Objekt platziert sind. Modul-Skripte erleichtern diese erweiterbare Funktionalität, indem Sie es ermöglichen, Code zwischen Skripten auf verschiedenen Seiten der Client-Server-Grenze oder auf derselben Seite der Grenze wiederzuverwenden.

Stateful Object Controller

Das folgende Stateful Object Controller Modul ermöglicht es Ihnen, Verhalten an UI-Objekte wie SettingsButton und SettingsMenu anzuhängen und einfach zwischen verschiedenen Zuständen umzuschalten/zu tween. Um das Modul zu erstellen:

1. Fügen Sie ein ModuleScript in den ReplicatedStorage-Container ein und benennen Sie es in StatefulObjectController um.

2. Fügen Sie den folgenden Code in das Modul ein:

   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)
   
   	-- Create tweens for reuse to avoid making new tweens every time state is changed
   	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("Attempted to set %s to unknown state '%s'", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Make sure other tweens aren't conflicting
   	for _, tween in self.tweens do
   		tween:Cancel()
   	end
   
   	stateTween:Play()
   end
   
   return StatefulObjectController

   Code-Erklärung

   Zeilen	Zweck
   6‑10	Definiert und exportiert die Luau-Typen zur Verbesserung der Autovervollständigung und Linting, wenn dieses Modul verwendet wird.
   12‑33	Funktion, die verwendet wird, um ein zustandsbehaftetes UI-Objekt zu initialisieren und Verhalten anzuhängen, indem ein GuiObject als object, eine Tabelle von Zuständen und deren entsprechenden TweenInfo-Daten sowie ein anfänglicher Zustandname akzeptiert wird. Innerhalb dieser Funktion konstruieren die Zeilen 26‑28 Tweens für jeden Zustand, und die Zeile 30 ruft die setState()-Funktion des Moduls auf, um das Objekt auf den Anfangszustand zu setzen.
   35‑50	Funktion, die verwendet wird, um den Zustand eines zustandsbehafteten Objekts festzulegen/zu ändern. Die Zeile 42 setzt den currentStateName des Objekts auf den Zustand, der festgelegt wird, die Zeilen 45‑47 brechen alle laufenden Tweens ab, um Konflikte zu verhindern, und die Zeile 49 führt den Tween des Zustands aus.

Schieberegler-Controller

Ein zusätzliches Modul initialisiert und steuert die beiden Lautstärkeschieberegler. Es ermöglicht Ihnen auch, eine Rückruffunktion an jeden Schieberegler zu verbinden, um die Interaktion des Spielers mit dem Schieberegler zu erkennen und gewünschte Änderungen im Erlebnis anzuwenden.

1. Fügen Sie ein ModuleScript in den ReplicatedStorage-Container ein und benennen Sie es in SliderController um.

   

2. Fügen Sie den folgenden Code in das Modul ein:

   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("Attempted to hydrate slider %s but couldn't find Handle", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Attempted to hydrate slider %s but couldn't find InnerFill", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Attempted to hydrate slider %s but couldn't find UIDragDetector", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Set initial value
   	self:setValue(self.value)
   
   	-- Connect detector to player manipulation
   	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 the handle position and inner frame size to match
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Run the user's callback with the latest value
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Error in slider callback:", changeResult)
   	end
   end
   
   return SliderController

   Code-Erklärung

   Zeilen	Zweck
   7‑46	Funktion, die verwendet wird, um Verhalten an ein Schieberegler-Element anzuhängen, einschließlich des übergeordneten Frame als object, einer onChanged-Rückruffunktion zur Verarbeitung von Änderungen am Schieberegler und einem anfänglichen Wert für die Position des Schiebereglers. Innerhalb der Funktion bestätigen die Zeilen 14‑27, dass die Schieberegler- Griff, innere Füllung und UIDragDetector-Elemente existieren. Die Zeile 38 ruft die setValue()-Funktion des Moduls auf und die Zeilen 41‑43 verbinden das DragContinue-Ereignis des Detektors mit der setValue()-Funktion des Moduls (siehe nächste Zeile für Details).
   48‑61	Funktion, die verwendet wird, um den Wert des Schiebers festzulegen. Innerhalb der Funktion sorgen die Zeilen 53‑54 dafür, dass die Position des Griffs und die Größe der inneren Füllung synchronisiert sind, und die Zeile 57 gibt den geänderten Wert an die Rückruffunktion weiter, sodass Sie den Wert nach Bedarf nutzen können.

Erstellen Sie das Einstellungs-Skript

Mit der Einstellungen-Schaltfläche und dem Einstellungsmenü, die nun fertig sind, können Sie alles mit einem einzigen Skript verbinden, das die Steuermodule nutzt.

1. Fügen Sie ein neues LocalScript in HUDContainer ein und benennen Sie es in SettingsScript um, um seinen Zweck zu beschreiben. Beachten Sie, dass dieses Skript auf demselben Niveau (Geschwister) wie SettingsMenu und SettingsButton, den übergeordneten UI-Objekten, die es verwaltet, stehen sollte.

   

2. Fügen Sie den folgenden Code in das Skript ein:

   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
   
   -- Initialize settings button
   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"
   })
   
   -- Initialize settings menu 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"
   })
   
   -- Initialize effects volume slider
   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,
   })
   
   -- Initialize background volume slider
   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,
   })
   
   -- Connect buttons to player interaction
   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. Referenzieren Sie die folgenden Abschnitte, um zu erfahren, wie das Skript die Steuermodule nutzt.

   Einstellungs-Schaltfläche

   Die Zeilen 10-27 initialisieren und hängen Verhalten an die Einstellungen-Schaltfläche an, wie folgt:

   Zeilen	Zweck
   10‑11	Eine lokale Referenz settingsButton wird deklariert und mit der StatefulObjectController.hydrate()-Funktion hydratisiert, und die SettingsButton-Schaltfläche innerhalb von HUDContainer wird als das zu hydratisierende Objekt referenziert.
   12‑25	Ein states-Tabelle wird übergeben, die zwei einzigartige Zustände enthält, menuOpen und menuClosed. Jeder Zustand enthält einen Übergang, um zu erklären (durch eine TweenInfo), wie der bestimmte Zustand die Zielwerte erreicht, die in der properties-Tabelle definiert sind. In diesem Fall erklärt menuOpen eine Zustandsänderung auf 45° für die Rotation der Schaltfläche mit einem Exponential Tween von einer halben Sekunde, während menuClosed effektiv die Schaltfläche auf ihre Standarddrehung von 0 zurücksetzt.
   26	Der anfängliche Zustand der Schaltfläche wird auf menuClosed gesetzt (dies könnte auf jeden Zustandsnamen innerhalb der states-Tabelle gesetzt werden).

   Weiter unten im Skript (Zeilen 76-86) werden die Schaltflächen mit der Interaktion des Spielers verbunden, um Zustandsänderungen der UI auszulösen:

   Zeilen	Zweck
   76‑82	SettingsButton wird mit dem Aktiviert-Ereignis der GuiButton-Klasse verbunden, um eine anonyme Funktion aufzurufen. Innerhalb der anonymen Funktion wechseln die Zeilen 77‑79 die targetState-Variable zwischen menuOpen und menuClosed. Die Zeile 80 ruft dann setState() auf, um den Zustand der Schaltfläche auf targetState einzustellen, und die Zeile 81 macht dasselbe für SettingsMenu, sodass es sich mit der Aktivierung von SettingsButton öffnet oder schließt.
   83‑86	CloseButton ist mit dem Aktiviert-Ereignis verbunden, um eine anonyme Funktion aufzurufen, die den Zustand von sowohl SettingsButton als auch SettingsMenu auf menuClosed setzt.

   Einstellungsmenü

   Die Zeilen 30-49 initialisieren und hängen Verhalten an das Einstellungsmenü an, wie folgt:

   Zeilen	Zweck
   30‑31	Eine lokale Referenz settingsMenu wird deklariert und mit der StatefulObjectController.hydrate()-Funktion hydratisiert, wobei der SettingsMenu-Rahmen innerhalb von HUDContainer als das zu hydratisierende Objekt referenziert wird.
   32‑46	Ähnlich wie bei der Einstellungs-Schaltfläche wird eine states-Tabelle mit zwei einzigartigen Zuständen übergeben, menuOpen und menuClosed. Hier erklärt menuOpen eine Zustandsänderung zur UDim2.fromScale(0.5, 0.5) für die Position des Rahmens mit einem Bounce Tween von einer halben Sekunde sowie einem Visible Zustand von true. Im Gegensatz dazu erklärt menuClosed eine Zustandsänderung zur Position von UDim2.fromScale(0.5, 0.4) und Visible auf false, jedoch bewirkt die TweenInfo mit einer Dauer von 0 in der Zeile 41, dass die Zustandsänderung sofort erfolgt.
   48	Der Anfangszustand des Rahmens wird auf menuClosed gesetzt.

   Weiter unten im Skript (Zeilen 76-86) ist das Einstellungsmenü mit der Interaktion des Spielers verbunden:

   Zeilen	Zweck
   81	Setzt denselben targetState für SettingsMenu, um mit der Aktivierung von SettingsButton synchron zu sein.
   85	Setzt den Zustand von SettingsMenu auf menuClosed, wenn CloseButton aktiviert wird.

   Lautstärkeregler

   Die Zeilen 51-73 initialisieren und hängen Verhalten an EffectsVolumeSlider und BackgroundVolumeSlider an, wie folgt:

   Zeilen	Zweck
   52	Setzt eine lokale Referenz auf die Effects SoundGroup innerhalb von SoundService. Eine SoundGroup ermöglicht es Ihnen, mehrere Sounds miteinander zu verbinden und die Lautstärke jedes Sounds in der Gruppe über die Volume-Eigenschaft der Gruppe zu steuern.
   53‑54	Eine lokale Referenz effectsVolumeSlider wird deklariert und mit der SliderController.hydrate()-Funktion hydratisiert, wobei der EffectsVolumeSlider-Rahmen innerhalb von HUDContainer ⟩ SettingsMenu als das zu hydratisierende Objekt referenziert wird. Beachten Sie, dass der zweite Parameter von true für FindFirstChild() der Methode sagt, dass sie rekursiv im HUDContainer-Zweig suchen soll, um EffectsVolumeSlider zu finden.
   55	Der Anfangswert des Schiebers wird auf die aktuelle Volume der Effects-Soundgruppe oder 0.5 als Fallback gesetzt.
   56‑60	Richtet die Rückruffunktion ein, um Änderungen des Schiebereglerwerts auf die Lautstärke der Effects-Soundgruppe anzuwenden.
   64‑73	Essentiell dasselbe wie die Zeilen 52-61, jedoch um den BackgroundVolumeSlider-Rahmen innerhalb von HUDContainer ⟩ SettingsMenu zu hydratisieren und die Änderungen des Schiebereglerwerts auf die Lautstärke der Background-Soundgruppe anzuwenden.

Mit dem SettingsScript an Ort und Stelle bietet das Erlebnis nun ein voll funktionsfähiges interaktives UI-Beispiel, das eine zusammenhängende Gruppe von UI-Objekten mit der Interaktion des Spielers verknüpft.