تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إمكانية استخدام أشكال الأجهزة وأحجامها المتعددة

تتوفر أجهزة Android بمجموعة متنوعة من أشكال الأجهزة وأحجام الشاشات. تشمل الفئات الشائعة ما يلي:

هواتف جوّالة
الأجهزة اللوحية
أجهزة التلفزيون وأجهزة الاستقبال الرقمية
أجهزة الكمبيوتر المحمولة التي تعمل بنظام التشغيل Android في Chrome

يعني هذا التنوع أنّ لعبتك سيكون لها مجموعة من درجات الدقة المختلفة للشاشة، وغالبًا ما تكون نسب العرض إلى الارتفاع مختلفة فيها. مثلاً:

هاتف في الاتجاه الأفقي بنسبة عرض إلى ارتفاع تبلغ 19:9 (2280×1080)
هاتف مختلف في الاتجاه الأفقي بنسبة عرض إلى ارتفاع تبلغ 20:9 (3200×1400)
تلفزيون عالي الدقة 1080p مع نسبة عرض إلى ارتفاع تبلغ 16:9 (1920×1080)
جهاز لوحي بنسبة عرض إلى ارتفاع 4:3 (2048×1536)

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

توفير أوضاع العرض

مشروع DeFold دقة أساسية قابلة للضبط. يتم ضبط درجة الدقة في ملف game.project باستخدام حقلي العرض والارتفاع في فئة العرض.

إعدادات عرض المشروع تدريجيًا — **الشكل 1.** إعدادات مشروع **Display**

السلوك التلقائي لتطبيق Defold هو العرض بدرجة الدقة الأساسية ثم تغيير حجم الصورة الناتجة إلى الدقة الفعلية للجهاز المستهدف. يشير Deold إلى هذا الوضع باسم عرض موسّع. لا يحافظ الإسقاط الممتد على نسبة العرض إلى الارتفاع الأصلية. قد تكون هذه الإعدادات التلقائية مقبولة لبعض الألعاب. يتضمن النص البرمجي العادي لعرض Defold خياري إسقاط إضافيين يحافظان على نسبة العرض إلى الارتفاع الأساسية: عرض مناسب ثابت وعرض ثابت.

يوضح المثال التالي مشروعًا تم تصميمه بدرجة دقة أساسية 480×272، معروض في محرر Defold.

في هذا المثال:

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

مثال على تنسيق عنصر المشروع — **الشكل 2.** مثال تنسيق عنصر المشروع

عند تشغيله بدقة عرض 960×544، أي ضعف الدقة الأساسية بالضبط، يتم عرض المشروع على النحو التالي:

مثال على مشروع بدقة أساسية 2x باستخدام إسقاط التمديد التلقائي — **الشكل 3.** نموذج المشروع بدقة أساسية 2x، باستخدام إسقاط التمديد التلقائي

العرض الموسّع

تعرض الأمثلة التالية نتائج تغيير حجم النافذة باستخدام إسقاط موسّع افتراضي، حيث لا يتم الاحتفاظ بنسبة العرض إلى الارتفاع:

مثال لضغط المشروع أفقيًا باستخدام الإسقاط الممتد — **الشكل 4.** تم ضغط المشروع أفقيًا أثناء استخدام الإسقاط الممتدّ

مثال على مشروع تم تمديده أفقيًا باستخدام إسقاط التمدّد — **الشكل 5.** تم توسيع نموذج المشروع أفقيًا أثناء استخدام الإسقاط الممدّد.

العرض الثابت

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

توضح الأمثلة التالية عرض العرض الثابت التناسب إلى دقة العرض بنسبة عرض إلى ارتفاع مختلفة عن درجة الدقة الأساسية 480×272:

مثال على مشروع بنسبة عرض إلى ارتفاع أوسع باستخدام إسقاط بملاءمة ثابتة — **الشكل 6.** نموذج المشروع على شاشة بنسبة عرض إلى ارتفاع أطول من نسبة العرض إلى الارتفاع الأساسية أثناء استخدام عرض بشاشة مسطّحة

مثال على مشروع بنسبة عرض إلى ارتفاع أطول باستخدام إسقاط بشاشة ثابتة — **الشكل 7.** نموذج المشروع على شاشة بنسبة عرض إلى ارتفاع أوسع من نسبة العرض إلى الارتفاع الأساسية عند استخدام عرض بشاشة ثابتة

عرض ثابت

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

توضح الأمثلة التالية وضع العرض الثابت باستخدام دقة شاشة 644×408 مع عاملي تكبير 1x و2x على التوالي:

مثال على مشروع بحجم 644×408 مع تكبير بمقدار 1x باستخدام إسقاط ثابت — **الشكل 8.** نموذج المشروع بدقة عرض 644×408 أثناء استخدام إسقاط ثابت مع عامل تكبير 1x

مثال على مشروع بحجم 644×408 مع تكبير بمقدار 2x باستخدام إسقاط ثابت — **الشكل 9.** نموذج المشروع بدقة عرض 644x408 مع استخدام إسقاط ثابت مع عامل تكبير 2x

تغيير أوضاع العرض

يمكن تبديل وضع العرض النشط في وقت التشغيل من خلال إرسال الرسالة المناسبة إلى العارض. يتم إرسال هذه الرسائل باستخدام نظام رسائل Defold العادي. تتضمن جميع رسائل وضع الإسقاط معلمات تحدد قيم المستوى Z القريبة والبعيدة.

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

فك تشفير النصوص البرمجية للعرض

يتم التحكّم في سلوك عرض فك التشفير من خلال ملف نص برمجي خاص يُسمى النص البرمجي للعرض. مثل النصوص البرمجية الأخرى في Defold Engine، تتم كتابة النص البرمجي للعرض بلغة برمجة Lua. يتم تضمين نص برمجي تلقائي للعرض عند إنشاء المشروع، ولكن يمكنك أيضًا استبداله بنص برمجي مخصّص للعرض.

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

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

أنشأ مطوّرو البرامج مفتوحة المصدر حِزم عرض النصوص البرمجية والكاميرا التي توفّر ميزات أكثر من النصوص البرمجية التلقائية من Defold. هما: RenderCam وDeFold-Orthographic

فتح نظام واجهة المستخدم التصويرية

يشتمل Defold على نظام واجهة مستخدم تصويرية يستند إلى مفهوم ملفات المشهد في واجهة المستخدم الرسومية. تتضمن ملفات مشهد واجهة المستخدم الرسومية كائنات تسمى العُقد التي تحدد عناصر واجهة المستخدم الفردية مثل الصور أو النص.

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

إحداثيات نظام واجهة المستخدم الرسومية

تحدّد كائنات الألعاب normal Defold إحداثياتها في الفضاء. يحوِّل كائن الكاميرا الفضاء من العالم إلى مساحة شاشة ويعرض عناصر اللعبة التي تقع ضمن العرض الافتراضي الحالي للكاميرا. يستخدم نظام واجهة المستخدم الرسومية كاميرا منفصلة خاصة به. تستخدم العُقد التي تنتمي إلى مشهد واجهة المستخدم الرسومية إحداثيات مساحة الشاشة بدلاً من إحداثيات الفضاء العالمي. عندما تختلف درجة دقة العرض عن درجة الدقة الأساسية للمشروع المستخدَمة في تخطيط عُقد واجهة المستخدم الرسومية، يمكن أن يؤدي ذلك إلى اختلاف هوامش العُقد بالنسبة إلى حواف الشاشة أو حواف العقدة الرئيسية. يحتوي Defold على خيارات متعددة لإجراء تعديلات على تخطيط واجهة المستخدم الرسومية لمراعاة الاختلافات في دقة العرض.

عُقدة واجهة المستخدم الرسومية ونقاط ارتساء

يمكن تثبيت عُقد واجهة المستخدم التصويرية على حواف رأسية و/أو أفقية باستخدام خاصيتَي X Anchor وY Anchor.

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

يوضِّح ما يلي نموذجًا لمشهد به عُقدتَين من واجهة المستخدم الرسومية، رموز وحدة التحكّم في الزاويتَين السفليتَين اليسرى والعلوية. تحتوي كلتا العُقدتين على X Anchor وY Anchor تم ضبطهما على None:

نموذج لمشهد يتضمّن عناصر واجهة المستخدم الرسومية — **الشكل 10.** نموذج لمشهد يتضمّن عناصر واجهة المستخدم التصويرية

عند تغيير حجم الشاشة بدون علامة ارتساء، تحتفظ أيقونات وحدة التحكم بمواضعها بالنسبة إلى الدقة الأساسية:

نموذج المشهد الذي تم تغيير حجمه مع عناصر واجهة المستخدم التصويرية التي تم ضبط علامات ارتساء لها على "بدون علامات ارتساء" — **الشكل 11.** نموذج المشهد الذي تم تغيير حجمه ويتضمن عناصر واجهة المستخدم الرسومية التي تم ضبط علامات الارتساء لها على `None`

عند ضبط Y ارتساء للعقدة السفلية اليسرى على BottomTop

نموذج مشهد تم تغيير حجمه ويتضمن عناصر واجهة المستخدم الرسومية التي تم ضبط علامات الارتساء لها على الحواف — **الشكل 12.** نموذج المشهد الذي تم تغيير حجمه مع عناصر واجهة المستخدم الرسومية التي تم ضبط علامات ارتساء لها على `Edges`

تحدد الخاصية Pivot لعقدة واجهة المستخدم الرسومية النقطة على مستطيل حدود العقدة الذي يتوافق مع خاصية Position في مساحة الشاشة. يتم ضبط عُقد واجهة المستخدم الرسومية تلقائيًا على الإعداد Center، مع وضع نقطة موضعها في المنتصف المباشر لمستطيل الحدود. تتضمن إعدادات المحوري المحتملة الأخرى الاتجاهات الأساسية الأربعة بالإضافة إلى الأشكال القطرية الأربعة. يمكن للخاصية Pivot تبسيط مواصفات مساحات الهوامش عند استخدامها بالاقتران مع السمتَين X Anchor وY Anchor.

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

عقدة GUI مع ضبط المحور على "مركز" — **الشكل 13.** عقدة واجهة مستخدم تصويرية تم ضبط **المحوري** على `Center`

يؤدي تغيير المحوري إلى South West إلى إجراء التعديل التالي:

عقدة GUi مع ضبط المحور على الجنوب الغربي — **الشكل 14.** عقدة واجهة مستخدم تصويرية تم ضبط **المحوري** على `South West`

أوضاع ضبط عقدة واجهة المستخدم الرسومية

يمكن تغيير حجم عُقد واجهة المستخدم الرسومية عندما تختلف درجة دقة العرض عن دقة المشروع الأساسي. تتحكم خاصية الوضع ضبط في سلوك التحجيم لمحتوى العقدة. يتضمن وضع الضبط ثلاثة إعدادات: Fit وZoom و Stretch.

Fit

يحافظ الإعداد Fit على نسبة العرض إلى الارتفاع لمحتوى العقدة. ويتم قياس المحتوى ليطابق إما عرض مستطيل حدود العقدة التي تم تغيير حجمها أو ارتفاعها. المحور المختار هو المحور الأصغر. يضمن هذا ملاءمة المحتوى داخل مستطيل الحدود مع نسبة العرض إلى الارتفاع الأصلية.

Zoom

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

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

عُقدتان لواجهة المستخدم الرسومية بإعدادات مختلفة لوضع الضبط — **الشكل 15.** عقدتا واجهة مستخدم تصويرية بإعدادات مختلفة **لضبط الوضع**

قائمة تشغيل لتمارين الإطالة

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

تخطيطات واجهة المستخدم الرسومية

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