สร้างรายการ Studio

Studio ให้คุณความสามารถในการสร้าง โปรเจ็กท์ และใช้พวกเขาเป็นเครื่องมือและขยายของ Studio เหล่านี้จะทำงานเหมือนเป็นหน้าต่าง / แผงที่กำหนดเองใน Studio และคุณสามารถด็อคพวกเขาภายในของคุณหรือ

การสร้างรายการอินทราและการแสดงผล

วิดเจ็ตทั้งหมดใน Studio เริ่มต้นเป็นวัตถุ DockWidgetPluginGui ซึ่งคุณสามารถเติมด้วย GuiObjects เช่นเมื่อป้ายชื่อและปุ

หมายเหตุ DockWidgetPluginGuiInfo.new() ผู้สร้างคาดหวังว่ามันจะมีพารามิเตอร์ใน ความสั่งซื้อที่เฉพาะ ดังต่อไปนี้:

-- สร้าง "DockWidgetPluginGuiInfo" วัตถุใหม่
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- ตัวอักษรจะถูกเริ่มต้นในแผงลอย
	true,   -- วอลเล็ทจะเปิดใช้งานในภายหลัง
	false,  -- อย่าเปลี่ยนแปลงสถานะที่เปิดใช้งานไว้ก่อน
	200,    -- ความกว้างของหน้าต่างลอย
	300,    -- ความสูงปกติของหน้าต่างลอย
	150,    -- ความกว้างขั้นต่ำของหน้าต่างลอย
	150     -- ความสูงขั้นต่ำของหน้าต่างลอย
)

-- สร้าง GUI วงดุริยางรูปใหม่
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

กําหนดเอง UI ของโจมตี

เมื่อคุณสร้างวิดเจ็ตคุณสามารถปรับแต่ง UI ของผู้ใช้ด้วย GuiObjects เช่น TextLabels หรือ ImageButtons ตัวอย่างเช่น รหัสต่อไ

-- สร้าง GUI วงดุริยางรูปใหม่
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- ชื่อวิดเจ็ตที่ต้องการ

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

เปลี่ยนธีมสีใน Studio

ผลิตภัณฑ์ Effective Studio จะตรงกับการตั้งค่าธีม ของ Studio โดยสมบูรณ์ในทุกกรณีและปรับแต่งได้อย่างไร้ที่สุดเมื่อธีมเปลี่ยนแปลง เช่น หากผู้พัฒนากำลังใช้ธีมมืด, สีพื้นหลังของผลิตภั

ต่อไปนี้คำเพิ่มโค้ดใช้งาน syncGuiColors() ระเบิดที่มีส่วนร่วมก

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- ซิงค์สีพื้นหลัง
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- ซิงค์สีข้อความ
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- ใช้งาน 'setColors()' เพื่อให้เครื่องสินค้าที่เริ่มต้นได้รับการจัดเค้าโครง
	setColors()
	-- เชื่อมต่อ 'ThemeChanged' เหตุการณ์ไปยัง 'setColors()' ฟังก์ชัน
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- ทำงาน 'SyncGuiColors()' เพื่อซิงค์สีของวัตถุที่ให้
syncGuiColors({testButton})

การปรับแต่งเมาส์

เพื่อปรับปรุงประสิทธิภาพการใช้งานร่วมกันกับวิดเจ็ตเอาต์พูดคุยให้คุณสามารถตั้ง

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

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

อ้างอิงตารางต่อไปนี้สำหรับรายการเมาส์ cursors และกรณีการใช้งานที่อาจเกิดขึ้น:

ไอคอนเมาส์	สินทรัพย์	ใช้กรณี
	rbxasset://SystemCursors/Arrow	การคลิกและเลือกเริ่มต้น
	rbxasset://SystemCursors/PointingHand	การเลื่อนเมาส์เหนือลิงค์/ปุ่มที่ใช้งานอยู่
	rbxasset://SystemCursors/OpenHand	ไอเท็ม
	rbxasset://SystemCursors/ClosedHand	ไอเท็ม
	rbxasset://SystemCursors/IBeam	การลองเล่นในข้อความข้อความ
	rbxasset://SystemCursors/SizeNS	การเลื่อนสูงเหนือหัวจับการปรับขนาดแนวตั้ง
	rbxasset://SystemCursors/SizeEW	การเลื่อนสูงเหนือหัวเรื่องการปรับขนาดแนวตั้ง
	rbxasset://SystemCursors/SizeNESW	การเลื่อนตำแหน่งจุดหมุดหมาย
	rbxasset://SystemCursors/SizeNWSE	การเลื่อนตำแหน่งจุดหมุดหมาย
	rbxasset://SystemCursors/SizeAll	การเลื่อนผ่านหัวจับการปรับแต่งทิศทางหลาย
	rbxasset://SystemCursors/SplitNS	ลองเลื่อนไปที่หัวจุดหมายปลายของแท่นตรงตั้ง
	rbxasset://SystemCursors/SplitEW	ลองเลื่อนไปที่มือจับแนวตั้ง "แยก"
	rbxasset://SystemCursors/Forbidden	ไอเท็ม
	rbxasset://SystemCursors/Wait	ระบุว่ามีการดำเนินการอยู่
	rbxasset://SystemCursors/Busy	บ่งชี้ว่าระบบกำลังยุ่งอยู่
	rbxasset://SystemCursors/Cross	การเลือกพื้นที่เหนือจุดเริ่มต้น

รวบรวมข้อมูลของผู้ใช้

รายการ UI เช่น TextBox และ TextButton ทำงานได้ตามปกติใน widget Studio และคุณสามารถสร้างระบบประสายในขณะที่คุณจะทำปกติบน Roblox ได้ อย่างไรก็

หนึ่ง workaround สำหรับการป้อนข้อมูลทั่วไปคือการสร้าง Frame และวางบนหน้าจอทั้งหมด ตัวอย่างโค้ดต่อไปนี้สร้างเฟรม และเมื่อผู้ใช้คลิกที่เฟรมจนกว่าผู้ใช้

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- ซ่อนเค้าโครง
frame.Size = UDim2.new(1, 0, 1, 0)  -- ครอบคลุมหน้าจอ
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- ประมวลผลตัวอุปกรณ์ที่ใส่มาที่นี่ เช่น ตรวจจับการกดปุ่ม
end
frame.InputBegan:Connect(onInputBegan)

ใช้การลากและปล่อยเพื่อใช้งาน

การใช้ปฏิสัมพันธ์แบบลากและลากสำหรับวิดเจ็ตของคุณเป็นวิธีง่ายๆ ในการปรับปรุงการไหลของข้อมูล เพื่อสร้างปฏิสัมพันธ์นี้ คุณต้องกำหนดตัวองค์ประกอบที่จะลาก, เริ่มลาก, สร้างเป้าหมาย

การสร้างที่หลอมรวม

คุณสามารถเริ่มการลากโดยการเรียก Plugin:StartDrag() เมื่อผู้ใช้กดปุ่มเมาส์บางองค์ประกอบบน UI โดยปกติจะเป็น TextButton หรือ ImageButton ภายในวิดเจ็ด

-- สร้างโครงการให้ก่อน
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- สร้าง TextButton ที่จะเริ่มต้นการลาก
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

กําลังเริ่มการลาก

เมื่อผู้ใช้คลิกที่ TextButton คุณสามารถเริ่มลากผ่านเหตุการณ์ MouseButton1Down() ซึ่งจะเปิดให้เมื่อผู้ใช้กดปุ่มเมาส์

ในระหว่างการเชื่อมต่อฟังก์ชัน กรุณาระบุข้อมูลที่จะลาก. ข้อมูลของ ชนิด ควรจะปรากฏใน Mime

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- กําลังลากข้อมูล
		MimeType = "text/plain",    -- อธิบายประเภทข้อมูล MIME
		Sender = "SomeDragSource",  -- อธิบายว่าข้อมูลมาจากไหน
		MouseIcon = "",             -- เนื้อหาของภาพที่ใช้สำหรับตัวเลือก
		DragIcon = "",              -- เนื้อหาของภาพที่จะเรนเดอร์ภายใต้เมาส์ในระหว่างการลาก
		HotSpot = Vector2.zero -- ที่ไหนใน DragIcon เพื่อให้ตำแหน่งเมาส์
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

การสร้างเป้าหมายหลังจุดลง

เหตุการณ์ PluginGui.PluginDragDropped เกิดขึ้นเมื่อผู้ใช้ปล่อยเมาส์ในหน้าต่างในระหว่างการลากเมาส์ เมื่อเกิดเหตุการณ์นี้ขึ้น คุณจำเป็นต้องกำหนด เป้าหมายล้ม เช

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

-- นี้ TextLabel จะแสดงสิ่งที่ถูกทิ้ง
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

การประมวลผลการดรอป

หลังจากสร้างเป้าหมายดรอปให้เชื่อมต่อกิจกรรม PluginGui.PluginDragDropped บนหน้าวิดเจ็ตเป้าหมายดรอป

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)

ในขณะที่การลากยังคงดำเนินอยู่ เหตุการณ์เหล่านี้สามจะเกิดขึ้นเมื่อผู้ใช้เคลื่อนเมาส์ไปที่วิดเจ็ต:

• PluginDragEntered – เปิดใช้งานเมื่อผู้ใช้วางเมาส์บนหน้าต่าง
• PluginDragMoved – เปิดให้เห็นซ้ำได้เมื่อผู้ใช้เคลื่อนเมาส์ไปที่หน้าต่าง นี่เป็นประโยชน์สำหรับการแสดงข้อความ "Drop here!"
• PluginDragLeft – เปิดใช้งานเมื่อผู้ใช้ปล่อยมาウสออกจากหน้าต่าง นี่เป็นประโยชน์สำหรับการซ่อนข้อความ "ดรอปที่นี่!"