Studio-Widgets erstellen

Studio gibt dir die Möglichkeit, 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 docken oder als separate Fenster schweben lassen.

Erstellen von Widget-Oberflächen

Alle Studio-Widgets beginnen als DockWidgetPluginGui Objekte, die Sie mit GuiObjects füllen können, wie z. B. Textetiketten und Schaltflächen.Um eine leere grafische Benutzeroberflächezu erstellen, rufe die CreateDockWidgetPluginGui()-Funktion auf, indem du eine ID und ein DockWidgetPluginGuiInfo-Objekt übermittelst.

Beachten Sie, dass der DockWidgetPluginGuiInfo.new() Konstruktor seine Parameter in einer bestimmten Reihenfolge wie folgt erwartet:

-- Erstelle ein neues "DockWidgetPluginGuiInfo"-Objekt
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- Widget wird in einem schwebenden Panel initialisiert
	true,   -- Widget wird zuerst aktiviert
	false,  -- Überschreiben Sie den zuvor aktivierten Zustand nicht
	200,    -- Standardbreite des schwebenden Fensters
	300,    -- Standardhöhe des schwebenden Fensters
	150,    -- Mindestbreite des schwebenden Fensters
	150     -- Mindesthöhe des schwebenden Fensters
)

-- Erstellen Sie ein neues grafische Benutzeroberfläche
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Widget-Benutzeroberfläche anpassen

Sobald du ein Widget erstellt hast, kannst du seine Benutzeroberfläche anpassen mit GuiObjects wie informativen TextLabels oder interaktiven ImageButtons .Zum Beispiel fügt der folgende Code ein grundlegendes TextButton zum GUI-Fenster hinzu:

-- Erstellen Sie ein neues grafische Benutzeroberfläche
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optionale Widget-Titel

local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Click Me"
testButton.Parent = testWidget

Ändere Studiofarbthemen

Effektive Studio-Widgets passen ideal zum Studio- Thema -Einstellung und passen sich dynamisch an, wenn sich das Thema ändert.Wenn ein Entwickler zum Instanzdas dunkle Thema verwendet, sollte die Hintergrundfarbe des Widgets, die Bilder und Textetiketten neben den nativen Themenfarben von Studio gut aussehen.

Die folgende Code-Zugabe verwendet eine syncGuiColors()-Funktion, die zunächst zusammen mit einer Tabelle von GUI-Objekten zum Synchronisieren aufgerufen wirdInnerhalb der Funktion durchläuft eine verschachtelte setColors() -Funktion durch die Objekte und synchronisiert spezifische Aspekte von ihnen mit GetColor() mit Enum.StudioStyleGuideColor -Enumen.Diese setColors() Funktion wird sofort ausgeführt, um das Studio-Thema zu synchronisieren, und dann wird sie mit dem ThemeChanged Ereignis verbunden, um zukünftige Themenänderungen zu erkennen.

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Hintergrundfarbe synchronisieren
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Textfarbe synchronisieren
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Führe die Funktion 'setColors()' aus, um Farben zunächst zu synchronisieren
	setColors()
	-- Verbinde das Ereignis 'ThemeChanged' mit der Funktion 'setColors()'
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Führe die Funktion 'syncGuiColors()' aus, um die Farben von bereitgestellten Objekten zu synchronisieren
syncGuiColors({testButton})

Mauszeiger anpassen

Um die erwartete Interaktion mit Widget-Elementen zu verbessern, kannst du systemspezifische Mauszeiger auf GUI-Ereignisse wie MouseEnter und MouseLeave einstellen.Der folgende Code zeigt, wie man eine Funktion mit den MouseEnter- und MouseLeave-Ereignissen von testButton verbindet, um den Mauszeiger zu ändern:

local function setCursor(cursorAsset)
	plugin:GetMouse().Icon = cursorAsset
end

testButton.MouseEnter:Connect(function()
	setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
	setCursor("")
end)

Verweise auf die folgende Tabelle für eine Liste von Mauszeigern und ihren möglichen Anwendungsfällen:

Mauszeiger-Symbol	Asset	Verwende Fall
	rbxasset://SystemCursors/Arrow	Standardmäßiges Klicken und Auswählen.
	rbxasset://SystemCursors/PointingHand	Über einem aktiven Link/Button schweben.
	rbxasset://SystemCursors/OpenHand	Über einem ziehbares Artikelschweben.
	rbxasset://SystemCursors/ClosedHand	Ziehen eines Artikel.
	rbxasset://SystemCursors/IBeam	Über einem Textfeld schweben.
	rbxasset://SystemCursors/SizeNS	Über einem vertikalen Ziehpunktschweben.
	rbxasset://SystemCursors/SizeEW	Über einem horizontalen Ziehpunktschweben.
	rbxasset://SystemCursors/SizeNESW	Über einem Eckengriff schweben.
	rbxasset://SystemCursors/SizeNWSE	Über einem Eckengriff schweben.
	rbxasset://SystemCursors/SizeAll	Über einem mehrdimensionalen Ziehpunktschweben.
	rbxasset://SystemCursors/SplitNS	Über einem vertikalen "Teilung"Ziehpunktschweben.
	rbxasset://SystemCursors/SplitEW	Über einem horizontalen "Teilungs"Ziehpunktschweben.
	rbxasset://SystemCursors/Forbidden	Über einem gesperrten/verbotenen Artikelschweben.
	rbxasset://SystemCursors/Wait	Angibt, dass eine Aktion im Gange ist.
	rbxasset://SystemCursors/Busy	Indiziert, dass das System beschäftigt ist.
	rbxasset://SystemCursors/Cross	Über einem Punktauswahlbereich schweben.

Sammeln Sie Benutereingaben

UI-Elemente wie TextBox und TextButton funktionieren normalerweise in Studio-Widgets, und du kannst Interfaces erstellen, wie du es normalerweise auf Roblox tun würdest.Allerdings funktionieren UserInputService und ContextActionService nicht, da diese Dienste erwarten, dass das Hauptspielfenster im Fokus steht.

Eine Lösung für generische Eingabeevents besteht darin, eine transparente Frame zu erstellen und sie über den gesamten Bildschirm zu überlappen.Das folgende Codebeispiel erstellt einen Rahmen, und wenn der Benutzer auf den Rahmen klickt, erfasst das GuiObject.InputBegan -Ereignis die Tastatureingabe auf dem Rahmen, bis der Benutzer wegklickt:

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Verberge den Rahmen
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 das Eingabeelement hier, zum Beispiel erkenne Tastendrücken
end
frame.InputBegan:Connect(onInputBegan)

Ziehen und Abwerfen der Interaktion

Die Verwendung von Drag-and-Drop-Interaktionen für deine Widgets ist eine einfache Möglichkeit, den Datenfluss zu verbessern.Um diese Interaktion zu erstellen, musst du das Element zum Ziehen definieren, den Zugriff starten, ein Ziel zum Ziehen erstellen und die Actionverarbeiten.

Ausgangstextziehen erstellen

Du kannst eine Drag-Aktion starten, indem du Plugin:StartDrag() anrufst, wenn der Benutzer eine Maus-Taste auf ein UI-Element drückt, typischerweise eine TextButton oder ImageButton innerhalb eines Widgets.Das folgende Codebeispiel erstellt ein einzelnes Fenster-Widget mit einem Textknopf darin.

-- Erstellen Sie zuerst das Widget
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Erstelle einen TextButton, der die Drag initialisiert
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Starte das Ziehen

Wenn der Benutzer auf die TextButton klickt, kannst du durch das MouseButton1Down() -Ereignis ziehen starten, das ausgelöst wird, sobald der Benutzer die Maus-Taste drückt.

Innerhalb der verbundenen Funktion bestimmen Sie die Daten, die zu ziehen sind.Der Typ der Daten sollte sich im MimeType widerspiegeln, der Inhalt des Ziehens sollte sich im Data widerspiegeln, und der Absender sollte sich im Sender beschreiben.Siehe die Plugin:StartDrag() Seite für weitere Details.

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Die Daten, die verschleppt werden
		MimeType = "text/plain",    -- Beschreibt den MIME-Typ der Daten
		Sender = "SomeDragSource",  -- Beschreibt, woher die Daten stammen
		MouseIcon = "",             -- Bildinhalte, die für den Cursor verwendet werden
		DragIcon = "",              -- Bildinhalt, der unter dem Cursor während des Ziehens gerendert wird
		HotSpot = Vector2.zero      -- Wo auf dem DragIcon, um den Cursor in der Mitte zu verschieben
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Ziel abwerfen erstellen

Das Ereignis PluginGui.PluginDragDropped wird ausgelöst, wenn der Benutzer seine Maus während eines Ziehens auf ein Fenster loslässt.Wenn dies passiert, musst du ein Abwurfziel definieren, wie ein zweites Widget mit einem TextLabel zum Erkennen von Abbrüchen.

local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"

-- Dieses TextLabel wird anzeigen, was abgeworfen wurde
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Verarbeite die Action"Abwerfen"

Nach der Erstellung eines Drop-Ziels verbinden Sie das PluginGui.PluginDragDropped-Ereignis auf 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 Ziehen noch im Gange ist, feuern diese drei Ereignisse ab, wenn der Benutzer seine Maus über ein Widget bewegt:

• PluginDragEntered – feuert, wenn der benutzer die maus über ein fenster hält
• PluginDragMoved – feuert wiederholt ab, wenn der Benutzer seine Maus über ein Fenster bewegt. Dies ist nützlich, um eine "Hier abwerfen!"-Nachricht anzuzeigen.
• PluginDragLeft – feuert ab, wenn der Cursor des Benutzers ein Fenster verlässt. Dies ist nützlich, um eine "Hier abwerfen!"-Nachricht auszublenden.