स्क्रीन के विभिन्न अनुपातों के लिए एक गेम इंटरफ़ेस का विकास

यह कोई रहस्य नहीं है कि मोबाइल एप्लिकेशन के डेवलपर को विभिन्न प्रकार के डिस्प्ले को ध्यान में रखना चाहिए जो स्मार्टफोन और टैबलेट में उपयोग किए जाते हैं। विभिन्न प्रस्तावों और अनुपातों की स्क्रीन पर मोबाइल एप्लिकेशन इंटरफेस के सही प्रदर्शन के लिए इस समस्या को हल करने के लिए अलग-अलग दृष्टिकोण हैं।

मैं आपके ध्यान को अपनी यात्रा में लाना चाहता हूं, जिसका उपयोग मैं लैंडस्केप ओरिएंटेशन में गेम एप्लिकेशन विकसित करते समय करता हूं।

यदि आप हाल के वर्षों के रुझान को देखते हैं, तो स्मार्टफ़ोन के निर्माता अपने मॉडलों के लिए स्क्रीन चुनते हैं, तो डिस्प्ले की ऊंचाई बढ़ाने की इच्छा को नोटिस करना आसान है। इसका अपना तर्कसंगत कर्नेल है। यह उपयोगकर्ताओं के लिए पोर्ट्रेट ओरिएंटेशन में कई अनुप्रयोगों के साथ काम करने के लिए बहुत अधिक आरामदायक हो जाता है, साइटों को ब्राउज़ करना अधिक सुविधाजनक है। लम्बी स्क्रीन के लिए धन्यवाद, इस पर बहुत अधिक जानकारी रखी गई है और सामग्री के लगातार ऊपर या नीचे स्क्रॉल करने की आवश्यकता कम हो गई है।

लेकिन स्क्रीन के लैंडस्केप ओरिएंटेशन की आवश्यकता वाले अनुप्रयोगों की एक बड़ी श्रेणी है, उदाहरण के लिए, कई गेमिंग एप्लिकेशन। इस मामले में, विभिन्न अनुपातों के साथ स्क्रीन पर खेल को सही दिखने के लिए अतिरिक्त प्रयास किए जाने चाहिए।

वर्तमान में, 16: 9 प्रदर्शन प्रारूप शायद सबसे आम है, लेकिन यह केवल एक ही नहीं है। बाजार में कई मॉडल हैं जो 18: 9 के पहलू अनुपात के साथ स्क्रीन का उपयोग करते हैं, एप्पल के नए उत्पाद 19.5: 9 डिस्प्ले से लैस हैं। लेकिन यह सीमा नहीं है, वर्ष की शुरुआत में, सोनी ने 21: 9 स्क्रीन के साथ एक स्मार्टफोन पेश किया। और अभी हाल ही में, चीनी कंपनी ज़ायोमी ने 22.5: 9 स्क्रीन के साथ एक नए उत्पाद की घोषणा की। उसी समय, आप 4: 3 स्क्रीन के साथ बड़ी संख्या में टैबलेट मॉडल की उपस्थिति को छूट नहीं दे सकते। यदि बाद के प्रारूप को 12: 9 के रूप में प्रस्तुत किया जाता है, तो एक दिलचस्प विशेषता को नोटिस करना आसान है: परिदृश्य अभिविन्यास में, विभिन्न अनुपातों के स्क्रीन की ऊंचाई 9 की एक बहु है, और उनके क्षैतिज अनुपात लगभग आधे से भिन्न हो सकते हैं।



इस समस्या के एक इष्टतम समाधान की तलाश में, मुझे परिदृश्य उन्मुखीकरण में सबसे छोटी सापेक्ष चौड़ाई की स्क्रीन के अनुरूप क्षेत्र में मुख्य खेल तत्वों को रखने का प्रस्ताव आया। यह स्पष्ट है कि इस दृष्टिकोण के साथ, आपको 4: 3 प्रारूप पर ध्यान देना चाहिए। अन्य प्रदर्शन प्रारूपों वाले स्मार्टफ़ोन पर गेम शुरू करते समय, पृष्ठभूमि छवि के साथ अतिरिक्त स्थान भरने का प्रस्ताव था।

यह दृष्टिकोण काफी उचित है, लेकिन केवल स्क्रीन के अनुपात में एक छोटे अंतर के साथ। उदाहरण के लिए, यदि गेम 16: 9 स्क्रीन के लिए बनाया गया था, तो 18: 9 डिस्प्ले के लिए यह काम करेगा। लेकिन पहले से ही, के मामलों में, कहते हैं, 22.5: 9 और 4: 3 शायद ही।

मैं एक "रबर" लेआउट का उपयोग करने के प्रस्ताव के साथ भी मिला, जिसमें खेल तत्वों के आकार प्रदर्शित के आकार के अनुकूल हैं। लेकिन यह भी एक विकल्प नहीं है, कई मामलों में ऐसे तत्वों का आकार विकृत हो जाएगा।

लेआउट के लिए मेरा दृष्टिकोण

प्रयोगों की एक श्रृंखला के बाद, मैंने अपने लिए एक दृष्टिकोण पाया जो व्यवहार में बहुत अच्छा काम करता है। यह संभव है कि मैंने "साइकिल" का आविष्कार किया, लेकिन मुझे यह नहीं मिला।

मैं दोहराता हूं, मैंने जो प्रस्ताव पेश किया वह विशिष्ट कार्यों के लिए विकसित किया गया था न कि इस तथ्य के लिए कि यह सार्वभौमिक है।

खेल लीपिंग डोडेम , जो मैंने LibGDX फ्रेमवर्क का उपयोग करके किया था, कैमरे के ऑर्थोगोनल प्रोजेक्शन को स्क्रीन के केंद्र में उपयोग करता है। इसलिए, सभी गेम तत्वों को रखने पर इस बिंदु को एकल संदर्भ बिंदु के रूप में उपयोग करने का निर्णय लिया गया था। लेकिन यह एक हठधर्मिता नहीं है, कुछ तत्व स्क्रीन की सीमाओं से बंधे हुए थे, इसलिए यह अधिक सुविधाजनक हो गया और वास्तविक दृश्य परिणाम दिए।

विकास के दौरान, 1920 × 1080 के संकल्प के साथ व्यापक रूप से उपयोग किए जाने वाले 16: 9 प्रारूप को गेम स्क्रीन के आधार आकार के रूप में चुना गया था। अधिकांश गेम तत्व स्क्रीन के केंद्र से प्लस और माइनस संकेतों वाले रिश्तेदार इंडेक्स में स्थित हैं।

आंकड़ा योजनाबद्ध नियंत्रण के लिए दो बटन के उदाहरण पर इस तरह के प्लेसमेंट के सिद्धांत को दर्शाता है और एक निश्चित स्थिति के साथ लेबल करता है।



लेकिन प्रस्तावित विधि केवल एक सिद्धांत है, व्यवहार में, यह दृष्टिकोण हमेशा उचित नहीं है। वैकल्पिक रूप से, आप पूर्वनिर्धारित स्थिरांक स्थापित करके सापेक्ष इंडेंटेशन के गुणांक के चयन को एकजुट कर सकते हैं। मान लें कि हम चाहते हैं कि बटन के किनारों को चौड़ाई और ऊंचाई के 5% की दूरी पर स्क्रीन की सीमाओं तक न पहुंचे। यदि फॉर्मूला स्क्रीन के बाएं आधे हिस्से के लिए अपरिवर्तित रहता है, तो दाहिने आधे बटन के लिए खुद को ध्यान में रखना होगा।

इस दृष्टिकोण ने गेम के तत्वों को अलग-अलग अनुपात के साथ स्क्रीन पर सही ढंग से रखना संभव बना दिया। उदाहरण के लिए, अलग-अलग डिस्प्ले पर मेरे गेम के स्क्रीनशॉट। स्पष्टता के लिए, एक प्राचीन मॉडल के एमुलेटर से 320x240 डिस्प्ले के साथ 4: 3 स्क्रीनशॉट लिया गया था।



पहले स्क्रीनशॉट 4: 3 में, स्क्रीन के दाईं ओर की कलाकृतियों को विशेष रूप से छोड़ दिया गया है। ऊपरी और निचले दाएं बटन को स्क्रीन के केंद्र से सापेक्ष विस्थापन के गुणांक के आधार पर रखा गया था। जैसा कि आप देख सकते हैं, शीर्ष बटन "विफल"। यह मूल बटन छवि के आकार के पुनर्गणना के कारण स्क्रीन रिज़ॉल्यूशन को ध्यान में रखता है। यदि आप इस गुणांक में प्रवेश नहीं करते हैं, तो स्क्रीन के इस हिस्से में बटन के दाहिने किनारे को क्रॉल करेंगे। लेकिन चूंकि बटन का आकार कम हो गया, और इसके उत्पादन की उत्पत्ति अपरिवर्तित रही, इसलिए यह नेत्रहीन "विफल" था।



इस स्क्रीनशॉट में, स्क्रीन की सीमाओं से संबंधित इंडेंटेशन के गुणांक का उपयोग करके समस्या का समाधान किया जाता है।

अब अलग-अलग अनुपात की स्क्रीन के लिए कुछ स्क्रीनशॉट


16: 9 अनुपात, 1920x1080 स्क्रीन


18: 9 अनुपात, 2880x1440 स्क्रीन


19.5: 9 अनुपात 2688x1242 स्क्रीन

प्रस्तुत स्क्रीनशॉट में अधिकांश गेम तत्वों के आउटपुट बिंदु की शुरुआत की ऑफसेट स्क्रीन के केंद्र से रिश्तेदार इंडेंट के माध्यम से ऊपर वर्णित के रूप में किया गया था। लेकिन पांच नियंत्रण बटन के लिए थोड़ा अलग करना था, ताकि वे हमेशा अपने पदों पर रहे। उनके लिए, स्क्रीन की सीमाओं से एक्स और वाई कुल्हाड़ियों के साथ सापेक्ष पैडिंग कपडिंग सेट किया गया था। चूंकि गेम 1920x1080 के मूल रिज़ॉल्यूशन के लिए बनाया गया था, इसलिए एक अलग रिज़ॉल्यूशन वाले डिस्प्ले पर सही डिस्प्ले के लिए, वास्तविक स्क्रीन आकार और मूल रिज़ॉल्यूशन के आधार पर एक विशेष स्केलिंग फैक्टर की गणना की गई थी। खेल तत्वों और उनके प्रदर्शित आकारों के पूर्ण विस्थापन की गणना करते समय इस गुणांक को ध्यान में रखा गया था।

मुझे उम्मीद है कि यह लेख शुरुआती गेम डेवलपर्स को मदद करता है और उन्हें बहुत समय बचाता है।