Jalur 2D

Instansi Path2D, bersama dengan metode dan propertinya, memungkinkan Anda untuk mengimplementasikan spline 2D dan garis melengkung 2D, berguna untuk efek UI seperti animasi berbasis jalur dan editor grafik.

Membuat jalur 2D

Untuk menambahkan Path2D ke layar atau objek dalam pengalaman:

1. Di jendela Explorer, masukkan instansi Path2D di bawah ScreenGui atau SurfaceGui yang terlihat (tidak perlu menjadi anak langsung).

   

2. Pilih Path2D baru untuk mengungkap widget alat dalam viewport. Secara default, alat Add Point dipilih.

   

3. Mulailah mengklik di layar untuk menambahkan serangkaian titik kontrol untuk membentuk jalur. Jalur awal kemungkinan akan tidak tepat tetapi Anda dapat menyempurnakan posisi titik kontrol mana pun kemudian.

   

   Jika Anda menarik mouse setelah mengklik, tangen akan dibuat pada titik tersebut. Tangen juga bisa ditambahkan secara prosedural ke titik kontrol mana pun.

4. Setelah selesai, klik tombol Selesai pada widget atau tekan Enter.

Modifikasi titik kontrol

Dengan Path2D yang dipilih dalam hierarki Explorer, Anda dapat memodifikasi titik kontrol individualnya serta tangennya.

Pindahkan titik

Untuk memindahkan titik kontrol individual pada jalur, aktifkan alat Select (V) dan kemudian klik-dan-tarik ke posisi baru.

Untuk penempatan yang sangat spesifik, pilih titik kontrol dan kemudian, di jendela Properties, atur posisi baru untuk properti SelectedControlPointData titik tersebut (UDim2).

Perhatikan bahwa posisi titik tidak absolut, tetapi relatif terhadap wadah induk jalur. Misalnya, bandingkan titik kontrol 30% dari kiri dan 20% dari atas untuk jalur di dalam ScreenGui, dibandingkan dengan jalur identik yang ditempatkan di dalam Frame yang terletak di sudut kanan atas ScreenGui.

Tambahkan titik

Titik kontrol baru dapat ditambahkan ke Path2D baik di antara dua titik yang sudah ada atau dari salah satu ujung menggunakan alat Add Point (P).

Hapus titik

Untuk menghapus titik kontrol, arahkan mouse ke titik tersebut dan klik kanan, kemudian pilih Delete Point dari menu konteks yang muncul.

Tangen titik kontrol

Tangen titik kontrol memungkinkan Anda membuat dan menyesuaikan kurva pada jalur.

Tambahkan tangen

Untuk menambahkan tangen ke titik kontrol mana pun yang belum memiliki tangen:

1. Aktifkan alat Add Tangent dalam widget alat.

   

2. Arahkan mouse ke titik kontrol yang diinginkan, lalu klik untuk menambahkan dua tangen berbayang (secara opsional tarik setelah mengklik untuk menyesuaikan tangen baru).

   

Sesuaikan tangen

Untuk menyesuaikan tangen yang ada untuk titik kontrol individual:

1. Aktifkan alat Select (V).

   

2. Arahkan mouse ke penanda tangen (bukan titik kontrol), kemudian klik-dan-tarik ke posisi baru. Jika tangen berbayang, titik tangen yang dipasangkan akan bergerak bersamaan.

   

Untuk mengatur posisi UDim2 tertentu secara manual untuk tangen:

1. Aktifkan alat Select (V) dan pilih titik kontrol. Di jendela Properties, perluas bidang SelectedControlPointData untuk mengungkap properti LeftTangent dan RightTangent.

   

2. Atur posisi untuk LeftTangent dan/atau RightTangent. Perhatikan bahwa ini akan memutuskan perilaku berbayang dari tangen.

Hapus tangen

Untuk menghapus kedua tangen dari titik kontrol, arahkan mouse ke titik tersebut dan klik kanan, kemudian pilih Clear Tangents dari menu konteks yang muncul.

Untuk menghapus hanya satu dari tangen (kiri atau kanan), arahkan mouse ke penanda tangen tersebut, lalu klik kanan dan pilih Delete Tangent.

Putus dan cermin

Secara default, tangen akan saling mencerminkan. Ketika Anda menarik untuk menyesuaikan satu penanda tangen, titik tangen yang dipasangkan akan bergerak bersamaan.

Untuk "memutuskan" tangen agar masing-masing dapat dipindahkan secara independen dari yang lain, arahkan mouse ke titik kontrol terkait, kemudian pilih Break Tangents dari menu konteks. Setelah diputuskan, Anda dapat memindahkan masing-masing penanda tangen tanpa memengaruhi yang lain.

Properti visual jalur

Anda dapat menyesuaikan penampilan visual dari Path2D dengan properti berikut:

Scripting jalur

Scripting berguna untuk beberapa alur kerja terkait jalur. Contoh berikut menggunakan metode seperti GetControlPoints() yang mengembalikan tabel Path2DControlPoints dan GetPositionOnCurveArcLength() yang mengembalikan posisi UDim2 pada nilai t tertentu sepanjang spline.

Atur Objek UI di Sepanjang Jalur
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

-- Awalnya atur objek UI anak di sepanjang jalur
arrangeChildren()

-- Dengarkan untuk anak yang ditambahkan/dihapus untuk menyesuaikan pengaturan
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Animasikan Objek UI di Sepanjang Jalur
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()