เส้นทาง 2D

ตัวอย่าง Class.Path2D พร้อมกับวิธีการและโปรพีเซ็นส์ API ของมันช่วยให้คุณใช้งาน 2D splines และ 2D เส้นโค้งที่มีประโยชน์สำหรับ UI เช่นเอฟเฟกต์เส้นทางและเครื่องมือจัดการกราฟิก

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

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

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

   

2. เลือก Path2D ใหม่เพื่อเปิดเผยข้อมูลเครื่องมือใน-viewport โดยปกติ เครื่องมือ เพิ่มจุด จะได้รับการเลือก

   

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

   

   หากคุณลากเมาส์หลังจากการคลิก tangents จะถูกสร้างขึ้นที่จุดนั้น tangents สามารถเพิ่มได้อย่างมีขั้นตอน ไปยังจุดควบคุมใด ๆ

4. เมื่อเสร็จสิ้นให้คลิกปุ่ม เสร็จสิ้น ของช่องเก็บข้อมูลหรือกด Enter

การเปลี่ยนแป้งจุดควบคุม

ด้วย Path2D ที่เลือกใน คลาสเอ็กซ์พลอเตอร์ ระดับการควบคุม คุณสามารถปรับแต่ละจุดควบคุมของมันได้ รวมถึง แทงค์เตนท์ของมัน

ย้ายจุด

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

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

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

เพิ่มจุด

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

การลบจุด

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

ควบคุมจุด Tangents

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

การเพิ่ม tangents

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

1. เปิดใช้งานเครื่องมือ เพิ่ม Tangent ในช่องเก็บของ

   

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

   

ปรับ Tangents

เพื่อปรับ tangents ที่มีอยู่สำหรับจุดควบคุม個別:

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

   

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

   

เพื่อการตั้งค่าตำแหน่งเฉพาะ UDim2 สำหรับ tangent:

1. เปิดใช้งานเครื่องมือ เลือก ( V ) และเลือกจุดควบคุม ในหน้า พิกัด ของ 1>โปรไฟล์1>

   

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

การลบ tangents

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

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

การแก้ไขและการสะท้อนแสง

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

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

สร้างลักษณะทางสาย

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

สคริปต์เส้นทาง

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