الحفاظ على واجهة المستخدم أو HUD في مكان
في كثير من الأحيان اللعبة لديه عناصر واجهة المستخدم (ويعرف أيضا باسم هود) مثل الصحة، ذخيرة أو غيرها من المعلومات التي يجب أن تكون دائما في نفس المكان على الشاشة.
لوضع هذا الأمر، وخلق طبقة جديدة ومجموعتها المنظر إلى 0،0. إذا كنت تريد ان تكف عن التوسع واجهة المستخدم مع اللعبة، تعيين معدل حجمها 0 كذلك.
[جعل طبقة واجهة المستخدم.] [9]
تأكد من وضعها كافة الكائنات واجهة المستخدم الخاصة بك على هذه الطبقة. الموقف منها في الجزء العلوي الأيسر من التخطيط، داخل مستطيل متقطع الذي يمثل مساحة النافذة. الآن يجب عليهم البقاء في نفس المكان على الشاشة، مثل "النتيجة" نص على الصور في الصفحة السابقة.
ومرساة السلوك
إذا كنت تضع الكائن في الجزء السفلي الأيمن من النافذة وتغيير حجم النافذة، ستلاحظ أنه لا يتحرك. لحملها على البقاء بالنسبة إلى الجزء السفلي الأيمن من نافذة مرئية، يمكنك استخدام السلوك مرساة ، إلى "ترسيخ" إلى موضع على الشاشة.
[السلوك مرساة] [10]
ملاحظة المقصود سلوك مرساة لاستخدامها في الكائنات على طبقة غير التمرير - وهذا هو، مع المنظر تعيين ل 0، 0 كما هو موضح أعلاه.
عن طريق وضع حافة اليسار والحافة اليمنى إلى النافذة اليمنى أو نافذة أسفل يمكنك محاذاة الكائنات مع إما الحافة اليمنى من النافذة، الحافة السفلية، أو الجزء السفلي الزاوية اليمنى. من قبل كائنات افتراضية تتلاءم مع الإطار الأيسر العلوي.
إذا كان لديك تحكم النموذج أو الأشياء الأخرى التي ترغب في الحصول على أوسع أو أطول كما يحصل نافذة أكبر، يمكنك أيضا ترسيخ الحافة اليمنى وحافة أسفل. ومع ذلك، إذا كنت لا تريد وجوه الخاص بك لتغيير حجم، وترك لهم على حد سواء مجموعة ل لا شيء .
أخرى مفيدة الميزات
و WindowWidth و WindowHeight تعبيرات النظام إرجاع الحجم الحالي للنافذة في بكسل. قد ترغب في إخفاء أو إظهار كائنات اعتمادا على حجم النافذة، وتمكين ميزات مختلفة للشاشات الصغيرة جدا، أو إظهار نوع مختلف من واجهة المستخدم لشاشات كبيرة جدا.
و ViewportLeft ، ViewportRight ، ViewportTop و ViewportBottom تعبيرات النظام يمكن إرجاع تنسق من منفذ العرض لطبقة معينة. لتوسيط كائن في العرض، فأنت تريد لوضعه ل (ViewportLeft ("طبقة") + ViewportRight ("طبقة")) / 2 و (ViewportTop ("طبقة") + ViewportBottom ("طبقة" )) / 2 .
أيضا، مع ملء الشاشة في وضع التحجيم، قد تجد حدود تخطيط يسبب مشاكل مع التمرير. في هذه الحالة قد تحتاج إلى محاولة وضع التمرير غير محدود إلى نعم للتخطيط، والحد من التمرير نفسك (مثلا المحيطة تخطيط مع الأجسام الصلبة).
التحول إلى ملء الشاشة خلال المباراة
و[كائن متصفح] [12] لديه ملء الشاشة طلب العمل. وهذا يمكن أيضا إدخال ملء الشاشة عندما يتم ملء الشاشة في المتصفح إيقاف (عندما تظهر اللعبة مضمنة في صفحة HTML). لديك أيضا خيار ببساطة تتمحور، أو استخدام المحاصيل، وعلى نطاق وحجم الرسائل أو الرسائل على نطاق وصحيح تغيير حجم وسائط لملء الشاشة بأكملها. هذه تتوافق مع ملء الشاشة في إعدادات متصفح . عندما تفعل هذا لعبتك حجم النافذة سوف تتغير أيضا، لذلك فمن المهم لدعم أحجام الشاشة متعددة عند استخدام هذا.
لاحظ أنه لأسباب أمنية و طلب ملء الشاشة العمل يعمل فقط في الحدث إدخالها المستخدم، مثل الضغط على مفتاح على لوحة المفاتيح أو النقر فوق كائن زر.
تأكد من اختبار!
يجب اختبار اللعبة على مجموعة متنوعة من الأجهزة لنرى كيف أنها تعمل بشكل جيد. انها شائعة لتغيير نوع من واجهة المستخدم التي يتم عرضها تبعا لحجم النافذة. هذا يمكن أن يكون الكثير من العمل لاقامة. بدلا من ذلك، لعبة بسيطة كنت قد تكون قادرة على الحصول على نفس واجهة المستخدم يعمل على جميع الأحجام الشاشة. ذلك يعتمد على اللعبة.
يمكنك أيضا اختبار أكثر من واي فاي أو الشبكة المحلية عن طريق [معاينة على شبكة محلية] [11]. هذا يمكن أن تجعل من أسرع بكثير وأسهل للحصول على انها تعمل الحق على أجهزة حقيقية.
أكبر حجم العرض هو 2048 x 1536 على الجيل الثالث باد، و أصغر خلية هو حول حجم 320 × 480 آيفون 3 والإصدارات السابقة. بحيث لا بأس به مجموعة! تأكد من محاولة كل منهم للخروج. كنت لا تريد لعبتك غير قابل للعب على بعض شاشات لأن الأزرار قد اختفت أو أصبحت صغيرة جدا للضغط!
[1] [http://www.scirra.com/tutorials/71/how-to-make-native-phone-apps-with-construct-2-and-phonegap]
[2] [http://www.scirra.com/tutorials/43/making-an-ios-web-app-with-construct-2]
[3] [http://www.scirra.com/images/articles/fullscreeninbrowser_2.png]
[4] [http://www.scirra.com/images/articles/fullscreencrop1.png]
[5] [http://www.scirra.com/images/articles/fullscreencrop2.png]
[6] [http://www.scirra.com/images/articles/fullscreenscale1.png]
[7] [http://www.scirra.com/images/articles/fullscreenscale2.png]
[8] [http://www.scirra.com/images/articles/scalingmode.png]
[9] [http://www.scirra.com/images/articles/uilayer.png]
[10] [http://www.scirra.com/images/articles/anchorbehavior.png]
[11] [http://www.scirra.com/tutorials/247/how-to-preview-on-a-local-network]
[12] [http://www.scirra.com/manual/110/browser]
[13] [http://www.scirra.com/images/articles/fullscreenproperty.png]
[14] [http://www.scirra.com/manual/110/browser]
[15] [http://www.scirra.com/images/articles/scalemodeaspectwrong.png]
[16] [http://www.scirra.com/images/articles/letterboxscalemode.png]
[17] [http://www.scirra.com/images/articles/letterboxscalemode2.png]
[18] [http://www.scirra.com/images/articles/letterboxintegerscale1.png]
[19] [http://www.scirra.com/images/articles/letterboxintegerscale2.png]
[20] [http://www.scirra.com/images/articles/letterboxthinbars.png]
[21] [https://www.scirra.com/images/articles/scaleinner1.jpg]
[22] [https://www.scirra.com/images/articles/scaleinner2.jpg]