Trình phát hiện kéo UI

Ví dụ, UIDragDetector giúp dễ dàng và khuyến khích tương tác với các yếu tố giao diện người dùng 2D trong một trải nghiệm, chẳng hạn như các thanh trượt, các bánh xe 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ỳ GuiObject ví dụ để làm cho nó có thể kéo qua tất cả các đầu vào người dùng mà không có một dòng mã nào.

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

• Các kịch bản có thể đáp lại sự thao tác của các đối tượng bị kéo để lái đáp ứng logic, chẳng hạn như điều chỉnh cài đặt.

• làm việc trong chế độ chỉnh sửa và chơi của Studio miễn là bạn không không sử dụng công cụ Chọn , Di chuyển , Thước đo hoặc Xoay công cụ, hoặc không có plugin nhất định hoặc công cụ chỉnh sửa UI của Studio.

Làm cho các thành phần UI có thể kéo

Để làm cho bất kỳ GuiObject instances có thể kéo, chỉ cần thêm một UIDragDetector như một con cháu trực tiếp.

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

2. Từ menu, chèn UIDragDetector .

   

3. Mặc định, vật phẩm bây giờ sẽ có thể kéo trong giao diện LayerCollector.

Tùy chỉnh cảm biến kéo UI tùy chỉnh

Kéo phong cách

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

Hướng kéo

Mặc định, chuyển động 2D và bản đồ liên quan DragStyle đế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 hồi lại chuyển động

Thuộc tính UIDragDetector.ResponseStyle định nghĩa cách giá trị vị trí của một đối tượng được 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ải thực hiện chuyển động được đề xuất của người phát hiện.

Giới hạn dịch và xoay

Mặc định, không có giới hạn cho 2D chuyển động phía sau các hạn chế bẩm sinh của DragStyle .Các giới hạn cho cả phiên dịch tối thiểu và tối đa có thể được tuyên bố với các thuộc tính sau nếu cần.Ngoài ra, bạn có thể xác định cách mà đối tượng bị kéo bị hạn chế trong giới hạn của một đối tượng được xác định GuiObject 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 máy dò.Ngoài ra, thông qua UIDragSpeedAxisMapping , bạn có thể điều chỉnh tốc độ kéo chiều X / Y dựa trên tốc độ cảm biến SelectionModeDragSpeed .

Phản ứng kịch bản đến việc nhấp và kéo

Thông qua các tín hiệu sự kiện , thay đổi chỉ số, kiểu kéo, và chức năng tùy chỉnh, các kịch bản có thể đáp ứng sự thay đổi của các yếu tố UI bị kéo để thực hiệ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, 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 kéo một đối tượng.

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

UIDragDetector - Thay đổi tính minh bạch của tín hiệu sự kiện
-- Cấu trúc là SliderContainer ⟩ Xử lý ⟩ UIDragDetector ⟩ (trình kịch bản này)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Chỉnh kéo bằng thước đo
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Hạn chế kéo vào dòng
uiDragDetector.BoundingUI = sliderContainer

-- Lúc đầu đặt độ trong suốt của thùng chứa lên giá trị X của tay cầm
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Mở rộng biên giới tay cầm để chỉ ra bắt đầuđộng nắm lấy
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Thay đổi độ trong suốt bằng cách nó kéo trong phạm vi
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Phục hồi biên giới xử lý để chỉ ra điểm cuối của việc nắm kết thúc
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Thay đổi vị trí và xoay

Ngoài các tín hiệu sự kiện , bạn có thể theo dõi các thay đổi về và/hoặc tính chất của cảm biến trực tiếp.

Bộ cảm biến sau đây có cài đặt DragStyle để Rotate , cho phép người dùng kéo tay cầm xung quanh vòng tròn điều chỉnh màu, trong khi phát hiện các thay đổi để kéo chuyển động qua Instance:GetPropertyChangedSignal() .

UIDragDetector - Thay đổi chuyển động kéo
local handle = script.Parent.Parent  -- Yếu tố UI để kéo
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Chỉnh phong cách kéo để quay

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

-- Lúc đầu đặt màu để xử lý việc xoay
changeHue()

-- Kết nối chức năng để GetPropertyChangedSignal() của vòng quay kéo của máy dò
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

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

Nếu bạn đặt chức năng của một máy dò là UIDragDetector.DragStyle đến Enum.UIDragDetectorDragStyle.Scriptable , bạn có thể cung cấp chức năng riêng của mình mà nhận Vector2 một vị trí nhập và trả về một UDim2 (vị trí) và một float (xoay).Bộ cảm biến sẽ cập nhật đối tượng lên vị trí/xoay được tính toán dựa trên các lượt trả lại, thuộc tính DragSpace và thuộc tính DragRelativity.

Mặc định, returned và float sẽ là vị trí/vòng xoay cuối cùng mong muốn trong không gian lokal của cha của cảm biến.Các giới hạn dịch/xoay hiện tại vẫn sẽ áp dụng, giống như giới hạn ranh giới được áp đặt bởi một ví ví dụ / trường hợpBoundingUI cụ thể.

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

UIDragDetector - Kéo theo làn sóng Sine tiếp theo
local frame = script.Parent  -- Yếu 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 suất

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

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

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Chức năng giới hạn tùy chỉnh

UIDragDetectors không có các quy tắc chuyển động tích hợp về lưới và đánh dấu, nhưng bạn có thể đăng ký chức năng hạn chế tùy chỉnh để chỉnh sửa đầu ra của UIDragDetector.DragUDim2 và UIDragDetector.DragRotation trước khi chúng được áp dụng.Ví dụ, bạn có thể giữ chuyển động trên lưới bằng cách làm tròn vị trí đến các tăng dần cụ thể hoặc xác định các khu vực chuyển động được 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/xoay hiện có nào.

Ví dụ sau đây sử dụng chức năng hạn chế mà gắn kéo phẳng vào một lưới X / Y dựa trên số hàng và cột.Lưu ý rằng detector's ResponseStyle được đặt thành Enum.UIDragDetectorResponseStyle.Scale và BoundingUI của nó được đặt vào container lưới.

UIDragDetector - Kéo vào lưới, ghim vào gạch
-- Cấu trúc là GridContainer ⟩ Xử lý ⟩ UIDragDetector ⟩ (tập lệnh này)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Yếu tố UI để kéo
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Chỉnh kéo bằng thước đo
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)