विभिन्न स्क्रीन आकारों में कैनवास के साथ काम करना

Question

मैं एचटीएमएल 5 <canvas> टैग का उपयोग करके एक साधारण गेम बनाने की योजना बना रहा हूं और फोनगैप का उपयोग कर कोड को देशी एप्लिकेशन में संकलित करता हूं, लेकिन समस्या यह है कि canvas आकार के सापेक्ष नहीं हैं जो समन्वय का उपयोग करें इसके 960x640 स्क्रीन पर 20,20 480x800 एक पर अलग है।

इसलिए मैं जानना चाहता हूं कि विभिन्न स्क्रीन आकारों पर <canvas> (जो पूर्णस्क्रीन में होगा) के साथ कैसे काम करना है।

Answer 1

इसलिए मैं जानना चाहता हूं कि विभिन्न स्क्रीन आकारों पर एक (जो पूर्णस्क्रीन में होगा) के साथ कैसे काम करना है।

यह एक आम समस्या है जिसमें एक बहुत ही आसान संकल्प है। अक्सर यह हार्ड कैनवास निर्देशांक को अलग करके किया जाता है जिसे कभी-कभी "मॉडल" निर्देशांक कहा जाता है।

यह वास्तव में इस बात पर निर्भर करता है कि आपका कोड कैसे व्यवस्थित किया गया है, लेकिन मुझे लगता है कि गेम में दुनिया की कुछ ऊंचाई और चौड़ाई है जो अधिकतर या सभी स्क्रीन लेती है। आपके द्वारा लक्षित स्क्रीन के दो पहलू अनुपात 1.5 और 1.666 हैं, इसलिए आप छोटे से

को पूरा करना चाहते हैं तो आप वास्तव में "मॉडल" निर्देशांक के एक सेट में अपना गेम करना चाहते हैं स्क्रीन या कैनवास आकार पर कोई असर नहीं है। चूंकि आप केवल दो स्क्रीन आकारों को लक्षित कर रहे हैं, इसलिए आपके मॉडल निर्देशांक शायद 960x640 हो सकते हैं क्योंकि यह दो पहलू अनुपातों में से छोटा है। यह होना जरूरी नहीं है। इसके बजाय आपके मॉडल निर्देशांक के लिए यह 100x50 हो सकता है। लेकिन यह उदाहरण हम 960x640 का उपयोग हमारे मॉडल निर्देशांक के रूप में करेंगे।

आंतरिक रूप से, आप कभी भी इन मॉडल निर्देशांक के अलावा कुछ भी उपयोग नहीं करते हैं। अपना गेम बनाते समय आपने कभी भी किसी भी अन्य निर्देशांक में कभी नहीं सोचा।

जब स्क्रीन का आकार 960x640 है तो आपको 1: 1 मैपिंग के बाद से कुछ भी बदलना नहीं होगा, जो सुविधाजनक है।

तब जब स्क्रीन आकार वास्तव में 800x480 है, जब स्क्रीन पर आकर्षित करने का समय आता है, तो आप सभी मॉडल निर्देशांक (3/4) का अनुवाद करना चाहेंगे, इसलिए गेम बनाया जाएगा और आंतरिक रूप से उपयोग किया जाएगा 960x480, लेकिन यह (720x480) के क्षेत्र में खींचा जाएगा। आप मॉडल निर्देशांक में स्क्रीन निर्देशांक को चालू करने के लिए कोई माउस या स्पर्श इनपुट भी लेना चाहते हैं और इसे (4/3) से गुणा करना चाहते हैं।

यह अनुवाद सब कुछ खींचने से पहले ctx.scale(3/4, 3/4) पर कॉल करना जितना आसान हो सकता है।

तो दोनों प्लेटफार्मों में कोड होगा जो सभी को यह मानते हुए लिखा गया है कि गेम 960x640 का आकार है। मॉडल निर्देशांक बनने का एकमात्र समय स्क्रीन समन्वय बनता है जब कैनवास (जो एक अलग आकार होता है) को चित्रित करता है और कैनवास माउस/टच निर्देशांक को मॉडल कॉर्ड में परिवर्तित करता है।

यदि यह आपको भ्रमित लगता है तो मैं कोशिश कर सकता हूं और नमूना बना सकता हूं।

Answer 2

चूंकि आपके पास केवल 2 स्क्रीन आकार हैं, इसलिए आपके पास अलग-अलग आकारों के साथ 2 अलग-अलग कैनवास (और उनके तर्क पीछे) हो सकते हैं।
यदि आपको यह समाधान पसंद नहीं है तो मुझे लगता है कि आप केवल पिक्सेल पूर्ण आयाम के बजाय% में आकार का उपयोग कर सकते हैं। अंतिम लेकिन कम से कम नहीं, मेटाटैग में अलग-अलग मान सेट करने का प्रयास करें।

Answer 3

उपयोग window वस्तु की innerWidth/innerHeight:

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

यह किसी भी स्क्रीन स्वतः समायोजित कर देंगे; आपको क्रॉस प्लेटफ़ॉर्म/स्क्रीन संगतता के लिए परीक्षण करना होगा!

इसके अलावा, बजाय पूर्व निर्धारित x,y समन्वय का उपयोग करने का, कुछ इस तरह का उपयोग करें:

var innerWidth = window.innerWidth; 
x = innerWidth/3;