Le Studio vous donne le pouvoir de créer des widgets personnalisés et de les utiliser comme outils et extensions. Ces widgets se comportent comme des fenêtres/panneaux personnalisés dans le Studio, et vous pouvez les ancrer dans votre interface ou les laisser flotter en tant que fenêtres séparées.
Créer des interfaces de widget
Tous les widgets du Studio commencent comme des objets DockWidgetPluginGui que vous pouvez remplir avec GuiObjects, tels que des étiquettes de texte et des boutons. Pour créer une interface de widget GUI vide, appelez la fonction CreateDockWidgetPluginGui(), en passant un ID et un objet DockWidgetPluginGuiInfo.
Notez que le constructeur DockWidgetPluginGuiInfo.new() attend ses paramètres dans un ordre spécifique comme suit :
| # | Propriété | Type | Description |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Une des énumérations Enum.InitialDockState. |
| 2 | InitialEnabled | Boolean | L'état initial activé (visible) de l'interface GUI du widget. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | Si vrai, la valeur de InitialEnabled remplace l'état activé précédemment enregistré. |
| 4 | FloatingXSize | Integer | La largeur initiale de l'interface GUI lorsque InitialDockState est défini sur Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Integer | La hauteur initiale de l'interface GUI lorsque InitialDockState est défini sur Enum.InitialDockState.Float. |
| 6 | MinWidth | Integer | La largeur minimale de l'interface GUI, avec quelques variations spécifiques à la plateforme. |
| 7 | MinHeight | Integer | La hauteur minimale de l'interface GUI, avec quelques variations spécifiques à la plateforme. |
Vous ne pouvez pas utiliser la fonction CreateDockWidgetPluginGui() dans les scripts. Vous ne pouvez l'appeler que depuis la barre de commandes ou un plugin script.
Personnaliser l'interface du widget
Une fois que vous avez créé un widget, vous pouvez personnaliser son interface utilisateur avec des GuiObjects tels que des TextLabels informatifs ou des ImageButtons interactifs. Par exemple, le code suivant ajoute un TextButton de base à la fenêtre GUI :
Pour vous aider à construire des widgets de Studio cohérents et efficaces, Roblox fournit un repo GitHub contenant des éléments GUI avec un look et une sensation "Studio" standard. Cela inclut des cases à cocher, des boutons radio et des champs de saisie qui ont un style Studio, et tous prennent en charge le thème sombre.
Changer les thèmes de couleur du Studio
Les widgets de Studio efficaces s'alignent idéalement sur le paramètre de thème du Studio et s'ajustent dynamiquement lorsque le thème change. Par exemple, si un développeur utilise le thème sombre, la couleur de fond du widget, les images et les étiquettes de texte devraient s'harmoniser avec les couleurs de thème natives du Studio.
L'ajout de code suivant utilise une fonction syncGuiColors() qui est initialement appelée avec un tableau d'objets GUI à synchroniser. À l'intérieur de la fonction, une fonction imbriquée setColors() parcourt les objets et synchronise des aspects spécifiques d'eux en utilisant GetColor() avec des énumérations Enum.StudioStyleGuideColor. Cette fonction setColors() est immédiatement exécutée pour synchroniser le thème du Studio, puis elle est connectée à l'événement ThemeChanged pour détecter les futurs changements de thème.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Synchroniser la couleur de fond
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Synchroniser la couleur du texte
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Exécuter la fonction 'setColors()' pour synchroniser initialement les couleurs
setColors()
-- Connecter l'événement 'ThemeChanged' à la fonction 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Exécuter la fonction 'syncGuiColors()' pour synchroniser les couleurs des objets fournis
syncGuiColors({testButton})
Personnaliser les pointeurs de souris
Pour améliorer l'interaction attendue avec les éléments du widget, vous pouvez définir des pointeurs de souris spécifiques au système pour les événements GUI, tels que MouseEnter et MouseLeave. Le code suivant démontre comment connecter une fonction aux événements MouseEnter et MouseLeave de testButton pour changer le pointeur 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érez-vous au tableau suivant pour une liste de pointeurs de souris et de leurs cas d'utilisation potentiels :
| Icône de Pointeur de Souris | Actif | Cas d'Utilisation |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Clic et sélection par défaut. |
 | rbxasset://SystemCursors/PointingHand | Surlignant un lien/bouton actif. |
 | rbxasset://SystemCursors/OpenHand | Surlignant un élément déplaçable. |
 | rbxasset://SystemCursors/ClosedHand | Faisant glisser un élément. |
 | rbxasset://SystemCursors/IBeam | Surlignant dans un champ de texte. |
 | rbxasset://SystemCursors/SizeNS | Surlignant un manipulateur de redimensionnement vertical. |
 | rbxasset://SystemCursors/SizeEW | Surlignant un manipulateur de redimensionnement horizontal. |
 | rbxasset://SystemCursors/SizeNESW | Surlignant un manipulateur de redimensionnement de coin. |
 | rbxasset://SystemCursors/SizeNWSE | Surlignant un manipulateur de redimensionnement de coin. |
 | rbxasset://SystemCursors/SizeAll | Surlignant un manipulateur de redimensionnement multi-directionnel. |
 | rbxasset://SystemCursors/SplitNS | Surlignant un "manipulateur" vertical de séparation. |
 | rbxasset://SystemCursors/SplitEW | Surlignant un "manipulateur" horizontal de séparation. |
 | rbxasset://SystemCursors/Forbidden | Surlignant un élément verrouillé/interdit. |
 | rbxasset://SystemCursors/Wait | Indiquant qu'une action est en cours. |
 | rbxasset://SystemCursors/Busy | Indiquant que le système est occupé. |
 | rbxasset://SystemCursors/Cross | Surlignant une zone de sélection pointée. |
Notez que ces apparences de curseur ne sont qu'une approximation — les pointeurs de souris réels correspondent à vos pointeurs de souris par défaut du système d'exploitation.
Rassembler les entrées de l'utilisateur
Les éléments UI tels que TextBox et TextButton fonctionnent normalement dans les widgets du Studio, et vous pouvez créer des interfaces comme vous le feriez normalement sur Roblox. Cependant, UserInputService ne fonctionne pas puisque ces services s'attendent à ce que la fenêtre principale de l'expérience soit au premier plan.
Une solution pour les événements d'entrée génériques consiste à créer un Frame transparent et à le superposer sur tout l'écran. L'exemple de code suivant crée un cadre, et lorsque l'utilisateur clique sur le cadre, l'événement GuiObject.InputBegan capture l'entrée clavier sur le cadre jusqu'à ce que l'utilisateur clique ailleurs :
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Cacher le cadre
frame.Size = UDim2.new(1, 0, 1, 0) -- Couvrir l'écran
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Traitez l'objet d'entrée ici, par exemple détectez les frappes de touches
end
frame.InputBegan:Connect(onInputBegan)
Interaction par glisser-déposer
Utiliser des 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 à faire glisser, initier le glissement, créer une cible de dépôt et traiter l'action de dépôt.
Créer une source de glissement
Vous pouvez commencer une action de glissement en appelant Plugin:StartDrag() lorsque l'utilisateur appuie sur un bouton de la souris sur un élément UI, généralement un TextButton ou ImageButton au sein d'un widget. L'exemple de code suivant crée un widget de fenêtre unique avec un bouton de texte à l'intérieur.
Initier le glissement
Lorsque l'utilisateur clique sur le TextButton, vous pouvez initier le glissement par l’événement MouseButton1Down() qui se déclenche dès que l'utilisateur appuie sur le bouton de la souris.
Dans la fonction connectée, déterminez les données à faire glisser. Le type des données doit être reflété dans la clé MimeType, le contenu du glissement doit être reflété dans la clé Data, et le sender doit se décrire dans la clé Sender. Voir la page Plugin:StartDrag() pour plus de détails.
local function onButton1Down()
local dragInfo = {
Data = "Bonjour, le monde", -- Les données étant glissées
MimeType = "text/plain", -- Décrit le type MIME des données
Sender = "CertainDragSource", -- Décrit d'où proviennent les données
MouseIcon = "", -- Contenu d'image à utiliser pour le curseur
DragIcon = "", -- Contenu d'image à afficher sous le curseur pendant le glissement
HotSpot = Vector2.zero -- Où sur le DragIcon centrer le curseur
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Créer une cible de dépôt
L'événement PluginGui.PluginDragDropped se déclenche lorsque l'utilisateur relâche sa souris sur une fenêtre pendant un glissement. Lorsque cela se produit, vous devez définir une cible de dépôt tel qu'un second widget avec une TextLabel pour détecter les dépôts.
Traiter l'action de dépôt
Après avoir créé une cible de dépôt, connectez l'événement PluginGui.PluginDragDropped 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 déclenchent lorsque l'utilisateur déplace sa souris au-dessus d'un widget :
- PluginDragEntered – se déclenche lorsque l'utilisateur survole une fenêtre avec la souris
- PluginDragMoved – se déclenche de manière répétée lorsque l'utilisateur déplace sa souris au-dessus d'une fenêtre. Cela est utile pour afficher un message "Déposez ici !".
- PluginDragLeft – se déclenche lorsque le curseur de l'utilisateur quitte une fenêtre. Cela est utile pour masquer un message "Déposez ici !".