Widgets de Construction Studio

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éTypeDescription
1Enum.InitialDockStateEnumL'une des Enum.InitialDockStateénumérations.
2InitialEnabledBooléenL'état initial activé (visible) de widget GUI.
3InitialEnabledShouldOverrideRestoreBooléenSi true, la valeur de InitialEnabled remplace l'état activé précédemment enregistré.
7FloatingXSizeIntegerLa largeur initiale de GUI lorsque InitialDockState est définie sur Enum.InitialDockState.Float.
4FloatingYSizeIntegerLa largeur initiale de GUI lorsque InitialDockState est définie sur Enum.InitialDockState.Float.
5MinWidthIntegerLa largeur minimale de GUI, avec certaines variations spécifiques à la plateforme.
7MinHeightIntegerLa hauteur minimale de GUI, avec certaines variations spécifiques à la plateforme.

-- Create new "DockWidgetPluginGuiInfo" object
local widgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- Widget will be initialized in floating panel
true, -- Widget will be initially enabled
false, -- Don't override the previous enabled state
200, -- Default width of the floating window
300, -- Default height of the floating window
150, -- Minimum width of the floating window
150 -- Minimum height of the floating window
)
-- Create new widget GUI
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget" -- Optional widget title

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 :


-- Create new widget GUI
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget" -- Optional widget title
local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Click Me"
testButton.Parent = testWidget

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 sourisBehaviorCas d'utilisation
rbxasset://SystemCursors/ArrowCliquez et sélection par défaut.
rbxasset://SystemCursors/PointingHandSurvoler un lien/bouton.
rbxasset://SystemCursors/OpenHandSurvoler un objet glissant.
rbxasset://SystemCursors/ClosedHandFaire glisser un objet.
rbxasset://SystemCursors/IBeamSurvoler dans un champ de texte.
rbxasset://SystemCursors/SizeNSSurvoler une poignée d'ajustement vertical.
rbxasset://SystemCursors/SizeEWSurvoler une poignée d'ajustement horizontal.
rbxasset://SystemCursors/SizeNESWSurvoler une poignée d'ajustement de coin.
rbxasset://SystemCursors/SizeNWSESurvoler une poignée d'ajustement de coin.
rbxasset://SystemCursors/SizeAllSurvoler une poignée d'ajustement multidirectionnelle.
rbxasset://SystemCursors/SplitNSSurvoler une poignée verticale « divisée »
rbxasset://SystemCursors/SplitEWSurvoler une poignée horizontale « divisée ».
rbxasset://SystemCursors/ForbiddenSurvoler un objet verrouillé/interdit.
rbxasset://SystemCursors/WaitIndiquer une action est en cours.
rbxasset://SystemCursors/Busy Indiquer que le système est occupé.
rbxasset://SystemCursors/CrossSurvoler une zone de sélection de point.

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.


-- Create the widget first
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"
-- Create a TextButton that will initiate the drag
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!" dragButton.Parent = dragSourceWidget

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.


local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"
-- This TextLabel will display what was dropped
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..." textLabel.Parent = dragTargetWidget

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 ! » .