تتوفر أجهزة Android بمجموعة متنوعة من أشكال الأجهزة وأحجام الشاشات. تشمل الفئات الشائعة ما يلي:
- هواتف جوّالة
- الأجهزة اللوحية
- أجهزة التلفزيون وأجهزة الاستقبال الرقمية
- أجهزة الكمبيوتر المحمولة التي تعمل بنظام التشغيل Android في Chrome
يعني هذا التنوع أنّ لعبتك سيكون لها مجموعة من درجات الدقة المختلفة للشاشة، وغالبًا ما تكون نسب العرض إلى الارتفاع مختلفة فيها. مثلاً:
- هاتف في الاتجاه الأفقي بنسبة عرض إلى ارتفاع تبلغ 19:9 (2280×1080)
- هاتف مختلف في الاتجاه الأفقي بنسبة عرض إلى ارتفاع تبلغ 20:9 (3200×1400)
- تلفزيون عالي الدقة 1080p مع نسبة عرض إلى ارتفاع تبلغ 16:9 (1920×1080)
- جهاز لوحي بنسبة عرض إلى ارتفاع 4:3 (2048×1536)
ويجب أن يأخذ تصميم لعبتك في الاعتبار هذه الاختلافات لضمان العرض الصحيح للّعبة بغض النظر عن درجة دقة الشاشة أو نسبة العرض إلى الارتفاع في الجهاز.
توفير أوضاع العرض
مشروع DeFold دقة أساسية قابلة للضبط. يتم ضبط درجة الدقة في ملف game.project
باستخدام حقلي العرض والارتفاع في فئة العرض.
![إعدادات عرض المشروع تدريجيًا](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_settings.png?authuser=7&hl=ar)
السلوك التلقائي لتطبيق Defold هو العرض بدرجة الدقة الأساسية ثم تغيير حجم الصورة الناتجة إلى الدقة الفعلية للجهاز المستهدف. يشير Deold إلى هذا الوضع باسم عرض موسّع. لا يحافظ الإسقاط الممتد على نسبة العرض إلى الارتفاع الأصلية. قد تكون هذه الإعدادات التلقائية مقبولة لبعض الألعاب. يتضمن النص البرمجي العادي لعرض Defold خياري إسقاط إضافيين يحافظان على نسبة العرض إلى الارتفاع الأساسية: عرض مناسب ثابت وعرض ثابت.
يوضح المثال التالي مشروعًا تم تصميمه بدرجة دقة أساسية 480×272، معروض في محرر Defold.
في هذا المثال:
- يتم استخدام كائن خريطة المربعات لرسم إطار حول حدود درجة الدقة الأساسية.
- يوجد كائنان مدمجان وكائن نصي داخل حدود درجة الدقة الأساسية.
- توجد أربعة كائنات متحركة خارج حدود درجة الدقة الأساسية، فوقها وأسفلها وعلى يسارها وعلى يمينها.
![مثال على تنسيق عنصر المشروع](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_project.png?authuser=7&hl=ar)
عند تشغيله بدقة عرض 960×544، أي ضعف الدقة الأساسية بالضبط، يتم عرض المشروع على النحو التالي:
![مثال على مشروع بدقة أساسية 2x باستخدام إسقاط التمديد التلقائي](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_base.png?authuser=7&hl=ar)
العرض الموسّع
تعرض الأمثلة التالية نتائج تغيير حجم النافذة باستخدام إسقاط موسّع افتراضي، حيث لا يتم الاحتفاظ بنسبة العرض إلى الارتفاع:
![مثال لضغط المشروع أفقيًا باستخدام الإسقاط الممتد](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_stretch_small.png?authuser=7&hl=ar)
![مثال على مشروع تم تمديده أفقيًا باستخدام إسقاط التمدّد](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_stretch_large.png?authuser=7&hl=ar)
العرض الثابت
يحافظ وضع العرض ثابت على نسبة العرض إلى الارتفاع لدرجة الدقة الأساسية. بما أنّه يتم الاحتفاظ بنسبة العرض إلى الارتفاع، ستكون هناك مساحة إضافية للشاشة لا تغطيها درجة الدقة الأساسية التي تم قياسها. اعتمادًا على المحور الرئيسي لفرق نسبة العرض إلى الارتفاع، توجد هذه المساحة الإضافية إما في الجزء العلوي والسفلي أو على يسار ويمين الدقة الأساسية. سيؤدي الإسقاط الثابت إلى تعديل الدقة الأساسية لمراعاة هذه المنطقة. يؤدي هذا التعديل إلى عرض مناطق إضافية من مشهد اللعبة خارج منطقة درجة الدقة الأساسية التي يتم عرضها. يتم بعد ذلك تغيير حجم الصورة الناتجة إلى درجة دقة العرض.
توضح الأمثلة التالية عرض العرض الثابت التناسب إلى دقة العرض بنسبة عرض إلى ارتفاع مختلفة عن درجة الدقة الأساسية 480×272:
![مثال على مشروع بنسبة عرض إلى ارتفاع أوسع باستخدام إسقاط بملاءمة ثابتة](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_fixfit_letterbox.png?authuser=7&hl=ar)
![مثال على مشروع بنسبة عرض إلى ارتفاع أطول باستخدام إسقاط بشاشة ثابتة](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_fixfit_pillarbox.png?authuser=7&hl=ar)
عرض ثابت
يحافظ وضع الإسقاط الثابت على نسبة العرض إلى الارتفاع للدقة الأساسية ويضبط درجة الدقة الأساسية باستخدام عامل تكبير/تصغير محدد. بناءً على درجة دقة العرض وعامل التكبير/التصغير، قد يتم عرض مجموعة فرعية أو مجموعة كبيرة من منطقة الدقة الأساسية.
توضح الأمثلة التالية وضع العرض الثابت باستخدام دقة شاشة 644×408 مع عاملي تكبير 1x و2x على التوالي:
![مثال على مشروع بحجم 644×408 مع تكبير بمقدار 1x باستخدام إسقاط ثابت](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_fixed_1x.png?authuser=7&hl=ar)
![مثال على مشروع بحجم 644×408 مع تكبير بمقدار 2x باستخدام إسقاط ثابت](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_fixed_2x.png?authuser=7&hl=ar)
تغيير أوضاع العرض
يمكن تبديل وضع العرض النشط في وقت التشغيل من خلال إرسال الرسالة المناسبة إلى العارض. يتم إرسال هذه الرسائل باستخدام نظام رسائل 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
:
![نموذج لمشهد يتضمّن عناصر واجهة المستخدم الرسومية](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_gui_anchor_none.png?authuser=7&hl=ar)
عند تغيير حجم الشاشة بدون علامة ارتساء، تحتفظ أيقونات وحدة التحكم بمواضعها بالنسبة إلى الدقة الأساسية:
![نموذج المشهد الذي تم تغيير حجمه مع عناصر واجهة المستخدم التصويرية التي تم ضبط علامات ارتساء لها على "بدون علامات ارتساء"](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_gui_anchor_none_stretch.png?authuser=7&hl=ar)
None
عند ضبط Y ارتساء للعقدة السفلية اليسرى على Bottom
Top
![نموذج مشهد تم تغيير حجمه ويتضمن عناصر واجهة المستخدم الرسومية التي تم ضبط علامات الارتساء لها على الحواف](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_gui_anchor_edge.png?authuser=7&hl=ar)
Edges
تحدد الخاصية Pivot لعقدة واجهة المستخدم الرسومية النقطة على مستطيل حدود العقدة الذي يتوافق مع خاصية Position في مساحة الشاشة. يتم ضبط عُقد واجهة المستخدم الرسومية تلقائيًا على الإعداد Center
، مع وضع نقطة موضعها
في المنتصف المباشر لمستطيل الحدود. تتضمن إعدادات المحوري المحتملة الأخرى
الاتجاهات الأساسية الأربعة بالإضافة إلى الأشكال القطرية الأربعة. يمكن للخاصية Pivot تبسيط مواصفات مساحات الهوامش عند استخدامها بالاقتران مع السمتَين X Anchor وY Anchor.
في المثال التالي، تتضمّن عقدة واجهة المستخدم التصويرية لرمز وحدة التحكّم في أسفل يمين الصفحة
موضع 0,0
ومحوري تم ضبطهما على Center
.
![عقدة GUI مع ضبط المحور على "مركز"](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_pivot_center.png?authuser=7&hl=ar)
Center
يؤدي تغيير المحوري إلى South West
إلى إجراء التعديل التالي:
![عقدة GUi مع ضبط المحور على الجنوب الغربي](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_pivot_southwest.png?authuser=7&hl=ar)
South West
أوضاع ضبط عقدة واجهة المستخدم الرسومية
يمكن تغيير حجم عُقد واجهة المستخدم الرسومية عندما تختلف درجة دقة العرض عن دقة المشروع الأساسي. تتحكم خاصية الوضع ضبط في سلوك التحجيم لمحتوى العقدة. يتضمن وضع الضبط ثلاثة إعدادات: Fit
وZoom
و
Stretch
.
Fit
يحافظ الإعداد Fit
على نسبة العرض إلى الارتفاع لمحتوى العقدة. ويتم قياس المحتوى ليطابق إما عرض مستطيل حدود العقدة التي تم تغيير حجمها أو ارتفاعها. المحور المختار هو المحور الأصغر. يضمن هذا ملاءمة المحتوى داخل مستطيل الحدود مع نسبة العرض إلى الارتفاع الأصلية.
Zoom
يحافظ الإعداد Zoom
أيضًا على نسبة العرض إلى الارتفاع لمحتوى العقدة. مثل الإعداد Fit
، يضبط Zoom
المحتوى ليطابق إما عرض مستطيل الحدود الذي تم تغيير حجمها للعقدة أو ارتفاعها. على عكس Fit
، يستخدم Zoom
المحور الذي يضمّ
الفرق الأكبر عن الحجم الأصلي كهدف المطابقة. هذا يعني أن المحتوى الذي تم تغيير حجمه قد يتجاوز مستطيل الحدود.
في ما يلي مثال على عُقدتَين من واجهة المستخدم الرسومية بإعدادات ضبط الوضع
مختلفة. يتضمّن رمز وحدة التحكّم في أسفل يسار الشاشة وضع التعديل بقيمة Fit
، بينما يتضمّن رمز وحدة التحكّم في أعلى اليمين وضع التعديل بقيمة Zoom
.
![عُقدتان لواجهة المستخدم الرسومية بإعدادات مختلفة لوضع الضبط](https://developer.android.google.cn/static/images/games/engines/defold/Resolution_adjust_mode_fit_zoom.png?authuser=7&hl=ar)
قائمة تشغيل لتمارين الإطالة
يضبط الإعداد Stretch
محتوى العقدة لمطابقة مستطيل الحدود الذي تم تغيير حجمه تمامًا. ولن يتم الاحتفاظ بنسبة العرض إلى الارتفاع الأصلية.
تخطيطات واجهة المستخدم الرسومية
يحتوي Defold على طريقة بديلة لمواءمة تخطيطات واجهة المستخدم الرسومية مع درجات دقة الشاشة المختلفة: التخطيطات. يمكن إضافة التنسيقات إلى مشهد واجهة المستخدم الرسومية لإلغاء خصائص عقدة واجهة المستخدم الرسومية التلقائية. يرتبط التخطيط بدرجة دقة شاشة معينة. وعند توفر تخطيطات متعددة، سيختار Defold التنسيق الأكثر ملاءمة لدقة الشاشة الفعلية. يمكن إلغاء الموضع أو الحجم أو المقياس أو مورد الرسومات التلقائي الذي تستخدمه عقدة واجهة المستخدم الرسومية من خلال التنسيق.
مراجع إضافية
- Defold يدوي - مسار العرض
- Defold يدوي - مشاهد واجهة المستخدم التصويرية
- تعديل الدليل - تنسيقات واجهة المستخدم التصويرية