Detektor Seret UI

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

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

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

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

• UIDragDetectors bekerja dalam mode edit dan main di Studio selama Anda tidak menggunakan alat Pilih, Gerakkan, Skala, atau Putar, maupun plugin tertentu atau alat editor UI di 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 Anda di atas instansi GuiObject dan klik tombol ⊕. Menu kontekstual akan ditampilkan.

2. Dari menu, masukkan UIDragDetector.

   

3. Secara default, objek sekarang akan dapat diseret dalam 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 pemetaan berbeda untuk memenuhi kebutuhan Anda. Sebagai contoh, Enum.UIDragDetectorDragStyle.TranslatePlane menghasilkan terjemahan dalam bidang 2D dari LayerCollector, sedangkan Enum.UIDragDetectorDragStyle.Rotate biasanya menghasilkan rotasi alih-alih terjemahan.

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 kebutuhan, tanpa membuat induk detektor mengeksekusi gerakan yang diusulkan.

Batasan translasi & rotasi

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

Penyesuaian kecepatan

Melalui SelectionModeDragSpeed dan SelectionModeRotateSpeed, Anda dapat menyempurnakan kecepatan maksimum seret/putar untuk detektor. Selanjutnya, melalui UIDragSpeedAxisMapping, Anda dapat menyempurnakan kecepatan seret di 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 mengatur volume musik dan efek suara secara terpisah.

Sinyal peristiwa

Melalui sinyal peristiwa berikut, Anda dapat mendeteksi ketika pengguna memulai, melanjutkan, dan mengakhiri penggeseran objek.

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

UIDragDetector - Perubahan Transparansi Sinyal Peristiwa
-- 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  -- Menetapkan seret berdasarkan skala
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Membatasi seret pada garis
uiDragDetector.BoundingUI = sliderContainer

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

-- Perluas batas pegangan untuk menunjukkan awal pengambilan
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 pengambilan
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 menggeser pegangan di sekitar cincin rotator hue, sambil mendeteksi perubahan rotasi seret melalui Instance:GetPropertyChangedSignal().

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

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Menetapkan 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 hue sesuai rotasi pegangan
changeHue()

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

Gaya seret terprogram

Jika Anda mengatur UIDragDetector.DragStyle dari 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, nilai 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 batas yang dikenakan oleh instansi BoundingUI yang ditentukan.

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

UIDragDetector - Drag Mengikuti Gelombang Sinus
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 sehingga 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 kendala kustom

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

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

UIDragDetector - Seret di Grid, Menempel pada Ubin
-- 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  -- Menetapkan seret 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)