สร้างวิดเจ็ตสตูดิโอ

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

สร้าง UI ของวิดเจ็ต

วิดเจ็ตทั้งหมดในสตูดิโอเริ่มต้นเป็นวัตถุ DockWidgetPluginGui ซึ่งคุณสามารถกรอกด้วย GuiObjects เช่นฉลากข้อความและปุ่มเพื่อสร้าง GUI วิดเจ็ตว่างเปล่า โทรไปที่ฟังก์ชัน CreateDockWidgetPluginGui() โดยส่ง ID และวัตถุ DockWidgetPluginGuiInfo

โปรดทราบว่า ตัวสร้าง 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 ของวิดเจ็ต

เมื่อคุณสร้างวิดเจ็ตแล้ว คุณสามารถปรับแต่งอินเทอร์เฟซผู้ใช้ได้ด้วย GuiObjects เช่น การแจ้งข้อมูล TextLabels หรือการโต้ตอบ ImageButtonsตัวอย่างเช่น โค้ดต่อไปนี้เพิ่ม TextButton พื้นฐานในหน้าต่าง GUI:

-- สร้าง 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 อินสแตนซ์หากนักพัฒนากำลังใช้ธีมมืด สีพื้นหลังของวิดเจ็ต รูปภาพ และแท็กข้อความควรมีลักษณะดีไปพร้อมกับสีธีมเดิมของ Studio

การเพิ่มโค้ดต่อไปนี้ใช้ฟังก์ชัน syncGuiColors() ซึ่งเรียกในตอนแรกพร้อมกับตารางของวัตถุ GUI เพื่อซิงค์ภายในฟังก์ชันมีลูปฟังก์ชันที่ซ้อนกัน setColors() ผ่านวัตถุและซิงค์ด้านลักษณะเฉพาะของพวกเขาโดยใช้ GetColor() กับ Enum.StudioStyleGuideColor เอนัมเบอร์ฟังก์ชันนี้ setColors() จะทำงานทันทีเพื่อซิงค์ธีม Studio จากนั้นจะเชื่อมต่อกับเหตุการณ์ ThemeChanged เพื่อตรวจจับการเปลี่ยนแปลงธีมในอนาคต

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})

ปรับแต่งเคอร์เซอร์ที่กำหนดเอง

เพื่อปรับปรุงการโต้ตอบที่คาดไว้กับองค์ประกอบวิดเจ็ตคุณสามารถตั้งเคอร์เซอร์ระบบเฉพาะของระบบ เป็นเหตุการณ์ GUI เช่น MouseEnter และ MouseLeaveโค้ดต่อไปนี้แสดงวิธีเชื่อมต่อฟังก์ชันกับเหตุการณ์ MouseEnter และ MouseLeave ของ 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)

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

ไอเท็ม

ไอคอนเคอร์เซอร์เมาส์	สินทรัพย์	ใช้กรณี
	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 ทำงานตามปกติในวิดเจ็ต Studio และคุณสามารถสร้างอินเทอร์เฟซได้เหมือนที่คุณทำปกติบน Robloxอย่างไรก็ตาม UserInputService และ ContextActionService ไม่ทำงานเนื่องจากบริการเหล่านี้คาดว่าหน้าต่างเกมหลักจะอยู่ในโฟกัส

วิธีแก้ปัญหาหนึ่งสำหรับอีเวนต์การป้อนข้อมูลแบบทั่วไปคือการสร้าง Frame โปร่งใสและโอเวอร์เลย์บนหน้าจอทั้งหมดตัวอย่างโค้ดต่อไปนี้สร้างกรอบและเมื่อผู้ใช้คลิกที่กรอบ การจับเหตุการณ์ GuiObject.InputBegan จะบันทึกการใช้งานแป้นพิมพ์บนกรอบจนกว่าผู้ใช้จะคลิกออก:

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"

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

เริ่มการลาก

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

ภายในฟังก์ชันที่เชื่อมต่อกัน, กำหนดข้อมูลที่จะลากประเภทของข้อมูล คีย์คีย์คีย์ดูหน้า Plugin:StartDrag() สำหรับรายละเอียดเพิ่มเติม

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

dragButton.MouseButton1Down:Connect(onButton1Down)

สร้างเป้าหมายการดรอป

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

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

-- ป้ายชื่อข้อความนี้จะแสดงสิ่งที่ถูกทิ้ง
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 – เผาไหม้ซ้ำแล้วซ้ำอีกเมื่อผู้ใช้ย้ายเมาส์ไปบนหน้าต่าง นี่มีประโยชน์สำหรับการแสดงข้อความ "วางที่นี่!"
• PluginDragLeft – จะเกิดขึ้นเมื่อเคอร์เซอร์ของผู้ใช้ออกจากหน้าต่าง ซึ่งมีประโยชน์ในการซ่อนข้อความ "วางที่นี่!"