Studio vous donne la possibilité de créer des widgets personnalisés et de les utiliser comme outils et extensions Studio. Ces widgets se comportent comme des fenêtres/panneaux personnalisés dans Studio, et vous pouvez les ancrer à l'intérieur de votre interface ou les faire flotter comme des fenêtres séparées.
Créer des UI de widget
Tous les widgets Studio commencent comme des DockWidgetPluginGuiobjets que vous pouvez remplir avec GuiObjects, tels que des étiquettes de texte et des boutons. Pour créer une interface graphique de widget GUI vide, appelez la CreateDockWidgetPluginGui()fonction, en accédant à un ID et à un DockWidgetPluginGuiInfoobjet.
Notez que le DockWidgetPluginGuiInfo.new()constructeur attend ses paramètres dans un ordre spécifique comme suit :
| # | Propriété | Type | Description |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | L'une des Enum.InitialDockStateénumérations. |
| 2 | InitialEnabled | Booléen | L'état initial activé (visible) de widget GUI. |
| 3 | InitialEnabledShouldOverrideRestore | Booléen | Si true, la valeur de InitialEnabled remplace l'état activé précédemment enregistré. |
| 7 | FloatingXSize | Integer | La largeur initiale de GUI lorsque InitialDockState est définie sur Enum.InitialDockState.Float. |
| 4 | FloatingYSize | Integer | La largeur initiale de GUI lorsque InitialDockState est définie sur Enum.InitialDockState.Float. |
| 5 | MinWidth | Integer | La largeur minimale de GUI, avec certaines variations spécifiques à la plateforme. |
| 7 | MinHeight | Integer | La hauteur minimale de GUI, avec certaines variations spécifiques à la plateforme. |
Vous ne pouvez pas utiliser la CreateDockWidgetPluginGui()fonction dans les scripts de jeu. Vous pouvez uniquement l'appeler à partir de la barre de commande ou d'un script de plugin.
Personnaliser l'interface utilisateur du widget
Une fois que vous créez un widget, vous pouvez personnaliser son interface utilisateur avec GuiObjectstelle que informative TextLabelsou interactiveImageButtons. Par exemple, le code suivant ajoute un TextButton de base à la fenêtre GUI :
Pour vous aider à créer des widgets Studio cohérents et efficaces, Roblox fournit un repo GitHub qui comprend des éléments GUI avec un aspect et une sensation standard « Studio ». Ceux-ci incluent des cases à cocher, des boutons radio et des champs d'entrée qui ont un style Studio, et ils prennent tous en charge le thème sombre.
Modifier les thèmes de couleur de Studio
Les widgets Studio efficaces correspondent idéalement au paramètre du thème Studio et s'ajustent dynamiquement lorsque le thème change. Par exemple, si un développeur utilise le thème sombre, la couleur d'arrière-plan, les images et les étiquettes de texte du widget doivent être agréables à côté des couleurs du thème natif de Studio.
L'ajout de code suivant utilise une fonction syncGuiColors() qui est initialement appelée avec une table d'objets GUI à synchroniser. À l'intérieur de la fonction, une fonction setColors() imbriquée fait boucle à travers les objets et synchronise leurs aspects spécifiques à l'aide de Enum.StudioStyleGuideColor avec des énums GetColor(). Cette fonction setColors() est immédiatement exécutée pour synchroniser le thème Studio, puis elle est liée à l'événement ThemeChanged pour détecter les modifications futures du thème.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in pairs(objects) do
-- Sync background color
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Sync text color
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Run 'setColors()' function to initially sync colors
setColors()
-- Connect 'ThemeChanged' event to the 'setColors()' function
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Run 'syncGuiColors()' function to sync colors of provided objects
syncGuiColors({testButton})
Personnaliser les curseurs de souris
Pour améliorer l'interaction attendue avec les éléments de widget, vous pouvez définir des curseurs de souris spécifiques au système sur des événements GUI, tels que MouseEnter et MouseLeave. Le code suivant montre comment lier une fonction aux événements MouseEnter et MouseLeave de testButton pour modifier le curseur de souris :
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
Référencez le tableau suivant pour une liste de curseurs de souris et leurs cas d'utilisation potentiels :
| Icône de curseur de souris | Behavior | Cas d'utilisation |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Cliquez et sélection par défaut. |
 | rbxasset://SystemCursors/PointingHand | Survoler un lien/bouton. |
 | rbxasset://SystemCursors/OpenHand | Survoler un objet glissant. |
 | rbxasset://SystemCursors/ClosedHand | Faire glisser un objet. |
 | rbxasset://SystemCursors/IBeam | Survoler dans un champ de texte. |
 | rbxasset://SystemCursors/SizeNS | Survoler une poignée d'ajustement vertical. |
 | rbxasset://SystemCursors/SizeEW | Survoler une poignée d'ajustement horizontal. |
 | rbxasset://SystemCursors/SizeNESW | Survoler une poignée d'ajustement de coin. |
 | rbxasset://SystemCursors/SizeNWSE | Survoler une poignée d'ajustement de coin. |
 | rbxasset://SystemCursors/SizeAll | Survoler une poignée d'ajustement multidirectionnelle. |
 | rbxasset://SystemCursors/SplitNS | Survoler une poignée verticale « divisée » |
 | rbxasset://SystemCursors/SplitEW | Survoler une poignée horizontale « divisée ». |
 | rbxasset://SystemCursors/Forbidden | Survoler un objet verrouillé/interdit. |
 | rbxasset://SystemCursors/Wait | Indiquer une action est en cours. |
 | rbxasset://SystemCursors/Busy | Indiquer que le système est occupé. |
 | rbxasset://SystemCursors/Cross | Survoler une zone de sélection de point. |
Notez que ces regards de curseurs ne sont qu'une approximation — les curseurs réels correspondent aux curseurs de votre système d'exploitation par défaut.
Collecter des entrées d'utilisateur
Les éléments d'interface utilisateur tels que TextBox et TextButton fonctionnent normalement dans les widgets Studio, et vous pouvez créer des interfaces comme vous le feriez normalement sur Roblox. Cependant, UserInputService et ContextActionService ne fonctionnent pas, car ces services s'attendent à ce que la fenêtre de jeu principale soit mise au point.
Une solution pour les événements d'entrée génériques est de créer un Frame transparent et de le superposer sur l'ensemble de l'écran. L'exemple de code suivant crée une trame, et lorsque l'utilisateur clique sur la trame, l'événement GuiObject.InputBegan capture l'entrée de clavier sur la trame jusqu'à ce que l'utilisateur clique de nouveau :
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Hide the frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Cover the screen
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Process the input object here, for example detect key presses
end
frame.InputBegan:Connect(onInputBegan)
Interaction par glisser-déposer
L'utilisation d'interactions par glisser-déposer pour vos widgets est un moyen simple d'améliorer le flux de données. Pour créer cette interaction, vous devez définir l'élément pour faire glisser, initier le glisser, créer une cible de dépôt et traiter l'action de dépôt.
Créer une source de glisser
Vous pouvez commencer une action de glisser en appelant Plugin:StartDrag() lorsque l'utilisateur appuie sur un bouton de souris sur un élément d'interface, généralement un TextButton ou ImageButtondans un widget. L'exemple de code suivant crée un seul widget de fenêtre avec un bouton de texte à l'intérieur.
Initier le glisser
Lorsque l'utilisateur clique sur le TextButton, vous pouvez initier un glissement dans l'événement MouseButton1Down() qui se lance dès que l'utilisateur appuie sur le bouton de souris.
Dans la fonction liée, déterminez les données à faire glisser. Le type de données doit être reflété dans la clé MimeType, le contenu du glisser doit être reflété dans la clé Data, et l'expéditeur doit se décrire dans la Sender clé. Voir la Plugin:StartDrag()page pour plus de détails.
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- The data being dragged
MimeType = "text/plain", -- Describes the MIME type of the data
Sender = "SomeDragSource", -- Describes from where the data originated
MouseIcon = "", -- Image content to use for the cursor
DragIcon = "", -- Image content to render under the cursor during drag
HotSpot = Vector2.new(0, 0) -- Where on the DragIcon to center the cursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Créer une cible de dépôt
L'PluginGui.PluginDragDropped événement se lance lorsque l'utilisateur relâche sa souris sur une fenêtre au cours d'un déplacement. Quand cela se produit, vous devez définir une cible de dépôt telle qu'un deuxième widget avec un TextLabelpour détecter des dépôts.
Traiter l'action de dépôt
Après avoir créé une cible de dépôt, liez l'PluginGui.PluginDragDroppedévénement sur le widget de cible de dépôt :
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)
Alors qu'un glissement est toujours en cours, ces trois événements se lancent lorsque l'utilisateur déplace sa souris sur un gadget :
- PluginDragEntered – se déclenche lorsque l'utilisateur passe la souris sur une fenêtre
- PluginDragMoved – se déclenche de façon répétée lorsque l'utilisateur déplace sa souris sur une fenêtre. Ceci est utile pour afficher un message « Déposer ici ! » .
- PluginDragLeft– déclenche lorsque le curseur de l'utilisateur quitte une fenêtre. Ceci est utile pour masquer un message « Déposer ici ! » .