Đường 2D

Đối tượng Path2D, cùng với các phương thức và thuộc tính API của nó, cho phép bạn thực hiện các spline 2D và các đường cong 2D, hữu ích cho các hiệu ứng UI như hoạt hình dựa trên đường đi và các trình chỉnh sửa đồ thị.

Tạo một đường 2D

Để thêm một Path2D vào màn hình hoặc một đối tượng trong trải nghiệm:

1. Trong cửa sổ Explorer, chèn một đối tượng Path2D dưới một ScreenGui hoặc SurfaceGui có thể thấy (nó không cần phải là con trực tiếp).

   

2. Chọn Path2D mới để hiển thị công cụ widget trong khung nhìn. Theo mặc định, công cụ Thêm Điểm được chọn.

   

3. Bắt đầu nhấp vào màn hình để thêm một chuỗi điểm kiểm soát để tạo thành một đường đi. Đường đi ban đầu có thể không chính xác nhưng bạn có thể tinh chỉnh vị trí của bất kỳ điểm kiểm soát nào sau này.

   

   Nếu bạn kéo chuột sau khi nhấp, tangent sẽ được tạo trên điểm đó. Tangents cũng có thể được thêm theo cách quy trình vào bất kỳ điểm kiểm soát nào.

4. Khi hoàn tất, nhấp vào nút Hoàn tất của widget hoặc nhấn Enter.

Chỉnh sửa các điểm kiểm soát

Với một Path2D được chọn trong cấu trúc Explorer, bạn có thể chỉnh sửa các điểm kiểm soát riêng lẻ cũng như tangents của chúng.

Di chuyển điểm

Để di chuyển một điểm kiểm soát riêng lẻ trên một đường đi, hãy bật công cụ Chọn (V) và sau đó nhấp và kéo nó đến vị trí mới.

Để có vị trí rất cụ thể, hãy chọn điểm kiểm soát và sau đó, trong cửa sổ Thuộc tính, đặt một vị trí mới cho thuộc tính SelectedControlPointData của điểm (UDim2).

Lưu ý rằng vị trí của một điểm không phải là tuyệt đối, mà thay vào đó là tương đối với container cha của đường đi. Ví dụ, so sánh một điểm kiểm soát 30% từ trái và 20% từ trên cho một đường đi bên trong ScreenGui, so với một đường đi giống hệt nằm trong một Frame ở góc trên bên phải của ScreenGui.

Thêm điểm

Các điểm kiểm soát mới có thể được thêm vào một Path2D giữa hai điểm hiện có hoặc từ bất kỳ điểm nào ở đầu bằng công cụ Thêm Điểm (P).

Xóa điểm

Để xóa một điểm kiểm soát, hãy di chuột qua và nhấp chuột phải vào nó, sau đó chọn Xóa Điểm từ menu bật ngữ cảnh.

Tangents của điểm kiểm soát

Tangents của điểm kiểm soát tangent cho phép bạn tạo và điều chỉnh các đường cong trên một đường đi.

Thêm tangents

Để thêm tangents vào bất kỳ điểm kiểm soát nào chưa có tangents:

1. Bật công cụ Thêm Tangent trong widget công cụ.

   

2. Di chuột qua điểm kiểm soát mong muốn, sau đó nhấp để thêm hai tangent đối xứng (theo tùy chọn kéo sau khi nhấp để điều chỉnh các tangent mới).

   

Điều chỉnh tangents

Để điều chỉnh các tangent hiện có cho một điểm kiểm soát riêng lẻ:

1. Bật công cụ Chọn (V).

   

2. Di chuột qua một dấu hiệu tangent (không phải điểm kiểm soát), sau đó nhấp và kéo nó đến một vị trí mới. Nếu các tangent là đối xứng, điểm tangent đi kèm sẽ di chuyển cùng nhau.

   

Để đặt một vị trí UDim2 cụ thể cho một tangent:

1. Bật công cụ Chọn (V) và chọn điểm kiểm soát. Trong cửa sổ Thuộc tính, mở rộng trường SelectedControlPointData để hiển thị thuộc tính LeftTangent và RightTangent.

   

2. Đặt vị trí cho LeftTangent và/hoặc RightTangent. Lưu ý rằng điều này sẽ phá vỡ hành vi đối xứng của các tangent.

Xóa tangents

Để xóa cả hai tangent khỏi một điểm kiểm soát, hãy di chuột qua và nhấp chuột phải vào điểm đó, sau đó chọn Xóa Tangents từ menu bật ngữ cảnh.

Để xóa chỉ một trong các tangents (trái hoặc phải), hãy di chuột qua và nhấp chuột phải vào dấu hiệu của tangent đó, sau đó chọn Xóa Tangent.

Phá vỡ và đối xứng

Mặc định, các tangent đối xứng với nhau. Khi bạn kéo để điều chỉnh một dấu hiệu tangent, điểm tangent đi kèm sẽ di chuyển cùng nhau.

Để "phá vỡ" các tangent để mỗi cái có thể được di chuyển độc lập với cái kia, hãy di chuột qua và nhấp chuột phải vào điểm kiểm soát liên quan, sau đó chọn Phá vỡ Tangents từ menu ngữ cảnh. Khi bị phá vỡ, bạn có thể di chuyển từng dấu hiệu tangent mà không ảnh hưởng đến cái kia.

Thuộc tính hình ảnh của đường đi

Bạn có thể tùy chỉnh hình thức trực quan của Path2D với các thuộc tính sau:

Lập trình đường đi

Lập trình rất hữu ích cho nhiều quy trình liên quan đến đường đi. Các ví dụ sau sử dụng các phương thức như GetControlPoints(), mà trả về một bảng các Path2DControlPoints và GetPositionOnCurveArcLength(), mà trả về vị trí UDim2 tại một giá trị t nhất định dọc theo spline.

Sắp xếp đối tượng UI qua đường đi
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

-- Ban đầu sắp xếp các đối tượng UI con qua đường đi
arrangeChildren()

-- Lắng nghe các đối tượng con được thêm vào/xóa đi để điều chỉnh sắp xếp
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Hoạt hình đối tượng UI dọc theo đường đi
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()