Construir widgets de Studio

Studio te da el poder de crear widgets personalizados y usarlos como herramientas y extensiones de Studio. Estos widgets se comportan como ventanas / paneles personalizados en Studio, y puedes acoplarlos dentro de tu interfaz o hacerlos flotar como ventanas separadas.

Creando UIs de widget

Todos los widgets de Studio comienzan como objetos DockWidgetPluginGui que puedes llenar con GuiObjects, como etiquetas de texto y botones. Para crear una Interfaz gráfica (o GUI)de widget vacía, llama la función CreateDockWidgetPluginGui() , pasando

Nota que el constructor Datatype.DockWidgetPluginGuiInfo.new() espera sus parámetros en un orden específico como sigue:

-- Crear un nuevo objeto "DockWidgetPluginGuiInfo"
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- El widget se inicializará en el panel flotante
	true,   -- El widget se habilitará inicialmente
	false,  -- No sobreescriba el estado habilitado anterior
	200,    -- Anchura predeterminada de la ventana flotante
	300,    -- Altura predeterminada de la ventana flotante
	150,    -- Anchura mínima de la ventana flotante
	150     -- Altura mínima de la ventana flotante
)

-- Crear nueva Interfaz gráfica (o GUI)de widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Personalizar la interfaz de usuario de widget

Una vez que crea un widget, puede personalizar su interfaz de usuario con GuiObjects como etiquetas de información TextLabels o botones interactivos ImageButtons . Por ejemplo, el siguiente código agrega un 1> Class.TextButton1> básico a la ventana de GUI:

-- Crear nueva Interfaz gráfica (o GUI)de widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Título de widget opcional

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

Cambiar temas de color de Studio

Los widgets de Studio idealesmente coinciden con la configuración y ajuste dinámico del tema Studio. Por instancia, si un desarrollador está usando el tema oscuro, el color de fondo del widget, las imágenes y etiquetas de texto deberían verse bien al lado de los colores de tema nativos de Studio.

La siguiente añadida de código usa una función de syncGuiColors() que inicialmente se llama junto con una tabla de objetos de GUI para sincronizar. En la función, una función

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Sincronizar color de fondo
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Sincronizar el color del texto
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Ejecuta la función 'setColors()' para sincronizar los colores inicialmente
	setColors()
	-- Conecta el evento 'ThemeChanged' a la función 'setColors()'
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Ejecuta la función 'SyncGuiColors()' para sincronizar los colores de los objetos proporcionados
syncGuiColors({testButton})

Personalización de cursores de mouse

Para mejorar la esperada interacción con los elementos de widget, puede establecer los cursores de mouse específicos del sistema en los eventos de GUI, como Class.GuiObject.MouseEnter|MouseEnter y MouseEnter . El

local function setCursor(cursorAsset)
	plugin:GetMouse().Icon = cursorAsset
end

testButton.MouseEnter:Connect(function()
	setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
	setCursor("")
end)

Consulte la siguiente tabla para obtener una lista de cursores de mouse y sus posibles casos de uso:

Icono del ratón de curso	Activo	Uso de caso
	rbxasset://SystemCursors/Arrow	Clic y selección predeterminados.
	rbxasset://SystemCursors/PointingHand	Pasar el cursor sobre un enlace/botón activo.
	rbxasset://SystemCursors/OpenHand	Pasar el cursor sobre un objetoarrastrable.
	rbxasset://SystemCursors/ClosedHand	Arrastrar un objeto.
	rbxasset://SystemCursors/IBeam	Pasar el cursor en un campo de texto.
	rbxasset://SystemCursors/SizeNS	Pasar el cursor por encima de un controladorde resize vertical.
	rbxasset://SystemCursors/SizeEW	Pase el cursor por encima de un controladorde escalado horizontal.
	rbxasset://SystemCursors/SizeNESW	Pase el controladorpor encima de un mango de resize de esquina.
	rbxasset://SystemCursors/SizeNWSE	Pase el controladorpor encima de un mango de resize de esquina.
	rbxasset://SystemCursors/SizeAll	Pasar el cursor por encima de un multi-dirección resize controlador.
	rbxasset://SystemCursors/SplitNS	Pasar el cursor por encima de un controlador"divisorio" vertical.
	rbxasset://SystemCursors/SplitEW	Pasar el cursor por encima de un controladorhorizontal "diviso".
	rbxasset://SystemCursors/Forbidden	Pasar el cursor sobre un objetobloqueado/prohibido.
	rbxasset://SystemCursors/Wait	Indicar que una acción está en progreso.
	rbxasset://SystemCursors/Busy	Indicando que el sistema está ocupado.
	rbxasset://SystemCursors/Cross	Pasar el cursor por encima de un área de selección de pines.

Recolectar entrada del usuario

Los elementos de la interfaz de usuario, como TextBox y TextButton funcionan normalmente en los widgets de Studio, y puedes construir interfaces como las que normalmente construirías en Roblox. Sin embargo, UserInputService y 1> Class.ContextActionService1> no funcionan, ya que estos servicios esperan que la ventana principal del juego esté en

Una solución de trabajo para eventos genéricos de entrada es crear un Frame transparente y superponerlo en todo el pantalla. El siguiente código de ejemplo crea un marco, y cuando el usuario hace clic en el marco, el evento GuiObject.InputBegan captura la entrada del teclado en el marco hasta que el usuario haga clic lejos:

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Ocultar el marco
frame.Size = UDim2.new(1, 0, 1, 0)  -- Cubra la pantalla
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Procesa el objeto de entrada aquí, por ejemplo, para detectar presiones de teclas
end
frame.InputBegan:Connect(onInputBegan)

Interacción de arrastre y soltar

Usar interacciones de arrastre y soltar para tus widgets es una manera sencilla de mejorar el flujo de datos. Para crear esta interacción, debes definir el elemento para arrastrar, iniciar el arrastre, crear un destino de soltado y procesar la acción de soltado.

Crear una fuente de arrastre

Puedes iniciar una acción de arrastre al llamar Plugin:StartDrag() cuando el usuario presiona un botón de mouse en algún elemento de la interfaz de usuario, generalmente un TextButton o ImageButton dentro de un widget. La siguiente muestra de código crea un solo widget de ventana con un botón de texto dentro de él.

-- Crea el widget primero
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Crea un TextButton que iniciará el arrastre
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Iniciando la Drag

Cuando el usuario hace clic en el TextButton , puedes iniciar el arrastre a través del evento MouseButton1Down() que se activa tan pronto como el usuario presiona el botón del mouse.

Dentro de la función conectada, determine los datos para arrastrar. El tipo de datos tipo de los datos debe reflejarse en la llave MimeType, el contenido contenido de la drag debe reflejarse dentro de la llave 2>Data2> y el sendero

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Los datos que se arrastran
		MimeType = "text/plain",    -- Describe el tipo MIME de los datos
		Sender = "SomeDragSource",  -- Describe de dónde se originó el datos
		MouseIcon = "",             -- Contenido de la imagen para usar para el cursor
		DragIcon = "",              -- Contenido de la imagen para renderizar bajo el cursor durante el arrastre
		HotSpot = Vector2.zero -- Dónde en el DragIcon para alinear el cursor
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Crear un objetivo de gota

El evento PluginGui.PluginDragDropped activa cuando el usuario suelta su mouse en una ventana durante un arrastre. Cuando esto ocurre, debe definir un drop target como un segundo widget con un TextLabel para detectar caídas.

local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"

-- Este TextLabel mostrará lo que se ha soltado
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Procesando la acción de Drop

Después de crear un objetivo de gota, conecta el evento PluginGui.PluginDragDropped en el widget del objetivo de gota:

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)

Mientras que aún se está en curso un arrastre, estos tres eventos se disparan a medida que el usuario mueve el mouse sobre un widget:

• PluginDragEntered – se activa cuando el usuario pasa el mouse sobre una ventana
• PluginDragMoved – se activa repetidamente a medida que el usuario mueve el mouse sobre una ventana. Esto es útil para mostrar un mensaje «¡Soltar aquí!».
• PluginDragLeft – se activa cuando el cursor del usuario deja una ventana. Esto es útil para ocultar un mensaje "¡Soltar aquí!"