Con đường 2D

Ví dụ, ví dụ / trường hợp, cùng với các phương pháp và thuộc tính API của nó, cho phép bạn triển khai 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 con đường và trình soạn thảo đồ thị.

Tạo một con đườ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, nhúng một ví dụ Path2D dưới một đối tượng hiển thị ScreenGui hoặc SurfaceGui (nó không cần phải là con trực tiếp).

   

2. Chọn cái mới Path2D để tiết lộ công cụ gỡ lỗi trong cửa sổ xem. 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 loạt điểm điều khiển để tạo ra một con đường.Con đường 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 điều khiển nào sau đó.

   

   Nếu bạn kéo chuột sau khi nhấp, góc cạnh sẽ được tạo ở điểm đó.Các tangente cũng có thể được thêm theo cách thủ tục vào bất kỳ điểm điều khiển nào.

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

Sửa điểm điều khiển

Với một Path2D được chọn trong cấu trúc Explorer, bạn có thể thay đổi các điểm điều khiển riêng lẻ của nó cũng như các góc cạnh của chúng.

Di chuyển điểm

Để di chuyển một điểm điều khiển cá nhân trên một con đường, bật công cụ Chọn ( ) và sau đó nhấp và kéo nó đến vị trí mới.

Đối với vị trí rất cụ thể, hãy chọn điểm điều khiển và sau đó, trong cửa sổ Tính năng, đặ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à là tương đối với thùng cha của con đường.Ví dụ, so sánh điểm điều khiển 30% từ bên trái và 20% từ trên cùng cho một con đường bên trong một ScreenGui , so với một con đường tương tự được đặt bên trong một Frame nằm ở góc trên bên phải của ScreenGui .

Thêm điểm

Các điểm điều khiển mới có thể được thêm vào một Path2D giữa hai điểm hiện có hoặc từ điểm cuối cùng bằng công cụ Thêm điểm ( P ).

>

>

Xóa điểm

Để xóa điểm điều khiển, 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 lên ngữ cảnh.

Kiểm soát điểm góc

Điểm điều khiển tangente cho phép bạn tạo và điều chỉnh đường cong trên một con đường.

Thêm tangente

Để thêm cạnh vào bất kỳ điểm điều khiển nào chưa có cạnh:

1. Bật công cụ Thêm phép tang trong widget công cụ.

   

2. Di chuột qua điểm điều khiển mong muốn, sau đó nhấp để thêm hai đường cong phản chiếu (tùy chọn có thể kéo sau khi nhấp để điều chỉnh các đường cong mới).

   

Chỉnh lưỡi góc

Để điều chỉnh các tangente hiện có cho một điểm điều khiển cụ thể:

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

   

2. Vượt qua một điểm chạm (không phải điểm điều khiển), sau đó nhấp và kéo nó đến một vị trí mới.Nếu các góc cạnh được phản chiếu, điểm góc cạnh đôi sẽ di chuyển theo nhịp.

   

Để thiết lập bằng tay một vị trí cụ thể UDim2 cho một tangente:

1. Bật công cụ Chọn ( V ) và chọn điểm điều khiển.Trong cửa sổ Tính năng, mở rộng trường SelectedControlPointData để tiết lộ các LeftTangent và RightTangent tính năng.

   

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

Xóa tangente

Để xóa cả cạnh tròn từ điểm điều khiển, di chuột qua và nhấp chuột phải vào điểm đó, sau đó chọn Xóa cạnh tròn từ menu bật lên ngữ cảnh.

Để xóa chỉ một trong những cạnh (bên trái hoặc bên phải), di chuột qua và nhấp chuột phải vào dấu hiệu cạnh đó, sau đó chọn Xóa cạnh .

Phá vỡ và phản chiếu

Mặc định, các góc cạnh phản chiếu lẫn nhau. Khi bạn kéo để điều chỉnh một thẻ góc cạnh, điểm góc cạnh đôi sẽ di chuyển theo nhịp.

Để "phá vỡ" các trường tròn để mỗi trường có thể di chuyển độc lập với nhau, di chuột qua và nhấp chuột phải vào điểm điều khiển liên quan, sau đó chọn Phá vỡ trường tròn từ menu ngữ cảnh.Một khi bị hỏng, bạn có thể di chuyển mỗi điểm chạm mà không ảnh hưởng đến các điểm chạm khác.

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

Bạn có thể tùy chỉnh sự xuất hiện hình thức của một Path2D với các thuộc tính sau:

>

>

>

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

Lập trình có ích cho một số công việc liên quan đến con đường.Các ví dụ sau đây sử dụng các phương pháp như mà trả về một bảng của và mà trả về vị trí tại một giá trị nhất định trên đường viền.

Sắp xếp các đối tượng UI trên đườ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

-- Lúc đầu sắp xếp các đối tượng UI con trên đường dẫn
arrangeChildren()

-- Lắng nghe trẻ em được thêm/bị xóa để đ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()