Studio vous donne le pouvoir 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 déverrouiller à l'intérieur de votre interface ou les flotter en tant que fenêtres séparées.
Créer des interfaces utilisateur de widget
Tous les widgets Studio commencent comme DockWidgetPluginGui objets que vous pouvez remplir avec GuiObjects, tels que les étiquettes de texte et les boutons. Pour créer une interface utilisateur graphiquede widget vide, appelez la fonction CreateDockWidgetPluginGui(), en passant un ID et
Notez que le Datatype.DockWidgetPluginGuiInfo.new() constructeur s'attend à ce que ses paramètres dans un ordre spécifique comme suivant :
| # | Propriété | Type | Description |
|---|---|---|---|
| 1 | Enum.InitialDockState | Entrée | Une des listes Enum.InitialDockState. |
| 2 | InitialEnabled | Booléen | L'état initial activé (visible) de la interface utilisateur graphiquedu widget. |
| 3 | InitialEnabledShouldOverrideRestore | Booléen | Si oui, la valeur de InitialEnabled écrase l'état activé précédemment enregistré. |
| 4 | FloatingXSize | Entier | La largeur initiale de la GUI lorsque InitialDockState est réglé sur Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Entier | La hauteur initiale de la GUI lorsque InitialDockState est réglée sur Enum.InitialDockState.Float. |
| 6 | MinWidth | Entier | La largeur minimum de la interface utilisateur graphique, avec des variantes spécifiques de la plate-forme. |
| 7 | MinHeight | Entier | La hauteur minimale de la interface utilisateur graphique, avec quelques variantes de plate-forme. |
Vous ne pouvez pas utiliser la fonction CreateDockWidgetPluginGui() dans les scripts de jeu. Vous ne pouvez l'appeler que depuis la barre de commande ou un script de plugin.
Personnalisation de l'interface utilisateur du widget
Une fois que vous avez créé un widget, vous pouvez personnaliser son interface utilisateur avec GuiObjects tels que des informations sur TextLabels ou des interfaces interactives sur ImageButtons. Par exemple, le code suivant ajoute une base de 1> Class.TextButton1> à la fenêtre GUI :
Notez que vous devez parent le bouton au widget dans la même façon que vous devez parent n'importe quelle écran dans l'expérience Class.GuiObject à un GuiObject .
Pour vous aider à construire des widgets Studio cohérents et efficaces, Roblox fournit un référentiel gitHub qui contient des éléments de l'interface graphique avec un look et un sentiment standard "Studio". Cela inclut des cases à cocher, des boutons de radio et des champs d'entrée qui ont un style Studio et ils tous supportent le thème sombre.
Changer les thèmes de couleur du studio
Les widgets Studio idéalement correspondent à la configuration thème Studio et s'ajustent dynamiquement lorsque le thème change. Par instance, si un développeur utilise le thème sombre, la couleur de l'arrière-plan, les images et les textes de l'onglet de widget devraient bien s'ajuster aux couleurs thème natives de Studio.
La fonction suivante utilise une fonction syncGuiColors() qui est initialement appelée avec une table d'objets GUI pour synchroniser. Dans la fonction, un boucle de fonction setColors() à travers les
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Synchronisation de la couleur de l'arrière-plan
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Synchronisation de la couleur du texte
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Exécutez la fonction « setColors() » pour initialiser la synchronisation des couleurs
setColors()
-- Connectez l'événement « ThemeChanged » à la fonction « setColors() »
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Exécutez la fonction 'SyncColorGuiColors()' pour synchroniser les couleurs des objets fournis
syncGuiColors({testButton})
Personnalisation des pointeurs de souris
Pour améliorer l'interaction avec les éléments de widget, vous pouvez configurer des curseurs de souris spécifiques au système dans les événements GUI, tels que MouseEnter et Class.GuiObject
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 à la table suivante pour une liste de curseurs de souris et de leurs cas d'utilisation potentiels :
| Icône de curseur de souris | Ressource | Utiliser le cas |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Cliquez et sélectionnez par défaut. |
 | rbxasset://SystemCursors/PointingHand | Survole d'un lien/bouton actif. |
 | rbxasset://SystemCursors/OpenHand | Survole d'un itemfaisable. |
 | rbxasset://SystemCursors/ClosedHand | Faire glisser un item. |
 | rbxasset://SystemCursors/IBeam | Survole dans un champ de texte. |
 | rbxasset://SystemCursors/SizeNS | Passez la souris sur une poignée de redimensionnement verticale. |
 | rbxasset://SystemCursors/SizeEW | Passez la souris sur une contrôleurde redimensionnement horizontale. |
 | rbxasset://SystemCursors/SizeNESW | Survolez une poignée de contrôleurd'un coin. |
 | rbxasset://SystemCursors/SizeNWSE | Survolez une poignée de contrôleurd'un coin. |
 | rbxasset://SystemCursors/SizeAll | Passez la souris sur une poignée de redimensionnement contrôleur. |
 | rbxasset://SystemCursors/SplitNS | Survole d'une contrôleurverticale « split ». |
 | rbxasset://SystemCursors/SplitEW | Survole d'une contrôleurhorizontale « diviser ». |
 | rbxasset://SystemCursors/Forbidden | Passez la souris sur un itemverrouillé/interdit. |
 | rbxasset://SystemCursors/Wait | Indiquer qu'une action est en cours. |
 | rbxasset://SystemCursors/Busy | Indication que le système est occupé. |
 | rbxasset://SystemCursors/Cross | Survole d'une zone de sélection de pin. |
Notez que ces looks de curseur ne sont qu'une approximation — les vrais curseurs correspondent à vos curseurs d'exécution par défaut.
Récupération de l'entrée de l'utilisateur
Les éléments de l'interface utilisateur tels que TextBox et TextButton fonctionnent normalement dans les widgets Studio, et vous pouvez construire des interfaces comme vous le feriez normalement sur Roblox. Cependant, UserInputService et 1> Class.ContextActionService1> ne fonctionnent pas car ces services attendent que la fenêtre principale soit en focus.
L'un des workarounds 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. Le code suivant crée un cadre, et lorsque l'utilisateur clique sur le cadre, l'événement GuiObject.InputBegan capture l'entrée du clavier sur le cadre jusqu'à ce que l'utilisateur clique :
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Cacher le cadre
frame.Size = UDim2.new(1, 0, 1, 0) -- Couvrez l'écran
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Traitement de l'objet d'entrée ici, par exemple pour détecter les presses clavier
end
frame.InputBegan:Connect(onInputBegan)
Interaction avec les glissières
Utiliser les interactions de 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 à glisser, initialiser le glisser, créer une cible de dérive et traiter l'action de dérive.
Créer une source de glisser
Vous pouvez commencer une action de déplacement en appelant Plugin:StartDrag() lorsque l'utilisateur appuie sur un bouton de souris dans un élément de l'interface utilisateur, généralement un TextButton ou un ImageButton dans un widget. Le code suivant crée un seul widget de fenêtre avec un bouton de texte à l'intérieur.
Initiation du déplacement
Lorsque l'utilisateur clique sur le TextButton, vous pouvez initialiser le déplacement via 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 à déplacer. Le type de données est reflété dans la clé MimeType, le contenu de la drag doit être reflété dans la clé Data , et le sendeur doit se décrire dans la clé 1>4> Class.Plugin
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- Les données qui sont traînées
MimeType = "text/plain", -- Décrire le type MIME des données
Sender = "SomeDragSource", -- Décrire d'où viennent les données
MouseIcon = "", -- Contenu d'image à utiliser pour le curseur
DragIcon = "", -- Contenu de l'image à rendre sous le curseur pendant le déplacement
HotSpot = Vector2.zero -- Où sur le DragIcon pour centrer le curseur
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Créer une cible de décharge
L'événement PluginGui.PluginDragDropped se déclenche lorsque l'utilisateur relâche sa souris sur une fenêtre pendant un déplacement. Lorsque cela se produit, vous devez définir un lâcher la cible comme une deuxième widget avec un TextLabel pour détecter les lancers.
Traiter l'action de suppression
Après avoir créé une cible de décharge, connectez l'événement PluginGui.PluginDragDropped sur le widget de cible de décharge :
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'une traînée est toujours en cours, ces trois événements se déclenchent lorsque l'utilisateur déplace sa souris sur un widget :
- PluginDragEntered – se déclenche lorsque l'utilisateur passe la souris sur une fenêtre
- PluginDragMoved – se déclenche répétitivement lorsque l'utilisateur déplace sa souris sur une fenêtre. Ceci est utile pour afficher un message « Drop here! ».
- PluginDragLeft – se déclenche lorsque le curseur de l'utilisateur quitte une fenêtre. Ceci est utile pour cacher un message « Drop here! ».