วิดเจ็ตใน Studio

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

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

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

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

โปรดทราบว่า ตัวสร้าง DockWidgetPluginGuiInfo.new() คาดหวังพารามิเตอร์ของมันใน ลำดับที่กำหนด ดังนี้:

#คุณสมบัติประเภทคำอธิบาย
1Enum.InitialDockStateEnumหนึ่งในค่าการจำแนกประเภทของ Enum.InitialDockState
2InitialEnabledBooleanสถานะการเปิดใช้งาน (แสดง) ในเบื้องต้นของ GUI วิดเจ็ต
3InitialEnabledShouldOverrideRestoreBooleanถ้าเป็นจริง ค่าของ InitialEnabled จะทำการแทนที่สถานะการเปิดใช้งานที่บันทึกไว้ก่อนหน้านี้
4FloatingXSizeIntegerความกว้างเริ่มต้นของ GUI เมื่อ InitialDockState ถูกตั้งค่าเป็น Enum.InitialDockState.Float.
5FloatingYSizeIntegerความสูงเริ่มต้นของ GUI เมื่อ InitialDockState ถูกตั้งค่าเป็น Enum.InitialDockState.Float.
6MinWidthIntegerความกว้างขั้นต่ำของ GUI โดยมีการเปลี่ยนแปลงเฉพาะบางแพลตฟอร์ม
7MinHeightIntegerความสูงขั้นต่ำของ GUI โดยมีการเปลี่ยนแปลงเฉพาะบางแพลตฟอร์ม

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

ปรับแต่ง UI ของวิดเจ็ต

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


-- สร้าง GUI วิดเจ็ตใหม่
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.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 = "คลิกที่นี่"
testButton.Parent = testWidget

เปลี่ยนธีมสีของ Studio

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

วิธีการหนึ่งที่จะใช้สำหรับเหตุการณ์การป้อนข้อมูลทั่วไปคือการสร้าง 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("แหล่งข้อมูลการลาก", widgetInfo)
dragSourceWidget.Title = "แหล่งข้อมูลการลาก"
-- สร้าง TextButton ที่จะเริ่มการลาก
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "ลากฉัน!"
dragButton.Parent = dragSourceWidget

เริ่มการลาก

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

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


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

สร้างจุดวาง

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


local dragTargetWidget = plugin:CreateDockWidgetPluginGui("จุดวาง", widgetInfo)
dragTargetWidget.Title = "จุดวาง"
-- ป้ายข้อความนี้จะแสดงสิ่งที่ถูกวาง
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "วางที่นี่..."
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 – จะเกิดขึ้นเมื่อเคอร์เซอร์ของผู้ใช้ออกจากหน้าต่าง ซึ่งมีประโยชน์ในการซ่อนข้อความ "วางที่นี่!"
©2026 Roblox Corporation. Roblox, โลโก้ Roblox และ Powering Imagination เป็นส่วนหนึ่งของเครื่องหมายการค้าที่จดทะเบียน และไม่ได้จดทะเบียนของเราในสหรัฐฯ และประเทศอื่นๆ