आप एक 2d platformer में विभिन्न पहलू अनुपात को कैसे संभालेंगे?

41

एक लंबे समय से पहले, 4: 3 बहुत ही एकमात्र अनुपात था जो आपको पीसी पर मिलेगा। आज सबसे आम है 16:10, लेकिन सबसे नए मॉनिटर (विशेष रूप से लैपटॉप) 16: 9 हैं

मैं एक 2 डी platformer लिख रहा हूँ, और मैं यह तय नहीं कर सकता कि मुझे सभी अलग-अलग अनुपातों को कैसे संभालना चाहिए।

यहाँ कुछ विचार हैं:

4: 3 को अधिक सामग्री मिलती है, ऊपर और नीचे widescreens काट दिया जाता है
16: 9 को अधिक सामग्री मिलती है, दूसरों को बाएं और दाएं काट दिया जाता है
यह खेल 16: 9 में अन्य एआर के लिए काले क्षैतिज पट्टियों के साथ है
खेल 4: 3 में अन्य एआर के लिए काले ऊर्ध्वाधर सलाखों के साथ है

2d aspect-ratio

— लोरिस
स्रोत

8

5: 4 अनुपात :)

— एंड्रयू रसेल

2

मुझे आश्चर्य हो रहा है कि क्या इसे "एक से अधिक स्क्रीन पहलू अनुपात को कैसे हैंडल किया जाए? " के अधिक सामान्य प्रश्न में संपादित किया जा सकता है ? क्या प्लेटफ़ॉर्मर विशेष मामले हैं?

— एको

आप हर्थस्टोन मार्ग पर जा सकते हैं और बाईं / दाईं ओर मृत स्थान है जिसे आप बस उन स्क्रीन पर काटते हैं जो इसे नहीं देखेंगे। यह काली पट्टियों की तुलना में बहुत बेहतर है (क्योंकि यदि आप वहां कुछ महत्वहीन रखते हैं, तो आपके खिलाड़ी शायद इसे नोटिस भी नहीं करेंगे)।

— एथन द ब्रेव

12

यदि आपके पास अपने खेल को "व्यापक" बनाने के लिए कोई बाध्यकारी कारण नहीं है (जिस स्थिति में दृष्टिकोण 3 का उपयोग करें) या संकीर्ण (जिस स्थिति में दृष्टिकोण 4 का उपयोग किया जाता है), 1 और 2 के संयोजन के साथ जाएं (या संभवतः 3 और 4 यदि आप चाहते हैं कि ऑफ-स्क्रीन चीजें छिपाएं)।

एक समझौता पहलू अनुपात का चयन करें (16:10 एक अच्छा है, या यहां तक कि 16:11)। यदि उपयोगकर्ता 16: 9 पर है, तो उन्हें पक्ष में अधिक सामग्री दें, और यदि वे 4: 3 पर हैं, तो उन्हें ऊपर और नीचे अधिक सामग्री दें।

किसी भी मामले में - मुझे इसे अपने कैमरे की कक्षा में इस तरह से लागू करना सबसे अच्छा लगता है:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

जिस बिंदु पर आप अलग-अलग नाममात्र विश्व आकार (यानी: विश्व इकाइयों में कैमरे का आकार) के साथ प्रयोग कर सकते हैं और बस सर्वश्रेष्ठ का चयन कर सकते हैं।

— एंड्रयू रसेल
स्रोत

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

— पावर्सलेव १३'१५ को

16

खैर, सलाह के एक बुनियादी बिट के रूप में, पीसी पर मैं कहूंगा "यह मत मानो कि आपका उपयोगकर्ता पूर्ण स्क्रीन चलाना चाहता है"। और विंडो मोड में, अपना आदर्श अनुपात चुनें और बस सीधे उपयोग करें।

मुझे लगता है कि आम तौर पर पूर्ण स्क्रीन सामग्री के साथ प्रस्तुत करने पर उपयोगकर्ता काली पट्टियों को स्वीकार करते हैं। तो 3 और 4 रणनीतियाँ स्वीकार्य हैं, यदि आदर्श नहीं हैं। उनके पास यह लाभ है कि आप हमेशा जानते हैं कि आप कितनी सामग्री प्रदान कर रहे हैं: यानी कोई डरपोक बग जो केवल वाइड-स्क्रीन में चलने पर नहीं होती है।

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

मान लें कि आपके पास एक UI / HUD है जो कुछ 'भौतिक' 2D दुनिया में सबसे ऊपर है, तो यह बिल्कुल सीधा है। कम प्राथमिकता वाले आइटम आसान होते हैं, आप बस यह सुनिश्चित कर लें कि 4: 3 व्यूपोर्ट दिलचस्प चीजों पर केंद्रित है, फिर आप बाईं या दाईं ओर जितना कम प्राथमिकता वाले सामान खींच सकते हैं। 2 डी दुनिया में उच्च प्राथमिकता वाली चीजें (जैसे कि आपका चरित्र, आपके चरित्र का दुश्मनों से सीधा मुकाबला है) को हमेशा 4: 3 व्यूपोर्ट में रखा जाना चाहिए। यानी आपके पास अतिरिक्त स्क्रीन रियल एस्टेट का लाभ लेने के लिए आपके गेम कोड को कैमरा ज़ूम इन नहीं करना है, क्योंकि तब आपके पास गेम कोड अलग-अलग तरह से वाइडस्क्रीन में काम करेगा। क्या गेम कोड यह मान लेता है कि दुनिया 4: 3 में प्रस्तुत की जा रही है, और केवल अपने रेंडरिंग कोड से अवगत कराएं कि वास्तव में दिखाई देने से अधिक है।

यूआई / एचयूडी तत्वों को बिछाने के दो तरीकों में से एक में संपर्क किया जा सकता है:

गतिशील स्थिति: स्क्रीन किनारों के सापेक्ष अपने सभी तत्वों को निर्दिष्ट करें (अर्थात 0,0 के सापेक्ष सभी नहीं)। आपके पहलू अनुपात के आधार पर, तत्व स्क्रीन के केंद्र से दूर या आगे होंगे। पेशेवरों: आप कोनों को हुक करने की अनुमति देते हैं और उन्हें 'बस काम' करते हैं। विपक्ष: केंद्र में अच्छी तरह से लेआउट काम करना मुश्किल है, और तत्वों के अतिव्यापी होने का जोखिम
रूढ़िवादी स्थिर स्थिति: 4: 3 में अपने सभी तत्वों को बाहर रखें, और वाइडस्क्रीन में चलने पर बस उन्हें ऑफसेट करें। पेशेवरों: सरल, अस्पष्ट लेआउट तर्क / निर्देशांक। विपक्ष: आपके UI नियंत्रणों के बाईं और दाईं ओर दृश्य मृत स्थान छोड़ देता है, जहां आपको पृष्ठभूमि में 2D दुनिया दिखाई देगी, लेकिन UI नहीं।

— MrCranky
स्रोत

और यदि आप कंसोल के लिए गेम बना रहे हैं, तो शीर्षक-सुरक्षित क्षेत्र को न भूलें!

— एंड्रयू रसेल

2

बहुत अच्छा जवाब। इसके अलावा: यदि यह एक मल्टीप्लेयर या अन्य प्रतिस्पर्धी खेल है, तो पहलू-अनुपात को इस तरह से चुनें कि यह दूसरों को फायदा न दे। उदाहरण के लिए। यदि आपका खेल आंदोलन ज्यादातर क्षैतिज है, तो # 2 के बजाय समाधान # 1 का उपयोग करें, क्योंकि समाधान # 2, 16: 9 के साथ अन्य खिलाड़ियों की तुलना में अधिक क्षैतिज व्यूपोर्ट (और आगे-आगे बोनस) होगा। समाधान # 1 दूसरी तरफ सिर्फ पृष्ठभूमि को बढ़ाता है जो ठीक है और इसके परिणामस्वरूप बाधा नहीं होगी। यदि खेल समान रूप से दोनों आयामों में आगे बढ़ रहा है, तो # 3 या # 4 में एक निश्चित अनुपात चुनें।

— बुमज़ैक

8

आपके खेल के लिए सबसे उपयुक्त कौन सा है? यदि आप कैनाबाल्ट (यानी एक खेल जो क्षैतिज गति पर निर्भर करता है) बना रहे हैं, तो संकरा पहलुओं पर काली पट्टियों (# 3) के साथ एक व्यापक पहलू अनुपात पार्श्व आंदोलन को उजागर करने के लिए आदर्श होगा। दूसरी ओर, यदि आपके पास सुपर स्मैश ब्रदर्स जैसे अधिक हवाई खेल हैं, तो एक लंबा स्क्रीन (# 2 या # 4) सबसे अच्छा होगा। मैं खेल के लिए सबसे अच्छा काम करता है पर अपने निर्णय का आधार था।

मैं अन्य उत्तरदाताओं से सहमत हूं कि उन तत्वों के संबंध में ध्यान रखा जाना चाहिए जो एक प्रदर्शन पर दिखाई दे सकते हैं लेकिन दूसरे पर नहीं।

— ग्रेगरी एवरी-वियर
स्रोत

1

कैसल क्रैशर्स # 2 के एक बिट और # 3 के एक बिट का उपयोग करने के लिए लगता है - आपको 4: 3 स्क्रीन पर काली पट्टियाँ मिलती हैं, और एक बहुत छोटा सा दिखने वाला क्षेत्र भी - लेकिन आपको किनारों के आसपास हमेशा एक "सुरक्षित क्षेत्र" होना चाहिए। जहाँ आप कुछ भी महत्वपूर्ण नहीं डालते हैं (CRT टीवी की तरह स्क्रीन के लिए जो किनारों को काटते हैं)

— इयान
स्रोत

1

एक और विकल्प है। आप एक मध्यवर्ती अनुपात के लिए फ्रेम कर सकते हैं, और दोनों सामान्य प्रस्तावों पर फसल और विस्तार (या सीमा) दोनों कर सकते हैं।

मेरा मानना है कि टीवी फिल्मांकन इस तरह से तैयार किया गया है, जैसे कि वाइडस्क्रीन ठीक दिखता है (हर किसी को दृश्य के बीच में भीड़ नहीं होती है), जबकि 4: 3 के लिए क्रॉप करना बहुत कठोर नहीं है और इसमें न्यूनतम पैनिंग है।

— JasonD
स्रोत

1

मोबाइल उपकरणों पर कई स्क्रीन आकारों को संभालने के बारे में यहां एक ब्लॉग पोस्ट है, और यहां इसका दूसरा भाग है कि यह दृष्टिकोण libgdx का उपयोग करके जावा में कैसे कोडित किया गया है । यह एंड्रयू के जवाब जैसा है, लेकिन किसी और की मदद कर सकता है।

ब्लॉग पोस्ट में तीन मुख्य दृष्टिकोण शामिल हैं:

शीर्ष पर या पक्षों पर काली पट्टियों के साथ रहते हैं।
वर्चुअल व्यूपोर्ट का उपयोग करें।
फ़्लोटिंग तत्वों का उपयोग करें, जैसे आप वेब पेज फ्लेक्सबॉक्स लेआउट में पाएंगे।

नंबर 1 बहुत आत्म व्याख्यात्मक है।

समझाने के लिए नहीं। 2, मान लीजिए कि आप तीन अलग-अलग पहलू अनुपात के साथ तीन अलग-अलग उपकरणों का समर्थन करना चाहते हैं। छवि संपादक में छवि खोलें। पहले डिवाइस के लिए, उस डिवाइस के पहलू अनुपात पर सबसे बड़ा आयत बनाएं जो आपकी छवि के अंदर फिट होगा। दूसरे डिवाइस और तीसरे डिवाइस के लिए भी ऐसा ही करें। आपका प्रयोग करने योग्य क्षेत्र या वर्चुअल व्यूपोर्ट, उन तीनों आयतों का प्रतिच्छेदन है। उस व्यूपोर्ट के बाहर कुछ भी दिखाई देने की गारंटी नहीं दी जा सकती।

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

— मेहमत अतास
स्रोत

2

यह बेहतर होगा, यदि आप लिंक को तोड़ सकते हैं और उन लोगों से उत्तर बना सकते हैं। लिंक अंत में मर जाते हैं।

— काटू