कई तरह के नाप या आकार और स्क्रीन साइज़ के साथ काम किया जा सकता है

इस विषय में, Android गेम डेवलपमेंट के लिए Godot का इस्तेमाल करते समय, अलग-अलग फ़ॉर्म फ़ैक्टर और स्क्रीन साइज़ के लिए सहायता पाने का तरीका बताया गया है.

Android डिवाइस कई अलग-अलग नाप या आकार और स्क्रीन साइज़ में आते हैं. सामान्य कैटगरी में ये शामिल हैं:

  • मोबाइल फ़ोन
  • टैबलेट
  • टेलीविज़न और टेलीविज़न सेट-टॉप बॉक्स
  • Android Runtime for Chrome की सुविधा वाले लैपटॉप

इसका मतलब है कि आपके गेम को अलग-अलग स्क्रीन रिज़ॉल्यूशन पर चलाया जाएगा. इन स्क्रीन रिज़ॉल्यूशन के आसपेक्ट रेशियो अक्सर अलग-अलग होते हैं. उदाहरण के लिए:

  • लैंडस्केप ओरिएंटेशन में मौजूद फ़ोन, जिसका आसपेक्ट रेशियो 19:9 (2280x1080) है
  • लैंडस्केप ओरिएंटेशन में मौजूद एक अलग फ़ोन, जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 20:9 (3200x1400) है
  • 16:9 आसपेक्ट रेशियो (1920x1080) वाला 1080 पिक्सल का हाई डेफ़िनिशन टेलीविज़न
  • 4:3 आसपेक्ट रेशियो (2048x1536) वाला टैबलेट

आपके गेम के डिज़ाइन में इन अंतरों को ध्यान में रखा जाना चाहिए, ताकि यह पक्का किया जा सके कि स्क्रीन रिज़ॉल्यूशन, डिवाइस के आसपेक्ट रेशियो, और उपयोगकर्ता के इनपुट के तरीके से कोई फ़र्क़ न पड़े.

डिसप्ले का रिज़ॉल्यूशन

Godot, स्क्रीन रिज़ॉल्यूशन और साइज़ को पिक्सल का इस्तेमाल करके तय करता है. हमारा सुझाव है कि आप अपने Godot प्रोजेक्ट के लिए, स्टैंडर्ड बेस रिज़ॉल्यूशन सेट करें. Godot में ऐसी सेटिंग होती हैं जिनकी मदद से, डिसप्ले रिज़ॉल्यूशन के प्रोजेक्ट के बेस रिज़ॉल्यूशन से अलग होने पर, व्यवहार को कंट्रोल किया जा सकता है.

बेस रिज़ॉल्यूशन सेट करना

किसी प्रोजेक्ट के लिए बुनियादी रिज़ॉल्यूशन सेट करने के लिए, Godot एडिटर में प्रोजेक्ट खोलें और यह तरीका अपनाएं:

  1. Godot मेन्यू बार में जाकर, Project -> Project Settings… चुनें.
  2. प्रोजेक्ट की सेटिंग विंडो में, कैटेगरी टैब में मौजूद डिस्प्ले सूची ढूंढें. इसके बाद, विंडो आइटम चुनें.
  3. साइज़ कैटगरी में जाकर, चौड़ाई और ऊंचाई फ़ील्ड को पिक्सल में मेज़र किए गए, मनमुताबिक बेस रिज़ॉल्यूशन पर सेट करें.
Godot की चौड़ाई और ऊंचाई की प्रोजेक्ट सेटिंग
पहली इमेज. प्रोजेक्ट सेटिंग में मौजूद चौड़ाई और ऊंचाई फ़ील्ड

Godot एडिटर को 2D व्यू पर सेट करने पर, यह बेस रिज़ॉल्यूशन के हिसाब से गाइड रेक्टैंगल दिखाएगा. बेस रिज़ॉल्यूशन का इस्तेमाल, प्रोजेक्ट या सीन को एडिटर से चलाने पर प्रोजेक्ट विंडो के डिफ़ॉल्ट डाइमेंशन के तौर पर किया जाता है.

Godot एडिटर के 2D व्यू में बेस रिज़ॉल्यूशन वाला आयत
दूसरी इमेज. Godot एडिटर के 2D व्यू में बेस रिज़ॉल्यूशन वाला रेक्टैंगल. इसमें बेस रिज़ॉल्यूशन को 640x360 पिक्सल पर सेट किया गया है

स्ट्रेच करने की सेटिंग

डिसप्ले रिज़ॉल्यूशन से अलग होने पर, बेस रिज़ॉल्यूशन को कैसे अडजस्ट किया जाता है, यह दो सेटिंग से कंट्रोल होता है: स्ट्रेच मोड और स्ट्रेच ऐस्पेक्ट. ये सेटिंग, प्रोजेक्ट सेटिंग विंडो में, डिसप्ले -> विंडो सेक्शन में मौजूद होती हैं.

Godot स्ट्रेच प्रोजेक्ट सेटिंग
तीसरी इमेज. प्रोजेक्ट सेटिंग में मौजूद स्ट्रेच मोड और स्ट्रेच ऐस्पेक्ट फ़ील्ड

स्ट्रेच मोड में तीन सेटिंग होती हैं: disabled, 2d, और viewport. अगले सेक्शन में, स्ट्रेच आसपेक्ट और स्ट्रेच मोड की अलग-अलग सेटिंग के विज़ुअल उदाहरण दिए गए हैं. सभी उदाहरणों में, प्रोजेक्ट के लिए 320x180 पिक्सल का बेस रिज़ॉल्यूशन इस्तेमाल किया गया है.

disabled सेटिंग से, वीडियो के मूल रिज़ॉल्यूशन का साइज़ नहीं बदलता है और न ही उसे अडजस्ट किया जाता है. अगर स्ट्रेच मोड को disabled पर सेट किया जाता है, तो स्ट्रेच ऐस्पेक्ट की वैल्यू को हमेशा अनदेखा किया जाता है.

डिसप्ले का रिज़ॉल्यूशन 320x180 होने पर, स्ट्रेच मोड बंद हो जाता है
चौथी इमेज. स्ट्रेच मोड disabled, जिसका डिसप्ले रिज़ॉल्यूशन 320x180 है

अगर डिसप्ले का रिज़ॉल्यूशन, बेस रिज़ॉल्यूशन से कम है, तो नीचे और/या दाईं ओर के किनारे कट जाते हैं.

डिसप्ले रिज़ॉल्यूशन 256x128 होने पर स्ट्रेच मोड बंद हो जाता है
पांचवीं इमेज. स्ट्रेच मोड disabled डिसप्ले रिज़ॉल्यूशन 256x128 के साथ

अगर डिसप्ले रिज़ॉल्यूशन, बेस रिज़ॉल्यूशन से ज़्यादा है, तो अतिरिक्त क्षेत्र को खाली छोड़ दिया जाता है.

डिसप्ले रिज़ॉल्यूशन 512x256 होने पर स्ट्रेच मोड बंद हो जाता है
छठी इमेज. स्ट्रेच मोड disabled में डिसप्ले रिज़ॉल्यूशन 512x256

2d सेटिंग, बेस रिज़ॉल्यूशन को डिसप्ले रिज़ॉल्यूशन के हिसाब से स्केल करती है. 2D आर्टवर्क का इस्तेमाल करने वाले प्रोजेक्ट के लिए, इससे आर्टफ़ैक्ट को स्केल करने में समस्याएं आती हैं. ऐसा इसलिए होता है, क्योंकि अब बेस और डिसप्ले रिज़ॉल्यूशन के बीच 1:1 पिक्सल रेशियो नहीं होता. यह सेटिंग, ज़्यादा रिज़ॉल्यूशन वाले कुछ ऐसे आर्टवर्क के लिए सही हो सकती है जिनमें पिक्सल-परफ़ेक्ट रेंडरिंग की ज़रूरत नहीं होती.

स्ट्रेच ऐस्पेक्ट सेटिंग, स्केलिंग पर लागू होने वाली उन पाबंदियों के बारे में बताती है जिनकी मदद से, मूल रिज़ॉल्यूशन के आसपेक्ट रेशियो को बनाए रखा जा सकता है. स्ट्रेच आसपेक्ट सेटिंग के विकल्पों के बारे में, आसपेक्ट रेशियो सेक्शन में बताया गया है. यहां ignore के स्ट्रेच ऐस्पेक्ट का इस्तेमाल करके, 2d स्ट्रेच मोड सेटिंग के उदाहरण दिए गए हैं. यह बिना किसी रुकावट के डिसप्ले रिज़ॉल्यूशन के हिसाब से स्केल होता है:

256x128 के डिसप्ले रिज़ॉल्यूशन वाला स्ट्रेच मोड 2D
सातवीं इमेज. स्ट्रेच मोड 2d, जिसका डिसप्ले रिज़ॉल्यूशन 256x128 है
512x256 के डिसप्ले रिज़ॉल्यूशन के साथ 2D स्ट्रेच मोड
आठवां डायग्राम. स्ट्रेच मोड 2d में डिसप्ले रिज़ॉल्यूशन 512x256

viewport सेटिंग, रूट सीन के Viewport को बेस रिज़ॉल्यूशन पर सेट करती है. इसके बाद, रेंडर किए गए रूट Viewport के आउटपुट को डिसप्ले रिज़ॉल्यूशन के हिसाब से स्केल किया जाता है. Godot Viewport ऑब्जेक्ट का इस्तेमाल, स्क्रीन में व्यू बनाने या किसी अन्य Viewport के अंदर सबव्यू बनाने के लिए किया जाता है. 2d सेटिंग के उलट, viewport सेटिंग डिसप्ले रिज़ॉल्यूशन के हिसाब से इमेज को स्केल करते समय फ़िल्टरिंग लागू नहीं करती है. viewport सेटिंग, स्ट्रेच ऐस्पेक्ट की वैल्यू का इस्तेमाल यह तय करने के लिए भी करती है कि ऐस्पेक्ट रेशियो को बनाए रखने के लिए, स्केलिंग पर पाबंदियां लागू की गई हैं या नहीं. जब पिक्सल-परफ़ेक्ट सटीक इमेज की ज़रूरत हो, तब viewport सेटिंग, 2d सेटिंग से बेहतर विकल्प है. ऐसा इसलिए, क्योंकि प्राइमरी रेंडरिंग अब भी बेस रिज़ॉल्यूशन पर होती है. यहां viewport स्ट्रेच मोड सेटिंग के उदाहरण दिए गए हैं. इनमें ignore के स्ट्रेच ऐस्पेक्ट का इस्तेमाल किया गया है:

स्ट्रेच मोड वाला व्यूपोर्ट, जिसका डिसप्ले रिज़ॉल्यूशन 256x128 है
नौवीं इमेज. स्ट्रेच मोड viewport, डिसप्ले रिज़ॉल्यूशन 256x128
स्ट्रेच मोड वाला व्यूपोर्ट, जिसका डिसप्ले रिज़ॉल्यूशन 512x256 है
दसवीं इमेज. स्ट्रेच मोड viewport में डिसप्ले रिज़ॉल्यूशन 512x256

आसपेक्ट रेशियो

स्ट्रेच ऐस्पेक्ट में, आसपेक्ट रेशियो को स्केल करने की सीमाओं के लिए कई विकल्प होते हैं. अगर स्ट्रेच ऐस्पेक्ट को ignore पर सेट किया जाता है, तो कोई भी शर्त लागू नहीं होती. आस्पेक्ट रेशियो को स्ट्रेच करें विकल्प को keep पर सेट करने पर, बेस रिज़ॉल्यूशन को डिसप्ले रिज़ॉल्यूशन में फ़िट होने वाले सबसे बड़े डाइमेंशन के हिसाब से स्केल किया जाता है. हालांकि, ऐसा करते समय ओरिजनल आस्पेक्ट रेशियो को बनाए रखा जाता है. डिस्प्ले के जिन हिस्सों में स्केल की गई इमेज नहीं दिखती है वहां काले रंग की पट्टियां दिखती हैं. आस्पेक्ट रेशियो में अंतर के मुख्य डाइमेंशन के आधार पर, बार या तो हॉरिज़ॉन्टल बार होंगे, जिन्हें लेटरबॉक्स कहा जाता है या वर्टिकल बार होंगे, जिन्हें पिलरबॉक्स कहा जाता है.

स्ट्रेच मोड वाला व्यूपोर्ट, स्ट्रेच ऐस्पेक्ट कीप, और डिसप्ले रिज़ॉल्यूशन 384x256
ग्यारहवीं इमेज. स्ट्रेच मोड viewport, स्ट्रेच ऐस्पेक्ट keep, डिसप्ले रिज़ॉल्यूशन 384x256
स्ट्रेच मोड वाला व्यूपोर्ट, स्ट्रेच आसपेक्ट कीप, और डिसप्ले रिज़ॉल्यूशन 512x200
इमेज 12. स्ट्रेच मोड viewport, स्ट्रेच आसपेक्ट keep, डिसप्ले रिज़ॉल्यूशन 512x200

आस्पेक्ट स्ट्रेच में, keep सेटिंग के दो वैरिएंट शामिल हैं: keep_width और keep_height. keep_width सेट होने पर, अगर डिसप्ले रिज़ॉल्यूशन का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), बेस रिज़ॉल्यूशन से ज़्यादा है, तो पिलरबॉक्सिंग जोड़ दी जाती है. हालांकि, अगर डिसप्ले रिज़ॉल्यूशन का आसपेक्ट रेशियो, बेस रिज़ॉल्यूशन से ज़्यादा है, तो अतिरिक्त जगह खाली छोड़ दी जाती है. खाली जगह, स्क्रीन के सबसे नीचे दिखती है.

स्ट्रेच मोड वाला व्यूपोर्ट, स्ट्रेच ऐस्पेक्ट keep_width, और डिसप्ले रिज़ॉल्यूशन 512x384
13वीं इमेज. स्ट्रेच मोड viewport, स्ट्रेच ऐस्पेक्ट keep_width, और डिसप्ले रिज़ॉल्यूशन 512x384

keep_height सेटिंग, वर्टिकल के बजाय हॉरिज़ॉन्टल दिशा में काम करती है. खाली जगह, स्क्रीन की दाईं ओर दिखती है.

स्ट्रेच मोड व्यूपोर्ट, स्ट्रेच आसपेक्ट कीप_हाइट, डिसप्ले रिज़ॉल्यूशन 512x200 के साथ
चौदहवीं इमेज. स्ट्रेच मोड viewport, स्ट्रेच आसपेक्ट keep_height, डिसप्ले रिज़ॉल्यूशन 512x200

स्ट्रेच ऐस्पेक्ट की आखिरी सेटिंग expand है. expand सेटिंग, मूल रिज़ॉल्यूशन के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखती है. हालांकि, यह लेटरबॉक्स या पिलरबॉक्स करने के बजाय, अतिरिक्त हिस्से को खाली छोड़ देती है.

स्ट्रेच मोड व्यू पोर्ट, स्ट्रेच आसपेक्ट एक्सपैंड, डिसप्ले रिज़ॉल्यूशन 384x256 के साथ
15वीं इमेज. स्ट्रेच मोड viewport, स्ट्रेच ऐस्पेक्ट expand, डिसप्ले रिज़ॉल्यूशन 384x256
स्ट्रेच मोड वाला व्यू पोर्ट, स्ट्रेच ऐस्पेक्ट एक्सपैंड, और डिसप्ले रिज़ॉल्यूशन 512x256
16वां डायग्राम. स्ट्रेच मोड viewport, स्ट्रेच ऐस्पेक्ट expand, डिसप्ले रिज़ॉल्यूशन 512x256

ऐंकर

एक से ज़्यादा स्क्रीन रिज़ॉल्यूशन के साथ काम करने के लिए, यूज़र इंटरफ़ेस (यूआई) एलिमेंट की पोज़िशन तय करते समय कुछ और बातों का ध्यान रखना ज़रूरी होता है. उदाहरण के लिए, किसी कंट्रोल को ऊपर दाएं कोने में रखने के लिए, ऐब्सलूट पिक्सल कोऑर्डिनेट का इस्तेमाल करने पर, अलग-अलग हॉरिज़ॉन्टल रिज़ॉल्यूशन वाले डिवाइसों पर कंट्रोल की पोज़िशन अलग-अलग होती है. Godot का यूज़र इंटरफ़ेस (यूआई) सिस्टम, Anchor और Margin प्रॉपर्टी के साथ रिलेटिव पोज़िशनिंग की सुविधा देता है. यूज़र इंटरफ़ेस (यूआई) एलिमेंट की Anchor प्रॉपर्टी, उसके पैरंट कंट्रोल ऑब्जेक्ट या व्यूपोर्ट पर ऐंकर पॉइंट तय करती हैं. इसके बाद, Margin प्रॉपर्टी की वैल्यू का इस्तेमाल करके, कंट्रोल को उसके ऐंकर पॉइंट से ऑफ़सेट किया जाता है.

अगर किसी ऑब्जेक्ट में Anchor और Margin प्रॉपर्टी शामिल करनी हैं, तो उसे Godot Control ऑब्जेक्ट से डिराइव किया जाना चाहिए. Godot के स्टैंडर्ड यूज़र इंटरफ़ेस (यूआई) के सभी एलिमेंट, Control से मिलते हैं. Godot एडिटर में Control डिराइव किया गया ऑब्जेक्ट चुनने पर, Anchor और मार्जिन के लिए प्रॉपर्टी फ़ील्ड, Inspector टैब में दिखते हैं.

इंस्पेक्टर में ऐंकर और मार्जिन प्रॉपर्टी के साथ चुना गया बटन कंट्रोल
17वीं इमेज. Button कंट्रोल चुना गया है. साथ ही, इंस्पेक्टर में ऐंकर और मार्जिन प्रॉपर्टी दिख रही हैं

Godot में Layout टूल होता है. इसकी मदद से, Anchor, Margin, और Size प्रॉपर्टी को अक्सर इस्तेमाल की जाने वाली प्रीसेट वैल्यू पर तुरंत सेट किया जा सकता है. एडिटर में Control से बनाया गया ऑब्जेक्ट चुनने पर, सीन व्यू के ऊपर मौजूद टूलबार में लेआउट ड्रॉप-डाउन मेन्यू उपलब्ध होता है. लेआउट टूल के प्रीसेट में, पोज़िशनिंग और साइज़ के साथ पोज़िशनिंग शामिल होती है. पोजीशनिंग के प्रीसेट, इन जैसे इस्तेमाल के उदाहरणों के साथ काम करते हैं: बीच में, ऊपर-दाईं ओर, बीच में-बाईं ओर. पोजीशनिंग प्लस साइज़ के प्रीसेट में, इस्तेमाल के उदाहरण शामिल होते हैं. जैसे, पैरंट की पूरी चौड़ाई में फैले हुए कॉन्टेंट को सबसे नीचे ऐंकर करना.

Godot एडिटर लेआउट का ड्रॉप-डाउन मेन्यू
18वीं इमेज. Godot एडिटर के लेआउट ड्रॉप-डाउन मेन्यू

ऐंकर, सामान्य इस्तेमाल के मामलों के लिए सही होते हैं. जैसे, हेड-अप डिसप्ले, स्क्रीन पर दिखने वाले प्रॉम्प्ट या बुनियादी डायलॉग बॉक्स. Godot का कंटेनर सिस्टम, ज़्यादा बेहतर यूज़र इंटरफ़ेस (यूआई) लेआउट के लिए बनाया गया है. जैसे, जब बड़ी संख्या में कंट्रोल वाली विंडो या डायलॉग दिखाए जाते हैं या जब कॉन्टेंट का साइज़ डाइनैमिक तरीके से बदला जाता है.

दिखाई देने वाला क्षेत्र

Godot में फ़ील्ड ऑफ़ व्यू की सेटिंग होती हैं. इनकी मदद से, अलग-अलग आसपेक्ट रेशियो में 3D सीन को कंट्रोल किया जा सकता है. व्यू के फ़ील्ड में किए जाने वाले बदलावों को, Camera ऑब्जेक्ट की Keep Aspect प्रॉपर्टी की मदद से कंट्रोल किया जाता है. Keep Height की डिफ़ॉल्ट वैल्यू, लैंडस्केप ओरिएंटेशन में चलने वाले प्रोजेक्ट के लिए होती है. Keep Height, बेस रिज़ॉल्यूशन और डिसप्ले रिज़ॉल्यूशन के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में अंतर होने पर, फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) को ज़्यादा या कम कर देता है. Keep Width सेटिंग, पोर्ट्रेट ओरिएंटेशन में चलने वाले प्रोजेक्ट के लिए बेहतर विकल्प है. Keep Width आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में अंतर के आधार पर, फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) को लंबा या छोटा करता है.

व्यूपोर्ट कंट्रोल

Viewport ऑब्जेक्ट की मदद से, आसपेक्ट रेशियो और स्केलिंग को बेहतर तरीके से कंट्रोल किया जा सकता है. प्रोजेक्ट, व्यूपोर्ट का इस्तेमाल करके ये कार्रवाइयां कर सकते हैं:

  • किसी सीन को उसके मूल रिज़ॉल्यूशन के आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) में रेंडर करना. इसमें रिज़ॉल्यूशन से अलग बॉर्डर होता है.
  • परफ़ॉर्मेंस को बेहतर बनाने के लिए, 3D सीन को कम रिज़ॉल्यूशन में रेंडर करना और उसे नेटिव रिज़ॉल्यूशन में अपस्केल करके दिखाना.
  • वीआर ऐप्लिकेशन के लिए, किसी सीन के बाएं और दाएं आंखों के व्यू को रेंडर करना.
  • डाइनैमिक टेक्सचर जनरेट किए जा रहे हैं.

व्यूपोर्ट ऑब्जेक्ट का इस्तेमाल करने का तरीका बताने वाले सैंपल के लिए, Godot व्यूपोर्ट सैंपल देखें.

उपयोगकर्ता का इनपुट

कुछ गेम डिज़ाइन, Android के साथ काम करने वाले हर इनपुट मोड के साथ काम नहीं करते. जिन गेम में मल्टी-टच जेस्चर की सुविधा काम करती है उनमें अक्सर माउस और गेम कंट्रोलर से इनपुट देने की सुविधा जोड़ने में समस्याएं आती हैं. गेम कंट्रोलर के इनपुट के हिसाब से डिज़ाइन किए गए गेम में, टच कंट्रोल को असरदार तरीके से लागू करने में समस्या आ सकती है. Godot इन सभी तरह के इनपुट को सपोर्ट करता है. हालांकि, आपको डेवलपमेंट के शुरुआती दौर में ही यह तय कर लेना चाहिए कि आपको अपने प्रोजेक्ट में कौनसे इनपुट मेथड इस्तेमाल करने हैं. इसके बाद, उसी के हिसाब से डिज़ाइन करें.

जिन प्रोजेक्ट में टच और माउस इनपुट का इस्तेमाल एक-दूसरे की जगह किया जा सकता है उनके लिए Godot में प्रॉक्सी विकल्प शामिल होते हैं. ये विकल्प, माउस इवेंट से टच इवेंट और इसके उलट इवेंट जनरेट करते हैं. इन विकल्पों की मदद से, माउस और टच इवेंट के लिए अलग-अलग इनपुट हैंडलिंग कोड लिखने की ज़रूरत नहीं होती. उपलब्ध विकल्प ये हैं: माउस से टच को एम्युलेट करें और टच से माउस को एम्युलेट करें. ये दोनों विकल्प, इनपुट डिवाइस -> पॉइंटिंग सेक्शन में मौजूद प्रोजेक्ट सेटिंग में होते हैं.

इनपुट डिवाइसों के लिए Godot प्रोजेक्ट सेटिंग
19वीं इमेज. प्रोजेक्ट सेटिंग में मौजूद, इनपुट डिवाइस -> पॉइंटिंग सेटिंग

अन्य संसाधन