Studio ti dà il potere di creare widget personalizzati e usarli come strumenti e estensioni di Studio .Questi widget si comportano come finestre/pannelli personalizzati in Studio e puoi dockerizzarli all'interno della tua interfaccia o farli fluttuare come finestre separate.
Crea interfacce utente widget
Tutti i widget di Studio iniziano come oggetti DockWidgetPluginGui che puoi riempire con GuiObjects , come etichette di testo e pulsanti.Per creare una GUI or Intefaccia grafica utentevuota di un widget, chiama la funzione CreateDockWidgetPluginGui(), passando un ID e un oggetto DockWidgetPluginGuiInfo.
Nota che il costruttore DockWidgetPluginGuiInfo.new() attende i suoi parametri in un ordine specifico come segue:
| # | Proprietà | Tipo | Descrizione |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enumerazione | Una delle enumerazioni Enum.InitialDockState 2. |
| 2 | InitialEnabled | Booleano | Lo stato iniziale abilitato (visibile) della GUI or Intefaccia grafica utentedel widget. |
| 3 | InitialEnabledShouldOverrideRestore | Booleano | Se vero, il valore di InitialEnabled sostituisce lo stato abilitato precedentemente salvato. |
| 4 | FloatingXSize | Intero | L'宽 iniziale della GUI quando InitialDockState è impostato su Enum.InitialDockState.Float . |
| 5 | FloatingYSize | Intero | L'altezza iniziale della GUI quando InitialDockState è impostato 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() nella script del gioco. Puoi chiamarla solo dalla barra dei comandi o da uno script plugin.
Personalizza l'interfaccia utente widget
Una volta creato un Widget, puoi personalizzare la sua interfaccia utente con GuiObjects ad esempio informativa TextLabels o interattiva ImageButtons .Ad esempio, il seguente codice aggiunge un codice di base TextButton alla finestra GUI:
Per aiutarti a costruire widget coerenti e efficienti di Studio, Roblox fornisce un repository GitHub che contiene elementi GUI con un aspetto e una sensazione standard di "Studio".Queste includono caselle di controllo, pulsanti radio e campi di input che hanno uno stile Studio e tutti supportano il tema scuro.
Cambia i temi di colore dello Studio
I widget di Studio effettivi idealmente corrispondono alla impostazione del tema Studio e si adattano dinamicamente quando il tema cambia.Ad esempio, se uno sviluppatore sta utilizzando il tema oscuro, il colore di sfondo del Widget, le immagini e le etichette del testo dovrebbero apparire belle a fianco dei colori del tema nativo di Studio.
L'aggiunta del seguente codice utilizza una funzione syncGuiColors() che viene inizialmente chiamata insieme a un tabella di oggetti GUI da sincronizzare.All'interno della funzione, un ciclo di funzioni nidate setColors() attraversa gli oggetti e sincronizza gli aspetti specifici di essi utilizzando GetColor() con Enum.StudioStyleGuideColor enumi.Questa funzione setColors() viene eseguita immediatamente per sincronizzare il tema Studio, poi viene collegata all'evento ThemeChanged per rilevare le modifiche future al tema.
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 la 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})
Personalizza i cursori del mouse
Per migliorare l'interazione prevista con gli elementi widget, puoi impostare i cursori del sistema specifici per gli eventi GUI , come MouseEnter e MouseLeave.Il seguente codice mostra come connettere una funzione agli eventi MouseEnter e MouseLeave di testButton per cambiare il cursore del 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 una lista di cursori del mouse e dei loro casi d'uso potenziali:
| Icone del cursore del mouse | Attività | Usa caso |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Click e selezione predefiniti. |
 | 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 il mouse in un campo di testo. |
 | rbxasset://SystemCursors/SizeNS | Passare il gestiresu una maniglia di ridimensionamento verticale. |
 | rbxasset://SystemCursors/SizeEW | Passare il mouse su un'impugnatura di ridimensionamento orizzontale. |
 | rbxasset://SystemCursors/SizeNESW | Passare il gestiresu un bordo della maniglia di ridimensionamento. |
 | rbxasset://SystemCursors/SizeNWSE | Passare il gestiresu un bordo della maniglia di ridimensionamento. |
 | rbxasset://SystemCursors/SizeAll | Passare il gestiresu una maniglia di ridimensionamento multi-direzionale. |
 | rbxasset://SystemCursors/SplitNS | Passare il gestiresu una maniglia verticale "divisa". |
 | rbxasset://SystemCursors/SplitEW | Passare il gestiresu una maniglia orizzontale "divisa". |
 | rbxasset://SystemCursors/Forbidden | Passare il mouse su un Articolobloccato/proibito. |
 | rbxasset://SystemCursors/Wait | Indicare un'azione è in corso. |
 | rbxasset://SystemCursors/Busy | Indicare che il sistema è occupato. |
 | rbxasset://SystemCursors/Cross | Passare il mouse su un'area di selezione precisa. |
Si noti che questi cursori di visualizzazione sono solo un'approssimazione: i cursori reali corrispondono ai cursori del sistema operativo predefinito.
Raccogli l'input dell'utente
Gli elementi dell'interfaccia utente come TextBox e TextButton funzionano normalmente nei widget di Studio e puoi costruire interfacce come faresti normalmente su Roblox.Tuttavia, UserInputService e ContextActionService non funzionano poiché questi servizi si aspettano che la finestra principale del gioco sia in primo piano.
Una soluzione per gli eventi di input generici è creare un Frame e sovrapporlo sull'intera schermata.Il seguente esempio di codice crea un frame e quando l'utente fa clic sul frame, l'evento GuiObject.InputBegan cattura l'input della tastiera sul frame fino a quando l'utente 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 rileva i tasti premuti
end
frame.InputBegan:Connect(onInputBegan)
Interazione trascina e rilascia
L'utilizzo delle interazioni trascina e rilascia per i tuoi widget è un semplice modo per migliorare il flusso di dati.Per creare questa interazione, devi definire l'elemento da trascinare, avviare il trascinamento, creare un bersaglio di rilascio e processare l'azione di rilascio.
Crea fonte di Sorgente
Puoi avviare un'azione di trascinamento chiamando Plugin:StartDrag() quando l'utente preme un pulsante del mouse su alcun elemento UI, tipicamente un TextButton o ImageButton all'interno di un Widget.Il seguente esempio di codice crea un singolo widget di finestra con un pulsante di testo all'interno.
Inizia il trascinamento
Quando l'utente fa clic sul TextButton, puoi iniziare a trascinare attraverso l'evento MouseButton1Down() che si attiva non appena l'utente preme il pulsante del mouse.
All'interno della funzione connessa, determina i dati da trascinare.Il tipo di dati deve essere riflesso nella chiave >, il contenuto del trascinamento deve essere riflesso nella chiave >, e il mittente deve descriversi nella chiave >.Vedi la pagina Plugin:StartDrag() per maggiori dettagli.
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- I dati vengono trascinati
MimeType = "text/plain", -- Descrive il tipo MIME dei dati
Sender = "SomeDragSource", -- Descrive da dove sono originati i dati
MouseIcon = "", -- Contenuto 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 cursore
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Crea bersaglio di caduta
L'evento PluginGui.PluginDragDropped si attiva quando l'utente rilascia il mouse su una finestra durante un trascinamento.Quando ciò si verifica, devi definire un obiettivo di caduta come un secondo widget con un TextLabel per rilevare le cadute.
Elabora l'azione di rilascio
Dopo aver creato un bersaglio di caduta, connetti l'evento PluginGui.PluginDragDropped sull' Widgetdel bersaglio di caduta:
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 si attivano quando l'utente muove il mouse su un Widget:
- PluginDragEntered – si accende quando l'utente passa il mouse su una finestra
- PluginDragMoved – si accende ripetutamente quando l'utente muove 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!"