2D Yolları

Class.Path2D durum, API yöntemleri ve özellikleriyle birlikte, yol tabanlı animasyonlar ve grafik düzenleyiciler gibi UI etkileri için kullanışlı 2D çizgileri ve 2D kıvrımlı çizgileri uygulayabilirsiniz.

2D Yol Oluşturulması

Ekrana bir Path2D eklemek veya bir deneyim objesine bir içerik katmak için:

1. In the Explorer window, insert a Path2D instance under a visible ScreenGui or 1> Class.SurfaceGui1> (it does not need to be a direct child).

   

2. Görüntü ortasında araçları gizlemek için yeni Path2D seçin.Varsayılan olarak, Nokta Ekleme aleti seçilir.

   

3. Bir seri kontrol noktası eklemek için ekranda tıklamaya başlayın. Başlangıç ​​yolu muhtemelen yanlış olacak, ancak sonra herhangi bir kontrol noktasının konumunu inceleyebilirsiniz.

   

   Eğer tıkladıktan sonra farenizi sürükleerseniz, eğilimler o noktada oluşturulur. Eğilimler ayrıca herhangi bir kontrol noktasına prosedürsel olarak eklenebilirler.

4. Bittiğinde, widget'in Bitti butonuna tıklayın veya Giriş'e basın.

Kontrol Noktalarını Değiştirme

Explorer hierarşisinde seçilen bir Class.Path2D ile, kontrol noktalarını ve eğilimi tangents ile değiştirebilirsiniz.

Hareketli Noktalar

Bir yoldaki birzelere kontrol noktalarını hareket ettirmek için, Seç aletini etkinleştirin (V ) ve sonra yeni bir konuma tıklayın ve kaydırın.

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

Not: Bir noksanın pozisyonu mutlak değil, sadece relatif olarak yolun ebeveyn kutusuna kadar. Örneğin, bir kontrol noktasının solundan 30% gittiğini veya ScreenGui bir yol için 20% gittiğ

Puanlar Ekleme

Yeni kontrol noktaları, iki mevcut nokta arasında veya Path2D araç kullanılarak her iki noktanın da arasında eklenebilir.

Noktaları Silme

Bir kontrol noktasını silmek için, onu sağ-tıklayın ve açık alanı silmek için Noktayı Sil seçeneğini seçin.

Kontrol Noktası Tangentleri

Kontrol noktası tangents yol üzerinde kurve oluşturmanızı ve ayarlanmasını sağlar.

Tangentler Ekleme

Zaten tangent'ları olmayan herhangi bir kontrol noktasına tangent eklemek için:

1. Araçlar widget'ındaki Eklemek Tangent aletini etkinleştirin.

   

2. İstediğiniz kontrol noktasına sağa kaydırın, sonra iki eş tane eklemek için tıklayın (isteğe bağlı olarak tıkladıktan sonra yeni tangentleri ayarlamak için kaydırın).

   

Tangent Adjusting

Bir kişisel kontrol noktası için mevcut tangentleri ayarlamak:

1. Seç araç etkinleştirmeyi ( V )

   

2. Bir tangent işaretleyici (kontrol noktası değil) üzerinde fareyi geçirin ve ardından yeni bir pozisyona tıklayın ve kaydırın. Eğer tangentler mirrored ise, eşleştirilen tangent noktası hareket edecektir.

   

Bir tangente için özel bir UDim2 pozisyonunu manuel olarak ayarlamak için:

1. Enable the Seç tool ( V ) and select the control point. In the Özellikler window, expand the 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData1> field to expose the 4> Datatype.Path2DControlPoint.LeftTangent|LeftTang

   

2. Datatype.Path2DControlPoint.LeftTangent|LeftTangent ve/veya RightTangent ile ilgili pozisyonu ayarlar. Tangentlerin eşit davranışını kırırırırır.

Tangentleri Silme

Bir kontrol noktasındaki her iki tangent'i de silmek için, o noktayı sağ-tıklayın ve konteyner popup menüsünden Tangentleri Temizle seçin.

Sadece tangentlerden birini silmek (gitti veya sağ) için, tangentin işaretini fareyi üzerine getirin ve Tangent'i Sil seçin.

Kırma ve Yansıtma

Varsayılan olarak, tangentler birbirlerine ayna olur. Bir tangent işaretleyicisini sürükle khi, eşleştirici olarak kalan tangent noktası hareket eder.

Her birinin diğerinden bağımsız olarak hareket edebilmesi için tangentleri "bozabilmek" için, ilişkili kontrol noktasının üzerine sağ-tıklayın ve Tangentleri Boz seçeneğini seçin. Kırıldıktan sonra, diğerlerine etki etmeden her bir tangent marcını hareket ettirebilirsiniz.

Yol Görsel Özellikleri

Class.Path2D ile görünümünü özelleştirebilirsiniz:

Yol Kodlama

Kodlama birkaç yol iş akışı için yararlıdır. Aşağıdaki örnekler, GetControlPoints() gibi yöntemleri kullanır, which return a table of <

Yol Boyunca UI Objelerini Düzenle
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 yol boyunca çocuk UI nesnelerini düzenleyin
arrangeChildren()

-- Düzeni ayarlamak için çocukların eklenmesini/kaldırılmasını dinleyin
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Yol boyunca UI Objelerini Animasyon
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()