Detektory przeciągania UI

Instancja UIDragDetector ułatwia i zachęca do interakcji z elementami interfejsu użytkownika 2D w doświadczeniu, takimi jak suwaki, wskaźniki i inne. Kluczowe cechy to:

• Umieść UIDragDetector pod dowolną instancją GuiObject, aby uczynić ją przeciągalną za pomocą wszystkich wejść użytkownika bez jednego wiersza kodu.

• Wybierz spośród kilku opcji DragStyle, zdefiniuj, jak obiekt reaguje na ruch za pomocą ResponseStyle, a opcjonalnie zastosuj osie, limity ruchu lub granice przeciągania.

• Skrypty mogą reagować na manipulację przeciąganymi obiektami, aby uruchomić odpowiedzi logiczne, takie jak dostosowywanie ustawień.

• UIDragDetectors działają w trybie edycji i odtwarzania w Studio, pod warunkiem że nie używasz narzędzi Wybierz, Przesuń, Skaluj lub Obróć, ani niektórych wtyczek czy narzędzi edytora UI w Studio.

Uczyń elementy UI przeciągalnymi

Aby uczynić dowolne instancje GuiObject przeciągalnymi, wystarczy dodać UIDragDetector jako bezpośredniego potomka.

1. W oknie Eksplorator najedź na instancję GuiObject i kliknij przycisk ⊕. Wyświetli się menu kontekstowe.

2. Z menu wstaw UIDragDetector.

   

3. Domyślnie obiekt będzie teraz przeciągalny w interfejsie LayerCollector.

Dostosuj detektory przeciągania UI

Styl przeciągania

UIDragDetectors mapują ruch kursora, aby obliczyć proponowany ruch 2D i/lub rotację. Dzięki właściwości DragStyle możesz wybierać spośród różnych mapowań, aby dostosować je do swoich potrzeb. Na przykład Enum.UIDragDetectorDragStyle.TranslatePlane produkuje translację w 2D na płaszczyźnie LayerCollector, podczas gdy Enum.UIDragDetectorDragStyle.Rotate zazwyczaj produkuje rotację zamiast translacji.

Kierunek przeciągania

Domyślnie ruch 2D i powiązany DragStyle mapują się na przestrzeń przodka LayerCollector. Możesz jednak chcieć zmienić ReferenceUIInstance lub DragAxis przy budowaniu różnych komponentów UI.

Reakcja na ruch

Właściwość UIDragDetector.ResponseStyle określa, jak wartość pozycji obiektu jest zmieniana przez proponowany ruch. Niestandardowe style reakcji pozwalają na użycie wynikowych wartości UIDragDetector.DragUDim2 i UIDragDetector.DragRotation zgodnie z potrzebami, bez konieczności wykonywania proponowanego ruchu przez rodzica detektora.

Limity translacji i rotacji

Domyślnie nie ma żadnych ograniczeń dotyczących ruchu 2D poza inherentnymi ograniczeniami DragStyle. Limity dla minimalnych i maksymalnych translacji i rotacji mogą być zadeklarowane za pomocą poniższych właściwości w razie potrzeby. Dodatkowo możesz zdefiniować, jak przeciągany obiekt jest ograniczany w granicach określonego GuiObject, takiego jak Frame.

Dostosowywanie prędkości

Dzięki SelectionModeDragSpeed i SelectionModeRotateSpeed możesz precyzyjnie dostroić maksymalne prędkości przeciągania/obrotu dla detektora. Ponadto przez UIDragSpeedAxisMapping możesz dopasować prędkości przeciągania w wymiarach X/Y, w zależności od SelectionModeDragSpeed.

Odpowiedzi skryptów na klikanie i przeciąganie

Dzięki sygnałom zdarzeń, zmianom właściwości, stylowi przeciągania Scriptable i niestandardowym funkcjom, skrypty mogą reagować na manipulację przeciąganymi elementami UI, aby napędzać różne ustawienia lub podejmować decyzje logiczne, takie jak suwaki, które dostosowują oddzielnie głośność muzyki i efektów dźwiękowych.

Sygnały zdarzeń

Dzięki następującym sygnałom zdarzeń możesz wykryć, kiedy użytkownik zaczyna, kontynuuje i kończy przeciąganie obiektu.

Następujący suwak wyznacza jego kontener jako BoundingUI, aby ograniczyć jego ruch w obrębie obszaru kontenera, pozwalając na ograniczenie przeciągania oparte na skali TranslateLine do pełnej szerokości kontenera bez dodatkowego skryptowania.

UIDragDetector - Zmiana przezroczystości przy użyciu sygnałów zdarzeń
-- Hierarchia to SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ten skrypt)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ustaw przeciąganie na podstawie skalowania
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Ogranicza przeciąganie do linii
uiDragDetector.BoundingUI = sliderContainer

-- Na początku ustaw przezroczystość kontenera na wartość skali X uchwytu
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Powiększ brzeg uchwytu, aby wskazać początek chwycenia
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Zmień przezroczystość zgodnie z tym, jak dużo przesunięto w skali
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Przywróć grubość brzegów uchwytu, aby wskazać koniec chwycenia
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Zmiany pozycji i rotacji

Oprócz sygnałów zdarzeń, możesz monitorować zmiany w właściwościach detektora DragUDim2 i/lub DragRotation bezpośrednio.

Następujący detektor ma ustawiony DragStyle na Rotate, co pozwala użytkownikom przeciągać uchwyt wokół pierścienia rotatora kolorów, jednocześnie wykrywając zmiany obrotu przeciągania za pomocą Instance:GetPropertyChangedSignal().

UIDragDetector - Zmiana rotacji w przeciąganiu
local handle = script.Parent.Parent  -- Element UI do przeciągania
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Ustaw styl przeciągania na obrót

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

-- Na początku ustaw kolor na podstawie rotacji uchwytu
changeHue()

-- Połącz funkcję z GetPropertyChangedSignal() rotacji przeciągania detektora
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Skryptowy styl przeciągania

Jeśli ustawisz UIDragDetector.DragStyle detektora na Enum.UIDragDetectorDragStyle.Scriptable, możesz dostarczyć swoją własną funkcję, która przyjmuje Vector2 pozycji wejściowej i zwraca UDim2 (pozycję) oraz float (rotację). Detektor zaktualizuje obiekt na obliczonej pozycji/rotacji na podstawie zwracanych wartości, właściwości DragSpace oraz DragRelativity.

Domyślnie zwrócone UDim2 i float będą ostateczną pożądaną pozycją/rotacją w lokalnej przestrzeni rodzica detektora. Istniejące limity translacji/rotacji będą nadal miały zastosowanie, jak również limity graniczne nałożone przez określoną instancję BoundingUI.

Następujący przykład przeciąga element UI zgodnie z falą sinusoidalną obliczaną na podstawie zmiany wprowadzonej współrzędnej X. Zauważ, że przestrzeń przeciągania detektora DragSpace jest ustawiona na Enum.UIDragDetectorDragSpace.Relative.

UIDragDetector - Śledzenie przeciągania fali sinusoidalnej
local frame = script.Parent  -- Element UI do przeciągania
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Zmniejsz tę wartość, aby zwiększyć częstotliwość

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Ujemne deltaY, aby poszło "w górę" na ekranie przy pozytywnej zmianie Y
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Niestandardowa funkcja ograniczająca

UIDragDetectors nie mają wbudowanych reguł ruchu dotyczących siatek i wciągania, ale możesz zarejestrować niestandardowe funkcje ograniczające, aby edytować UIDragDetector.DragUDim2 i UIDragDetector.DragRotation detektora przed ich zastosowaniem. Na przykład możesz utrzymać ruch na siatce, zaokrąglając pozycje do określonych przyrostów lub definiując dozwolone obszary ruchu. Zauważ, że to jest stosowane przed nałożeniem jakichkolwiek istniejących limitów translacji/rotacji.

Następujący przykład wykorzystuje funkcję ograniczającą, która ogranicza przeciąganie w płaszczyźnie do siatki X/Y w oparciu o liczbę wierszy i kolumn. Zauważ, że ResponseStyle detektora jest ustawione na Enum.UIDragDetectorResponseStyle.Scale, a jego BoundingUI jest ustawione na kontener siatki.

UIDragDetector - Przeciąganie w siatce, przyciąganie do płytek
-- Hierarchia to GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ten skrypt)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Element UI do przeciągania
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ustaw przeciąganie na podstawie skalowania
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)