Detektor seret UI

Instansi UIDragDetector memudahkan dan mendorong interaksi dengan elemen antarmuka pengguna 2D dalam pengalaman, seperti slider, spinner, dan banyak lagi.Fitur kunci termasuk:

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

• Pilih dari beberapa opsi DragStyle , definisikan bagaimana objek menanggapi gerakan melalui ResponseStyle , dan secara opsional terapkan sumbu, batas gerakan, atau batas geser.

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

• bekerja dalam mode edit dan bermain Studio selama Anda tidak menggunakan Pilih , Pindahkan , Skala , atau Putar alat, atau plugin tertentu atau alat editor UI Studio.

Jadikan elemen UI dapat diseret

Untuk membuat instance GuiObject apa pun yang dapat diseret, cukup tambahkan UIDragDetector sebagai turunan langsung.

1. Di jendela Explorer, gulir di atas instansi GuiObject dan klik tombol ⊕. Menu konteks ditampilkan.

2. Dari menu, masukkan Pendeteksi UIDrag .

   

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

Sesuaikan detektor UI seret khusus

Seret gaya

UIDragDetectors memindahkan kursor peta untuk menghitung gerakan 2D yang diusulkan dan/atau rotasi.Melalui properti DragStyle , Anda dapat memilih dari berbagai mape untuk memenuhi kebutuhan Anda.Sebagai contoh, Enum.UIDragDetectorDragStyle.TranslatePlane menghasilkan terjemahan di pesawat 2D dari LayerCollector, sementara Enum.UIDragDetectorDragStyle.Rotate biasanya menghasilkan rotasi bukan terjemahan.

Arah seret

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

Respon terhadap gerakan

Properti UIDragDetector.ResponseStyle mengidentifikasi bagaimana nilai posisi objek diubah oleh gerakan yang diusulkan.Gaya respons khusus memungkinkan Anda menggunakan nilai UIDragDetector.DragUDim2 dan UIDragDetector.DragRotation yang dihasilkan sebagai yang diinginkan, tanpa memiliki orang tua detektor mengeksekusi gerakan yang diusulkan.

Batas terjemahan & rotasi

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

Penyesuaian kecepatan

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

Respons skrip untuk mengklik dan seret

Melalui sinyal acara, perubahan properti, Scriptable gaya seret, dan fungsi khusus, skrip dapat menanggapi manipulasi elemen UI tertarik untuk mengemudikan berbagai pengaturan atau membuat keputusan logis, seperti slider yang menyesuaikan volume musik dan efek suara secara terpisah.

Sinyal acara

Melalui sinyal acara berikut, Anda dapat mendeteksi kapan pengguna mulai, melanjutkan, dan mengakhiri menyeret objek.

Desain slider berikut menunjukkan kontainer sebagai BoundingUI untuk membatasi gerakannya di area kontainer, memungkinkan seretan berbasis skala TranslateLine dibatasi hingga lebar penuh kontainer tanpa scriptingtambahan.

UIDragDetektor - Perubahan Transparansi Sinyal Peristiwa
-- Kerangka 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  -- Tetapkan seretan dengan skala
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Membatasi seretan ke baris
uiDragDetector.BoundingUI = sliderContainer

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

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

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

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

Posisi & perubahan rotasi

Selain sinyal acara , Anda dapat memantau perubahan pada properti detektor dan/atau langsung.

Detektor berikut memiliki DragStyle set ke Rotate , memungkinkan pengguna untuk menyeret pegangan di sekitar cincin pengubah warna, semua sambil mendeteksi perubahan untuk menyeret rotasi melalui Instance:GetPropertyChangedSignal() .

UIDragDetektor - Perubahan Rotasi Drag
local handle = script.Parent.Parent  -- Elemen UI untuk menyeret
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Tetapkan gaya seret untuk berputar

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 warna untuk menangani rotasi
changeHue()

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

Gaya seret ditulis

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

Secara default, kembali UDim2 dan mengapung akan menjadi posisi/rotasi akhir yang diinginkan **** di ruang lokal dari orang tua detektor.Batas terjemahan/rotasi yang ada masih akan berlaku, sama seperti batas batas yang diberlakukan oleh instansi BoundingUI kejadian.

Contoh berikut menyeret elemen UI setelah gelombang sine yang dihitung oleh perubahan pada input koordinat X .Perhatikan bahwa detektor DragSpace diatur ke Enum.UIDragDetectorDragSpace.Relative.

Detektor UIDrag - Seret Gelombang Sinus Berikut
local frame = script.Parent  -- Elemen UI untuk menyeret
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 sehingga pergi "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 khusus

UIDragDetectors tidak memiliki aturan gerak bawaan tentang grid dan geser, tetapi Anda dapat mendaftarkan fungsi batasan khusus untuk mengedit detektor UIDragDetector.DragUDim2 dan UIDragDetector.DragRotation sebelum mereka diterapkan.Sebagai contoh, Anda dapat menyimpan gerakan di grid dengan membulatkan posisi ke peningkatan tertentu, atau mendefinisikan area gerakan yang diizinkan.Perhatikan bahwa ini diterapkan sebelum batas terjemahan/rotasi yang ada.

Contoh berikut menggunakan fungsi batasan yang mengikat gerakan datar ke dalam grid X / Y berdasarkan jumlah baris dan kolom.Perhatikan bahwa detektor ResponseStyle diatur ke Enum.UIDragDetectorResponseStyle.Scale dan BoundingUI diatur ke kontainer grid.

Detektor UIDrag - Seret di Grid, Mengunci ke Ubin
-- Kerangka adalah GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (skrip ini)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Elemen UI untuk menyeret
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Tetapkan seretan dengan 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)