👨‍👨‍👧 🥐 💊 सममितीय मैट्रिक्स के साथ कार्य करना। भाग 1 🤷🏾 🤚🏽 🔨

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

आरटीएस, आरपीजी शैली और टर्न-बेस्ड रणनीतियों के लिए, मैट्रिक्स चलती इकाइयों, ड्राइंग बनावट, और बहुत कुछ के लिए मुख्य तंत्र है। लेकिन जब आप मैट्रिक्स और आइसोमेट्रिक बनावट को संयोजित करने का प्रयास करते हैं, तो आप नरक में समाप्त हो जाएंगे, जिससे आप तब तक बाहर नहीं निकलेंगे जब तक आप इस मैट्रिक्स को नियंत्रित और प्रभावित करने के लिए एक परत नहीं लिखते हैं।

कटौती के तहत, मैं आपको बताता हूं:

एक सममितीय मैट्रिक्स कैसे आकर्षित करें
एक फुलस्क्रीन सममितीय मैट्रिक्स कैसे आकर्षित करें

परिचय

एक साधारण वर्ग मैट्रिक्स को खींचना बहुत सरल है, यह सममित है, निर्देशांक की खोज आम तौर पर मुश्किल काम नहीं है, लेकिन सममितीय मेट्रिक्स काम के लिए 2 सुधार पेश करते हैं:

मैट्रिक्स खींचना कैनवास के केंद्र से आना चाहिए।
प्रतिपादन का दृश्य भ्रम।

कार्यान्वयन के दौरान इन सभी मुद्दों पर विचार किया जाना चाहिए।

मैट्रिक्स रेंडरिंग

जैसा कि आइसोमेट्रिक मैट्रिक्स की विशेषताओं के पहले पैराग्राफ में कहा गया है, प्रतिपादन कैनवास के केंद्र से आना चाहिए। इसलिए हमें कैनवास के मध्य की आवश्यकता है।

दूसरे पैराग्राफ को दृश्य धोखे पर ध्यान देना चाहिए। छवि को देखने वाला मस्तिष्क, इसे क्षैतिज रूप से खींचना चाहता है, लेकिन आपको इसे तिरछे करने की आवश्यकता है, जैसा कि निम्नलिखित छवि में दिखाया गया है।

हमने पहले से ही सबसे बुनियादी समस्याओं पर विचार किया है, आइए क्रियान्वयन को देखें।

सब कुछ बाहर टिप्पणी की गई है, एक काम करने का उदाहरण है, इसलिए आप अपने लिए सब कुछ देख सकते हैं।

कार्यान्वयन लागू करना

var element = document.getElementById('canvas'); element.width = 1024; element.height = 512; var ctx = element.getContext('2d'); var image = new Image(); image.src = 'http://habrastorage.org/storage2/e61/42d/5b2/e6142d5b26d171611d60d5941e390398.png'; //     var width = 128; var height = 64; image.onload = function() { function draw(x, y) { ctx.drawImage(image, x - width / 2, y - height / 2, width, height); } //    X  Y   . //         ,     //     ,      . var Xo = 0; var Yo = 0; //    var C = Math.floor(element.width / 2); //    X,     //    Y var Xc = 0; var matrixHeight = 8; var matrixWidth = 8; for(var y = 0; y < matrixHeight; y++) { //  ,       Yo = (height / 2) * y; //        . Xc = C - (width / 2 * y); for(var x = 0; x < matrixWidth; x++) { //     X     . //       ,   . //     Xo = Xc + (x * (width / 2)); //     Y. //     X,     //     X,      Y. Yo += height / 2; draw(Xo, Yo); } } }

यहाँ एक तैयार उदाहरण है

फुलस्क्रीन मैट्रिक्स रेंडरिंग

खैर, हम एक आइसोमेट्रिक मैट्रिक्स आकर्षित करने में सक्षम थे, अब हमें इसे फुलस्क्रीन में खींचने की आवश्यकता है।
इसके साथ थोड़ा और अधिक जटिल, या बल्कि:

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

कुल मैट्रिक्स पारी की ऊँचाई की गणना करने का सिद्धांत और अभ्यास

व्यवहार में, एक मानक मैट्रिक्स खींचते समय, हमें एक त्रिकोण के रूप में एक खाली क्षेत्र मिलता है,
जिसका अर्थ है कि हम अज्ञात पक्ष की गणना कर सकते हैं और इसकी ऊंचाई से एक बदलाव कर सकते हैं ताकि कोई छिद्र न बचे।

हम एक पैर की लंबाई जानते हैं और हम हाइपोटेंशन की लंबाई आसानी से जान सकते हैं।

पक्ष A पैर की ज्ञात लंबाई (पूरे रेंडरिंग क्षेत्र की चौड़ाई 2 से विभाजित) है। यानी 1024px / 2 = 512px, पैर की लंबाई ए
साइड बी - हम इस पैर को नहीं जानते हैं, इसकी गणना करने की आवश्यकता होगी।
साइड सी - हाइपोटेन्यूज़, इसकी लंबाई का पता लगाने के लिए, हमें अपने छोटे-छोटे रोम्बस के किनारों में से एक की लंबाई की गणना करने की आवश्यकता है।

ऐसा करने के लिए, आधे चौड़ाई और रोम्बस की ऊँचाई को लें, उन्हें एक वर्ग में लाएँ और संक्षिप्त करें, और परिणाम के वर्गमूल की गणना करें।

  ... var width = 128; var height = 64; var grainLength = Math.sqrt((width / 2) * (width / 2) + (height / 2) * (height / 2)); //   71.554 //  ,    64px   128px image.onload = function() { ...

जब हमने रोम्बस के एक पहलू की लंबाई की गणना की है, तो हमें कैनवास की आधी चौड़ाई लेने की आवश्यकता है, इसे 32 से विभाजित करें और परिणाम को रंबल के लंबाई से गुणा करें।

  ... var grainLength = Math.sqrt((width / 2) * (width / 2) + (height / 2) * (height / 2)); var center = Math.floor(element.width / 2); var hypotenuse = center / (width / 2) * grainLength; image.onload = function() { ...

अगला, हम प्रसिद्ध पैर और कर्ण को एक वर्ग में लाते हैं। कर्ण से पैर को घटाएं, और परिणाम के वर्गमूल की गणना करें।

  ... var hypotenuse = center / (width / 2) * grainLength; var catheusA = center * center; hypotenuse *= hypotenuse; //       ,    . var catheusB = Math.sqrt(hypotenyse - catheusA); image.onload = function() { ...

यही है, समीकरण हल हो गया है, अब यह प्रतिपादन गणनाओं में परिणाम को लागू करने के लिए बना हुआ है।

  ... for(var y = 0; y < matrixHeight; y++) { Yo = (height / 2) * y; Xc = C - (64 * y); ...

जैसा कि आप इस उदाहरण से देख सकते हैं, अब हम एक रोम्बस बनाते हैं ताकि शीर्ष पर कोई छेद न हो।
लेकिन अब समस्या नंबर 2 है। क्षेत्र की अतिरिक्त ऊंचाई और चौड़ाई की गणना करना आवश्यक है।

ऐसा करना मुश्किल नहीं है, लेकिन अब हम मैट्रिक्स की सांख्यिकीय रूप से निर्दिष्ट चौड़ाई या ऊंचाई को छोड़ देते हैं।
यदि चौड़ाई ऊंचाई से अधिक है, तो चौड़ाई को 32 से विभाजित किया जाना चाहिए, अन्यथा ऊंचाई

  ... var matrixHeight = (element.width > element.height ? element.width : element.height) / 32; var matrixWidth = (element.width > element.height ? element.width : element.height) / 32; ...

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

  ... Xo = Xc + (x * 64); Yo += 32; if(Xo < (width / -1) || Xo > element.width + width || Yo < (height / -1) || Yo > element.height + height) continue; draw(Xo, Yo); ...

वह सब है। यहाँ एक पूर्ण उदाहरण है । अब आपने सीखा है कि पूर्ण-सममित आइसोमेट्री को कैसे आकर्षित किया जाए, लेकिन यह केवल आधी कहानी है।

मैट्रिक्स में प्रविष्टियों को खोजना अधिक कठिन होगा, अर्थात। गणना करें कि किस मैट्रिक्स कोऑर्डिनेट पर क्लिक किया गया था और अगर एक कोऑर्डिनेट कहा जाता है, तो गणना करें कि इस समन्वय का केंद्र कहाँ स्थित है। लेकिन अगले लेख में उस पर और अधिक।

सममितीय मैट्रिक्स के साथ कार्य करना। भाग 1

परिचय

मैट्रिक्स रेंडरिंग

कार्यान्वयन लागू करना

फुलस्क्रीन मैट्रिक्स रेंडरिंग

कुल मैट्रिक्स पारी की ऊँचाई की गणना करने का सिद्धांत और अभ्यास

More articles: