อินสแตนซ์ UIDragDetector ช่วยอำนวยความสะดวกและสนับสนุนการโต้ตอบกับองค์ประกอบส่วนติดต่อผู้ใช้ 2D ในประสบการณ์ เช่น สไลเดอร์ สปินเนอร์ และอื่นๆ ฟีเจอร์หลักประกอบด้วย:
วาง UIDragDetector ไว้ใต้ GuiObject ใดๆ เพื่อทำให้มันลากได้ผ่านการป้อนข้อมูลของผู้ใช้ทุกประเภทโดยไม่ต้องเขียนโค้ดสักบรรทัด
เลือกจากหลายตัวเลือก DragStyle เพื่อกำหนดว่าตัววัตถุตอบสนองต่อการเคลื่อนไหวอย่างไรผ่าน ResponseStyle และสามารถกำหนดแกน ขีดจำกัดการเคลื่อนไหว หรือขอบเขตการลากได้ตามต้องการ
สคริปต์สามารถตอบสนองต่อการจัดการวัตถุที่ถูกลากเพื่อขับเคลื่อนการตอบสนองทางตรรกะ เช่น การปรับแต่งการตั้งค่า
UIDragDetectors ทำงานในโหมดแก้ไขและเล่นของ Studio ตราบใดที่คุณ ไม่ ใช้เครื่องมือ Select Move Scale หรือ Rotate รวมถึงปลั๊กอินบางตัวหรือเครื่องมือ UI ของ Studio
สำหรับตัวตรวจจับการลากที่จะจัดการวัตถุ 3D ในประสบการณ์ เช่น การเปิดประตูและลิ้นชักหรือเลื่อนชิ้นส่วน ดูที่ 3D Drag Detectors
ทำให้องค์ประกอบ UI สามารถลากได้
เพื่อทำให้บรรดา GuiObject สามารถลากได้ เพียงแค่เพิ่ม UIDragDetector เป็นลูกหลานโดยตรง
จากเมนู ให้ใส่ UIDragDetector
โดยค่าเริ่มต้น วัตถุนี้จะสามารถลากได้ในอินเทอร์เฟซ LayerCollector
โปรดจำไว้ว่า UIDragDetectors ทำงานใน Studio ได้ก็ต่อเมื่อคุณ ไม่ ใช้เครื่องมือ Select Move Scale หรือ Rotate รวมถึงปลั๊กอินบางตัวหรือเครื่องมือ UI ของ Studio
ปรับแต่งตัวตรวจจับการลาก UI
รูปแบบการลาก
UIDragDetectors จับการเคลื่อนไหวของเคอร์เซอร์เพื่อคำนวณการเคลื่อนไหว 2D ที่เสนอและ/หรือการหมุน ผ่านคุณลักษณะ DragStyle คุณสามารถเลือกจากการแมพปิ้งที่แตกต่างกันเพื่อตอบสนองต่อความต้องการของคุณ ตัวอย่างเช่น Enum.UIDragDetectorDragStyle.TranslatePlane จะทำให้มีการแปลในระนาบ 2D ของ LayerCollector ในขณะที่ Enum.UIDragDetectorDragStyle.Rotate โดยปกติจะสร้างการหมุนแทนที่การแปล
| การตั้งค่า | คำอธิบาย |
|---|---|
| TranslateLine | เคลื่อนไหว 1D ตาม DragAxis ของตัวตรวจจับ |
| TranslatePlane | เคลื่อนไหว 2D ในระนาบของ LayerCollector |
| Rotate | โดยค่าเริ่มต้นการหมุนรอบตำแหน่งศูนย์กลางแบบสัมบูรณ์ของ GuiObject ที่เป็นพ่อแม่ของตัวตรวจจับ หาก ReferenceUIInstance ถูกตั้งค่าไว้ การหมุนจะเกิดขึ้นรอบตำแหน่งศูนย์กลางแบบสัมบูรณ์ของอินสแตนซ์นั้น |
| Scriptable | คำนวณการเคลื่อนไหวที่ต้องการผ่านฟังก์ชันที่กำหนดเองซึ่งระบุผ่าน SetDragStyleFunction() |
ทิศทางการลาก
โดยค่าเริ่มต้น การเคลื่อนไหว 2D และ DragStyle ที่เกี่ยวข้องจะแมพไปยังพื้นที่ของ LayerCollector ที่เป็นบรรพบุรุษ อย่างไรก็ตาม คุณอาจต้องการเปลี่ยน ReferenceUIInstance หรือ DragAxis เมื่อสร้างองค์ประกอบ UI ที่แตกต่างกัน
| การตั้งค่า | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| ReferenceUIInstance | อินสแตนซ์ GuiObject ที่พื้นที่ท้องถิ่นและตำแหน่งศูนย์กลางแบบสัมบูรณ์ของมันเป็นพื้นที่อ้างอิงและต้นกำเนิดสำหรับตัวตรวจจับ การตั้งค่าอ้างอิงนี้จะมีผลต่อคุณสมบัติต่างๆ เช่น DragUDim2, DragRotation, และการทำงานของ DragAxis | nil |
| DragAxis | ค่าของ Vector2 ที่กำหนดแกนของการเคลื่อนไหวสำหรับวัตถุที่ถูกลากเมื่อ DragStyle ถูกตั้งค่าเป็น Enum.UIDragDetectorDragStyle.TranslateLine แกนจะถูกกำหนดในพื้นที่ท้องถิ่นของ UIDragDetector เว้นแต่จะมีการกำหนด ReferenceUIInstance ในกรณีนี้ แกนจะถูกกำหนดในพื้นที่ท้องถิ่นของอินสแตนซ์นั้น | (1, 0) |
การตอบสนองต่อการเคลื่อนไหว
คุณลักษณะ UIDragDetector.ResponseStyle กำหนดวิธีการเปลี่ยนค่าตำแหน่งของวัตถุโดยการเคลื่อนไหวที่เสนอ สไตล์การตอบสนองที่กำหนดเองให้คุณใช้ UIDragDetector.DragUDim2 และค่าของ UIDragDetector.DragRotation ตามต้องการ โดยไม่ต้องให้พ่อแม่ของตัวตรวจจับปฏิบัติตามการเคลื่อนไหวที่เสนอ
| การตั้งค่า | คำอธิบาย |
|---|---|
| Offset | เคลื่อนที่โดยค่า Offset ของค่าตำแหน่ง GuiObject.Position ของพ่อแม่ของตัวตรวจจับ นี่คือตัวตั้งค่าตั้งต้น |
| Scale | เคลื่อนที่โดยค่าของ Scale ของค่าตำแหน่ง GuiObject.Position ของพ่อแม่ของตัวตรวจจับ |
| CustomOffset | องค์ประกอบ UI จะไม่เคลื่อนที่เลย แต่ค่าของ Offset ของ DragUDim2 ของตัวตรวจจับจะยังคงได้รับการปรับปรุงและเหตุการณ์ของตัวตรวจจับจะยังคงถูกสร้างขึ้น ทำให้คุณสามารถตอบสนองต่อการจัดการการลากได้ตามที่คุณต้องการ |
| CustomScale | องค์ประกอบ UI จะไม่เคลื่อนที่เลย แต่ค่าของ Scale ของ DragUDim2 ของตัวตรวจจับจะยังคงได้รับการปรับปรุงและเหตุการณ์ของตัวตรวจจับจะยังคงถูกสร้างขึ้น ทำให้คุณสามารถตอบสนองต่อการจัดการการลากได้ตามที่คุณต้องการ |
ขอบเขตการแปลและการหมุน
โดยค่าเริ่มต้น จะไม่มีขีดจำกัดสำหรับการเคลื่อนไหว 2D นอกจากข้อกำหนดที่ฝังอยู่ใน DragStyle ขีดจำกัดทั้งสำหรับการแปลและการหมุนขั้นต่ำและสูงสุดสามารถประกาศได้ด้วยคุณสมบัติต่อไปนี้หากต้องการ นอกจากนี้ยังสามารถกำหนดวิธีการจำกัดวัตถุที่ถูกลากภายในขอบเขตของ GuiObject ที่ระบุ เช่น Frame
| คุณสมบัติ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| MinDragTranslation MaxDragTranslation | จำกัดการแปลการลากในแต่ละมิติซึ่งกำหนดโดยค่า UDim2 หาก MaxDragTranslation มากกว่า MinDragTranslation การแปลจะถูกจำกัดในช่วงนั้น | {0, 0}, {0, 0} |
| MinDragAngle MaxDragAngle | มีความสำคัญเฉพาะเมื่อ DragStyle ถูกตั้งค่าเป็น Enum.UIDragDetectorDragStyle.Rotate หรือหากฟังก์ชันที่ตั้งค่าผ่าน SetDragStyleFunction() หรือ AddConstraintFunction() กำหนดค่าการหมุน หาก MaxDragAngle มากกว่า MinDragAngle การหมุนจะถูกจำกัดในช่วงนั้น | 0 |
| BoundingBehavior | กำหนดพฤติกรรมการจำกัดของอินสแตนซ์ UIDragDetector เมื่อ BoundingUI ถูกตั้งค่า การตั้งค่านี้เป็น EntireObject จะจำกัด UI ที่ถูกลากทั้งหมดยังคงอยู่ใน BoundingUI ในขณะที่การตั้งค่าเป็น HitPoint จะจำกัด UI ที่ถูกลากเฉพาะจุดการชน/การจับอย่างแม่นยำและตำแหน่งของมันตามการแปล/การหมุน หลังจากการตั้งค่าอัตโนมัติมีค่าเริ่มต้นเป็น Automatic จะเลียนแบบพฤติกรรม EntireObject สำหรับวัตถุ UI ที่เต็มไปด้วย BoundingUI หรือจะเป็น HitPoint สำหรับวัตถุ UI ที่อยู่นอก BoundingUI | Automatic |
การปรับความเร็ว
ผ่าน SelectionModeDragSpeed และ SelectionModeRotateSpeed คุณสามารถปรับความเร็วสูงสุดของการลาก/การหมุนสำหรับตัวตรวจจับได้อย่างละเอียด นอกจากนี้ ผ่าน UIDragSpeedAxisMapping คุณสามารถปรับความเร็วในการลากมิติ X/Y ได้อย่างละเอียดซึ่งอิงจาก SelectionModeDragSpeed ของตัวตรวจจับ
| คุณสมบัติ | คำอธิบาย |
|---|---|
| SelectionModeDragSpeed | กำหนดความเร็วสูงสุดสำหรับอัตราการลากการแปลเป็นการรวมกันของ Scale และ Offset ของ ScreenGui หรือ SurfaceGui ตัวแรกที่ตัวตรวจจับ UIDragDetector สังกัดอยู่ |
| SelectionModeRotateSpeed | กำหนดมุมสูงสุดต่อวินาทีที่ UIDragDetector สามารถหมุนได้ |
| UIDragSpeedAxisMapping | กำหนดความเร็วในการลากมิติ X/Y ซึ่งอิงจาก SelectionModeDragSpeed ค่าเริ่มต้นคือ XY ซึ่งหมายความว่าความเร็วของแกน X และ Y จะอิงจากค่า Scale/Offset ของแกน X และ Y ตามลำดับ ทางเลือกคือ XX และ YY ซึ่งทั้งความเร็วของแกน X และ Y จะอิงจากแกน X (XX) หรือแกน Y (YY) สำหรับ Scale ในขณะที่ค่าของ Offset ยังคงมีผลกับแกนต่างๆ ตามลำดับ ตัวอย่างเช่น หากวัตถุ ScreenGui ตัวแรกมีขนาด 800×600 และ SelectionModeDragSpeed เป็น {0.1, 10}, {0.1, 20} การตั้งค่า XX จะส่งผลให้ความเร็วการลาก X/Y เป็น 80+10/80+20 ในขณะที่ YY จะส่งผลเป็น 60+10/60+20 (หมายเหตุค่าของ Offset จะยังเหมือนกันทั้งสองกรณี) |
การตอบสนองของสคริปต์ต่อการคลิกและการลาก
ผ่าน สัญญาณเหตุการณ์ การเปลี่ยนแปลงคุณลักษณะ Scriptable รูปแบบการลาก และฟังก์ชั่นที่กำหนดเอง สคริปต์สามารถตอบสนองต่อการจัดการองค์ประกอบ UI ที่ถูกลากเพื่อจัดการตั้งค่าหรือทำการตัดสินใจตรรกะต่างๆ เช่น สไลเดอร์ที่ปรับระดับเสียงของดนตรีและเสียงเอฟเฟคต่างๆ โดยแยกจากกัน
สำหรับการตอบสนองที่เริ่มโดยผู้ใช้ เช่น Event Signals และ Scripted Drag Style คุณจะต้องใส่โค้ดสคริปต์ของคุณใน LocalScript เป็นหลัก หรือตัว Script ที่มีการตั้งค่า RunContext เป็น Client
สัญญาณเหตุการณ์
ผ่านสัญญาณเหตุการณ์ต่อไปนี้ คุณสามารถตรวจจับเมื่อผู้ใช้เริ่ม ดำเนินการ และหยุดการลากวัตถุ
| เหตุการณ์ | คำอธิบาย |
|---|---|
| DragStart | เกิดขึ้นเมื่อผู้เริ่มการลากวัตถุ |
| DragContinue | เกิดขึ้นเมื่อผู้ใช้ยังคงลากวัตถุหลังจากที่ได้เริ่มการลาก DragStart |
| DragEnd | เกิดขึ้นเมื่อผู้ใช้หยุดการลากวัตถุ |
สไลเดอร์ต่อไปนี้กำหนดให้คอนเทนเนอร์ของมันเป็น BoundingUI เพื่อลดทอนการเคลื่อนไหวในพื้นที่คอนเทนเนอร์ ทำให้สามารถลากแบบอิงจากขนาด TranslateLine ถูกจำกัดอยู่ภายในความกว้างทั้งหมดของคอนเทนเนอร์ โดยไม่จำเป็นต้องใช้สคริปต์เพิ่มเติม
เพื่อทดลองตัวอย่างนี้ ให้ดาวน์โหลดไฟล์ TransparencySlider.rbxm คลิกขวาที่ StarterGui ในหน้าต่าง Explorer เลือก Insert ⟩ Import Roblox Model และเลือกไฟล์ที่ดาวน์โหลด
UIDragDetector - การเปลี่ยนแปลงความโปร่งใสสัญญาณเหตุการณ์
-- โครงสร้างคือ SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (สคริปต์นี้)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale -- ตั้งค่าให้ลากโดยการขยาย
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine -- จำกัดการลากเป็นเส้น
uiDragDetector.BoundingUI = sliderContainer
-- ตั้งค่าความโปร่งใสของคอนเทนเนอร์เริ่มต้นตามค่า X scale ของ Handle
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
-- ขยายขอบของ Handle เพื่อระบุการเริ่มต้นการจับ
uiDragDetector.DragStart:Connect(function(inputPosition)
handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)
-- เปลี่ยนความโปร่งใสตามการลากในขนาด
uiDragDetector.DragContinue:Connect(function(inputPosition)
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)
-- กลับการขยายขอบของ Handle เพื่อระบุการสิ้นสุดการจับ
uiDragDetector.DragEnd:Connect(function(inputPosition)
handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)
การเปลี่ยนตำแหน่งและการหมุน
นอกจาก สัญญาณเหตุการณ์ คุณยังสามารถตรวจสอบการเปลี่ยนแปลงใน DragUDim2 และ/หรือ DragRotation ของตัวตรวจจับโดยตรง
ตัวตรวจจับต่อไปนี้มี DragStyle ตั้งค่าเป็น Rotate ทำให้ผู้ใช้สามารถลาก Handle ไปตามวงแหวนหมุนสีทั้งหมดในขณะที่ตรวจจับการเปลี่ยนแปลงการลากการหมุนผ่าน Instance:GetPropertyChangedSignal()
เพื่อทดลองตัวอย่างนี้ ให้ดาวน์โหลดไฟล์ HueRotator.rbxm คลิกขวาที่ StarterGui ในหน้าต่าง Explorer เลือก Insert ⟩ Import Roblox Model และเลือกไฟล์ที่ดาวน์โหลด
UIDragDetector - การเปลี่ยนแปลงการหมุน
local handle = script.Parent.Parent -- องค์ประกอบ UI ที่จะถูกลาก
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate -- ตั้งค่าหมายเลขการลากเป็นการหมุน
local function changeHue()
local currAngle = (math.fmod(handle.Rotation, 360)) / 360
if currAngle < 0 then
currAngle += 1
end
handle.BackgroundColor3 = Color3.fromHSV(currAngle, 1, 1)
end
-- ตั้งค่าธีมสีตามการหมุนใบ Handle ในตอนแรก
changeHue()
-- เชื่อมต่อฟังก์ชั่นกับ GetPropertyChangedSignal() ของการหมุนการลากของตัวตรวจจับ
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)
รูปแบบการลากที่กำหนดเอง
หากคุณตั้งค่า UIDragDetector.DragStyle ของตัวตรวจจับเป็น Enum.UIDragDetectorDragStyle.Scriptable คุณสามารถจัดเตรียมฟังก์ชันของคุณเองที่รับค่าจาก Vector2 ของตำแหน่งการป้อนข้อมูลและคืนค่า UDim2 (ตำแหน่ง) และฟลอท (การหมุน) ตัวตรวจจับจะอัปเดตวัตถุตามตำแหน่ง/การหมุนที่คำนวณจากการคืนค่า ยิ่งไปกว่านั้น คุณสมบัติ DragSpace และ DragRelativity จะมีผลใช้กับตำแหน่งและการหมุนที่ส่งออกมา
โดยค่าเริ่มต้น ค่าที่ส่งคืน UDim2 และฟลอทจะเป็นตำแหน่ง/การหมุนที่ต้องการในพื้นที่ท้องถิ่นของพ่อแม่ของตัวตรวจจับ ขีดจำกัดการแปล/การหมุนที่มีอยู่จะยังคงมีผลบังคับใช้ รวมถึงขอบเขตที่กำหนดโดยอินสแตนซ์ BoundingUI ที่ระบุ
ตัวอย่างต่อไปนี้ลากองค์ประกอบ UI ตามคลื่นไซน์ที่คำนวณจากการเปลี่ยนแปลงของค่าพิกัด X ที่ป้อนเข้า โปรดทราบว่าพื้นที่ลากของตัวตรวจจับ DragSpace ตั้งค่าเป็น Enum.UIDragDetectorDragSpace.Relative
UIDragDetector - ลากตามคลื่นไซน์
local frame = script.Parent -- องค์ประกอบ UI ที่จะถูกลาก
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")
local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75 -- ลดค่านี้เพื่อต้องการให้มีความถี่เพิ่มขึ้น
uiDragDetector.DragStart:Connect(function(inputPosition)
initialXValue = inputPosition.X
end)
local function computeSinWaveCoordinate(inputPosition)
local deltaX = inputPosition.X - initialXValue
-- ค่า Y ติดลบเพื่อให้มันไป "ขึ้น" บนหน้าจอเมื่อมีการเปลี่ยนแปลง Y บวก
local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
return UDim2.fromOffset(deltaX, deltaY)
end
uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)
ฟังก์ชันจำกัดที่กำหนดเอง
UIDragDetectors ไม่มีบรรทัดการเคลื่อนไหวที่บอกว่าจะให้ปรับได้ตามตารางหรือการล็อก แต่คุณสามารถลงทะเบียนฟังก์ชันข้อกำหนดที่กำหนดเองเพื่อแก้ไข UIDragDetector.DragUDim2 และ UIDragDetector.DragRotation ก่อนที่จะใช้งาน ตัวอย่างเช่น คุณสามารถรักษาการเคลื่อนไหวให้อยู่ในตารางได้โดยการปัดเศษตำแหน่งไปยังการเพิ่มที่เฉพาะเจาะจง หรือกำหนดพื้นที่การเคลื่อนไหวที่อนุญาต โปรดทราบว่านี่จะถูกนำไปใช้ ก่อน ขีดจำกัดการแปล/การหมุนที่มีอยู่ใดๆ
สามารถลงทะเบียนฟังก์ชันข้อกำหนดหลายฟังก์ชันได้ และจะถูกเรียกใช้ตามลำดับค่าความสำคัญที่ส่งเมื่อมีการลงทะเบียน ตั้งแต่ต่ำสุดไปสูงสุด
ตัวอย่างต่อไปนี้ใช้ฟังก์ชันข้อกำหนดที่กำหนดให้การลากในระนาบถูกจำกัดในตาราง X/Y ตามจำนวนแถวและคอลัมน์ โปรดทราบว่าการตั้งค่าของการตอบสนองของตัวตรวจจับ ResponseStyle ตั้งเป็น Enum.UIDragDetectorResponseStyle.Scale และ BoundingUI ถูกตั้งค่าเป็นคอนเทนเนอร์ของตาราง
เพื่อทดลองตัวอย่างนี้ ให้ดาวน์โหลดไฟล์ GridDrag.rbxm คลิกขวาที่ StarterGui ในหน้าต่าง Explorer เลือก Insert ⟩ Import Roblox Model และเลือกไฟล์ที่ดาวน์โหลด
UIDragDetector - ลากในตาราง, ล็อคเข้ากับพื้น
-- โครงสร้างคือ GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (สคริปต์นี้)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle") -- องค์ประกอบ UI ที่จะถูกลาก
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale -- ตั้งค่าให้การลากได้โดยการขยาย
uiDragDetector.DragRelativity = Enum.UIDragDetectorDragRelativity.Relative
uiDragDetector.BoundingUI = gridContainer
local NUM_COLUMNS = 10
local NUM_ROWS = 5
local xScaleIncrement = 1 / NUM_COLUMNS
local yScaleIncrement = 1 / NUM_ROWS
local initialParentPosition = uiDragDetector.Parent.Position
uiDragDetector.DragStart:Connect(function()
initialParentPosition = uiDragDetector.Parent.Position
end)
local function dragToGridOnly(proposedPosition, proposedRotation)
local griddedXScale = math.round(proposedPosition.X.Scale / xScaleIncrement) * xScaleIncrement
local griddedYScale = math.round(proposedPosition.Y.Scale / yScaleIncrement) * yScaleIncrement
return UDim2.fromScale(griddedXScale, griddedYScale), proposedRotation
end
uiDragDetector:AddConstraintFunction(1, dragToGridOnly)