Mit Studio hast du die Macht, benutzerdefinierte widgets zu erstellen und sie als Studio-Tools und Erweiterungen zu verwenden. Diese widgets verhalten sich wie benutzerdefinierte Fenster/Panels in Studio und du kannst sie in deinem Interface docksieren oder als separate Fenster schwimmende.
widget-UI erstellen
Alle Studio-Widgets beginnen als DockWidgetPluginGui Objekte, die Sie mit GuiObjects füllen können, wie Text-Etiketten und Schaltflächen. Um eine leere grafische Benutzeroberflächezu erstellen, rufen Sie die Funktion Class.Plugin:CreateDockWidgetPluginGui()|CreateDockWidgetPluginGui() auf,
Beachten Sie, dass der Datatype.DockWidgetPluginGuiInfo.new() -Konstruktor seine Argumente in einer spezifischen Reihenfolge erwartet, wie folgt:
| # | Eigenschaft | Typ | Beschreibung |
|---|---|---|---|
| 1 | Enum.InitialDockState | 열거형 | Eine der Enum.InitialDockState열istungen. |
| 2 | InitialEnabled | Boolean | Der erste aktivierte (sichtbare) Zustand der grafische Benutzeroberfläche. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | Wenn true, der Wert von InitialEnabled überschreibt den zuvor gespeicherten aktivierten Zustand. |
| 4 | FloatingXSize | Zahl | Die ursprüngliche Breite der GUI, wenn InitialDockState auf Enum.InitialDockState.Float eingestellt ist. |
| 5 | FloatingYSize | Zahl | Die ursprüngliche Höhe der GUI, wenn InitialDockState auf Enum.InitialDockState.Float eingestellt ist. |
| 6 | MinWidth | Zahl | Die minimale Breite der grafische Benutzeroberfläche, mit einigen Plattform-spezifischen Variationen. |
| 7 | MinHeight | Zahl | Die minimale Höhe der grafische Benutzeroberflächemit einigen Plattform-spezifischen Variationen. |
Du kannst die Funktion Class.Plugin:CreateDockWidgetPluginGui()|CreateDockWidgetPluginGui() nicht in Spielskripts verwenden. Du kannst sie nur von der Command-Leiste oder einem Plugin-Skript aus aufrufen.
Benutzeroberfläche anpassen
Nachdem du ein Widget erstellt hast, kannst du seine Benutzeroberfläche mit GuiObjects anpassen, wie z. B. informative TextLabels oder interaktive ImageButtons. Zum Beispiel fügt der folgende Code einen grundlegenden 1> Class.TextButton1> dem GUI-Fenster hinzu:
Um dir zu helfen, coherente, effektive Studio-Widgets zu erstellen, bietet Roblox ein GitHub-Repositorium, das GUI-Elemente mit einem Standard-Studio-Aussehen und -Fühl enthält. Dies beinhaltet Checkboxen, Radio-Schaltflächen und Eingabefelder, die einen Studio-Stil haben, und sie alle unterstützen die dunkle Thema.
Studio-Farben ändern
Effektive Studio-Widgets sollten idealerweise mit der Studio- Theme -Einstellung übereinstimmen und dynamisch anpassen, wenn das Thema geändert wird. Zum Instanz, wenn ein Entwickler das dunkle Thema verwendet, sollte die Hintergrundfarbe, Bilder und Text-Etiketten des Widgets Studio-Theme-Farben gut zur Geltung kommen.
Die folgende Code-Zusatz verwendet eine SyncGuiColors() -Funktion, die ursprünglich mit einer Tabelle von GUI-Objekten synchronisiert wird, um sie zu synchronisieren. In der Funktion
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Synchronisieren Sie die Hintergrundfarbe
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Textfarbe synchronisieren
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Führen Sie die Funktion "setColors()" aus, um Farben zuerst zu synchronisieren
setColors()
-- Verbinden Sie das Ereignis 'ThemeChanged' mit der Funktion 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Führen Sie die Funktion 'SyncGuiColors()' aus, um die bereitgestellten Objektefarben zu synchronisieren
syncGuiColors({testButton})
Benutzerdefinierte Maus-Cursors
Um die erwartete Interaktion mit Widget-Elementen zu verbessern, kannst du System-spezifische Maus-Cursores an GUI-Ereignisse ansetzen, wie z. B. MouseEnter und <
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
Verweisen Sie auf die folgende Tabelle für eine Liste von Maus-Curсоren und potenziellen Anwendungsfällen:
| Maus-Cursor-Symbol | Asset | Verwendungskiste |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Standard-Klicken und Auswahl. |
 | rbxasset://SystemCursors/PointingHand | Über einen aktiven Link/Button schweben. |
 | rbxasset://SystemCursors/OpenHand | Bewegen Sie den Mauszeiger über ein ziehbares Artikel. |
 | rbxasset://SystemCursors/ClosedHand | Ziehen eines Artikel. |
 | rbxasset://SystemCursors/IBeam | Schweben in einem Textfeld. |
 | rbxasset://SystemCursors/SizeNS | Bewegen Sie den Mauszeiger über einen vertikalen Ziehpunkt. |
 | rbxasset://SystemCursors/SizeEW | Über einem horizontalen Ziehpunktschweben. |
 | rbxasset://SystemCursors/SizeNESW | Bewegen Sie den Mauszeiger über einen Ecke, um den Ziehpunktzu vergrößern. |
 | rbxasset://SystemCursors/SizeNWSE | Bewegen Sie den Mauszeiger über einen Ecke, um den Ziehpunktzu vergrößern. |
 | rbxasset://SystemCursors/SizeAll | Bewegen Sie den Mauszeiger über einen mehrere Richtungen skalierenden Ziehpunkt. |
 | rbxasset://SystemCursors/SplitNS | Über eine vertikale "Split"Ziehpunkt. |
 | rbxasset://SystemCursors/SplitEW | Über eine horizontale "Split"Ziehpunkt. |
 | rbxasset://SystemCursors/Forbidden | Über ein gesperrtes/verbotenes Artikelfahren. |
 | rbxasset://SystemCursors/Wait | Zeigt an, dass eine Aktion in Bearbeitung ist. |
 | rbxasset://SystemCursors/Busy | Zeigt an, dass das System beschäftigt ist. |
 | rbxasset://SystemCursors/Cross | Bewegen Sie den Mauszeiger über eine Pinpoint-Auswahlbereich. |
Beachten Sie, dass diese Cursor-Ansichten nur eine Annahme sind - die tatsächlichen Cursor entsprechen Ihren Standard-Betriebssystem-Cursors.
Bereitstellung der Benutzeroberfläche
UI-Elemente wie TextBox und TextButton funktionieren normalerweise in Studio-Werken, und Sie können Interfaces wie Sie es normalerweise auf Roblox tun würden, aufbauen. UserInputService und 1> Class.ContextActionService1> funktionieren jedoch nicht, da diese Dienste erwarten, dass das Hauptspielfenster in Fokus ist.
Eine Lösung für Standard-Eingangsereignisse ist es, ein Frame zu erstellen und es über den gesamten Bildschirm zu überladen. Das folgende Codebeispiel erstellt einen Frame, und wenn der Benutzer auf den Frame klickt, captures das GuiObject.InputBegan -Ereignis, bis der Benutzer wegklickt:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Verbergen Sie den Frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Bedecken Sie den Bildschirm
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Verarbeite hier das Eingab对象, z. B. um Schlüsseldrücke zu erkennen
end
frame.InputBegan:Connect(onInputBegan)
Ziehen-und-Fallen-Interaktion
Die Verwendung von Drag-and-Drop-Interaktionen für Ihre Widgets ist ein einfacher Weg, um den Datenfluss zu verbessern. Um diese Interaktion zu erstellen, müssen Sie das Element definieren, das Sie ziehen, das Ziehen starten, ein Drop-Target erstellen und die Actionverarbeiten.
Quelle erstellen
Du kannst eine Ziehaktion starten, indem du Plugin:StartDrag() anrufst, wenn der Benutzer eine Maustaste auf einige UI-Elemente drückt, normalerweise ein TextButton oder ImageButton innerhalb eines Widgets. Der folgende Codebeispiel erstellt ein einzelnes Fenster-Wer widget mit einem Text-Button in ihm.
Drag wird initiiert
Wenn der Benutzer auf die TextButton klickt, kannst du den Zug durch das Ereignis Class.GuiButton.MouseButton1Down|MouseButton1Down() starten, das sofort reagiert, wenn der Benutzer die Maus-Schaltfläche drückt.
innerhalb der verbundenen Funktion, bestimmen Sie die Daten, die Sie ziehen möchten. Die Daten 's Typ sollte im MimeType reflektiert sein, der Inhalt des Ziehens sollte in der 2> Data -Schlüssel2>
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- Die Daten werden verschleppt
MimeType = "text/plain", -- Beschreibt die MIME-Art der Daten
Sender = "SomeDragSource", -- Beschreibt, wo die Daten herkommen
MouseIcon = "", -- Bildinhalt für den Cursor verwenden
DragIcon = "", -- Bildinhalt wird unter dem Cursor während des Ziehens gerendert
HotSpot = Vector2.zero -- Wo auf dem DragIcon, um den Cursor in der Mitte zu platzieren
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Ein Drop-Ziel erstellen
Das Ereignis PluginGui.PluginDragDropped wird ausgelöst, wenn der Benutzer seine Maus während eines Drag auf ein Fenster während eines Drag freigibt. Wenn dies geschieht, musst du ein Drop-Ziel definieren , wie ein zweites Widget mit einem TextLabel, um Drops zu erkennen.
Die Drop-Aktion verarbeiten
Nachdem ein Drop-Ziel erstellt wurde, verbinden Sie das Ereignis PluginGui.PluginDragDropped mit dem Drop-Ziel-Widget:
local function onDragDrop(dragData)
print("PluginDragDropped")
if dragData.MimeType == "text/plain" then
textLabel.Text = dragData.Data
else
textLabel.Text = dragData.MimeType
end
end
dragTargetWidget.PluginDragDropped:Connect(onDragDrop)
Während ein Drag immer noch in Arbeit ist, feuern diese drei Ereignisse ab, wenn der Benutzer seine Maus über ein Widget bewegt:
- PluginDragEntered – wird ausgelöst, wenn der Benutzer die Maus über ein Fenster bewegt
- PluginDragMoved – wird mehrmals ausgelöst, wenn der Benutzer seine Maus über ein Fenster bewegt. Dies ist nützlich, um eine "Drop here!"-Nachricht anzuzeigen.
- PluginDragLeft – wird ausgelöst, wenn der Benutzer seinen Cursor verlässt, um ein Fenster zu schließen. Dies ist nützlich, um eine "Drop here!"-Nachricht zu verbergen.