Studio daje Ci moc tworzenia niestandardowych widżetów i używania ich jako narzędzi i rozszerzeń. Te widżety działają jako niestandardowe okna/panele w Studio, a Ty możesz je zamocować w swoim interfejsie lub mieć jako osobne, pływające okna.
Tworzenie interfejsów widżetów
Wszystkie widżety Studio zaczynają jako obiekty DockWidgetPluginGui, które możesz wypełnić GuiObjects, takimi jak etykiety tekstowe i przyciski. Aby utworzyć pusty interfejs GUI widżetu, wywołaj funkcję CreateDockWidgetPluginGui(), przekazując ID i obiekt DockWidgetPluginGuiInfo.
Zauważ, że konstruktor DockWidgetPluginGuiInfo.new() oczekuje swoich parametrów w określonej kolejności jak poniżej:
| # | Właściwość | Typ | Opis |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Jedna z enumeracji Enum.InitialDockState. |
| 2 | InitialEnabled | Boolean | Początkowy stan włączony (widoczny) interfejsu GUI widżetu. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | Jeśli prawda, wartość InitialEnabled nadpisuje wcześniej zapisany stan włączenia. |
| 4 | FloatingXSize | Integer | Początkowa szerokość GUI, gdy InitialDockState jest ustawione na Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Integer | Początkowa wysokość GUI, gdy InitialDockState jest ustawione na Enum.InitialDockState.Float. |
| 6 | MinWidth | Integer | Minimalna szerokość GUI, z pewnymi specyficznymi dla platformy wariacjami. |
| 7 | MinHeight | Integer | Minimalna wysokość GUI, z pewnymi specyficznymi dla platformy wariacjami. |
-- Utwórz nowy obiekt "DockWidgetPluginGuiInfo"local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, -- Widżet zostanie zainicjowany w pływającym panelutrue, -- Widżet będzie początkowo włączonyfalse, -- Nie nadpisuj poprzedniego stanu włączenia200, -- Domyślna szerokość pływającego okna300, -- Domyślna wysokość pływającego okna150, -- Minimalna szerokość pływającego okna150 -- Minimalna wysokość pływającego okna)-- Utwórz nowy interfejs GUI widżetulocal testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "Widżet testowy" -- Opcjonalny tytuł widżetu
Dostosowywanie interfejsu widżetu
Gdy już stworzysz widżet, możesz dostosować jego interfejs użytkownika za pomocą GuiObjects, jak informacyjne TextLabels lub interaktywne ImageButtons. Na przykład, poniższy kod dodaje podstawowy TextButton do okna GUI:
-- Utwórz nowy interfejs GUI widżetulocal testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "Widżet testowy" -- Opcjonalny tytuł widżetulocal testButton = Instance.new("TextButton")testButton.BorderSizePixel = 0testButton.TextSize = 20testButton.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.RelativeYYtestButton.Text = "Kliknij mnie"testButton.Parent = testWidget
Zmień motywy kolorystyczne Studio
Skuteczne widżety Studio idealnie pasują do ustawienia motywu Studio i dynamicznie dostosowują się, gdy motyw się zmienia. Na przykład, jeśli deweloper korzysta z ciemnego motywu, kolor tła widżetu, obrazy i etykiety tekstowe powinny dobrze wyglądać w połączeniu z kolorami natywnymi motywu Studio.
Poniższy dodatek kodu wykorzystuje funkcję syncGuiColors(), która jest początkowo wywoływana wraz z tabelą obiektów GUI do synchronizacji. Wewnątrz funkcji zagnieżdżona funkcja setColors() przechodzi przez obiekty i synchronizuje konkretne aspekty za pomocą GetColor() z enumeracjami Enum.StudioStyleGuideColor. Funkcja setColors() jest natychmiast uruchamiana, aby zsynchronizować motyw Studio, a potem jest połączona z zdarzeniem ThemeChanged, aby wykryć przyszłe zmiany motywu.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Synchronizuj kolor tła
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Synchronizuj kolor tekstu
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Uruchom funkcję 'setColors()', aby początkowo zsynchronizować kolory
setColors()
-- Połącz zdarzenie 'ThemeChanged' z funkcją 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Uruchom funkcję 'syncGuiColors()', aby zsynchronizować kolory podanych obiektów
syncGuiColors({testButton})
Dostosowywanie kursorów myszy
Aby poprawić przewidywaną interakcję z elementami widżetu, możesz ustawić systemowe kursory myszy dla zdarzeń GUI, takich jak MouseEnter i MouseLeave. Poniższy kod demonstruje, jak połączyć funkcję ze zdarzeniami MouseEnter i MouseLeave przycisku testButton, aby zmienić kursor 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)
Odszukaj poniższą tabelę, aby zobaczyć listę kursorów myszy i ich potencjalne zastosowania:
| Ikona kursora myszy | Asset | Zastosowanie |
|---|---|---|
| rbxasset://SystemCursors/Arrow | Domyślne kliknięcie i wybór. | |
| rbxasset://SystemCursors/PointingHand | Najeżdżając na aktywny link/przycisk. | |
| rbxasset://SystemCursors/OpenHand | Najeżdżając na przeciągalny element. | |
| rbxasset://SystemCursors/ClosedHand | Przeciągając element. | |
| rbxasset://SystemCursors/IBeam | Najeżdżając na pole tekstowe. | |
| rbxasset://SystemCursors/SizeNS | Najeżdżając na uchwyt zmiany rozmiaru w pionie. | |
| rbxasset://SystemCursors/SizeEW | Najeżdżając na uchwyt zmiany rozmiaru w poziomie. | |
| rbxasset://SystemCursors/SizeNESW | Najeżdżając na uchwyt zmiany rozmiaru w kąt. | |
| rbxasset://SystemCursors/SizeNWSE | Najeżdżając na uchwyt zmiany rozmiaru w kąt. | |
| rbxasset://SystemCursors/SizeAll | Najeżdżając na uchwyt wielokierunkowej zmiany rozmiaru. | |
| rbxasset://SystemCursors/SplitNS | Najeżdżając na pionowy uchwyt "podziału". | |
| rbxasset://SystemCursors/SplitEW | Najeżdżając na poziomy uchwyt "podziału". | |
| rbxasset://SystemCursors/Forbidden | Najeżdżając na zablokowany/zabroniony element. | |
| rbxasset://SystemCursors/Wait | Wskazując, że akcja jest w toku. | |
| rbxasset://SystemCursors/Busy | Wskazując, że system jest zajęty. | |
| rbxasset://SystemCursors/Cross | Najeżdżając na obszar precyzyjnego wyboru. |
Zbieranie danych od użytkownika
Elementy UI, takie jak TextBox i TextButton, działają normalnie w widżetach Studio i możesz budować interfejsy tak, jak zazwyczaj w Roblox. Jednak UserInputService nie działa, ponieważ te usługi oczekują, że główne okno doświadczenia będzie w fokusu.
Jednym z obejść dla ogólnych zdarzeń wejściowych jest stworzenie przezroczystego Frame i nałożenie go na cały ekran. Poniższy przykład kodu tworzy ramkę, a gdy użytkownik kliknie na ramkę, zdarzenie GuiObject.InputBegan przechwytuje dane wejściowe z klawiatury na ramce, aż użytkownik kliknie gdzie indziej:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Ukryj ramkę
frame.Size = UDim2.new(1, 0, 1, 0) -- Zakrywa ekran
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Przetwórz obiekt wejściowy tutaj, na przykład rozpoznaj naciśnięcia klawiszy
end
frame.InputBegan:Connect(onInputBegan)
Interakcja przeciągnij-i-upuść
Użycie interakcji przeciągnij-i-upuść w widżetach to prosty sposób na poprawę przepływu danych. Aby utworzyć tę interakcję, musisz zdefiniować element do przeciągnięcia, zainicjować przeciągnięcie, stworzyć cel upuszczenia i przetworzyć akcję upuszczenia.
Utwórz źródło przeciągania
Możesz rozpocząć akcję przeciągania, wywołując Plugin:StartDrag(), gdy użytkownik naciśnie przycisk myszy na jakimś elemencie UI, typowo TextButton lub ImageButton w widżecie. Poniższy przykład kodu tworzy pojedynczy widżet okienny z przyciskiem tekstowym w środku.
-- Najpierw utwórz widżetlocal widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Źródło przeciągania", widgetInfo)dragSourceWidget.Title = "Źródło przeciągania"-- Utwórz TextButton, który zainicjuje przeciąganielocal dragButton = Instance.new("TextButton")dragButton.Size = UDim2.new(1, 0, 1, 0)dragButton.Text = "Przeciągnij mnie!"dragButton.Parent = dragSourceWidget
Zainicjuj przeciąganie
Gdy użytkownik kliknie na TextButton, możesz zainicjować przeciąganie przez zdarzenie MouseButton1Down(), które wyzwala się, gdy użytkownik naciśnie przycisk myszy.
W podłączonej funkcji określ dane do przeciągnięcia. Typ danych powinien być odzwierciedlony w kluczu MimeType, zawartość przeciągania powinna być odzwierciedlona w kluczu Data, a nadawca powinien opisać siebie w kluczu Sender. Zobacz stronę Plugin:StartDrag() po więcej szczegółów.
local function onButton1Down()
local dragInfo = {
Data = "Witaj, świecie", -- Dane są przeciągane
MimeType = "text/plain", -- Opisuje typ MIME danych
Sender = "SomeDragSource", -- Opisuje z jakiego miejsca pochodzą dane
MouseIcon = "", -- Zawartość obrazu używana dla kursora
DragIcon = "", -- Zawartość obrazu renderowana pod kursorem podczas przeciągania
HotSpot = Vector2.zero -- Gdzie na DragIcon ma być wyśrodkowany kursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Utwórz cel upuszczania
Zdarzenie PluginGui.PluginDragDropped wyzwala się, gdy użytkownik zwolni mysz na oknie podczas przeciągania. Gdy to nastąpi, musisz zdefiniować cel upuszczenia, taki jak drugi widżet z TextLabel, aby wykryć drops.
local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Cel upuszczania", widgetInfo)dragTargetWidget.Title = "Cel upuszczania"-- Ta TextLabel wyświetli, co zostało upuszczonelocal textLabel = Instance.new("TextLabel")textLabel.Size = UDim2.new(1, 0, 1, 0)textLabel.Text = "Upuść tutaj..."textLabel.Parent = dragTargetWidget
Przetwórz akcję upuszczenia
Po utworzeniu celu upuszczania, połącz zdarzenie PluginGui.PluginDragDropped na widżecie celu upuszczania:
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 przeciąganie wciąż trwa, te trzy zdarzenia wyzwalają się, gdy użytkownik przesuwa mysz nad widżetem:
- PluginDragEntered – wyzwala się, gdy użytkownik najeżdża myszą na okno
- PluginDragMoved – wyzwala się wielokrotnie, gdy użytkownik przesuwa myszą nad oknem. Jest to przydatne do pokazywania wiadomości "Upuść tutaj!".
- PluginDragLeft – wyzwala się, gdy kursor użytkownika opuszcza okno. Jest to przydatne do ukrywania wiadomości "Upuść tutaj!".















