Studio มอบพลังให้คุณสร้าง วิดเจ็ต แบบกำหนดเองและใช้มันเป็นเครื่องมือและส่วนขยาย วิดเจ็ตเหล่านี้ทำหน้าที่เป็นหน้าต่าง/พาแนลแบบกำหนดเองใน Studio และคุณสามารถติดตั้งมันภายในอินเทอร์เฟซของคุณหรือให้มันลอยเป็นหน้าต่างแยกต่างหาก
สร้าง UI วิดเจ็ต
วิดเจ็ตทั้งหมดใน Studio เริ่มต้นจากวัตถุ DockWidgetPluginGui ซึ่งคุณสามารถเติมด้วย GuiObjects เช่น ป้ายข้อความและปุ่ม เพื่อสร้าง GUI วิดเจ็ตว่างๆ ให้เรียกใช้ฟังก์ชัน CreateDockWidgetPluginGui() โดยส่ง ID และวัตถุ DockWidgetPluginGuiInfo
โปรดทราบว่า ตัวสร้าง DockWidgetPluginGuiInfo.new() คาดหวังพารามิเตอร์ของมันใน ลำดับที่กำหนด ดังนี้:
| # | คุณสมบัติ | ประเภท | คำอธิบาย |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | หนึ่งในค่าการจำแนกประเภทของ Enum.InitialDockState |
| 2 | InitialEnabled | Boolean | สถานะการเปิดใช้งาน (แสดง) ในเบื้องต้นของ GUI วิดเจ็ต |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | ถ้าเป็นจริง ค่าของ InitialEnabled จะทำการแทนที่สถานะการเปิดใช้งานที่บันทึกไว้ก่อนหน้านี้ |
| 4 | FloatingXSize | Integer | ความกว้างเริ่มต้นของ GUI เมื่อ InitialDockState ถูกตั้งค่าเป็น Enum.InitialDockState.Float. |
| 5 | FloatingYSize | Integer | ความสูงเริ่มต้นของ GUI เมื่อ InitialDockState ถูกตั้งค่าเป็น Enum.InitialDockState.Float. |
| 6 | MinWidth | Integer | ความกว้างขั้นต่ำของ GUI โดยมีการเปลี่ยนแปลงเฉพาะบางแพลตฟอร์ม |
| 7 | MinHeight | Integer | ความสูงขั้นต่ำของ 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 = 0testButton.TextSize = 20testButton.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.RelativeYYtestButton.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 – จะเกิดขึ้นเมื่อเคอร์เซอร์ของผู้ใช้ออกจากหน้าต่าง ซึ่งมีประโยชน์ในการซ่อนข้อความ "วางที่นี่!"















