Studio vous donne le pouvoir de créer des widgets personnalisés et de les utiliser comme outils et extensions de Studio .Ces widgets se comportent comme des fenêtres/panneaux personnalisés dans Studio, et vous pouvez les docker à l'intérieur de votre interface ou les faire flotter en tant que fenêtres séparées.
Créer des interfaces utilisateur widget
Tous les widgets de studio commencent comme des objets DockWidgetPluginGui que vous pouvez remplir avec GuiObjects, tels que des étiquettes de texte et des boutons.Pour créer un widget vide interface utilisateur graphique, appelez la fonction , en passant un ID et un objet ».
Remarquez que le constructeur DockWidgetPluginGuiInfo.new() attend ses paramètres dans un ordre spécifique comme suit :
| # | Propriété | Type | Avertissement |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Une des listes de Enum.InitialDockState enumerations. |
| 2 | InitialEnabled | Booléen | L'état initial activé (visible) du widget interface utilisateur graphique. |
| 3 | InitialEnabledShouldOverrideRestore | Booléen | Si c'est vrai, la valeur de InitialEnabled remplace l'état activé précédemment enregistré. |
| 4 | FloatingXSize | Entier | La largeur initiale de l'interface lorsque InitialDockState est défini sur Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Entier | La hauteur initiale de l'interface lorsque InitialDockState est défini sur Enum.InitialDockState.Float. |
| 6 | MinWidth | Entier | Largeur minimale de l'interface utilisateur graphique, avec quelques variations spécifiques à la plate-forme. |
| 7 | MinHeight | Entier | La hauteur minimale de l'interface utilisateur graphique, avec quelques variations spécifiques à la plate-forme. |
Vous ne pouvez pas utiliser la fonction CreateDockWidgetPluginGui() dans les scripts du jeu. Vous ne pouvez l'appeler que depuis la barre de commande ou un script plugin.
Personnaliser l'interface utilisateur du widget
Une fois que vous avez créé un widget, vous pouvez personnaliser son interface utilisateur avec GuiObjects par exemple informatif TextLabels ou interactif ImageButtons .Par exemple, le code suivant ajoute une fenêtre GUI de base TextButton :
Pour vous aider à construire des widgets Studio cohérents et efficaces, Roblox fournit un référentiel GitHub qui contient des éléments d'interface utilisateur avec un look et une sensation « Studio » standard.Ceux-ci incluent des cases à cocher, des boutons radio et des champs de saisie qui ont un style Studio, et ils soutiennent tous le thème sombre.
Changer les thèmes de couleur du studio
Les widgets de studio efficaces correspondent idéalement à la configuration du 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 arrière-plan du widget, les images et les étiquettes de texte devraient s'harmoniser avec les couleurs du thème natif de Studio.
L'ajout suivant du code utilise une fonction syncGuiColors() qui est initialement appelée avec une table d'objets GUI à synchroniser.À l'intérieur de la fonction, une boucle de fonction imbriquée setColors() traverse les objets et synchronise des aspects spécifiques d'entre eux en utilisant GetColor() avec Enum.StudioStyleGuideColor des enums.Cette fonction setColors() est exécutée immédiatement pour synchroniser le thème 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
-- Synchronisation de la couleur de fond
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()
-- Relier l'événement 'ThemeChanged' à la fonction 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Exécutez la fonction 'syncGuiColors()' pour synchroniser les couleurs des objets fournis
syncGuiColors({testButton})
Personnaliser les curseurs de la souris
Pour améliorer l'interaction attendue avec les éléments de widget, vous pouvez définir des curseurs système spécifiques à des événements GUI, tels que et .Le code suivant montre comment connecter une fonction aux événements MouseEnter et MouseLeave des sous-processus de testButton pour changer le curseur de la 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 à la table suivante pour une liste des curseurs de souris et de leurs cas d'utilisation potentiels :
| Icône de curseur de souris | Actif | Utiliser le cas |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Clic et sélection par défaut. |
 | rbxasset://SystemCursors/PointingHand | Survolez un lien/bouton actif. |
 | rbxasset://SystemCursors/OpenHand | Survolez un itemglissable. |
 | rbxasset://SystemCursors/ClosedHand | Faire glisser un item. |
 | rbxasset://SystemCursors/IBeam | Planer dans un champ de texte. |
 | rbxasset://SystemCursors/SizeNS | Survolez une contrôleurde redimensionnement verticale. |
 | rbxasset://SystemCursors/SizeEW | Survolez une contrôleurde redimensionnement horizontal. |
 | rbxasset://SystemCursors/SizeNESW | Passez la souris sur une poignée de contrôleurd'un coin. |
 | rbxasset://SystemCursors/SizeNWSE | Passez la souris sur une poignée de contrôleurd'un coin. |
 | rbxasset://SystemCursors/SizeAll | Survolez une poignée de redimensionnement contrôleur. |
 | rbxasset://SystemCursors/SplitNS | Survolez une contrôleurverticale "divisée". |
 | rbxasset://SystemCursors/SplitEW | Survolez une poignée horizontale "divisée". |
 | rbxasset://SystemCursors/Forbidden | Survolez un itemverrouillé/interdit. |
 | rbxasset://SystemCursors/Wait | Indiquer qu'une action est en cours. |
 | rbxasset://SystemCursors/Busy | Indiquer que le système est occupé. |
 | rbxasset://SystemCursors/Cross | Survolez une zone de sélection précise. |
Notez que ces apparences de curseur ne sont qu'une approximation — les curseurs réels correspondent aux curseurs par défaut de votre système d'exploitation.
Récupérer les entrées de l'utilisateur
Les éléments d'interface utilisateur tels que TextBox et TextButton fonctionnent normalement dans les widgets de Studio, et vous pouvez construire 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 principale du jeu soit en focus.
Une solution de contournement pour les événements d'entrée génériques consiste à créer un transparent Frame et à l'ajouter sur l'ensemble de 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 du clavier sur le cadre jusqu'à ce que l'utilisateur clique loin :
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Masquer le cadre
frame.Size = UDim2.new(1, 0, 1, 0) -- Recouvrir 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 détection des presses de touche
end
frame.InputBegan:Connect(onInputBegan)
Interaction glisser-déposer
L'utilisation d'interactions 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, lancer la glissade, créer une cible de dépose et traiter l'action de dépose.
Créer source de trascendant
Vous pouvez démarrer une action de glissement en appelant Plugin:StartDrag() lorsque l'utilisateur appuie sur un bouton de souris sur un élément d'interface utilisateur, généralement un TextButton ou ImageButton dans un widget.L'exemple de code suivant crée un seul widget de fenêtre avec un bouton de texte à l'intérieur.
Lancer le glisser
Lorsque l'utilisateur clique sur le TextButton, vous pouvez initier le glisser à travers 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 de données doit être reflété dans la clé , le contenu du glisser-déposer doit être reflété dans la clé , et l'expéditeur doit se décrire dans la clé ».Voir la page Plugin:StartDrag() pour plus de détails.
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- Les données qui sont déplacées
MimeType = "text/plain", -- Définit le type MIME des données
Sender = "SomeDragSource", -- Détermine d'où les données proviennent
MouseIcon = "", -- Contenu d'image à utiliser pour le curseur
DragIcon = "", -- Contenu d'image à rendre sous le curseur pendant le glissement
HotSpot = Vector2.zero -- Où sur l'icône de glisser pour centrer le curseur
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Créer 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 glisser.Lorsque cela se produit, vous devez définir une cible de dépose telle qu'un deuxième widget avec un TextLabel pour détecter les chutes.
Traiter l'action de suppression
Après avoir créé une cible de chute, connectez l'événement PluginGui.PluginDragDropped sur le widget de cible de chute :
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 glisser-déposer 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 à plusieurs reprises lorsque l'utilisateur déplace sa souris sur une fenêtre. Ceci est utile pour afficher un message "Déposez ici !".
- PluginDragLeft – se déclenche lorsque le curseur de l'utilisateur quitte une fenêtre. C'est utile pour masquer un message "Déposez ici !".