Detektory przeciągania interfejsu

Instancja UIDragDetector ułatwia i zachęca do interakcji z elementami interfejsu użytkownika 2D w doświadczeniu, takimi jak suwaki, dźwignie i więcej.Główne funkcje obejmują:

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

• Wybierz z kilku opcji DragStyle, określ, jak obiekt reaguje na ruch za pomocą ResponseStyle , a opcjonalnie zastosuj osi, ograniczenia ruchu lub granice przeciągania.

• Skrypty mogą reagować na manipulację przeciągniętymi obiektami, aby napędzać odpowiedzi logiczne, takie jak dostosowywanie ustawień.

• praca w trybie edytowania i odtwarzania w Studio tak długo, jak korzystasz z narzędzi nie używając Wybierz , Przesuń , Skala lub Obróć narzędzi, ani pewnych pluginów lub narzędzi edytora UI Studio.

Spraw, aby elementy UI były przeciągane

Aby każda instancja GuiObject była przeciągana, po prostu dodaj UIDragDetector jako bezpośredniego potomka.

1. W oknie Eksploratora przewiń nad instancją GuiObject i kliknij przycisk ⊕. Wyświetla się menu kontekstowe.

2. Z menu wstawь UIDragDetector .

   

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

Dostosuj detektory przeciągania interfejsu użytkownika

Przeciągnij styl

UIDragDetectors mapuje ruch kursora do obliczenia proponowanego ruchu 2D i/lub rotacji.Poprzez właściwość DragStyle możesz wybrać spośród różnych map odpowiednie dla Twoich potrzeb.Na przykład Enum.UIDragDetectorDragStyle.TranslatePlane wytwarza tłumaczenie w 2D planie LayerCollector, podczas gdy Enum.UIDragDetectorDragStyle.Rotate zwykle wytwarza rotację zamiast tłumaczenia.

Przeciągnij kierunek

Domyślnie ruch 2D i powiązana z nim mapa DragStyle w przestrzeni przodków LayerCollector.Jednak możesz chcieć zmienić ReferenceUIInstance lub DragAxis podczas budowania różnych komponentów interfejsu.

Odpowiedź na ruch

Właściwość UIDragDetector.ResponseStyle określa, w jaki sposób wartość pozycji obiektu jest zmieniana przez proponowany ruch.Style odpowiedzi niestandardowych pozwalają używać wynikowych wartości UIDragDetector.DragUDim2 i UIDragDetector.DragRotation tak, jak chcesz, bez wykonywania przez rodzica wykrywacza proponowanego ruchu.

Ograniczenia tłumaczenia i obrotu

Domyślnie nie ma ograniczeń dla ruchu 2D za pomocą wewnętrznych ograniczeń DragStyle.Ograniczenia dla obu minimalnych i maksymalnych tłumaczeń i rotacji mogą być zadeklarowane za pomocą następujących właściwości, jeśli jest to pożądane.Ponadto możesz określić, w jaki sposób przeciągnięty obiekt jest ograniczony w granicach określonego GuiObject takiego jak Frame.

Dostosowania prędkości

Poprzez SelectionModeDragSpeed i SelectionModeRotateSpeed możesz dostosować maksymalną prędkość przeciągania/obrotu dla detektora.Ponadto, za pomocą UIDragSpeedAxisMapping , możesz dostosować prędkość przeciągania wymiaru X / Y w oparciu o prędkość detektora SelectionModeDragSpeed.

Odpowiedzi skryptu na klikanie i przeciąganie

Poprzez sygnały zdarzeń i zmiany właściwości, przeciąganie stylu, niestandardowe funkcje oraz skrypty mogą odpowiedzieć na manipulację przeciągniętymi elementami interfejsu użytkownika, aby sterować różnymi ustawieniami lub podejmować logiczne decyzje, takie jak suwaki dostosowujące głośność muzyki i efektów dźwiękowych oddzielnie.

Znaki zdarzeń

Poprzez następujące sygnały zdarzeń możesz wykryć, kiedy użytkownik zaczyna, kontynuuje i kończy przeciąganie obiektu.

Następujący slider określa swój pojemnik jako BoundingUI , aby ograniczyć jego ruch w obszarze pojemnika, umożliwiając ograniczenie przeciągania w skali TranslateLine do pełnej szerokości pojemnika bez dodatkowego skryptowania.

UIDragDetector - Zmiana przejrzystości sygnału wydarzenia
-- Hierarchia jest 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 przez skalę
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Ogranicza przeciąganie do linii
uiDragDetector.BoundingUI = sliderContainer

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

-- Rozszerz granicę uchwytu, aby wskazać rozpoczynaćchwytu
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Zmień przejrzystość o to, jak dużo przeciągnęła w skali
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Przywróć granicę uchwytu, aby wskazać kończyćchwytu
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 i/lub bezpośrednio.

Następujący detektor ma swój DragStyle ustawiony na Rotate, umożliwiając użytkownikom przeciąganie uchwytu wokół pierścienia rotatora koloru, wszystko podczas wykrywania zmian w przeciąganiu rotacji za pomocą Instance:GetPropertyChangedSignal().

UIDragDetektor - Zmiana przeciągania rotacji
local handle = script.Parent.Parent  -- Eleмент interfejsu do przeciągania
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Ustaw styl przeciągania do obrotu

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 kolor do obsługi rotacji
changeHue()

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

Skryptowany styl przeciągania

Jeśli ustawisz UIDragDetector.DragStyle wykrywacza na Enum.UIDragDetectorDragStyle.Scriptable , możesz dostarczyć własną funkcję, która przyjmuje Vector2 pozycję wejściową i zwraca UDim2 (pozycję) i pływ (rotację).Detektor zaktualizuje obiekt do pozycji/rotacji obliczonej na podstawie zwrotów, właściwości DragSpace i właściwości DragRelativity.

Domyślnie zwrócony UDim2 i float będą stanowić ostateczną pożądaną pozycję/rotację w lokalnej przestrzeni rodzica detektora.Ograniczenia tłumaczenia/obrotu istniejące nadal będą miały zastosowanie, podobnie jak ograniczenia granic narzucone przez określoną instancjaBoundingUI.

Poniższy przykład przeciąga element interfejsu użytkownika po wykonaniu faliny sinusowej obliczonej przez zmianę w X koordynatach wejściowych.Zauważ, że wykrywacz DragSpace jest ustawiony na Enum.UIDragDetectorDragSpace.Relative .

UIDragDetektor - Przeciągnij następną falę sinusową
local frame = script.Parent  -- Eleмент interfejsu do przeciągania
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Obniż 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
	-- Negatywny Y delta, aby poszedł "w górę" na ekranie z pozytywną zmianą Y
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Funkcja ograniczenia niestandardowego

UIDragDetectors nie ma wbudowanych zasad ruchu dotyczących siatek i przesuwania, ale możesz zarejestrować niestandardowe funkcje ograniczeń, aby edytować wykrywacz UIDragDetector.DragUDim2 i UIDragDetector.DragRotation przed ich zastosowaniem.Na przykład możesz utrzymać ruch na siatce, zaokrągliwszy pozycje do konkretnych zmian, lub określić dozwolone obszary ruchu.Zauważ, że jest to zastosowane przed wszelkimi istniejącymi ograniczeniami tłumaczenia/rotacji.

Poniższy przykład wykorzystuje funkcję ograniczenia, która mocuje przeciąganie płaskie do siatki X / Y w oparciu o liczbę rzędów i kolumn.Zauważ, że wykrywacz ResponseStyle jest ustawiony na Enum.UIDragDetectorResponseStyle.Scale i jego BoundingUI jest ustawiony na kontener siatki.

UIDragDetector - Przesuwanie w siatce, przypisywanie do płytek
-- Hierarchia jest GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (ten skrypt)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Eleмент interfejsu do przeciągania
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ustaw przeciąganie przez skalę
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)