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

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

• วาง UIDragDetector ไว้ใต้ GuiObject ใดๆ เพื่อทำให้มันสามารถลากได้ผ่านการป้อนข้อมูลของผู้ใช้ทั้งหมดโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว

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

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

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

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

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

1. ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่อินสแตนซ์ 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 ที่ถูกลากเพื่อขับเคลื่อนการตั้งค่าหรือทำการตัดสินใจทางตรรกะ เช่น สไลเดอร์ที่ปรับระดับเสียงเพลงและเสียงเอฟเฟกต์แยกกัน

สัญญาณเหตุการณ์

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

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

-- โครงสร้างคือ 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 ของ 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()

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)

สไตล์การลากที่เขียนสคริปต์

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

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

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

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 ถูกตั้งค่าเป็นภาชนะกริด

-- โครงสร้างคือ 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)