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

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

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

تشارك جميع 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.

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

ZIndex

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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