المسارات ثنائية الأبعاد

يسمح لك مثيل Path2D، جنبًا إلى جنب مع طرق وخصائص واجهة برمجة التطبيقات الخاصة به، بتنفيذ المنحنيات ثنائية الأبعاد والخطوط المنحنية ثنائية الأبعاد، والتي تكون مفيدة لتأثيرات واجهة المستخدم مثل الرسوم المتحركة المستندة إلى المسار ومحررات الرسوم البيانية.

إنشاء مسار ثنائي الأبعاد

لإضافة Path2D إلى الشاشة أو كائن داخل التجربة:

1. في نافذة Explorer، قم بإدراج مثيل Path2D تحت ScreenGui أو SurfaceGui مرئي (ليس من الضروري أن يكون طفلًا مباشرًا).

   

2. اختر Path2D الجديدة لكشف أداة الأدوات داخل العرض. بشكل افتراضي، أداة إضافة نقطة محددة.

   

3. ابدأ بالنقر على الشاشة لإضافة سلسلة من نقاط التحكم لتشكيل مسار. من المحتمل أن يكون المسار الأولي غير دقيق ولكنه يمكنك تحسين موضع أي نقطة تحكم لاحقًا.

   

   إذا قمت بسحب الماوس بعد النقر، سيتم إنشاء المماس في تلك النقطة. يمكن أيضًا إضافة المماس بشكل إجرائي إلى أي نقطة تحكم.

4. عند الانتهاء، انقر على زر تم في الأداة أو اضغط على Enter.

تعديل نقاط التحكم

مع تحديد Path2D في تسلسل Explorer، يمكنك تعديل نقاط التحكم الفردية الخاصة بها بالإضافة إلى المماس الخاصة بها.

نقل النقاط

لنقل نقطة تحكم فردية على مسار، قم بتمكين أداة تحديد (V) ثم انقر واسحبها إلى موضع جديد.

للحصول على وضع معين للغاية، اختر نقطة التحكم ثم، في نافذة الخصائص، قم بتعيين موضع جديد لخاصية SelectedControlPointData (نوع البيانات.UDim2).

لاحظ أن موقع النقطة ليس مطلقًا، بل هو نسبي بالنسبة لحاوية المسار الأم. على سبيل المثال، قارن بين نقطة تحكم تبعد 30٪ من اليسار و20٪ من الأعلى لمسار داخل ScreenGui، مقابل مسار متماثل موضوع داخل Frame في الزاوية العليا اليسرى من ScreenGui.

إضافة نقاط

يمكن إضافة نقاط تحكم جديدة إلى Path2D إما بين نقطتين موجودتين أو من أي نقطة نهاية باستخدام أداة إضافة نقطة (P).

حذف النقاط

لحذف نقطة تحكم، مرر فوقها وانقر بزر الماوس الأيمن عليها، ثم اختر حذف نقطة من قائمة السياق المنبثقة.

المماس لنقاط التحكم

تسمح لك المماس لنقاط التحكم بإنشاء وضبط المنحنيات على مسار.

إضافة المماس

لإضافة المماس إلى أي نقطة تحكم لا تحتوي بالفعل على المماس:

1. قم بتمكين أداة إضافة المماس في أداة الأدوات.

   

2. مرر فوق نقطة التحكم المطلوبة، ثم انقر لإضافة اثنين من المماس المعكوس (اختياريًا اسحب بعد النقر لـ ضبط المماس الجديد).

   

تعديل المماس

لضبط المماس الحالي لنقطة تحكم فردية:

1. قم بتمكين أداة تحديد (V).

   

2. مرر فوق علامة المماس (ليس نقطة التحكم)، ثم انقر واسحب إلى موضع جديد. إذا كانت المماس متطابقة، فستتحرك نقطة المماس المقابلة معها.

   

لتعيين موضع محدد لـUDim2 للمماس:

1. قم بتمكين أداة تحديد (V) واختر نقطة التحكم. في نافذة الخصائص، قم بتوسيع حقل SelectedControlPointData لكشف خصائص LeftTangent و RightTangent.

   

2. قم بتعيين الموضع لـ LeftTangent و/أو RightTangent. لاحظ أن هذا سيؤدي إلى كسر السلوك المتطابق للمماس.

حذف المماس

لحذف كلا المماس من نقطة تحكم، مرر فوقها وانقر بزر الماوس الأيمن لتلك النقطة، ثم اختر مسح المماس من قائمة السياق المنبثقة.

لحذف أحد الماس فقط (اليسار أو اليمين)، مرر فوق علامة المماس وانقر بزر الماوس الأيمن على تلك العلامة، ثم اختر حذف المماس.

كسر ومرآة

بشكل افتراضي، تعكس المماس بعضها البعض. عند سحب لضبط واحدة من علامات المماس، ستتحرك نقطة المماس المقابلة معها.

لكسر المماس بحيث يمكن تحريك كل منها بشكل مستقل عن الآخر، مرر فوق نقطة التحكم المرتبطة بها، ثم اختر كسر المماس من القائمة السياقية. بمجرد كسرها، يمكنك تحريك كل علامة ماس دون التأثير على الأخرى.

خصائص العرض للمسار

يمكنك تخصيص المظهر البصري لـ Path2D باستخدام الخصائص التالية:

برمجة المسار

تكون البرمجة مفيدة لمجموعة متنوعة من سير العمل ذات الصلة بالمسار. تستخدم الأمثلة التالية طرقًا مثل GetControlPoints() والتي تعيد جدولًا من Path2DControlPoints و GetPositionOnCurveArcLength() والتي تعيد موضع UDim2 عند قيمة t محددة على طول المنحنى.

تنظيم كائنات واجهة المستخدم عبر المسار
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

-- تنظيم كائنات واجهة المستخدم عبر المسار في البداية
arrangeChildren()

-- الاستماع لإضافة / إزالة الأطفال لتعديل الترتيب
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

تحريك كائن واجهة المستخدم على طول المسار
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()