Studio ti dà il potere di creare widget personalizzati e usarli come strumenti e estensioni di Studio. Questi widget si comportano come finestre/panelli personalizzati in Studio e puoi dockarli all'interno della tua interfaccia o farli fluttuare come finestre separate.
Creazione di interfaccie utente widget
Tutti i widget di Studio iniziano come DockWidgetPluginGui oggetti che puoi riempire con GuiObjects, come etichette e pulsanti. Per creare un'interfaccia utente vuota, chiama la funzione CreateDockWidgetPluginGui(), passando
Nota che il DockWidgetPluginGuiInfo.new() costruttore si aspetta i suoi parametri in un ordine specifico come segue:
| # | Proprietà | Tipo | Descrizione |
|---|---|---|---|
| 1 | Enum.InitialDockState | Lista | Una delle Enum.InitialDockState enumerazioni. |
| 2 | InitialEnabled | Booleano | Lo stato inizialmente abilitato (visibile) della GUI or Intefaccia grafica utentedel widget. |
| 3 | InitialEnabledShouldOverrideRestore | Booleano | Se vero, il valore di InitialEnabled sovrascriva lo stato abilitato precedentemente salvato. |
| 4 | FloatingXSize | Intero | La larghezza iniziale della GUI quando InitialDockState è impostata su Enum.InitialDockState.Float . |
| 5 | FloatingYSize | Intero | L'altezza iniziale della GUI quando InitialDockState è impostata su Enum.InitialDockState.Float . |
| 6 | MinWidth | Intero | La larghezza minima della GUI or Intefaccia grafica utente, con alcune variazioni specifiche della piattaforma. |
| 7 | MinHeight | Intero | L'altezza minima della GUI or Intefaccia grafica utente, con alcune variazioni specifiche della piattaforma. |
Non puoi usare la funzione CreateDockWidgetPluginGui() in script di gioco. Puoi chiamarlo solo dalla barra dei comandi o da uno script ugin.
Personalizzare l'interfaccia utente del widget
Una volta creato un Widget, puoi personalizzare la sua interfaccia utente con GuiObjects come informative TextLabels o interattive ImageButtons . Ad esempio, il seguente codice aggiunge un 1> Class.TextButton1> di base alla finestra GUI:
Per aiutarti a creare widget Studio coerenti e efficaci, Roblox fornisce un repository GitHub che contiene elementi GUI con un aspetto e una sensazione "Studio" standard. Ciò include checkbox, pulsanti radio e campi di input che hanno uno stile Studio e supportano tutti i temi oscuri.
Cambiare temi di colore di Studio
I widget di Studio idealmente corrispondono alla impostazione e regolazione dinamica dello Studio tema . Ad esempio, se uno sviluppatore sta usando il tema oscuro, il colore di sfondo del Widget, le immagini e le etichetta di testo dovrebbero apparire bene accanto alle colori di tema native di Studio.
Il seguente codice di aggiungimento utilizza una funzione syncGuiColors() che inizialmente viene chiamata insieme a una tabella di oggetti GUI per sincronizzare. All'interno
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Sincronizza colore di sfondo
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Sincronizza il colore del testo
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Esegui il funzione 'setColors()' per sincronizzare inizialmente i colori
setColors()
-- Connetti l'evento 'ThemeChanged' alla funzione 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Esegui la funzione 'syncGuiColors()' per sincronizzare i colori degli oggetti forniti
syncGuiColors({testButton})
Personalizzare i cursori del mouse
Per migliorare la prevista interazione con gli elementi del widget, puoi impostare mouse cursors specifici del sistema sui GUI eventi, come MouseEnter e Class.GuiObject.MouseLeave|Mouse
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
Fai riferimento alla seguente tabella per un elenco di cursori del mouse e dei loro potenziali casi d'uso:
| Icona del cursore del mouse | Attività | Usa Custome |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Clicca e seleziona predefinito. |
 | rbxasset://SystemCursors/PointingHand | Passare il mouse su un link/ pulsante attivo. |
 | rbxasset://SystemCursors/OpenHand | Passare il mouse su un Articolotrascinabile. |
 | rbxasset://SystemCursors/ClosedHand | Trascinare un Articolo. |
 | rbxasset://SystemCursors/IBeam | Passare in un campo di testo. |
 | rbxasset://SystemCursors/SizeNS | Passare il mouse su una gestiredi ridimensionamento verticale. |
 | rbxasset://SystemCursors/SizeEW | Passare il mouse su una gestiredi ridimensionamento orizzontale. |
 | rbxasset://SystemCursors/SizeNESW | Passare il mouse su un'immagine di gestire. |
 | rbxasset://SystemCursors/SizeNWSE | Passare il mouse su un'immagine di gestire. |
 | rbxasset://SystemCursors/SizeAll | Passare il mouse su una gestiredi ridimensionamento multi-direzione. |
 | rbxasset://SystemCursors/SplitNS | Passare il mouse su un gestire"spaccabile" verticale. |
 | rbxasset://SystemCursors/SplitEW | Passare il mouse su un'gestireorizzontale "spaccata". |
 | rbxasset://SystemCursors/Forbidden | Passare il mouse su un Articolobloccato/vietato. |
 | rbxasset://SystemCursors/Wait | Indica un'azione in corso. |
 | rbxasset://SystemCursors/Busy | Indicare che il sistema è occupato. |
 | rbxasset://SystemCursors/Cross | Passare con il mouse su un'area di selezione. |
Nota che questi cursori di visualizzazione sono solo un'approssimazione - i cursori di sistema di base corrispondono ai cursori del tuo sistema operativo predefinito.
Raccogliere input dell'utente
Gli elementi UI come TextBox e TextButton funzionano normalmente nei widget di Studio, e puoi costruire interfacce come normalmente faresti su Roblox. Tuttavia, UserInputService e 1> Class.ContextActionService1> non funzionano poiché questi servizi aspettano che la finestra di gioco principale sia in focus.
Un workaround per gli eventi di input generici è creare un Frame trasparente e superarlo sull'intero schermo. Il seguente esempio di codice crea un frame, e quando l'utente fa clic sul frame, l'evento GuiObject.InputBegan cattura l'input del tastierino sullo schermo fino a quando l'utente non fa clic via:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Nascondi il frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Coprire lo schermo
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Elabora l'oggetto di input qui, ad esempio per rilevare i pulsanti della chiave
end
frame.InputBegan:Connect(onInputBegan)
Interazione trascinamento-e-rilascio
Usare interazioni a trascinamento per i tuoi widget è un modo semplice per migliorare il flusso di dati. Per creare questa interazione, devi definire l'elemento da trascinare, inizializzare il trascinamento e creare un obiettivo di trascinamento.
Creazione di una fonte di trascinamento
Puoi iniziare un'azione di trascinamento chiamando Plugin:StartDrag() quando l'utente premere un pulsante del mouse su un elemento UI, in genere un TextButton o un ImageButton all'interno di un Widget. Il seguente esempio di codice crea un singolo widget di finestra con un pulsante di testo all'interno.
Inizializzazione della trascinata
Quando l'utente fa clic sul TextButton , puoi iniziare a trascinare attraverso l'evento MouseButton1Down() che si attiva non appena l'utente premere il pulsante del mouse.
All'interno della funzione connessa, determinare i dati da拖. Il tipo di dati 0> tipo di dati0> dovrebbe essere riflesso nella chiave 3>MimeType3>, il contenuto 6>contain 6> della drag dovrebbe essere riflesso nella chiave 9>Data
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- I dati che vengono trascinati
MimeType = "text/plain", -- Descrive il tipo MIME dei dati
Sender = "SomeDragSource", -- Descrive da dove vengono originati i dati
MouseIcon = "", -- Contenuto dell'immagine da utilizzare per il cursore
DragIcon = "", -- Contenuto dell'immagine da rendere sotto il cursore durante il trascinamento
HotSpot = Vector2.zero -- Dove sull'Icona di trascinamento per centrare il cursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Creazione di un target a goccia
L'evento PluginGui.PluginDragDropped attiva quando l'utente rilascia il mouse su una finestra durante un trascinamento. Quando ciò accade, devi definire un drop target come un secondo widget con un TextLabel per rilevare i trascini.
Elaborando l'azione di caduta
Dopo aver creato un target di caduta, connect the PluginGui.PluginDragDropped event on the drop target 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)
Mentre un trascinamento è ancora in corso, questi tre eventi vengono attivati mentre l'utente muove il mouse su un Widget:
- PluginDragEntered – si attiva quando l'utente passa il mouse su una finestra
- PluginDragMoved – si attiva ripetutamente mentre l'utente passa il mouse su una finestra. Questo è utile per mostrare un Messaggio"Drop here!" .
- PluginDragLeft – si attiva quando il cursore dell'utente lascia una finestra. Questo è utile per nascondere un Messaggio"Drop here!" .