ตัวอย่าง Class.Path2D พร้อมกับวิธีการและโปรพีเซ็นส์ API ของมันช่วยให้คุณใช้งาน 2D splines และ 2D เส้นโค้งที่มีประโยชน์สำหรับ UI เช่นเอฟเฟกต์เส้นทางและเครื่องมือจัดการกราฟิก
การสร้างเส้นทาง 2D
เพื่อเพิ่ม Path2D ลงในหน้าจอหรือวัตถุในประสบการณ์:
ใน หน้าต่าง Explorer ใส่ Path2D ตัวอย่างภายใต้ Class.ScreenGui หรือ 1> Class.SurfaceGui1> (มันไม่จำเป็นต้องเป็นลูกโดยตรง)
เลือก Path2D ใหม่เพื่อเปิดเผยข้อมูลเครื่องมือใน-viewport โดยปกติ เครื่องมือ เพิ่มจุด จะได้รับการเลือก
เริ่มคลิกที่หน้าจอเพื่อเพิ่มชุดของ คะแนนควบคุม เพื่อสร้างเส้นทาง เส้นทางเริ่มต้นอาจไม่แม่นยำ แต่คุณสามารถปรับตำแหน่งของคะแนนควบคุมใด ๆ ได้ในภายหลัง
เมื่อเสร็จสิ้นให้คลิกปุ่ม เสร็จสิ้น ของช่องเก็บข้อมูลหรือกด Enter
การเปลี่ยนแป้งจุดควบคุม
ด้วย Path2D ที่เลือกใน คลาสเอ็กซ์พลอเตอร์ ระดับการควบคุม คุณสามารถปรับแต่ละจุดควบคุมของมันได้ รวมถึง แทงค์เตนท์ของมัน
ย้ายจุด
เพื่อย้ายจุดควบคุมบนเส้นทาง เปิดเครื่องมือ เลือก ( V ) แล้วคลิกและลากไปยังตำแหน่งใหม่


สำหรับตำแหน่งที่แน่นอนมากเลือกจุดควบคุมแล้วในหน้าต่าง โปรไฟล์ ตั้งค่าตำแหน่งใหม่สำหรับสมบัติของตำแหน่ง SelectedControlPointData ( UDim2 )

หมายเหตุว่าตำแหน่งของจุดไม่ได้เป็นสัมพันธ์กับความสัมพันธ์ของความสัมพันธ์กับความสัมพันธ์ของความสัมพันธ์กับความสัมพันธ

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



การลบจุด
เพื่อลบจุดควบคุมให้เลือก ลบจุด จากเมนูป๊อปอัปบริบทัศน์

ควบคุมจุด Tangents
ควบคุมจุด tangents ให้คุณสร้างและปรับแต่งโค้งในเส้นทาง

การเพิ่ม tangents
เพื่อเพิ่ม tangents ให้กับจุดควบคุมที่ยังไม่มี tangents:
เปิดใช้งานเครื่องมือ เพิ่ม Tangent ในช่องเก็บของ
ปรับ Tangents
เพื่อปรับ tangents ที่มีอยู่สำหรับจุดควบคุม個別:
เปิดใช้งานเครื่องมือ เลือก ( V )
เลื่อนเมาส์ไปที่ตัวชี้วัด tangent (ไม่ใช่ตรวจคุณที่ควบคุม) แล้วคลิกและลากไปยังตำแหน่งใหม่ หากตัวชี้วัดถูกสะท้อน จุดชี้วัดคู่จะเคลื่อนที่ไปด้วยกัน
เพื่อการตั้งค่าตำแหน่งเฉพาะ UDim2 สำหรับ tangent:
เปิดใช้งานเครื่องมือ เลือก ( V ) และเลือกจุดควบคุม ในหน้า พิกัด ของ 1>โปรไฟล์1>
ตั้งตำแหน่งสำหรับ LeftTangent และ/หรือ RightTangent โปรดทราบว่านี่จะทำให้เกิดการ แสดงผลแบบกระจาย ของ tangents
การลบ tangents
เพื่อลบทั้งสอง tangents จากจุดควบคุมให้เลือก ล้าง tangents จากเมนูป๊อปอัปบริบทัศน์จากบริบทัศน์

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

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

เพื่อ "พัง" เหลี่ยมเพื่อให้ผู้คนสามารถย้ายได้อย่างอิสระกันโดยอาจเลือกแต่ละเหลี่ยมเพื่อให้เห็นภาพรวมของเหลี่ยมเพื่อสร้างความสัมพันธ์กัน จากนั้นเลือก พังเหลี่ยมเพื่อ

สร้างลักษณะทางสาย
คุณสามารถปรับแต่งรูปลักษณ์ของ Class.Path2D ด้วยคุณสมบัติต่อไปนี้:
สมบัติ | คำอธิบาย |
---|---|
Color3 | ตั้งสีของเส้นทาง |
Thickness | ตั้งค่าความหนาของเส้นทางในพิกเซล |
Visible | ทำให้เส้นทางมองเห็นได้หรือไม่ในทั้งแก้ไขและรันไดร์ |
ZIndex | สั่งให้เส้นทางเรนเดอร์เมื่อเปรียบเทียบกับ GUIs อื่น |



สคริปต์เส้นทาง
การเขียนสคริปต์เป็นประโยชน์สำหรับหลายเส้นทางงาน ตัวอย่างต่อไปใช้วิธีการเช่น Class.Path2
จัดวางรายการวัตถุ 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)
ดึง Objekt 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()