เส้นทาง 2D

ตัวอย่าง Path2D ที่มี API วิธีและคุณสมบัติจะช่วยให้คุณสามารถใช้ 2D splines และ 2D curved lines ซึ่งมีประโยชน์สำหรับเอฟเฟกต์ UI เช่นการแอนิเมชั่นแบบขึ้นอยู่กับเส้นทางและตัวแก้ไขกราฟ

สร้างเส้นทาง 2D

เพื่อเพิ่ม Path2D ลงบนหน้าจอหรือวัตถุในประสบการณ์:

1. ในหน้าต่าง สํารวจ ใส่ตัวอย่าง Path2D ภายใต้ ScreenGui หรือ SurfaceGui (ไม่จำเป็นต้องเป็นลูกโดยตรง)

   

2. เลือกใหม่ Path2D เพื่อเปิดเผยวิดเจ็ตเครื่องมือในหน้าต่างดู โดยค่าเริ่มต้น เครื่องมือ เพิ่มจุด จะถูกเลือก

   

3. เริ่มคลิกที่หน้าจอเพื่อเพิ่มชุดควบคุม จุดควบคุม หลายจุดเพื่อสร้างเส้นทางเส้นทางเริ่มแรกอาจไม่ถูกต้อง แต่คุณสามารถปรับตำแหน่งของจุดควบคุมใดๆ ได้ในภายหลัง ปรับแต่ง

   

   หากคุณลากเมาส์หลังจากคลิก, tangents จะถูกสร้างบนจุดนั้นนอกจากนี้ยังสามารถเพิ่ม tangents ได้โดยวิธีการ เพิ่ม ไปยังจุดควบคุมใดก็ได้

4. เมื่อเสร็จแล้ว คลิกปุ่ม เสร็จ ของวิดเจ็ตหรือกด Enter

ปรับเปลี่ยนจุดควบคุม

ด้วยการเลือก Path2D ในระดับ สํารวจ คุณสามารถแก้ไขจุดควบคุมแต่ละจุดและ tangents ของพวกเขาได้

ย้ายจุด

เพื่อย้ายจุดควบคุมบุคคลบนเส้นทางให้เปิดใช้งานเครื่องมือ เลือก ( V ) แล้วคลิกและลากไปยังตำแหน่งใหม่

สำหรับการจัดตำแหน่งที่เฉพาะเจาะจงมาก เลือกจุดควบคุมแล้วในหน้าต่าง คุณสมบัติ ตั้งตำแหน่งใหม่สำหรับคุณสมบัติ SelectedControlPointData (UDim2)

โปรดทราบว่าตำแหน่งของจุดไม่ใช่ตัวเลขที่แน่นอน แต่เป็น เป็นสัดส่วน กับคอนเทนเนอร์รากของเส้นทางตัวอย่างเช่น เปรียบเทียบจุดควบคุม 30% จากด้านซ้ายและ 20% จากด้านบนสำหรับเส้นทางภายใน ScreenGui กับเส้นทางที่เหมือนกันที่วางอยู่ภายใน Frame ที่ตั้งอยู่ในมุมบนด้านขวาของ ScreenGui

เพิ่มจุด

จุดควบคุมใหม่สามารถเพิ่มไปยัง Path2D ระหว่างจุดที่มีอยู่สองจุดหรือจากจุดสิ้นสุดใดก็ได้โดยใช้เครื่องมือ เพิ่มจุด ( P )

ลบจุด

เพื่อลบจุดควบคุม เลื่อนเมาส์ไปที่และคลิกขวาที่มัน จากนั้นเลือก ลบจุด จากเมนูป๊อปอัพบริบท

ควบคุมจุด tangents

จุดควบคุม เถาวัลย์ ช่วยให้คุณสามารถสร้างและปรับเส้นโค้งบนเส้นทางได้

เพิ่มเส้นโค้ง

เพื่อเพิ่มรูปทรงให้กับจุดควบคุมใดๆ ที่ยังไม่มีรูปทรง:

1. เปิดใช้งานเครื่องมือ เพิ่มรูปทรง ในแดชบอร์ดการพัฒนา

   

2. เลื่อนเมาส์ไปที่จุดควบคุมที่ต้องการแล้วคลิกเพื่อเพิ่มสอง tangents สะท้อน (สามารถลากหลังจากคลิกเพื่อปรับเปลี่ยน tangents ใหม่ได้)

   

ปรับเอนกลือร์

เพื่อปรับเปอร์เซ็นต์ที่มีอยู่สำหรับจุดควบคุมแต่ละจุด:

1. เปิดใช้งานเครื่องมือ เลือก ( V ).

   

2. เลื่อนเครื่องหมาย tangent (ไม่ใช่จุดควบคุม) จากนั้นคลิกและลากไปยังตำแหน่งใหม่หากความเฉียงถูกสะท้อน จุดความเฉียงคู่จะเคลื่อนที่ไปพร้อมกัน

   

เพื่อตั้งตำแหน่งเฉพาะ UDim2 สำหรับรูปขอบ:

1. เปิดใช้เครื่องมือ เลือก ( V ) และเลือกจุดควบคุมในหน้าต่าง คุณสมบัติ ขยายฟิลด์ SelectedControlPointData และ RightTangent เพื่อเปิดเผยคุณสมบัติ LeftTangent และ

   

2. ตั้งตำแหน่งสำหรับ และ/หรือ โปรดทราบว่านี่จะทำให้เกิดการทำลายพฤติกรรมสะท้อนของ tangents

ลบรูปทรงเหลี่ยม

เพื่อลบทังเกนทั้งสองจากจุดควบคุม เลื่อนเมาส์และคลิกขวาที่จุดนั้น จากนั้นเลือก ล้างทังเกน จากเมนูป๊อปอัพบริบท

เพื่อลบเพียงหนึ่งในความเอียง (ซ้ายหรือขวา) เลื่อนเมาส์และคลิกขวาที่เครื่องหมายของความเอียงนั้นแล้วเลือก ลบความเอียง

ทำลายและสะท้อน

โดยค่าเริ่มต้น tangents สะท้อนซึ่งกันและกัน เมื่อคุณ ลากเพื่อปรับแต่ง เครื่องหมาย tangent หนึ่งจุด จุด tangent คู่จะเคลื่อนที่ไปพร้อมกัน

เพื่อ "ทำลาย" รูปทรงที่แต่ละอย่างสามารถย้ายได้อย่างอิสระจากอีก เลื่อนเมาส์และคลิกขวาที่จุดควบคุมที่เกี่ยวข้องแล้วเลือก ทำลายรูปทรง จากเมนูบริบทเมื่อพังแล้ว คุณสามารถย้ายเครื่องหมาย tangent แต่ละอันโดยไม่ส่งผลกระทบต่ออีก

คุณสมบัติภาพเส้นทาง

คุณสามารถปรับแต่งรูปลักษณ์ทางสายตาของ Path2D ด้วยคุณสมบัติต่อไปนี้:

>

scripting

การเขียนสคริปต์มีประโยชน์สำหรับหลายกระบวนการทำงานที่เกี่ยวข้องกับเส้นทางตัวอย่างต่อไปนี้ใช้วิธีการเช่น ซึ่งจะคืนตารางของ และ ซึ่งจะคืนตำแหน่ง ในแถบสปรินท์ที่มีค่าให้เฉพาะในช่วงที่กำหนด

จัดวัตถุ UI ข้ามเส้นทาง
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

-- จัดเรียงวัตถุ UI เด็กบนเส้นทางในตอนแรก
arrangeChildren()

-- ฟังเด็กที่ถูกเพิ่ม/ลบเพื่อปรับการจัดเตรียม
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

อนิเมชั่นวัตถุ UI ตามเส้นทาง
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()