Arayüz sürükleme dedektörleri

örneği, kaydırıcılar, döndürücüler ve daha fazlası gibi deneyimde 2D kullanıcı arayüzü öğeleriyle etkileşimi kolaylaştırır ve teşvik eder.Önemli özellikler şunları içerir:

• Tek bir kod satırı olmadan tüm kullanıcı girişleri aracılığıyla sürüklenebilir hale getirmek için herhangi bir UIDragDetector örneğinin altına bir GuiObject yerleştirin.

• Birkaç seçeneği arasından seçim yapın, nesnenin harekete nasıl yanıt verdiğini tanımlayın ve isteğe bağlı olarak eksen, hareket sınırları veya sürükleme sınırları uygulayın.

• Scriptler, ayar ayarları gibi mantık yanıtı sürdürmek için sürüklenen nesnelerin manipülasyonuna yanıt verebilir.

• UIDragDetectors Studio'nun düzenleme ve oynatma modunda çalışın, sürece kullanmıyorsunuz Seç , Hareket , Ölçek veya Döndür araçlarını veya belirli eklentileri veya Studio'nun UI editör araçlarını kullanmıyorsunuz.

Kullanıcı arayüzü öğelerini sürükleyebilir hale getir

Herhangi bir GuiObject instansı sürüklenebilir hale getirmek için, doğrudan bir alt soyundan bir UIDragDetector ekleyin.

1. Gezgin penceresinde, GuiObject örneğin üzerine gezin ve ⊕ düğmesine tıkla. Bir bağımsız menü görüntülenir.

2. Menüden, bir UIDragDetector ekleyin.

   

3. Varsayılan olarak, nesne artık LayerCollector arayüzünde sürüklenebilir olacak.

Arayüz sürükleme dedektörlerini özelleştirin

Tarzı sürükle

UIDragDetectors önerilen 2B hareketini ve/veya dönüşünü hesaplamak için harita işaretleyici hareketini.DragStyle özelliği aracılığıyla, ihtiyaçlarınıza uyacak çeşitli haritalardan seçim yapabilirsiniz.Örneğin, Enum.UIDragDetectorDragStyle.TranslatePlane 2D düzlemde LayerCollector çeviri üretirken, Enum.UIDragDetectorDragStyle.Rotate normalde çeviri yerine bir dönüş üretir.

Yönü sürükleme

Varsayılan olarak, 2B hareket ve buna bağlı DragStyle harita, atadanın uzayına LayerCollector .Ancak, farklı UI bileşenleri oluştururken ReferenceUIInstance veya DragAxis değiştirmek isteyebilirsiniz.

Harekete yanıt

UIDragDetector.ResponseStyle özellik, bir nesnenin konum değerinin önerilen hareket tarafından nasıl değiştirileceğini belirtir.Özel yanıt stilleri, bir dedektörün ebeveyninin önerilen hareketi yürütmesine izin vermeden, sonuç UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation değerlerini istediğiniz gibi kullanmanıza izin verir.

Tercüme ve dönüş sınırları

Varsayılan olarak, 2D hareketin arkasında varsayılan sınırlar yoktur DragStyle .Minimum ve maksimum çevirmeler ve dönüşler için sınırlar, istenirse aşağıdaki özelliklerle ilan edilebilir.Ayrıca, sürülen nesnenin belirlenen bir GuiObject sınırları içinde nasıl sınırlandırılacağını tanımlayabilirsiniz, örneğin bir Frame.

Hız ayarları

SelectionModeDragSpeed ve SelectionModeRotateSpeed aracılığıyla, bir dedektör için maksimum sürükleme/döndürme hızlarını ayarlayabilirsiniz.Ayrıca, UIDragSpeedAxisMapping aracılığıyla, dedektörün X / Y boyutundaki sürükleme hızlarına göre ayar yapabilirsiniz, SelectionModeDragSpeed .

Tıklama ve sürüklemeye yanıt veren kodlar

Etkinlik sinyalleri aracılığıyla, özellik değişiklikleri, sürükleme stili ve özel fonksiyonlar, kaydırma arayüzü öğelerinin çeşitli ayarlarını yönlendirmek veya mantıksal kararlar vermek için yazılımlara yanıt verebilirler, örneğin müzik ve ses efekti hacmini ayrı ayrı ayarlayan kaydırma çubukları gibi.

Etkinlik sinyalleri

Aşağıdaki etkinlik sinyalleri aracılığıyla, bir kullanıcının bir nesneyi sürüklemeye başladığını, devam ettiğini ve bitirdiğini tespit edebilirsiniz.

Aşağıdaki kaydırma, konteynerini konteyner alanındaki hareketini sınırlandırmak için BoundingUI olarak işaretler ve ölçek tabanlı TranslateLine sürüklemenin ekstra kod yazılmadan konteynerin bütün genişliğine sınırlandırılmasına izin verir.

UIDragDetector - Etkinlik Sinyali Saydamlığı Değişikliği
-- Hiyerarşi, SliderContainer > Handle > UIDragDetector > (bu senaryo)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ölçek tarafından sürükleme ayarla
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Çizgiye sürüklemeyi sınırlandırır
uiDragDetector.BoundingUI = sliderContainer

-- Başlangıçta, konteyner saydamlığını tutamağın X ölçek değerine ayarlayın
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Kavrama başlatgöstermek için tutamaç sınırını genişlet
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- Ölçekte ne kadar sürüklendiğine göre transparansiyi değiştir
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- Kavrama bitirgöstermek için tutamaç sınırını geri al
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Pozisyon ve dönüş değişiklikleri

etkinlik sinyallerine ek olarak, dedektörün DragUDim2 ve/veya DragRotation özelliklerine doğrudan değişiklikleri izleyebilirsiniz.

Aşağıdaki dedektör, kullanıcıların kolu renk döndürücü halkasının etrafında sürüklemesine izin veren setine sahiptir, tüm değişiklikleri sürükleme dönüşümü yoluyla algılarken .

UIDragDetector - DragRotation Değişikliği
local handle = script.Parent.Parent  -- Sürükleme için UI öğesi
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Sürükleme stilini döndürmek için ayarla

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

-- Başlangıçta renk, dönüşü ele almak için ayarlanır
changeHue()

-- Dedektörün sürükleme dönüşümünün GetPropertyChangedSignal() işlevine bağlama işlevi
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Kodlanmış sürükleme stili

Bir dedektörün UIDragDetector.DragStyle 'sini Enum.UIDragDetectorDragStyle.Scriptable 'ye ayarlarsanız, giriş konumundan bir Vector2 alan ve bir UDim2 (pozisyon) ve bir float (döndürme) içeren kendi işlevinizi sunabilirsiniz.Dedektör, nesneyi geri dönüşler, DragSpace ve DragRelativity özelliklerine dayalı hesaplanan konuma/döndürmeye güncelleyecektir.

Varsayılan olarak, döndürülen ve yüzük, dedektörün ebeveyninin yerel uzayındaki istediğiniz konum/döndürme pozisyonu/rotasyonu olacaktır.Mevcut çeviri/döndürme sınırları ve belirlenmiş bir BoundingUI durumtarafından belirlenen sınır sınırları hala geçerli olacaktır.

Aşağıdaki örnek, X koordinat girişinde yapılan değişiklik sonrasında hesaplanan bir sin dalgasını takip eden bir UI öğesi sürükler.Dedektörün DragSpace 'sinin Enum.UIDragDetectorDragSpace.Relative 'ye ayarlandığını unutmayın.

UIDragDetector - Sonraki Sin dalgasını sürükleme
local frame = script.Parent  -- Sürükleme için UI öğesi
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Frekansı artırmak için bu değeri düşür

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Olumsuz Y delta, pozitif Y değişikliği ile ekranda "yukarı" gitmesi için
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Özel sınır işlevi

UIDragDetectors ızgaralar ve yapıştırmalarla ilgili yerleşik hareket kurallarına sahip değilsiniz, ancak dedektörün UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation önce uygulanmadan önce özel kısıtlayıcı işlevleri kaydedebilirsiniz.Örneğin, pozisyonları belirli artışlara yuvarlayarak bir ızgarada hareketi tutabilir veya hareketin izin verilen alanlarını tanımlayabilirsiniz.Bunun mevcut herhangi bir çeviri/döndürme sınırından önce uygulandığını unutmayın önce .

Aşağıdaki örnek, plakadaki sürüklemeyi sayı ve sütun sayısına göre X / Y ızgara üzerine sabitleyen bir kısıtlayıcı işlevini kullanır.Dedektörün ResponseStyle 'inin Enum.UIDragDetectorResponseStyle.Scale 'e ayarlandığını ve BoundingUI 'inin ızgara deposuna ayarlandığını unutmayın.

UIDragDetector - Grid'e Sürükle, Karelere Yapıştırma
-- Hiyerarşi GridContainer ⟩ El ⟩ UIDragDetector ⟩ (bu senaryo)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Sürükleme için UI öğesi
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ölçek tarafından sürükleme ayarla
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)