Zbuduj widgety Studio

Studio daje ci możliwość tworzenia niestandardowych widgetów i wykorzystywania ich jako narzędzi i rozszerzeń Studio.Te widgety zachowują się jak niestandardowe okna/paneli w Studio, a możesz je przymocować wewnątrz interfejsu lub mieć je pływać jako oddzielne okna.

Twórz interfejsy widgetów

Wszystkie widgety Studio zaczynają się jako przedmioty DockWidgetPluginGui, które możesz wypełnić GuiObjects, takie jak etykiety tekstowe i przyciski.Aby utworzyć puste menu widgetów, wezwij funkcję CreateDockWidgetPluginGui(), przekazując ID i obiekt DockWidgetPluginGuiInfo.

Zauważ, że konstruktor DockWidgetPluginGuiInfo.new() oczekuje swoich parametrów w kolejności określonej w następujący sposób:

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

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

Dostosuj interfejs widgetów

Po utworzeniu widgetu możesz dostosować jego interfejs użytkownika za pomocą GuiObjects takich jak informacyjny TextLabels lub interaktywny ImageButtons.Na przykład następujący kod dodaje podstawowy TextButton do okna GUI:

-- Twórz nowy interfejs widgetów
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Opcjonalny tytuł widgetu

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

Zmień tematy kolorów w studiu

Skuteczne widgety Studio idealnie pasują do ustawienia tematu Studio i dostosowują się dynamicznie, gdy zmienia się temat.Na instancja, jeśli programista używa ciemnej tematyki, kolor tła widgetu, obrazy i etykiety tekstowe powinny ładnie wyglądać obok kolorów tematu domyślnego w Studio.

Poniższe dodanie kodu wykorzystuje funkcję syncGuiColors(), która początkowo jest wzywana wraz z tabelą obiektów GUI do zsynchronizowaniaW obrębie funkcji, luźne setColors() pętle funkcji przeszukują obiekty i synchronizują konkretne ich aspekty za pomocą GetColor() z Enum.StudioStyleGuideColor enumerycznymi.Ta funkcja setColors() jest natychmiast uruchamiana, aby zsynchronizować temat Studio, a następnie jest połączona z wydarzeniem ThemeChanged w celu wykrycia przyszłych zmian tematu.

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Zsynchronizuj tło koloru
			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 początkowo zsynchronizować kolory
	setColors()
	-- Połącz wydarzenie 'ThemeChanged' z funkcją 'setColors()'
	settings().Studio.ThemeChanged:Connect(setColors)
end

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

Dostosuj kursory myszy

Aby poprawić oczekiwane interakcje z elementami widgetów, możesz ustawić systemowe kursor myszy na wydarzenia GUI, takie jak MouseEnter i MouseLeave.Poniższy kod pokazuje, jak połączyć funkcję z wydarzeniami MouseEnter i MouseLeave z testButton w celu zmiany kurora myszy:

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

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

Odwołaj się do poniższej tabeli, aby uzyskać listę myszy i ich potencjalnych przypadków użycia:

Ikona kursora myszy	Aktywum	Użyj przypadku
	rbxasset://SystemCursors/Arrow	Domyślne klikanie i wybieranie.
	rbxasset://SystemCursors/PointingHand	Przesuwanie nad aktywnym linkiem/przyciskiem.
	rbxasset://SystemCursors/OpenHand	Przesuwanie nad przedmiotem przeciąganym.
	rbxasset://SystemCursors/ClosedHand	Przesuwanie przedmiotu.
	rbxasset://SystemCursors/IBeam	Powijanie w polu tekstowym.
	rbxasset://SystemCursors/SizeNS	Przesuwanie nad pionowym uchwytem skalowania.
	rbxasset://SystemCursors/SizeEW	Przesuwanie nad poziomym uchwytem przesuwania.
	rbxasset://SystemCursors/SizeNESW	Przesuwanie nad krawędzią uchwytu zmiany rozmiaru.
	rbxasset://SystemCursors/SizeNWSE	Przesuwanie nad krawędzią uchwytu zmiany rozmiaru.
	rbxasset://SystemCursors/SizeAll	Przesuwanie nad wielokierunkową ręczką przesuwania.
	rbxasset://SystemCursors/SplitNS	Przesuwanie nad pionowym uchwytem "podzielonym".
	rbxasset://SystemCursors/SplitEW	Przesuwanie nad poziomym "podzielonym" uchwytem.
	rbxasset://SystemCursors/Forbidden	Przesuwanie nad zamkniętym/zakazanym przedmiot.
	rbxasset://SystemCursors/Wait	Wskazuje, że akcja jest w toku.
	rbxasset://SystemCursors/Busy	Wskazuje, że system jest zajęty.
	rbxasset://SystemCursors/Cross	Przesuwanie nad obszarem wyboru precyzyjnego.

Zbierz wpisy użytkownika

Eleменты interfejsu użytkownika takie jak TextBox i TextButton działają normalnie w widgetach Studio, a możesz budować interfejsy tak jak zwykle na Roblox.Jednak UserInputService i ContextActionService nie działają, ponieważ te usługi oczekują, że główne okno gry będzie w focusie.

Jednym ze sposobów omijania ogólnych wydarzeń wejściowych 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 rejestruje wejście klawiatury na ramie, dopóki użytkownik nie kliknie dalej:

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ściowy tutaj, na przykład wykrywaj naciśnięcia klawiszy
end
frame.InputBegan:Connect(onInputBegan)

Interakcja przeciągania i upuszczania

Wykorzystanie interakcji przeciągania i upuszczania dla twoich widgetów to prosty sposób na poprawę przepływu danych.Aby stworzyć tę interakcję, musisz zdefiniować element do przeciągnięcia, zainicjować przeciągnięcie, stworzyć cel upuszczenia i przetworzyć działanie upuszczenia.

Twórz źródło kod źródłowy

Możesz rozpocząć akcję przeciągania, wywołując Plugin:StartDrag(), gdy użytkownik naciśnie przycisk myszy na jakimś element UI, zwykle TextButton lub ImageButton w ramach widgetu.Poniższy przykład kodu tworzy pojedynczą witrynę z przyciskiem tekstowym w środku.

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

-- Stwórz przycisk tekstowy, który rozpocznie 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ągnięcia

Kiedy użytkownik kliknie na TextButton, możesz uruchomić przeciąganie za pomocą wydarzenia MouseButton1Down(), które uruchamia się, gdy użytkownik naciśnie przycisk myszy.

W ramach połączonej funkcji określ dane do przeciągnięcia.Typ danych powinien być odzwierciedlony w kluczu , zawartość przeciągnięcia powinna być odzwierciedlona w kluczu , a nadawca powinien opisać się w kluczu .Zobacz stronę Plugin:StartDrag() po więcej szczegółów.

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Dane, które są przeciągane
		MimeType = "text/plain",    -- Opisuje typ MIME danych
		Sender = "SomeDragSource",  -- Opisuje, skąd pochodzą dane
		MouseIcon = "",             -- Treść obrazu do użycia dla kurora
		DragIcon = "",              -- Treść obrazu do renderowania pod kursoром podczas przeciągania
		HotSpot = Vector2.zero      -- Gdzie na ikonie przeciągnięcia, aby umieścić kursor w środku
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Twórz cel upuszczenia

Wydarzenie PluginGui.PluginDragDropped uruchamia się, gdy użytkownik uwalnia mysz na oknie podczas przeciągania.Kiedy to wystąpi, musisz zdefiniować cel upuszczenia takiego jak drugi widget z , aby wykrywać upuszczenia.

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

-- Ta etykieta tekstowa wyświetli to, 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 upuszczenia połącz wydarzenie PluginGui.PluginDragDropped na widgetzie celu upuszczenia:

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)

Choć przeciąganie wciąż trwa, te trzy wydarzenia wystrzelają, gdy użytkownik przesuwa mysz nad widgetem:

• PluginDragEntered – wystrzeliwuje, gdy użytkownik przewija mysz nad oknem
• PluginDragMoved – strzela wielokrotnie, gdy użytkownik przesuwa mysz nad oknem. Jest to przydatne do wyświetlania wiadomość"Upuść tutaj!".
• PluginDragLeft – wypala się, gdy kurser użytkownika opuści okno. Jest to przydatne do ukrycia wiadomość"Upuść tutaj!"