UI 드래그 감지기

UIDragDetector 인스턴스는 슬라이더, 스피너 등의 경험에서 2D 사용자 인터페이스 요소와의 상호 작용을 용이하게 하고 장려합니다.주요 기능은 다음과 같습니다:

• 코드 한 줄로 모든 사용자 입력을 통해 끌 수 있도록 UIDragDetector 아래에 모든 GuiObject 인스턴스를 배치하십시오.

• 여러 옵션 중에서 선택하고, 를 통해 개체가 움직임에 어떻게 반응하는지 정의하고, 선택적으로 축, 이동 제한 또는 드래그 경계를 적용합니다.

• 스크립트는 끌어온 개체의 조작에 응답하여 설정 조정과 같은 논리 응답을 드라이브할 수 있습니다.

• UIDragDetectors 스튜디오의 편집 및 플레이 모드에서 작업하려면 사용하지 않는 한 , 선택하기 , 이동하기 , 크기 조정하기 , 또는 회전하기 도구 또는 특정 플러그인 또는 스튜디오의 UI 편집기 도구를 사용하지 않아야 합니다.

UI 요소 드래그 가능 만들기

모든 GuiObject 인스턴스를 드래그할 수 있도록 하려면 직접 하위로 UIDragDetector 만 추가하면 됩니다.

1. 탐색기 창에서 탐색기 인스턴스를 가리키고 GuiObject 버튼을 클릭하십시오. 컨텍스트 메뉴가 표시됩니다.

2. 메뉴에서 UIDragDetector 를 삽입합니다.

   

3. 기본적으로 개체는 이제 LayerCollector 인터페이스에서 드래그할 수 있습니다.

사용자 지정 UI 드래그 감지기 조정

스타일 끌기

UIDragDetectors 맵 커서 이동을 계산하여 제안된 2D 이동 및/또는 회전을 계산합니다.DragStyle 속성을 통해 요구에 맞게 다양한 매핑 중에서 선택할 수 있습니다.예를 들어, Enum.UIDragDetectorDragStyle.TranslatePlane 는 2D 평면의 LayerCollector 에서 번역을 생성하지만, Enum.UIDragDetectorDragStyle.Rotate 는 일반적으로 번역 대신 회전을 생성합니다.

방향 끌기

기본적으로 2D 이동과 관련된 DragStyle 맵이 조상의 공간으로 이동됩니다 LayerCollector .그러나 다른 UI 구성 요소를 빌드할 때 ReferenceUIInstance 또는 DragAxis 을 변경하고 싶을 수도 있습니다.

모션에 대한 응답

UIDragDetector.ResponseStyle 속성은 제안된 동작으로 개체의 위치 값이 변경되는 방법을 지정합니다.사용자 지정 응답 스타일을 사용하면 검색기의 부모가 제안된 동작을 실행하지 않고도 결과 UIDragDetector.DragUDim2 및 UIDragDetector.DragRotation 값을 원하는 대로 사용할 수 있습니다.

번역 및 회전 제한

기본적으로, 2D 이동의 내재적 제한 뒤에는 DragStyle의 제한이 없습니다.최소 번역과 최대 번역 및 회전에 대한 제한은 원하는 경우 다음 속성으로 선언할 수 있습니다.또한, 드래그된 개체가 특정 와 같은 범위 내에서 제한되는 방법을 정의할 수 있습니다.

속도 조정

통해 SelectionModeDragSpeed 및 SelectionModeRotateSpeed , 검출기의 최대 드래그/회전 속도를 조정할 수 있습니다.또한, 통해 , 검출기의 X / Y 차원 드래그 속도를 기반으로 미세 조정할 수 있습니다.

클릭 및 드래그에 대한 스크립트 응답

이벤트 신호, 속성 변경, 드래그 스타일, 사용자 지정 함수를 통해 스크립트는 음악과 사운드 효과 볼륨을 별도로 조정하는 슬라이더와 같이 다양한 설정을 조작하거나 논리적인 결정을 내릴 수 있습니다.

이벤트 신호

다음 이벤트 신호를 통해 사용자가 개체를 드래그하기 시작, 계속하고 끝내는 시기를 감지할 수 있습니다.

다음 슬라이더는 컨테이너를 BoundingUI로 지정하여 컨테이너 영역 내에서의 이동을 제한하고, 스케일 기반의 TranslateLine드래그가 추가 스크립트 없이 컨테이너 전체 너비로 제한되도록 합니다.

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 인스턴스에 의해 부과된 경계 제한도 여전히 적용됩니다.

다음 예제에서는 변경된 X 좌표 입력에 따라 계산된 사인 웨이브 후에 UI 요소를 끌어옵니다.검출기의 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 가 그리드 컨테이너로 설정됩니다.

UIDragDetector - 그리드에서 드래그, 타일에 스냅
-- 계층은 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)