Interaktive Benutzeroberfläche erstellen

Ein HUD (Heads-Up Display) in Ihrem Spiel zeigt häufig nicht-interaktive UI-Elemente wie den Gesundheitsmesser, der in HUD-Messgeräte erstellen demonstriert wird. Darüber hinaus benötigt fast jedes Spiel interaktive UI-Elemente wie Schaltflächen, die auf die Aktivierung durch den Spieler reagieren, animieren, wenn sie aktiviert werden, Menüs mit anderen interaktiven Steuerelementen ein-/ausblenden usw.

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

• Wie man eine Schaltfläche für Einstellungen am oberen Bildschirmrand positioniert.
• Gestaltung eines Einstellungsmenüs mit interaktiven, ziehbaren Schiebereglern.
• Verwendung eines ModuleScripts, um "Controller"-Module für erweiterbare Steuerung von UI-Objekten mit zustandsbehafteten Deklarationen zu bilden.
• Wie man Schaltflächen mit der Aktivierung durch den Spieler verbindet, um das Einstellungsmenü ein-/auszublenden.
• Wie man ziehbare UI-Schieberegler verbindet, um die Lautstärke von Soundeffekten und Hintergrundgeräuschen separat anzupassen.

Aktivieren Sie den Geräteemulator

Wie in HUD-Messgeräte erstellen erwähnt, haben Telefone 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äteemulator in Studio:

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

2. Aktivieren Sie im Test-Menü von Studio den Geräteemulator.

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

   

Erstellen Sie die Schaltfläche für Einstellungen

GuiButtons sind interaktive Benutzeroberflächenelemente mit integrierter Funktionalität wie dem plattformübergreifenden Activated-Ereignis, das ausgelöst wird, wenn die Schaltfläche angeklickt oder angetippt wird. Die GuiButton-Klasse erweitert sich auf 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 Schaltfläche für Einstellungen 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 die neue Schaltfläche aus und setzen Sie Folgendes im Eigenschaften-Fenster:

   • AnchorPoint = 0.5, 0.25 (horizontal zentriert und vertikal im oberen 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 eine 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 eine UISizeConstraint ein und setzen Sie deren MaxSize auf inf, 44.

   

   

   

Erstellen Sie das Einstellungsmenü

Die neue Schaltfläche für Einstellungen wird so programmiert, dass sie ein Einstellungsmenü öffnet und schließt, um den Spielern auf Abruf Zugang zu Einstellungen oder anderen Informationen zu geben. In diesem Tutorial enthält das Menü interaktive Schieberegler, um die Lautstärke von Hintergrundaudio 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 erstellt, was es einfach macht, es als zustandsbehaftetes Objekt zu verwalten, das unterschiedlich auf Eingaben reagiert, je nach aktuellem Zustand.

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 (zentraler Anker)
   • BackgroundColor3 = 30, 30, 60 (marineblau)
   • BackgroundTransparency = 0.25 (75% undurchsichtig)
   • Position = 0.5, 0, 0.5, 0 (Mitte des Bildschirms)
   • Size = 0.75, 0, 0.75, 0 (75% Breite/Höhe des Innenbereichs des Bildschirms)

   

3. Fügen Sie eine UIAspectRatioConstraint in SettingsMenu ein und setzen Sie deren AspectRatio-Eigenschaft 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 eine UISizeConstraint ein. Setzen Sie deren MaxSize auf 800, inf und deren MinSize auf 350, 0.

   

   

   

Erstellen Sie einen Schieberegler

Um den Spielern zu ermöglichen, die Lautstärke anzupassen, enthält das Einstellungsmenü zwei ziehbare Schieberegler, die von UIDragDetector betrieben werden, einem praktischen Objekt, das die Interaktion mit 2D-Benutzeroberflächenelementen 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 (zentraler Anker)

   • BackgroundTransparency = 1 (vollständig transparent)

   • Position = 0.5, 0, 0.35, 0 (horizontal zentriert und 35% vom oberen Container entfernt)

   • 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 das neue UIListLayout:

   • Padding = 0.06, 0 (6% Abstand zwischen den Listenelementen)
   • FillDirection = Horizontal (Anordnung der Elemente von links nach rechts)
   • HorizontalFlex = Fill (Elemente horizontal anpassen, um den gesamten übergeordneten Container auszufüllen, wobei ihre definierte Breite überschrieben wird)
   • VerticalAlignment = Center (Elemente entlang ihrer vertikalen Mitte ausrichten)

Schieberegler-Icon

Ein einfaches Icon mit einer Audio-Note und einem "Burst"-Symbol hilft den Spielern, den Zweck des Schiebereglers 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 Icon hilft den Spielern zu verstehen, welchen Aspekt des Spiels der Schieberegler steuert.

   

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

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 eine UIAspectRatioConstraint in Icon ein und lassen Sie die Eigenschaften auf den Standardwerten (1:1 Breite zu Höhe).

   

Bereichsrahmen

Direkt rechts vom Icon sollte der interaktive Teil des Schiebereglers in einem weiteren Frame enthalten 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 direktes Geschwister des UIListLayout-Layoutmodifikators sein muss.

   

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

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

   Es ist nicht notwendig, positionale Änderungen wie AnchorPoint oder Position zuzuweisen, da das UIListLayout die Positionierung seiner Geschwister steuert, in diesem Fall sie horizontal von links nach rechts anordnet 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 ("Pill"-Form)
   • UISizeConstraint mit seiner MaxSize-Eigenschaft auf inf, 30 (maximal 30 Pixel in der Höhe)
   • UIStroke mit seiner Color auf 0, Thickness auf 3 und Transparency auf 0.25 (75% undurchsichtiger schwarzer Umriss)

   

Interaktiver Griff

Mit dem Schieberegler-Container, der erstellt wurde, können Sie jetzt einen ziehbaren Griff erstellen, mit dem die 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 (zentraler Anker)
   • 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 (visuell vor anderen Schieberegler-Elementen schichten)

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 (kreisförmig)
   • UIStroke mit seiner Color auf [0, 150, 255] und Thickness auf 8 (dicker blauer Umriss)

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

   

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 auf die BoundingUI-Eigenschaft im Eigenschaften-Fenster.
   3. Klicken Sie im Explorer-Fenster auf den übergeordneten SliderFrame.

   

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

   

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

Innere Füllung

Um deutlicher anzuzeigen, dass der Schieberegler einen Bereich von 0% bis 100% steuert, können Sie eine innere Füllung auf der linken Seite des Containers 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 Schiebereglers entspricht)
   • BackgroundTransparency = 0.35 (65% undurchsichtig)
   • 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 schichten)

3. Um die "Pill"-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, der erstellt wurde, können Sie ihn einfach duplizieren und einige visuelle Aspekte ändern, um einen anderen Zweck anzuzeigen, in diesem Fall das Lautstärkeniveau des Hintergrundaudios, symbolisiert durch ein Icon mit musikalischen Noten.

1. Wählen Sie das vollständige EffectsVolumeSlider-Objekt aus.

   

2. Duplizieren Sie es (CtrlD 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 verschieben.

   

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

   

   

   

5. Erweitern Sie den SliderFrame ⟩ Handle-Zweig, wählen Sie den UIStroke-Modifikator darin 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 auf die gleiche magentafarbene Farbe ([255, 0, 125]).

   

   

   

Erstellen Sie die Schaltfläche zum Schließen

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

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 Rahmenhöhe, wenn das Seitenverhältnis eingeschränkt ist)
   • Image = rbxassetid://5577404210 (Asset-ID des Symbols für die Schaltfläche zum Schließen)
   • ImageTransparency = 0.25 (75% undurchsichtig)

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

   

Erstellen Sie die Steuerungs-Module

Ein erweiterbares Steuermodul-Setup macht das Management interaktiver UI einfacher als individuelle Skripte, die in jedes Objekt eingefügt werden. ModuleScripts erleichtern diese erweiterbare Funktionalität, indem sie es Ihnen ermöglichen, Code zwischen Skripten auf verschiedenen Seiten der Client-Server-Grenze oder auf derselben Seite der Grenze wiederzuverwenden.

Zustandsbehafteter Objektcontroller

Das folgende Modul für den zustandsbehafteten Objektcontroller 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)
   
   	-- Erstellen Sie Tweens zur Wiederverwendung, um zu vermeiden, dass bei jeder Zustandsänderung neue Tweens erstellt werden
   	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("Versuch, %s auf unbekannten Zustand '%s' zu setzen", self.object:GetFullName(), stateName))
   		return
   	end
   
   	self.currentStateName = stateName
   
   	-- Stellen Sie sicher, dass andere Tweens nicht in Konflikt stehen
   	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, um die Autovervollständigung und das Linting bei der Verwendung dieses Moduls zu verbessern.
   12‑33	Funktion, die verwendet wird, um ein zustandsbehaftetes UI-Objekt zu initialisieren und Verhalten anzuhängen, das ein GuiObject als object, eine Tabelle von Zuständen und deren jeweiligen TweenInfo-Daten sowie einen initialen Zustand akzeptiert. Innerhalb dieser Funktion erstellen 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 initialen Zustand zu setzen.
   35‑50	Funktion, die verwendet wird, um den Zustand eines zustandsbehafteten Objekts zu setzen/zu ändern. Innerhalb der Funktion stellen die Zeilen 42 sicher, dass der currentStateName des Objekts auf den gesetzten Zustand gesetzt wird, die Zeilen 45‑47 brechen alle laufenden Tweens ab, um Konflikte zu vermeiden, 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 Callback-Funktion an jeden Schieberegler anzuschließen, um die Interaktion des Spielers mit dem Schieberegler zu erkennen und die gewünschten Änderungen im Spiel 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("Versuch, Schieberegler %s zu hydratisieren, aber Handle konnte nicht gefunden werden", object:GetFullName()))
   	end
   
   	local innerFill = object:FindFirstChild("InnerFill", true)
   	if not innerFill then
   		warn(string.format("Versuch, Schieberegler %s zu hydratisieren, aber InnerFill konnte nicht gefunden werden", object:GetFullName()))
   	end
   
   	local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
   	if not dragDetector then
   		warn(string.format("Versuch, Schieberegler %s zu hydratisieren, aber UIDragDetector konnte nicht gefunden werden", object:GetFullName()))
   	end
   
   	local self = setmetatable({
   		handle = handle,
   		innerFill = innerFill,
   		dragDetector = dragDetector,
   		value = initialValue or 0.5,
   		onChanged = onChanged,
   	}, SliderController)
   
   	-- Setzen Sie den initialen Wert
   	self:setValue(self.value)
   
   	-- Verbinden Sie den Detektor mit der Manipulation des Spielers
   	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
   
   	-- Aktualisieren Sie die Griffposition und die Größe des inneren Rahmens, um übereinzustimmen
   	self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
   	self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
   	-- Führen Sie den Callback des Benutzers mit dem neuesten Wert aus
   	local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
   	if not changeSuccess then
   		warn("Fehler im Schieberegler-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, das das übergeordnete Frame als object, eine onChanged-Callback-Funktion zur Verarbeitung von Schieberegleränderungen und einen initialen Wert für die Griffposition des Schiebereglers akzeptiert. Innerhalb der Funktion bestätigen die Zeilen 14‑27, dass die Griff, innere Füllung und UIDragDetector-Elemente des Schiebereglers existieren. Die Zeile 38 ruft die setValue()-Funktion des Moduls auf und die Zeilen 41‑43 verbinden das DragContinue-Ereignis des Ziehdetektors mit der setValue()-Funktion des Moduls (siehe nächste Zeile für Details).
   48‑61	Funktion, die verwendet wird, um den Wert des Schiebereglers zu setzen. Innerhalb der Funktion stellen die Zeilen 53‑54 sicher, dass die Griffposition und die Größe der inneren Füllung synchronisiert sind, und die Zeile 57 übergibt den geänderten Wert an die Callback-Funktion, damit Sie den Wert nach Bedarf nutzen können.

Erstellen Sie das Einstellungs-Skript

Mit der Schaltfläche für Einstellungen und dem Einstellungsmenü, die abgeschlossen 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 derselben Ebene (Geschwister) wie SettingsMenu und SettingsButton sein sollte, die die obersten UI-Objekte sind, die es verwalten wird.

   

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
   
   -- Initialisieren Sie die Schaltfläche für Einstellungen
   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"
   })
   
   -- Initialisieren Sie den Einstellungsmenürahmen
   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"
   })
   
   -- Initialisieren Sie den Lautstärkeregler für Effekte
   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,
   })
   
   -- Initialisieren Sie den Lautstärkeregler für den Hintergrund
   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,
   })
   
   -- Verbinden Sie die Schaltflächen mit der Interaktion des Spielers
   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. Verweisen Sie auf die folgenden Abschnitte, um zu erkunden, wie das Skript die Steuermodule nutzt.

   Schaltfläche für Einstellungen

   Die Zeilen 10-27 initialisieren und hängen Verhalten an die Schaltfläche für Einstellungen 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	Eine states-Tabelle wird übergeben, die zwei einzigartige Zustände, menuOpen und menuClosed, enthält. Jeder Zustand enthält eine Übergangsdeklaration (durch ein TweenInfo), um zu erklären, wie der jeweilige Zustand seine Ziel-Eigenschaften 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 ½ Sekunde, während menuClosed die Schaltfläche effektiv auf ihre Standardrotation von 0 zurücksetzt.
   26	Der initiale Zustand der Schaltfläche wird auf menuClosed gesetzt (dies könnte auf jeden Zustand innerhalb der states-Tabelle gesetzt werden).

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

   Zeilen	Zweck
   76‑82	SettingsButton wird mit dem Activated-Ereignis der GuiButton-Klasse verbunden, um eine anonyme Funktion aufzurufen. Innerhalb der anonymen Funktion wechseln die Zeilen 77‑79 eine targetState-Variable zwischen menuOpen und menuClosed. Die Zeile 80 ruft dann setState() auf, um den Zustand der Schaltfläche auf targetState zu setzen, und die Zeile 81 tut dasselbe für SettingsMenu, sodass es sich mit der Aktivierung von SettingsButton öffnet oder schließt.
   83‑86	CloseButton wird mit dem Activated-Ereignis verbunden, um eine anonyme Funktion aufzurufen, die den Zustand sowohl von SettingsButton als auch von 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, und das SettingsMenu-Rahmen innerhalb von HUDContainer wird als das zu hydratisierende Objekt referenziert.
   32‑46	Ähnlich wie bei der Schaltfläche für Einstellungen wird eine states-Tabelle übergeben, die zwei einzigartige Zustände, menuOpen und menuClosed, enthält. Hier erklärt menuOpen eine Zustandsänderung auf UDim2.fromScale(0.5, 0.5) für die Position des Rahmens mit einem Bounce-Tween von ½ Sekunde sowie einen Visible-Zustand von true. Im Gegensatz dazu erklärt menuClosed eine Zustandsänderung der Position auf UDim2.fromScale(0.5, 0.4) und Visible auf false, aber die TweenInfo mit 0 Dauer in Zeile 41 bewirkt, dass die Zustandsänderung sofort erfolgt.
   48	Der initiale Zustand des Rahmens wird auf menuClosed gesetzt.

   Weiter unten im Skript (Zeilen 76-86) wird das Einstellungsmenü mit der Interaktion des Spielers verknüpft:

   Zeilen	Zweck
   81	Setzt den gleichen targetState für SettingsMenu, um mit der Aktivierung von SettingsButton synchronisiert zu werden.
   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 verknüpfen 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, und der EffectsVolumeSlider-Rahmen innerhalb von HUDContainer ⟩ SettingsMenu wird als das zu hydratisierende Objekt referenziert. Beachten Sie, dass der zweite Parameter von true für FindFirstChild() der Methode sagt, dass sie rekursiv im HUDContainer-Zweig nach EffectsVolumeSlider suchen soll.
   55	Der initiale Wert des Schiebereglers wird auf die aktuelle Volume der Effects-Soundgruppe gesetzt oder auf 0.5 als Rückfall.
   56‑60	Richtet die Callback-Funktion ein, um Änderungen des Schiebereglerwerts auf die Lautstärke der Effects-Soundgruppe anzuwenden.
   64‑73	Im Wesentlichen dasselbe wie die Zeilen 52-61, jedoch um den BackgroundVolumeSlider-Rahmen innerhalb von HUDContainer ⟩ SettingsMenu zu hydratisieren und Änderungen des Schiebereglerwerts auf die Lautstärke der Background-Soundgruppe anzuwenden.

Mit SettingsScript an Ort und Stelle bietet das Spiel jetzt ein vollständig funktionierendes Beispiel für eine interaktive UI, die eine verwandte Gruppe von UI-Objekten mit der Interaktion des Spielers verknüpft.