Bộ phát hiện kéo UI

Thể hiện của UIDragDetector tạo điều kiện và khuyến khích sự tương tác với các phần tử giao diện người dùng 2D trong một trải nghiệm, chẳng hạn như thanh trượt, vòng quay và nhiều hơn nữa. Các tính năng chính bao gồm:

• Đặt một UIDragDetector dưới bất kỳ thể hiện nào của GuiObject để làm cho nó có thể kéo được thông qua tất cả các đầu vào của người dùng mà không cần một dòng mã nào.

• Lựa chọn từ một số tùy chọn DragStyle, xác định cách mà đối tượng phản hồi với chuyển động thông qua ResponseStyle, và tuỳ chọn áp dụng trục, giới hạn chuyển động, hoặc ranh giới kéo.

• Các script có thể phản hồi với việc thao tác các đối tượng bị kéo để điều khiển các phản ứng logic, chẳng hạn như điều chỉnh các cài đặt.

• UIDragDetectors hoạt động trong chế độ chỉnh sửa và chơi của Studio miễn là bạn không sử dụng các công cụ Chọn, Di chuyển, Tỷ lệ, hoặc Xoay, cũng như một số plugin hoặc công cụ UI của Studio.

Làm cho các phần tử UI có thể kéo được

Để làm cho bất kỳ thể hiện nào của GuiObject có thể kéo được, chỉ cần thêm một UIDragDetector như một đối tượng con trực tiếp.

1. Trong cửa sổ Explorer, di chuột qua thể hiện GuiObject và nhấp vào nút ⊕. Một menu ngữ cảnh sẽ hiển thị.

2. Từ menu, chèn một UIDragDetector.

   

3. Theo mặc định, đối tượng giờ sẽ có thể kéo trong giao diện LayerCollector.

Tùy chỉnh bộ phát hiện kéo UI

Kiểu kéo

UIDragDetectors ánh xạ chuyển động con trỏ để tính toán chuyển động 2D và/hoặc xoay đề xuất. Thông qua thuộc tính DragStyle, bạn có thể chọn từ các ánh xạ khác nhau để phù hợp với nhu cầu của bạn. Ví dụ, Enum.UIDragDetectorDragStyle.TranslatePlane tạo ra phép dịch trong mặt phẳng 2D của LayerCollector, trong khi Enum.UIDragDetectorDragStyle.Rotate thường tạo ra một sự xoay thay vì dịch chuyển.

Hướng kéo

Theo mặc định, chuyển động 2D và DragStyle liên quan ánh xạ đến không gian của tổ tiên LayerCollector. Tuy nhiên, bạn có thể muốn thay đổi ReferenceUIInstance hoặc DragAxis khi xây dựng các thành phần UI khác nhau.

Phản ứng với chuyển động

Thuộc tính UIDragDetector.ResponseStyle xác định cách mà giá trị vị trí của một đối tượng bị thay đổi bởi chuyển động đề xuất. Các kiểu phản hồi tùy chỉnh cho phép bạn sử dụng các giá trị UIDragDetector.DragUDim2 và UIDragDetector.DragRotation kết quả như mong muốn, mà không cần phép phát hiện cha thực hiện chuyển động đề xuất.

Giới hạn dịch chuyển & xoay

Theo mặc định, không có giới hạn đối với chuyển động 2D ngoài những hạn chế vốn có của DragStyle. Các giới hạn cho cả dịch chuyển và xoay tối thiểu và tối đa có thể được khai báo với các thuộc tính sau nếu muốn. Ngoài ra, bạn có thể xác định cách mà đối tượng bị kéo bị giới hạn trong các ranh giới của một GuiObject được chỉ định, chẳng hạn như một Frame.

Điều chỉnh tốc độ

Thông qua SelectionModeDragSpeed và SelectionModeRotateSpeed, bạn có thể điều chỉnh tốc độ kéo/xoay tối đa cho một bộ phát hiện. Hơn nữa, thông qua UIDragSpeedAxisMapping, bạn có thể điều chỉnh tốc độ kéo trong không gian X/Y, dựa trên SelectionModeDragSpeed.

Các phản ứng script với việc nhấp và kéo

Thông qua tín hiệu sự kiện, thay đổi thuộc tính, kiểu kéo Scriptable, và các hàm tùy chỉnh, các script có thể phản hồi với việc thao tác các phần tử UI bị kéo để điều khiển các cài đặt khác nhau hoặc đưa ra các quyết định logic, chẳng hạn như các thanh trượt điều chỉnh âm lượng nhạc và hiệu ứng âm thanh riêng biệt.

Tín hiệu sự kiện

Thông qua các tín hiệu sự kiện sau đây, bạn có thể phát hiện khi người dùng bắt đầu, tiếp tục và kết thúc việc kéo một đối tượng.

Thiết kế thanh trượt sau đây chỉ định bộ chứa của nó là BoundingUI để giới hạn chuyển động bên trong khu vực chứa, cho phép kiểu kéo dựa trên tỷ lệ TranslateLine bị giới hạn trong toàn bộ chiều rộng của bộ chứa mà không cần lập trình thêm.

UIDragDetector - Thay đổi sự kiện tín hiệu độ trong suốt
-- Cấu trúc là SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (script này)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Đặt kéo theo tỷ lệ
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Giới hạn kéo theo đường thẳng
uiDragDetector.BoundingUI = sliderContainer

-- Ban đầu, đặt độ trong suốt của bộ chứa thành giá trị tỷ lệ X của tay cầm
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Mở rộng viền tay cầm để chỉ ra rằng đã bắt đầu gắp
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Thay đổi độ trong suốt theo lượng đã kéo trong tỷ lệ
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Khôi phục lại viền tay cầm để chỉ ra rằng đã kết thúc gắp
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Thay đổi vị trí & xoay

Ngoài các tín hiệu sự kiện, bạn có thể theo dõi những thay đổi với DragUDim2 và/hoặc thuộc tính DragRotation của bộ phát hiện trực tiếp.

Bộ phát hiện sau đây có DragStyle được đặt thành Rotate, cho phép người dùng kéo tay cầm xung quanh vòng quay sắc thái, trong khi tất cả đều phát hiện sự thay đổi về xoay kéo thông qua Instance:GetPropertyChangedSignal().

UIDragDetector - Thay đổi Động Xoay
local handle = script.Parent.Parent  -- Phần tử UI để kéo
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Đặt kiểu kéo thành xoay

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

-- Ban đầu đặt màu sắc vào xoay của tay cầm
changeHue()

-- Kết nối hàm với GetPropertyChangedSignal() của xoay kéo của bộ phát hiện
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Kiểu kéo được lập trình

Nếu bạn đặt UIDragDetector.DragStyle của bộ phát hiện thành Enum.UIDragDetectorDragStyle.Scriptable, bạn có thể cung cấp hàm của riêng bạn mà nhận vào một Vector2 của vị trí đầu vào và trả về một UDim2 (vị trí) và một số float (xoay). Bộ phát hiện sẽ cập nhật đối tượng đến vị trí/xoay đã tính toán dựa trên các giá trị trả về, thuộc tính DragSpace, và thuộc tính DragRelativity.

Theo mặc định, UDim2 và float trả về sẽ là vị trí/xoay cuối cùng mong muốn trong không gian cục bộ của cha của bộ phát hiện. Các giới hạn dịch chuyển/xoay hiện tại vẫn sẽ áp dụng, như cũng sẽ có các giới hạn ranh giới do một thể hiện BoundingUI được chỉ định đặt ra.

Ví dụ sau đây kéo một phần tử UI theo một sóng sine được tính toán bởi sự thay đổi trong tọa độ X đầu vào. Lưu ý rằng DragSpace của bộ phát hiện được đặt thành Enum.UIDragDetectorDragSpace.Relative.

UIDragDetector - Kéo theo sóng sine
local frame = script.Parent  -- Phần tử UI để kéo
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Giảm giá trị này để tăng tần số

uiDragDetector.DragStart:Connect(function(inputPosition)
	initialXValue = inputPosition.X
end)

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta Y âm để đi "lên" trên màn hình với sự thay đổi Y dương
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Hàm ràng buộc tùy chỉnh

UIDragDetectors không có quy tắc chuyển động tích hợp về lưới và snapping, nhưng bạn có thể đăng ký các hàm ràng buộc tùy chỉnh để chỉnh sửa UIDragDetector.DragUDim2 và UIDragDetector.DragRotation của bộ phát hiện trước khi chúng được áp dụng. Ví dụ, bạn có thể giữ chuyển động trên một lưới bằng cách làm tròn các vị trí đến các gia số cụ thể, hoặc xác định các khu vực chuyển động cho phép. Lưu ý rằng điều này được áp dụng trước bất kỳ giới hạn dịch chuyển/xoay hiện có nào.

Ví dụ sau đây sử dụng một hàm ràng buộc mà giới hạn dịch chuyển phẳng vào một lưới X/Y dựa trên số lượng hàng và cột. Lưu ý rằng ResponseStyle của bộ phát hiện được đặt thành Enum.UIDragDetectorResponseStyle.Scale và BoundingUI của nó được đặt thành bộ chứa lưới.

UIDragDetector - Kéo trong Lưới, Snapping vào Gạch
-- Cấu trúc là GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (script này)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Phần tử UI để kéo
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Đặt kéo theo tỷ lệ
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)