UI sürükleme dedektörleri

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

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

• DragStyle seçeneklerinden birkaçını seçin, nesnenin hareketlere yanıt verme şeklini ResponseStyle aracılığıyla 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 sürükleyebilir.

• UIDragDetectors, yalnızca Seç, Taşı, Ölçek, veya Döndür araçlarını veya belirli eklentileri veya Stüdyo'nun UI düzenleyici araçlarını kullanmıyorsanız Stüdyo'nun düzenleme ve oynatma modlarında çalışır.

UI öğelerini sürüklenebilir hale getirme

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. Bağlam menüsü görüntülenir.

2. Menüden bir UIDragDetector ekleyin.

   

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

UI sürükleme dedektörlerini özelleştirme

Sürükleme stili

UIDragDetectors, imleç hareketini hareket önerilen 2D hareketi ve/veya döndürmeyi hesaplamak için haritalar. DragStyle özelliği aracılığıyla ihtiyaçlarınıza uygun farklı haritalamalardan 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 ilgili DragStyle, ata nesne LayerCollector'ın alanına haritalanır. Ancak, farklı UI bileşenleri oluştururken ReferenceUIInstance veya DragAxis'ı değiştirmek isteyebilirsiniz.

Hareket yanıtı

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 üstündeki nesne önerilen hareketi gerçekleştirmeden UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation değerlerini istediğiniz gibi kullanmanıza olanak tanır.

Çevirme & döndürme sınırları

Varsayılan olarak, DragStyle'ın doğasında var olan kısıtlamalar haricinde, 2D hareket için hiçbir sınır yoktur. Minimum ve maksimum çevirme ve döndürme sınırları istenirse aşağıdaki özellikler aracılığıyla ilan edilebilir. Ayrıca, sürüklenen nesnenin belirtilen bir GuiObject içinde nasıl sınırlı kalacağı tanımlanabilir, örneğin bir Frame gibi.

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 aracılığıyla dedektörün SelectionModeDragSpeed değerlerine dayalı olarak X/Y boyut sürükleme hızlarını ince ayar yapabilirsiniz.

Tıklama ve sürüklemeye yönelik betik yanıtları

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

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 sona erdiğini tespit edebilirsiniz.

Aşağıdaki kaydırıcı, sürükleme hareketini sınırlamak için konteynırını BoundingUI olarak belirleyerek, ölçek tabanlı TranslateLine sürüklemesini konteynırın tam genişliğiyle sınırlamakta, ek bir betik olmaksızın hareketin kaymasını sağlar.

UIDragDetector - Olay Sinyali Saydamlık Değişimi
-- Hiyerarşi SliderContainer ⟩ Handle ⟩ 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 ayarlayın
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- Sürüklemeyi çizgiyle sınırlayın
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

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

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

-- Tutma sonunu belirtmek için tutamağın kenarını geri alın
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

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

etkinlik sinyalleri aracılığıyla, dedektörün DragUDim2 ve/veya DragRotation özelliklerinde değişiklikleri doğrudan izleyebilirsiniz.

Aşağıdaki dedektör, kullanıcıların renk döndürücü halkasında tutamağı sürüklemesine olanak tanıyan DragStyle'ın Rotate olarak ayarlandığı bir örnektir ve tüm bunları Instance:GetPropertyChangedSignal() aracılığıyla sürükleme döndürme değişikliklerini izler.

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

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- Sürükleme tarzını döndürme olarak ayarlayın

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 tonu tutamağın döndürülmesine göre 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 tarzı

Bir dedektörün UIDragDetector.DragStyle'ını Enum.UIDragDetectorDragStyle.Scriptable olarak ayarlarsanız, bir Vector2 girdi pozisyonunu alan ve bir UDim2 (pozisyon) ve bir float (döndürme) döndüren kendi işlevinizi sağlayabilirsiniz. Dedektör, döndürmelerin gelen değerlerine ve DragSpace ve DragRelativity özelliklerine dayalı olarak nesneyi günceller.

Varsayılan olarak, döndürülen UDim2 ve float, dedektörün üst nesnesinin yerel alanındaki final istenen pozisyon/döndürme olacaktır. Mevcut çeviri/döndürme sınırları ve belirtilmiş BoundingUI örneği tarafından dayatılan sınırlar hala uygulanır.

Aşağıdaki örnek, bir UI öğesini X koordinat girdisinin değişiminin hesaplanmasına dayanarak bir sinüs dalgası doğrultusunda sürükler. Dedektörün DragSpace'ı Enum.UIDragDetectorDragSpace.Relative olarak ayarlanmıştır.

UIDragDetector - Sine Dalgasını Takip Eden Sürükleme
local frame = script.Parent  -- Sürüklenebilir UI öğesi
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- Frekansı artırmak için bu değeri küçültün

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

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- Pozitif Y değişiminde ekranda "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'da ızgara ve yakalamayla ilgili yerleşik hareket kuralları yoktur, ancak dedektörün UIDragDetector.DragUDim2 ve UIDragDetector.DragRotation değerlerinin uygulanmadan önce düzenlenmesi için özel kısıtlama işlevleri kaydedebilirsiniz. Örneğin, belirli artışlara yuvarlayarak hareketi bir ızgarada tutabilir veya hareket alanlarını tanımlayabilirsiniz. Bu, mevcut döndürme/çevirme sınırlarından önce uygulanır.

Aşağıdaki örnek, ızgara sütunları ve satır sayısına dayalı olarak düzlemsel sürüklemeyi sınırlayan bir kısıtlama işlevini kullanır. Dedektörün ResponseStyle değeri Enum.UIDragDetectorResponseStyle.Scale olarak ayarlanmış ve BoundingUI ızgara konteynırına ayarlanmıştır.

UIDragDetector - Kesirli Karo ile Izgarada Sürükleme
-- Hiyerarşi GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (bu betik)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- Sürüklenebilir UI öğesi
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

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