Detektor Seret UI

Instansi UIDragDetector memfasilitasi dan mendorong interaksi dengan elemen antarmuka pengguna 2D dalam sebuah permainan, seperti penggeser, pemutar, dan lainnya. Fitur kunci meliputi:

• Tempatkan UIDragDetector di bawah instansi GuiObject mana pun untuk membuatnya dapat diseret melalui semua input pengguna tanpa satu baris kode pun.

• Pilih dari beberapa opsi DragStyle, tentukan bagaimana objek merespons gerakan melalui ResponseStyle, dan secara opsional terapkan sumbu, batas gerakan, atau batas seret.

• Skrip dapat merespons manipulasi objek yang diseret untuk menggerakkan respons logika, seperti menyesuaikan pengaturan.

• UIDragDetectors bekerja di mode edit dan main Studio selama Anda tidak menggunakan alat Pilih, Gerakkan, Skala, atau Putar, maupun plugin tertentu atau alat editor UI Studio.

Membuat elemen UI dapat diseret

Untuk membuat instansi GuiObject mana pun dapat diseret, cukup tambahkan UIDragDetector sebagai keturunan langsung.

1. Di jendela Explorer, arahkan kursor ke instansi GuiObject dan klik tombol ⊕. Menu kontekstual ditampilkan.

2. Dari menu, masukkan UIDragDetector.

   

3. Secara default, objek sekarang akan dapat diseret di antarmuka LayerCollector.

Kustomisasi detektor seret UI

Gaya seret

UIDragDetectors memetakan gerakan kursor untuk menghitung gerakan 2D dan/atau rotasi yang diusulkan. Melalui properti DragStyle, Anda dapat memilih dari berbagai pemetaan untuk memenuhi kebutuhan Anda. Misalnya, Enum.UIDragDetectorDragStyle.TranslatePlane menghasilkan translasi di bidang 2D dari LayerCollector, sementara Enum.UIDragDetectorDragStyle.Rotate biasanya menghasilkan rotasi alih-alih translasi.

Arah seret

Secara default, gerakan 2D dan DragStyle yang terkait dipetakan ke ruang dari nenek moyang LayerCollector. Namun, Anda mungkin ingin mengubah ReferenceUIInstance atau DragAxis saat membangun komponen UI yang berbeda.

Respons terhadap gerakan

Properti UIDragDetector.ResponseStyle menentukan bagaimana nilai posisi objek diubah oleh gerakan yang diusulkan. Gaya respons kustom memungkinkan Anda menggunakan nilai UIDragDetector.DragUDim2 dan UIDragDetector.DragRotation yang dihasilkan sesuai keinginan, tanpa harus induk detektor mengeksekusi gerakan yang diusulkan.

Batasan translasi & rotasi

Secara default, tidak ada batasan untuk gerakan 2D di balik pembatasan bawaan dari DragStyle. Batas untuk translasi dan rotasi minimum dan maksimum dapat dinyatakan dengan properti berikut jika diinginkan. Selain itu, Anda dapat mendefinisikan bagaimana objek yang diseret dibatasi dalam batas dari GuiObject tertentu seperti Frame.

Penyesuaian kecepatan

Melalui SelectionModeDragSpeed dan SelectionModeRotateSpeed, Anda dapat menyempurnakan kecepatan maksimum seret/putar untuk detektor. Selain itu, melalui UIDragSpeedAxisMapping, Anda dapat menyempurnakan kecepatan seret dimensi X/Y, berdasarkan SelectionModeDragSpeed detektor.

Respons skrip terhadap klik dan seret

Melalui sinyal peristiwa, perubahan properti, gaya seret Scriptable, dan fungsi kustom, skrip dapat merespons manipulasi elemen UI yang diseret untuk menggerakkan berbagai pengaturan atau membuat keputusan logis, seperti penggeser yang menyesuaikan volume musik dan efek suara secara terpisah.

Sinyal peristiwa

Melalui sinyal peristiwa berikut, Anda dapat mendeteksi kapan pengguna mulai, melanjutkan, dan mengakhiri penyeretan objek.

Penggeser berikut menetapkan wadahnya sebagai BoundingUI untuk membatasi gerakannya dalam area wadah, memungkinkan gaya seret berbasis skala TranslateLine dibatasi pada lebar penuh wadah tanpa skrip tambahan.

-- Hierarki adalah SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (skrip ini)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Atur penyeretan berdasarkan skala
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Batasi penyeretan pada garis
uiDragDetector.BoundingUI = sliderContainer

-- Awalnya atur transparansi wadah ke nilai skala X dari pegangan
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Perluas batas pegangan untuk menunjukkan awal ambil
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Ubah transparansi berdasarkan seberapa banyak ia diseret dalam skala
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Kembalikan batas pegangan untuk menunjukkan akhir ambil
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Perubahan posisi & rotasi

Selain sinyal peristiwa, Anda dapat memantau perubahan pada DragUDim2 dan/atau properti DragRotation detektor secara langsung.

Detektor berikut memiliki DragStyle diatur ke Rotate, memungkinkan pengguna untuk menyeret pegangan di sekitar cincin rotator hue, sambil mendeteksi perubahan rotasi seret melalui Instance:GetPropertyChangedSignal().

local handle = script.Parent.Parent  -- Elemen UI untuk diseret
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Atur gaya seret menjadi rotasi

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

-- Awalnya atur hue ke rotasi pegangan
changeHue()

-- Hubungkan fungsi ke GetPropertyChangedSignal() dari rotasi seret detektor
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Gaya seret yang terprogram

Jika Anda mengatur UIDragDetector.DragStyle detektor ke Enum.UIDragDetectorDragStyle.Scriptable, Anda dapat menyediakan fungsi Anda sendiri yang menerima Vector2 dari posisi input dan mengembalikan UDim2 (posisi) dan float (rotasi). Detektor akan memperbarui objek ke posisi/rotasi yang dihitung berdasarkan pengembalian, properti DragSpace, dan properti DragRelativity.

Secara default, UDim2 dan float yang dikembalikan akan menjadi posisi/rotasi akhir yang diinginkan dalam ruang lokal dari induk detektor. Batasan translasi/rotasi yang ada tetap berlaku, begitu juga dengan batasan yang dikenakan oleh instansi BoundingUI yang ditentukan.

Contoh berikut menyeret elemen UI mengikuti gelombang sinus yang dihitung berdasarkan perubahan dalam koordinat X input. Perhatikan bahwa DragSpace detektor diatur ke Enum.UIDragDetectorDragSpace.Relative.

local frame = script.Parent  -- Elemen UI untuk diseret
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Turunkan nilai ini untuk meningkatkan frekuensi

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Delta Y negatif agar bergerak "naik" di layar dengan perubahan Y positif
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Fungsi batasan kustom

UIDragDetectors tidak memiliki aturan gerakan bawaan tentang grid dan snapping, tetapi Anda dapat mendaftarkan fungsi batasan kustom untuk mengedit UIDragDetector.DragUDim2 dan UIDragDetector.DragRotation detektor sebelum diterapkan. Misalnya, Anda dapat menjaga gerakan pada grid dengan membulatkan posisi ke kenaikan tertentu, atau mendefinisikan area gerakan yang diizinkan. Perhatikan bahwa ini diterapkan sebelum batasan translasi/rotasi yang ada.

Contoh berikut memanfaatkan fungsi batasan yang membatasi seret planar ke grid X/Y berdasarkan jumlah baris dan kolom. Perhatikan bahwa ResponseStyle detektor diatur ke Enum.UIDragDetectorResponseStyle.Scale dan BoundingUI diatur ke wadah grid.

-- Hierarki adalah GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (skrip ini)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Elemen UI untuk diseret
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Atur penyeretan berdasarkan skala
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)