Budowanie widżetów Studio

Studio daje Ci możliwość tworzenia niestandardowych widgetów i używania ich jako narzędzi i rozszerzeń Studio. Te widgety zachowują się jako niestandardowe okna/Paneli w Studio, a możesz je zacumować w swoim interfejsie lub umieścić je jako oddzielne okna.

Tworzenie interfejsów użytkownika

Wszystkie widgety Studio zaczynają się jako DockWidgetPluginGui obiekty, które można wypełnić GuiObjects , takie jak etykiety tekstowe i przyciski. Aby stworzyć pusty widget GUI, wezwij funkcję Class.Plugin:CreateDockWidgetPluginGui()|CreateDock

Uwaga na DockWidgetPluginGuiInfo.new() konstruktor oczekuje swoich parametrów w szczególnym porządku tak jak następuje:

-- Utwórz nowy obiekt "DockWidgetPluginGuiInfo"
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- Widget zostanie zainicjowany w płynnym panelu
	true,   -- widget zostanie najpierw włączony
	false,  -- Nie przejmuj poprzedniego włączonego stanu
	200,    -- Domyślna szerokość okna pływającego
	300,    -- Domyślna wysokość okna pływającego
	150,    -- Minimalna szerokość okna pływającego
	150     -- Minimalna wysokość okna pływającego
)

-- Utwórz nowy GUI widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Personalizowanie interfejsu widżetu

Po utworzeniu widgetu możesz dostosować jego interfejs użytkownika za pomocą GuiObjects , takich jak informacyjne TextLabels lub interaktywne ImageButtons. Na przykład, następujący kod dodaje podstawowy 2>Class.TextButton2> do okienka GUI:

-- Utwórz nowy GUI widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Opcjonalny tytuł wtyczki

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

Zmiany tematów koloru Studio

Skuteczne widgety Studio idealnie pasują do ustawień Studio tytuł i dostosowują się dynamicznie, gdy temat zmienia się. Na instancja, jeśli rozwój używa ciemnego motywu, kolor tła, obrazy i tekstowe etykiety powinny wyglądać dobrze wraz z kolorami motywu natywnego Studio.

Kolejny kod dodawania używa funkcji syncGuiColors(), która jest pierwotnie nazywana wraz z tabelą obiektów GUI do synchronizacji. Wewnątrz

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Zsynchronizuj kolor tła
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Zsynchronizuj kolor tekstu
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Wykonaj funkcję „setColors()”, aby najpierw zsynchronizować kolory
	setColors()
	-- Połącz wydarzenie "ThemeChanged" z funkcją "setColors()"
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Zajrzyj funkcję 'SyncGUIGuColors ()', aby zsynchronizować kolory dostarczonych obiektów
syncGuiColors({testButton})

Personalizowanie kursorów myszy

Aby poprawić oczekiwane interakcje z elementami widgetu, możesz ustawić systemowe kursory myszy na wydarzenia GUI, takie jak MouseEnter i Class.GuiObject

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

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

Zobacz poniższyą tabelę dla listy kursorów myszy i ich potencjalnych przypadków użycia:

Ikona kursora myszy	Zasób	Użyj przypadku
	rbxasset://SystemCursors/Arrow	Domyślne kliknięcie i wyboru.
	rbxasset://SystemCursors/PointingHand	Przytrzymywanie nad aktywnym linkiem/przyciskiem.
	rbxasset://SystemCursors/OpenHand	Kolejka nad przedmiotem przeciąganym.
	rbxasset://SystemCursors/ClosedHand	Przeciągnięcie przedmiot.
	rbxasset://SystemCursors/IBeam	Przytrzymywanie w polu tekstowym.
	rbxasset://SystemCursors/SizeNS	Przytrzymywanie nad poziomem skalowania ręcznego.
	rbxasset://SystemCursors/SizeEW	Przytrzymywanie nad poziomem skalowania poziomego.
	rbxasset://SystemCursors/SizeNESW	Przytrzymaj nad kątem zmień rozmiar uchwytu.
	rbxasset://SystemCursors/SizeNWSE	Przytrzymaj nad kątem zmień rozmiar uchwytu.
	rbxasset://SystemCursors/SizeAll	Przytrzymaj nad wielokierunkowym uchwytem rozmiarów.
	rbxasset://SystemCursors/SplitNS	Przytrzymywanie nad poziomem podziału wertykalnego.
	rbxasset://SystemCursors/SplitEW	Przytrzymywanie nad poziomym uchwytem "podziel".
	rbxasset://SystemCursors/Forbidden	Kolejka nad zamkniętym/zakazanym przedmiotem.
	rbxasset://SystemCursors/Wait	Wskazanie, że jest trwająca akcja.
	rbxasset://SystemCursors/Busy	Wskazanie, że system jest zajęty.
	rbxasset://SystemCursors/Cross	Przyciągnięcie uwagi na obszarze wyboru punktu.

Zbieranie danych użytkownika

Elementy interfejsu, takie jak TextBox i TextButton działają normalnie w wbudowanych witrynach Studio, a możesz budować interfejsy tak, jak to zrobiłbyś normalnie na Roblox. Jnak UserInputService i 1>Class.ContextActionService1> nie działają, ponieważ te usługi oczekują, że głównym

Jednym workround dla genéricznych wydarzeń wejścia jest stworzenie przejrzystego Frame i nałożenie go na cały ekran. Poniższy przykład kodu tworzy ramę, a gdy użytkownik kliknie na ramę, wydarzenie GuiObject.InputBegan captures klawiaturowe wejście na ramę, aż użytkownik kliknie:

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Ukryj ramę
frame.Size = UDim2.new(1, 0, 1, 0)  -- Pokryj ekran
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Przetwarzaj obiekt wejścia tutaj, na przykład wykryj klawiatury
end
frame.InputBegan:Connect(onInputBegan)

Interakcja przeciągnij-i-przytrzymaj

Używanie interakcji przeciągnij i upuść dla swoich widżetów jest prostym sposobem na poprawę przepływu danych. Aby stworzyć tę interakcję, musisz zdefiniować element do przeciągnięcia, zainicjować przeciągnięcie i utworzyć cel do przeciągnięcia i wykonaj działanie upuszczenia.

Tworzenie źródła przeciągania

Możesz uruchomić akcję przeciągania, nazyając Plugin:StartDrag() , gdy użytkownik naciśnie przycisk myszy na pewnym elementze interfejsu użytkownika, zwykle TextButton lub ImageButton w ramach wtyczki. Poniższy przykład kodu stworza pojedyncze okno wtyczki z przyciskiem tekstowym w środku.

-- Najpierw stwórz widżet
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Utwórz przycisk tekstowy, który uruchomi przeciąganie
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Początek przeciągania

Gdy użytkownik klika na TextButton, możesz uruchomić przeciąganie poprzez wydarzenie MouseButton1Down(), które uruchomuje się, gdy użytkownik nacisnął przycisk myszy.

W ramach połączonej funkcji określ dane do przeciągnięcia. Typ danych powinien być odzwierciedlony w kluczu MimeType, zawartość treści przeciągnięcia powinna być odzwierciedlona w kluczu

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Przeciąganie danych
		MimeType = "text/plain",    -- Opisuje typ MIME danych
		Sender = "SomeDragSource",  -- Opisuje, skąd pochodzą dane
		MouseIcon = "",             -- Treść obrazu do użycia dla kursoра
		DragIcon = "",              -- Treść obrazu do renderowania podczas przeciągania
		HotSpot = Vector2.zero -- Gdzie na DragIcon, aby skupić kursektor
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Tworzenie celu spadkowego

Wydarzenie PluginGui.PluginDragDropped działa, gdy użytkownik uwalnia swoją myszkę na oknie podczas przeciągania. Gdy to się zdarza, musisz zdefiniować cel upuszczenia takiego jak druga wtyczka z TextLabel , aby wykryć upuszczenie.

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

-- Ten znak ostrzeżenia wyświetli co zostało upuszczone
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Przetwarzanie akcji upuszczenia

Po utworzeniu celu spadkowego połącz wydarzenie PluginGui.PluginDragDropped na wiertarku celu spadkowego:

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)

Podczas gdy wciąż trwa przeciąganie, te trzy wydarzenia pojawiają się, gdy użytkownik przesuwa myszkę nad widżetem:

• PluginDragEntered – działa, gdy użytkownik przytrzymuje myszkę nad oknem
• PluginDragMoved – działa powtarzająco się, gdy użytkownik przesuwa myszkę nad okno. To użyteczne do pokazania wiadomość„Drop here!” .
• PluginDragLeft – działa, gdy kursór użytkownika opuszcza okno. To użyteczne do ukrycia wiadomość„Zrzut tutaj!”.