UI sürükleyici dedektörler

UIDragDetector örneği, bir oyundaki 2D kullanıcı arayüzü öğeleriyle, kaydırıcılar, dönerler ve daha fazlası gibi etkileşimi kolaylaştırır ve teşvik eder. Anahtar özellikler şunlardır:

• Herhangi bir GuiObject örneğinin altına bir UIDragDetector yerleştirerek, tek bir kod satırı yazmadan tüm kullanıcı girişleriyle sürüklenebilir hale getirin.

• DragStyle seçeneklerinden birini seçin, nesnenin hareketle nasıl tepki vereceğini ResponseStyle ile tanımlayın ve isteğe bağlı olarak eksen, hareket sınırları veya sürükleme sınırları uygulayın.

• Betikler, sürüklenen nesnelerin manipülasyonuna yanıt vererek, ayarları ayarlamak gibi mantıksal yanıtlar oluşturabilir.

• UIDragDetectors, Seçim, Taşıma, Ölçekleme veya Döndürme araçlarını kullanmadığınız sürece, Studio'nun düzenleme ve oynatma modlarında çalışır, ayrıca belirli eklentiler veya Studio'nun UI düzenleyici araçları da kullanılmamalıdır.

UI öğelerini sürüklenebilir hale getirin

Herhangi bir GuiObject örneğini sürüklenebilir hale getirmek için, doğrudan bir UIDragDetector eklemeniz yeterlidir.

1. Explorer penceresinde, GuiObject örneğinin üzerine gelin ve ⊕ butonuna tıklayın. Bir bağlam menüsü görüntülenir.

2. Menüyü kullanarak bir UIDragDetector ekleyin.

   

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

UI sürükleyici dedektörlerini özelleştirin

Sürükleme stili

UIDragDetectors, imleç hareketini 2D hareket ve/veya döndürme hesaplamak için eşleştirir. DragStyle özelliği aracılığıyla ihtiyaçlarınıza uygun farklı eşleştirmeler arasından seçim yapabilirsiniz. Örneğin, Enum.UIDragDetectorDragStyle.TranslatePlane, LayerCollector'ın 2D düzleminde çeviri üretirken, Enum.UIDragDetectorDragStyle.Rotate genellikle çeviri yerine bir döndürme üretir.

Sürükleme yönü

Varsayılan olarak, 2D hareket ve ilişkili DragStyle, ata LayerCollector'ın alanına eşleştirilir. Ancak, farklı UI bileşenleri oluştururken ReferenceUIInstance veya DragAxis'ı değiştirmek isteyebilirsiniz.

Hareket tepkisi

UIDragDetector.ResponseStyle özelliği, bir nesnenin pozisyon değerinin önerilen hareketle nasıl değiştirileceğini belirtir. Özel yanıt stilleri, dedektörün ebeveyninin önerilen hareketi gerçekleştirmeden UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation değerlerini istediğiniz gibi kullanmanıza olanak tanır.

Çeviri ve döndürme sınırları

Varsayılan olarak, DragStyle'ın doğasında var olan kısıtlamalar dışında 2D hareket için herhangi bir sınır yoktur. İstenirse, minimum ve maksimum çeviriler ve döndürmeler için aşağıdaki özelliklerle sınırlar tanımlanabilir. Ayrıca, sürüklenen nesnenin belirli bir GuiObject (örneğin bir Frame) içinde nasıl kısıtlandığını tanımlayabilirsiniz.

Hız ayarlamaları

SelectionModeDragSpeed ve SelectionModeRotateSpeed aracılığıyla, bir dedektör için maksimum sürükleme/döndürme hızlarını ince ayar yapabilirsiniz. Ayrıca, UIDragSpeedAxisMapping ile dedektörün SelectionModeDragSpeed değerine dayalı olarak X/Y boyutundaki sürükleme hızlarını ince ayar yapabilirsiniz.

Tıklama ve sürükleme için betik yanıtları

olay sinyalleri, özellik değişiklikleri, Scriptable sürükleme stili ve özel işlevler aracılığıyla, betikler sürüklenen UI öğelerinin manipülasyonuna yanıt vererek çeşitli ayarları yönlendirebilir veya mantıksal kararlar alabilir, örneğin müzik ve ses efekti ses seviyelerini ayrı ayrı ayarlayan kaydırıcılar gibi.

Olay sinyalleri

Aşağıdaki olay sinyalleri aracılığıyla, bir kullanıcının bir nesneyi sürüklemeye başladığında, devam ettiğinde ve durdurduğunda tespit edebilirsiniz.

Aşağıdaki kaydırıcı, hareketini konteyner alanı içinde sınırlamak için BoundingUI olarak konteynerini belirler ve ölçek tabanlı TranslateLine sürüklemesini, ek betik yazmadan konteynerin tam genişliğiyle sınırlı hale getirir.

-- Hiyerarşi KaydırıcıKonteyner ⟩ Kolu ⟩ UIDragDetector ⟩ (bu betik)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ölçekle sürüklemeyi ayarla
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Sürüklemeyi çizgiyle sınırlayın
uiDragDetector.BoundingUI = sliderContainer

-- Başlangıçta konteynerin şeffaflığını kolun X ölçek değerine ayarlayın
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- Tutma başlangıcını belirtmek için kolun kenarını genişletin
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

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

-- Tutma sonunu belirtmek için kolun kenarını geri döndürün
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

Pozisyon ve döndürme değişiklikleri

Olay sinyalleri dışında, dedektörün DragUDim2 ve/veya DragRotation özelliklerindeki değişiklikleri doğrudan izleyebilirsiniz.

Aşağıdaki dedektör, kullanıcıların renk döndürücü halkası etrafında kolu sürüklemesine olanak tanıyan DragStyle değerini Rotate olarak ayarlamıştır ve sürükleme döndürme değişikliklerini Instance:GetPropertyChangedSignal() aracılığıyla tespit eder.

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

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Sürükleme stilini döndürme olarak 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 rengi kolun döndürmesine ayarlayın
changeHue()

-- Dedektörün sürükleme döndürmesi için GetPropertyChangedSignal() işlevine bağlayın
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

Betiklenmiş sürükleme stili

Bir dedektörün UIDragDetector.DragStyle değerini Enum.UIDragDetectorDragStyle.Scriptable olarak ayarlarsanız, bir Vector2 girdi pozisyonunu alıp bir UDim2 (pozisyon) ve bir float (döndürme) döndüren kendi işlevinizi sağlayabilirsiniz. Dedektör, döndürülen pozisyon/döndürme değerine göre nesneyi günceller, DragSpace özelliği ve DragRelativity özelliği kullanılır.

Varsayılan olarak, döndürülen UDim2 ve float, dedektörün ebeveyninin yerel alanındaki son istenen pozisyon/döndürme olacaktır. Mevcut çeviri/döndürme sınırları ve belirli bir BoundingUI örneği tarafından dayatılan sınırlar hala geçerli olacaktır.

Aşağıdaki örnek, X koordinat girdi değişimine göre hesaplanan bir sinüs dalgasını takip eden bir UI öğesini sürükler. Not: dedektörün DragSpace değeri Enum.UIDragDetectorDragSpace.Relative olarak ayarlanmıştır.

local frame = script.Parent  -- Sürüklemek 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ün

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

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

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

Özel kısıtlama işlevi

UIDragDetectors, ızgara ve yakalama hakkında yerleşik hareket kurallarına sahip değildir, ancak dedektörün UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation değerlerini uygulanmadan önce düzenlemek için özel kısıtlama işlevleri kaydedebilirsiniz. Örneğin, belirli artışlara yuvarlayarak hareketi bir ızgarada tutabilir veya izin verilen hareket alanlarını tanımlayabilirsiniz. Not: Bu, mevcut çeviri/döndürme sınırlarından önce uygulanır.

Aşağıdaki örnek, düzlemsel sürüklemeyi satır ve sütun sayısına dayalı olarak bir X/Y ızgarasına sıkıştıran bir kısıtlama işlevi kullanır. Not: dedektörün ResponseStyle değeri Enum.UIDragDetectorResponseStyle.Scale olarak ayarlanmıştır ve BoundingUI ızgara konteynerine ayarlanmıştır.

-- Hiyerarşi IzgaraKonteyner ⟩ Kolu ⟩ UIDragDetector ⟩ (bu betik)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Sürüklemek için UI öğesi
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- Ölçekle sürüklemeyi 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)