2D yollar

Path2D örneği, API yöntemleri ve özellikleri ile birlikte, sayfa tabanlı animasyonlar ve grafik editörleri gibi kullanıcı arayüzü efektleri için faydalı olan 2D spline'lar ve 2D eğik çizgiler oluşturmanıza olanak tanır.

2D yol oluşturma

Bir Path2D nesnesini ekrana veya deneyim içindeki bir nesneye eklemek için:

1. Explorer penceresinde, görünür bir ScreenGui veya SurfaceGui altında bir Path2D örneği ekleyin (doğrudan çocuk olması gerekmez).

   

2. Yeni Path2D nesnesini seçin ve alan içindeki araç widget'ını ortaya çıkarın. Varsayılan olarak, Nokta Ekle aracı seçili olacaktır.

   

3. Ekranda tıklayarak bir yol oluşturmak için bir dizi kontrol noktası eklemeye başlayın. Başlangıçta yol büyük ihtimalle kesin olmayacaktır, ancak daha sonra herhangi bir kontrol noktasının konumunu ince ayar yapabilirsiniz.

   

   Tıkladıktan sonra fareyi sürüklerseniz, o noktada tanjantlar oluşturulacaktır. Tanjantlar ayrıca herhangi bir kontrol noktasına prosedürel olarak eklenebilir.

4. İşiniz bittiğinde, widget'ın Tamam butonuna tıklayın veya Enter tuşuna basın.

Kontrol noktalarını değiştirme

Explorer hiyerarşisinde bir Path2D seçili iken, bireysel kontrol noktalarını ve bunların tanjantlarını değiştirebilirsiniz.

Noktaları hareket ettirme

Bir yol üzerindeki bireysel bir kontrol noktasını taşımak için, Seç aracını (V) etkinleştirin ve ardından tıklayıp sürükleyerek yeni bir konuma taşıyın.

Çok spesifik bir konumlandırma için kontrol noktasını seçin ve ardından Özellikler penceresinde noktanın SelectedControlPointData özelliği için yeni bir konum ayarlayın (UDim2).

Bir noktanın konumunun mutlak olmadığını, daha ziyade yolun ebeveyn konteynerine ilişkili olduğunu unutmayın. Örneğin, bir ScreenGui içindeki bir yol için soldan %30 ve yukarıdan %20 mesafede bir kontrol noktasını, bir Frame içinde yerleştirilen benzer bir yolla karşılaştırın.

Nokta ekleme

Yeni kontrol noktaları, Path2D nesnesine iki mevcut nokta arasında veya her bir ucundan Nokta Ekle aracı (P) kullanılarak eklenebilir.

Noktaları silme

Bir kontrol noktasını silmek için, üzerine gelin ve sağ tıklayın, ardından bağlam menüsünden Nokta Sil seçeneğini seçin.

Kontrol noktası tanjantları

Kontrol noktası tanjantları, bir yol üzerindeki eğrileri oluşturmanıza ve ayarlamanıza olanak tanır.

Tanjant ekleme

Zaten tanjantı olmayan herhangi bir kontrol noktasına tanjant eklemek için:

1. Araç widget'ında Tanjant Ekle aracını etkinleştirin.

   

2. İstediğiniz kontrol noktasının üzerine hoverlayın, ardından iki ayna tanjant eklemek için tıklayın (isteğe bağlı olarak, tıkladıktan sonra yeni tanjantları ayarlamak için sürükleyin).

   

Tanjantları ayarlama

Bireysel bir kontrol noktası için mevcut tanjantları ayarlamak için:

1. Seç aracını (V) etkinleştirin.

   

2. Bir tanjant işaretleyicisinin üzerine gelin (kontrol noktası değil), ardından tıklayıp sürükleyerek yeni bir konuma taşıyın. Tanjantlar ayna ise, eşleştirilmiş tanjant noktası da senkronize bir şekilde hareket edecektir.

   

Belirli bir UDim2 konumu için bir tanjant ayarlamak için:

1. Seç aracını (V) etkinleştirin ve kontrol noktasını seçin. Özellikler penceresinde, SelectedControlPointData alanını genişletin ve LeftTangent ve RightTangent özelliklerini açığa çıkarın.

   

2. LeftTangent ve/veya RightTangent için konumu ayarlayın. Bunun, tanjantların ayna davranışını "bozacağını" unutmayın.

Tanjant silme

Bir kontrol noktasından her iki tanjantı silmek için, üzerine gelin ve sağ tıklayın, ardından bağlam menüsünden Tanjantları Temizle seçeneğini seçin.

Sadece bir tanjantı (sol veya sağ) silmek için, o tanjant işaretleyicisinin üzerine gelin ve sağ tıklayın, ardından Tanjantı Sil seçeneğini seçin.

Kırma ve aynalama

Varsayılan olarak, tanjantlar birbirini aynalar. Bir tanjant işaretçisini sürüklemek için sürüklerseniz, eşleştirilmiş tanjant noktası da senkronize olarak hareket edecektir.

Her birinin diğerinden bağımsız olarak hareket edebilmesi için tanjantları "kırmak", ilgili kontrol noktasının üzerine gelin ve sağ tıklayın, ardından bağlam menüsünden Tanjantları Kır seçeneğini seçin. Kırıldıktan sonra, her bir tanjant işaretçisini hareket ettirebilirsiniz.

Yolun görsel özellikleri

Bir Path2D'nin görsel görünümünü aşağıdaki özelliklerle özelleştirebilirsiniz:

Yol betimleme

Betimleme, birkaç yol ile ilgili iş akışları için yararlıdır. Aşağıdaki örneklerde, GetControlPoints() gibi yöntemler kullanılmaktadır, bu yöntem bir Path2DControlPoints tablosunu döndürür ve GetPositionOnCurveArcLength() yöntemi, spline üzerinde belirli bir t değeri için UDim2 konumunu döndürür.

Yol Üzerinde UI Nesnelerini Düzenleme
local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")

local function arrangeChildren()
	local segmentCount = #path:GetControlPoints()
	local objectsToArrange = {}

	for _, child in parent:GetChildren() do
		if child:IsA("GuiObject") then
			table.insert(objectsToArrange, child)
		end
	end

	for idx, child in objectsToArrange do
		local t = idx / (#objectsToArrange + 1)
		child.Position = path:GetPositionOnCurveArcLength(t)
	end
end

-- Başlangıçta çocuk UI nesnelerini yol boyunca düzenle
arrangeChildren()

-- Düzenlemeyi ayarlamak için çocukların eklenip çıkarılmasını dinleyin
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Yol Boyunca UI Nesnesini Animasyonla Hareket Ettirme
local Tweenservice = game:GetService("TweenService")

local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")
local objectToAnimate = parent:FindFirstChildWhichIsA("GuiObject")

local TWEEN_DURATION = 4
local TWEEN_EASING_STYLE = Enum.EasingStyle.Cubic
local TWEEN_EASING_DIRECTION = Enum.EasingDirection.InOut

local pathSampleValue = Instance.new("NumberValue")
local tweenInfo = TweenInfo.new(TWEEN_DURATION, TWEEN_EASING_STYLE, TWEEN_EASING_DIRECTION, 0, true, 2)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})

local function onSampleValueChanged()
	objectToAnimate.Position = path:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)

tween:Play()