موضع وحجم كائنات واجهة المستخدم

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

الخصائص الأساسية

تشارك جميع GuiObjects مجموعة أساسية من الخصائص لتحديد موضع وحجم ونقطة الارتكاز وطبقة الكائنات داخل حاوية على الشاشة أو في التجربة.

الموضع

خاصية Position هي مجموعة إحداثيات UDim2 تحدد موضع الكائن على طول محوري X وY. يتم تمثيل UDim2 بواسطة كل من قيم Scale وOffset لكل محور:

• تمثل قيم Scale نسبة من حجم الحاوية على طول المحور المقابل، بالإضافة إلى أي قيم Offset.
• تمثل قيم Offset عدد البكسلات التي يجب إزاحة الكائن على المحور المقابل، بالإضافة إلى أي قيم Scale.

لتحرير موضع GuiObject المختار، انقر على حقل Position في نافذة الخصائص وأدخل مجموعة إحداثيات UDim2 جديدة.

الحجم

خاصية Size هي مجموعة إحداثيات UDim2 التي تحدد حجم الكائن على طول محوري X و Y. يتم تمثيل UDim2 بواسطة كل من قيم Scale وOffset لكل محور:

• Scale — قيم تمثل نسبة من حجم الحاوية على طول المحور المقابل، بالإضافة إلى أي قيم Offset.
• Offset — قيم تمثل حجم البكسل الخاص بالكائن على طول المحور المقابل، بالإضافة إلى أي قيم Scale.

لتحرير حجم GuiObject المختار، انقر على حقل Size في نافذة الخصائص وأدخل مجموعة إحداثيات UDim2 جديدة.

نقطة الارتكاز

تعرف خاصية AnchorPoint نقطة الأصل من حيث تغير موضع الكائن والحجم. القيم الافتراضية لـ AnchorPoint هي (0, 0) التي تضع نقطة الارتكاز في الزاوية العلوية اليسرى من الكائن.

تكون قيم AnchorPoint عبارة عن كسر من 0 إلى 1، نسبةً إلى حجم الكائن، مما يعني أن كائنًا يمتلك قيم AnchorPoint من (0.5, 0.5) يضع نقطة الارتكاز في منتصف (50%) الكائن أفقيًا وعموديًا، وأي تغييرات في موضعه أو حجمه تحركه وتغير حجمه من هذه النقطة.

لعرض وتحرير نقطة الارتكاز لــ GuiObject المختار:

1. في نافذة الخصائص، انقر داخل حقل AnchorPoint.

   

2. أدخل إحداثيات Vector2 جديدة واضغط Enter.

   يستنبط Studio مجموعة القيم المقصودة عند إدخال رقم واحد. على سبيل المثال، إدخال ببساطة 0.5 سيتم تحويله إلى 0.5, 0.5 لنقطة ارتكاز في الوسط.

ZIndex

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

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

لتحرير ZIndex لكائن ما، ابحث عن ZIndex في نافذة الخصائص وأدخل قيمة عددية جديدة.

هياكل التخطيط

تتيح لك هياكل التخطيط تنظيم وعرض GuiObjects بسرعة، على سبيل المثال في قائمة أفقية أو عمودية، أو شبكة من بلاطات متساوية الحجم، أو تسلسل صفحات، والمزيد. عادة ما تؤثر التخطيطات على موضع/حجم الكائنات تحت سيطرتها أو تتجاوزها.

عوامل متعددة المنصات

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

المناطق المحجوزة

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

مناطق الإبهام

يستخدم معظم اللاعبين على الهواتف المحمولة إبهامين — واحد على عصا التحكم الافتراضية وواحد على زر القفز. اعتمادًا على الحجم الفعلي للجهاز وأيدي اللاعب، يصبح الوصول بعيدًا جدًا من الزوايا السفلية غير مريح أو مستحيل، لذا يجب عليك تجنب وضع الأزرار المستخدمة بشكل متكرر خارج المناطق السهلة الوصول.

زر قريب من متناول إبهام اللاعب الأيمن

زر يصعب الوصول إليه إلا إذا مدد اللاعب يده أو إبهامه

تذكر أن مناطق الإبهام المريحة تختلف بين الهواتف والأجهزة اللوحية لأن الأجهزة اللوحية تحتوي على شاشة أكبر. زر يقع على بعد 40% من حافة الشاشة العلوية يمكن الوصول إليه على الهاتف ولكنه شبه غير قابل للوصول عليه على الجهاز اللوحي.

زر يقع على بعد 40% من حافة الهاتف العلوية، في متناول إبهام اللاعب

زر يقع على بعد 40% من حافة الجهاز اللوحي العلوية، يصعب الوصول إليه دون تمدد

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

الكود التالي، عند وضعه في برنامج نصي على جانب العميل داخل StarterPlayerScripts، يسترجع موضع زر القفز وينشئ زر نموذج مرحلي على بعد 20 بكسل إلى يساره.

Client Script - Custom Button Near Jump Button
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- انتظار تحميل زر القفز بالكامل
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- وضع زر مخصص جديد إلى يسار زر القفز
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("الجهاز ليس ممكن اللمس أو الاستوديو لا يحاكي جهازًا يمكنه اللمس!")
end

واجهة المستخدم المستندة إلى السياق

تكون المساحة على الشاشة محدودة على الأجهزة المحمولة، لذا يجب عليك إظهار المعلومات الأكثر أهمية فقط أثناء اللعب النشط. على سبيل المثال، إذا كانت تجربتك تتضمن إجراء خاص لفتح الأبواب والصناديق، فلا معنى لعرض زر "فتح" على الشاشة بشكل مستمر. بدلاً من ذلك، استخدم إشعار القرب أو وسيلة مماثلة لقبول الإدخال فقط عندما يقترب الشخصية من باب أو صندوق.