ตัวตรวจจับการลาก UI

ตัวอย่าง UIDragDetector ช่วยให้การโต้ตอบและส่งเสริมการโต้ตอบกับองค์ประกอบอินเทอร์เฟซผู้ใช้ 2D ในประสบการณ์ เช่น สไลเดอร์ สปินเนอร์ และอื่นๆคุณสมบัติสําคัญรวมถึง:

• วาง UIDragDetector ภายใต้ตัวอย่างใดๆ GuiObject รหัส

• เลือกจากตัวเลือกหลาย DragStyle ตัว กำหนดวิธีที่วัตถุตอบสนองต่อการเคลื่อนไหวผ่าน ResponseStyle และใช้ตัวเลือกเพิ่มเติมเช่นเพลา ขีดจํากัดการเคลื่อนที่ หรือขอบเขตการลาก

• สคริปต์สามารถตอบสนองต่อการควบคุมวัตถุที่ลากไปเพื่อขับเคลื่อนการตอบสนองตามเหตุผล เช่น ปรับการตั้งค่า

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

ทำให้องค์ประกอบ UI สามารถลากได้

เพื่อทำให้ตัวอย่างใด GuiObject สามารถลากได้ เพียงเพิ่ม UIDragDetector เป็นลูกหลานโดยตรง

1. ในหน้าต่าง สํารวจ เลื่อนเมาส์ไปที่ตัวอย่าง GuiObject และคลิกปุ่ม ⊕ เมนูบริบทจะแสดงขึ้น

2. จากเมนูใส่ UIDragDetector

   

3. โดยค่าเริ่มต้น ตอนนี้วัตถุจะสามารถลากได้ในอินเทอร์เฟซ LayerCollector

ปรับแต่งตัวตรวจจับการลาก UI เอง

ลากสไตล์

UIDragDetectors เลื่อนเคอร์เซอร์แผนที่เพื่อคำนวณการเคลื่อนไหวและ/หรือการหมุน 2D ที่เสนอผ่านคุณสมบัติ DragStyle คุณสามารถเลือกจากแผนที่ต่างๆ เพื่อตอบสนองความต้องการของคุณตัวอย่างเช่น Enum.UIDragDetectorDragStyle.TranslatePlane ผลิตการแปลในแผน 2D ของ LayerCollector ในขณะที่ Enum.UIDragDetectorDragStyle.Rotate ผลิตการหมุนแทนการแปลโดยปกติ

ลากทิศทาง

โดยค่าเริ่มต้น การเคลื่อนไหว 2D และแผนที่ที่เกี่ยวข้อง DragStyle ในพื้นที่ของบรรพบุรุษ LayerCollectorอย่างไรก็ตาม คุณอาจต้องการเปลี่ยน ReferenceUIInstance หรือ DragAxis เมื่อสร้างส่วนประกอบ UI ที่แตกต่างกัน

การตอบสนองต่อการเคลื่อนไหว

คุณสมบัติ UIDragDetector.ResponseStyle กำหนดวิธีการที่มูลค่าตำแหน่งของวัตถุเปลี่ยนแปลงโดยการเคลื่อนไหวที่เสนอรูปแบบการตอบสนองแบบกำหนดเองช่วยให้คุณสามารถใช้ค่า UIDragDetector.DragUDim2 และ UIDragDetector.DragRotation ที่ได้รับจากการดำเนินการที่เสนอได้ตามต้องการโดยไม่ต้องให้ผู้ปกครองของเครื่องตรวจจับดำเนินการตามคำขอ

ข้อจํากัดการแปลและการหมุน

โดยค่าเริ่มต้นจะไม่มีข้อจํากัดสำหรับการเคลื่อนไหว 2D หลังจากข้อจํากัดพื้นฐานของ DragStyleข้อจํากัดสําหรับการแปลและการหมุนที่ต่ําสุดและสูงสุดสามารถประกาศได้ด้วยคุณสมบัติต่อไปนี้หากต้องการนอกจากนี้คุณสามารถกำหนดวิธีที่วัตถุที่ลากมาถูกจำกัดภายในขอบเขตของตัวเลือกที่กำหนดไว้ GuiObject เช่น Frame

การปรับความเร็ว

ผ่าน SelectionModeDragSpeed และ SelectionModeRotateSpeed คุณสามารถปรับแต่งความเร็วสูงสุดในการลาก/หมุนสำหรับเครื่องตรวจจับได้นอกจากนี้, ผ่าน UIDragSpeedAxisMapping , คุณสามารถปรับแต่งความเร็วในการลากมิติ X / Y ตามค่าตรวจจับของ SelectionModeDragSpeed

คําตอบของสคริปต์เมื่อคลิกและลาก

ผ่านสัญญาณกิจกรรม , การเปลี่ยนแปลงคุณสมบัติ, Scriptable สไตล์การลาก, และฟังก์ชันที่กําหนดเอง, สคริปต์สามารถตอบสนองต่อการปรับเปลี่ยน UI ที่ลากไปเพื่อขับเคลื่อนการตั้งค่าต่างๆ หรือตัดสินใจโดยใช้เหตุผล เช่น สไลเดอร์ที่ปรับระดับเสียงเพลงและเสียงเอฟเฟกต์แยกต่างหาก

สัญญาณกิจกรรม

ผ่านสัญญาณกิจกรรมต่อไปนี้คุณสามารถตรวจพบเมื่อผู้ใช้เริ่มต้น ดำเนินการต่อ และสิ้นสุดการลากวัตถุ

สไลเดอร์ต่อไปนี้กำหนดให้คอนเทนเนอร์เป็น เพื่อจำกัดการเคลื่อนไหวภายในพื้นที่คอนเทนเนอร์โดยอนุญาตให้การลากแบบขนาดเครื่องชั่งจำกัดเป็นความกว้างเต็มของคอนเทนเนอร์โดยไม่ต้องมีสคริปต์เพิ่มเติม

UIDragDetector - การเปลี่ยนแปลงความโปร่งใสของสัญญาณกิจกรรม
-- ลําดับคือ SliderContainer ⟩ จัดการ ⟩ 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 เท่าของมือจับในตอนแรก
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- ขยายขอบจัดการเพื่อระบุจุดเริ่มต้นการจับ
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- เปลี่ยนความโปร่งใสโดยจํานวนที่มันลากในเชิงเส้น
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- ปิด
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

การเปลี่ยนตำแหน่งและการหมุน

นอกจากสัญญาณอีเวนต์ คุณสามารถตรวจสอบการเปลี่ยนแปลงในคุณสมบัติของตัวรับสัญญาณ DragUDim2 และ/หรือ DragRotation โดยตรง

เครื่องตรวจจับต่อไปมีตั้งค่า DragStyle เป็น Rotate ทำให้ผู้ใช้สามารถลากจัดการได้รอบแหวนตัวหมุนสีทั้งหมดในขณะที่ตรวจจับการเปลี่ยนแปลงในการลากการหมุนผ่าน Instance:GetPropertyChangedSignal()

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

-- ตั้งสีเริ่มต้นเพื่อจัดการการหมุน
changeHue()

-- เชื่อมฟังก์ชันเพื่อรับสัญญาณ GetPropertyChangedSignal() ของการหมุนแบบลากของเครื่องตรวจจับ
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

สไตล์การลากที่เขียนโปรแกรมไว้

หากคุณตั้งฟังก์ชันของเครื่องตรวจจับ UIDragDetector.DragStyle เป็น Enum.UIDragDetectorDragStyle.Scriptable คุณสามารถให้ฟังก์ชันของคุณเองที่รับตําแหน่งในการป้อน Vector2 และส่งคืน UDim2 (ตําแหน่ง) และลอยตัว (การหมุน)เครื่องตรวจจะอัปเดตวัตถุไปยังตำแหน่ง/การหมุนที่คำนวณได้ตามค่ากลับ, คุณสมบัติ DragSpace และคุณสมบัติ DragRelativity

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

ตัวอย่างต่อไปนี้ลากองค์ประกอบ UI หลังจากคลื่นไซน์ที่คำนวณโดยการเปลี่ยนแปลงใน X พิกัดการป้อนโปรดทราบว่าตัวตรวจจับของ DragSpace ถูกตั้งค่าเป็น Enum.UIDragDetectorDragSpace.Relative

ตัวตรวจจับ UIDrag - ลากคลื่นไซน์ตามมา
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 บวก
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

ฟังก์ชันข้อจํากัดที่กําหนดเอง

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

ตัวอย่างต่อไปนี้ใช้ฟังก์ชันข้อจํากัดที่จะบีบแผ่นลากเป็นกริด X / Y ตามจํานวนแถวและคอลัมน์โปรดทราบว่าตัวตรวจจับของ ResponseStyle ถูกตั้งค่าเป็น Enum.UIDragDetectorResponseStyle.Scale และ BoundingUI ถูกตั้งค่าเป็นตัวควบคุมกริด

ตัวตรวจจับ UIDrag - ลากในกริด สแน็ปไปที่กระเบื้อง
-- ลําดับคือ GridContainer ⟩ จัดการ ⟩ 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)