Detektory przeciągania UI

Instancja UIDragDetector ułatwia i zachęca do interakcji z elementami interfejsu użytkownika 2D w grze, takimi jak suwaki, pokrętła i inne. Kluczowe cechy obejmują:

• Umieść UIDragDetector pod dowolną instancją GuiObject, aby uczynić ją przeciągalną za pomocą wszystkich wejść użytkownika bez jednej linii 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 napędzać odpowiedzi logiczne, takie jak dostosowywanie ustawień.

• UIDragDetectors działają w trybie edycji i gry w Studio, o ile nie używasz narzędzi Wybierz, Przenieś, Skaluj ani Obróć, ani niektórych wtyczek lub 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 Eksploratora 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 obrót. 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 w płaszczyźnie LayerCollector, podczas gdy Enum.UIDragDetectorDragStyle.Rotate normalnie produkuje obrót 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 podczas budowania różnych komponentów UI.

Odpowiedź na ruch

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

Limity translacji i obrotu

Domyślnie nie ma limitów dla ruchu 2D poza wrodzonymi ograniczeniami DragStyle. Limity dla minimalnych i maksymalnych translacji oraz obrotów można zadeklarować za pomocą następujących właściwości, jeśli jest to pożądane. Dodatkowo możesz zdefiniować, jak przeciągany obiekt jest ograniczany w granicach określonego GuiObject, takiego jak Frame.

Dostosowanie prędkości

Dzięki SelectionModeDragSpeed i SelectionModeRotateSpeed możesz precyzyjnie dostosować maksymalne prędkości przeciągania/obracania dla detektora. Ponadto, dzięki UIDragSpeedAxisMapping, możesz precyzyjnie dostosować prędkości przeciągania w wymiarach X/Y, w oparciu o SelectionModeDragSpeed detektora.

Odpowiedzi skryptów na kliknięcia i przeciąganie

Dzięki sygnałom zdarzeń, zmianom właściwości, stylowi przeciągania Scriptable i funkcjom niestandardowym, 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ą głośność muzyki i efektów dźwiękowych oddzielnie.

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 swój kontener jako BoundingUI, aby ograniczyć jego ruch w obrębie obszaru kontenera, pozwalając na ograniczenie przeciągania opartego na skali TranslateLine do pełnej szerokości kontenera bez dodatkowego skryptowania.

-- 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 według skali
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Ogranicza przeciąganie do linii
uiDragDetector.BoundingUI = sliderContainer

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

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

-- Zmień przezroczystość w zależności od tego, jak bardzo został przeciągnięty w skali
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Przywróć granicę uchwytu, aby wskazać koniec chwytu
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Zmiany pozycji i obrotu

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

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

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

-- Początkowo ustaw odcień na obrót uchwytu
changeHue()

-- Połącz funkcję z GetPropertyChangedSignal() obrotu 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ć własną funkcję, która przyjmuje Vector2 pozycji wejściowej i zwraca UDim2 (pozycję) oraz float (obrót). Detektor zaktualizuje obiekt do obliczonej pozycji/obrotu na podstawie zwracanych wartości, właściwości DragSpace oraz DragRelativity.

Domyślnie zwracane UDim2 i float będą ostateczną pożądaną pozycją/obrotem w lokalnej przestrzeni rodzica detektora. Istniejące limity translacji/obrotu będą nadal miały zastosowanie, podobnie jak limity graniczne nałożone przez określoną instancję BoundingUI.

Następujący przykład przeciąga element UI wzdłuż fali sinusoidalnej obliczanej na podstawie zmiany współrzędnej X wejścia. Zauważ, że DragSpace detektora jest ustawione na Enum.UIDragDetectorDragSpace.Relative.

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
	-- Ujemny deltaY, aby przesuwało "w górę" na ekranie przy dodatniej 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 zasad ruchu dotyczących siatek i przycią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 jakimikolwiek istniejącymi limitami translacji/obrotu.

Następujący przykład wykorzystuje funkcję ograniczającą, która ogranicza przeciąganie płaszczyzny 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.

-- 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 według skali
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)