Jalur 2D

kejadianPath2D memiliki API metode dan properti, memungkinkan Anda untuk menerapkan splin 2D dan garis melengkung 2D, berguna untuk efek UI seperti animasi berbasis jalur dan editor grafik.

Buat jalur 2D

Untuk menambahkan Path2D ke layar atau objek dalam pengalaman:

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

   

2. Pilih yang baru Path2D untuk mengungkapkan widget pemrograman alat dalam jendela pandang. Secara default, alat Tambahkan Titik dipilih.

   

3. Mulai klik di layar untuk menambahkan serangkaian titik kontrol untuk membentuk jalur.Jalur awal kemungkinan tidak akurat tetapi Anda dapat menyesuaikan posisi setiap titik kontrol nanti.

   

   Jika Anda menyeret mouse setelah mengklik, tangens akan dibuat di titik itu.Tangens juga dapat ditambahkan secara prosedural ke titik kontrol apa pun.

4. Saat selesai, klik tombol Selesai widget atau tekan Enter .

Modifikasi titik kontrol

Dengan Path2D dipilih dalam hierarki Explorer, Anda dapat mengubah titik kontrol individu serta tangensnya.

Pindahkan titik

Untuk memindahkan titik kontrol individu di jalur, aktifkan alat Pilih ( V ) dan kemudian klik dan seret ke posisi baru.

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

Perhatikan bahwa posisi titik tidak mutlak, tetapi lebih relatif ke wadah orang tuanya jalur.Sebagai contoh, bandingkan titik kontrol 30% dari kiri dan 20% dari atas untuk jalur di dalam , versus jalur identik yang ditempatkan di sudut kanan atas .

Tambahkan poin

Titik kontrol baru dapat ditambahkan ke Path2D antara dua titik yang ada atau dari titik akhir mana pun menggunakan alat Tambahkan Titik ( P ).

Hapus titik

Untuk menghapus titik kontrol, hover over dan klik kanannya, lalu pilih Hapus Titik dari menu popup konteks.

Kontrol titik tangens

Titik kontrol tangens memungkinkan Anda membuat dan menyesuaikan kurva di jalur.

Tambahkan tangens

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

1. Aktifkan alat Tambah Tangensial di widget pengembangan.

   

2. Pasang mouse di atas titik kontrol yang diinginkan, lalu klik untuk menambahkan dua mirip tangens (opsional seret setelah klik untuk menyesuaikan tangens baru).

   

Sesuaikan sudut

Untuk menyesuaikan tangens yang ada untuk titik kontrol individu:

1. Aktifkan alat Pilih ( V ).

   

2. Lewati penanda tangensial (bukan titik kontrol), lalu klik dan seret ke posisi baru.Jika tangens tercermin, titik tangens pasangan akan bergerak secara bersamaan.

   

Untuk secara manual mengatur posisi spesifik UDim2 untuk tangens:

1. Aktifkan alat Pilih ( V ) dan pilih titik kontrol.Di jendela Properti, perluas bidang SelectedControlPointData untuk mengekspos properti LeftTangent dan RightTangent.

   

2. Tetapkan posisi untuk LeftTangent dan/atau RightTangent. Perhatikan bahwa ini akan memecahkan perilaku terbalik dari tangens.

Hapus tangens

Untuk menghapus kedua tangens dari titik kontrol, hover over dan klik kanan titik itu, lalu pilih Hapus Tangens dari menu popup konteks.

Untuk menghapus hanya satu dari tangens (kiri atau kanan), hover over dan klik kanan penanda tangens itu, lalu pilih Hapus Tangens .

Memecah dan memantulkan

Secara default, tangens saling membalas. Saat Anda seret untuk menyesuaikan satu penanda tangens, titik tangens berpasangan akan bergerak bersama-sama.

Untuk "mematahkan" tangens sehingga masing-masing dapat dipindahkan secara independen dari yang lain, hover over dan klik kanan titik kontrol yang terkait, lalu pilih Mematahkan Tangens dari menu konteks.Setelah rusak, Anda dapat memindahkan masing-masing penanda tangens tanpa memengaruhi yang lain.

Properti visual jalur

Anda dapat menyesuaikan penampilan visual dari Path2D dengan properti berikut:

>

>

>

scriptingjalur

Skrip berguna untuk beberapa alur kerja terkait jalur.Contoh berikut menggunakan metode seperti GetControlPoints() yang men返ikan tabel dari Path2DControlPoints dan GetPositionOnCurveArcLength() yang men返ikan posisi UDim2 di sepanjang splin dengan nilai t tertentu.

Atur Objek UI di Seluruh 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 mengatur objek UI anak di sepanjang jalur
arrangeChildren()

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

Animasi Objek UI Selama 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()