👰🏼 🙍 🐮 गेम्स के लिए एचटीएमएल 5 कैनवस की शक्ति कैसे प्राप्त करें 👰🏻 💊 🏸

HTML5- संगत ब्राउज़र और विंडोज 8 मेट्रो के लिए HTML5 मंच अब आधुनिक खेलों के विकास के लिए गंभीर उम्मीदवार हैं।

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

इस लेख का लक्ष्य आपको कुछ सुझाव देना है कि आप अपने HTML5 कैनवस का सबसे अधिक उपयोग कैसे करें। लेख में दो मुख्य भाग होते हैं [आप पहले पढ़ें]। डेविड राउसेट जल्द ही दूसरे भाग को प्रकाशित करेंगे।

लेख में, मैं एक ही उदाहरण पर मुख्य विचारों को दिखाऊंगा - यह 2D सुरंग का प्रभाव है जो मैंने फ्रांस में TechDays 2012 में Coding4Fun सत्र के लिए लिखा था।

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

JSFiddle उदाहरण (ध्यान दें कि बनावट को कोड में सीवन किया गया है)।

पूरा कोड यहां डाउनलोड करने के लिए उपलब्ध है: http://www.catuhe.com/msdn/canvas/tunnel.zip ( Y. Narod पर प्रतिलिपि )।

इस लेख का उद्देश्य यह बताना है कि सुरंग को कैसे प्रोग्राम किया जाता है, लेकिन आप मौजूदा कोड कैसे ले सकते हैं और बेहतर वास्तविक समय प्रदर्शन प्राप्त करने के लिए इसे अनुकूलित कर सकते हैं।

छवि डेटा पढ़ने के लिए छिपे हुए कैनवास का उपयोग करना

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

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

ऐसे मामलों में, आपको आंतरिक छवि डेटा तक पहुंच की आवश्यकता होती है। लेकिन छवि टैग सामग्री को पढ़ने का एक तरीका प्रदान नहीं करता है। और यहाँ कैनवास बचाव के लिए आता है!

संक्षेप में, हर बार जब आपको किसी छवि की सामग्री को पढ़ने की आवश्यकता होती है, तो आप एक अदृश्य (प्रदर्शित नहीं) कैनवास का उपयोग कर सकते हैं। मुख्य विचार एक छवि अपलोड करना है, और जब इसे अपलोड किया जाता है, तो आपको केवल इतना करना होता है कि इसे एक कैनवास तत्व पर प्रदर्शित किया जाता है जो डोम में डाला नहीं जाता है। अब आपके पास संबंधित कैनवास पिक्सल (जो बहुत सरल है) के माध्यम से स्रोत छवि के [कॉपी किए गए] पिक्सल तक पहुंच है।

इस तकनीक के लिए कोड निम्नानुसार है (सुरंग की बनावट को पढ़ने के लिए 2 डी सुरंग प्रभाव में प्रयुक्त):

var loadTexture = function (name, then) { var texture = new Image(); var textureData; var textureWidth; var textureHeight; var result = {}; // on load texture.addEventListener('load', function () { var textureCanvas = document.createElement('canvas'); // off-screen canvas // Setting the canvas to right size textureCanvas.width = this.width; // <-- "this" is the image textureCanvas.height = this.height; result.width = this.width; result.height = this.height; var textureContext = textureCanvas.getContext('2d'); textureContext.drawImage(this, 0, 0); result.data = textureContext.getImageData(0, 0, this.width, this.height).data; then(); }, false); // Loading texture.src = name; return result; };

इस कोड का उपयोग करते समय, ध्यान रखें कि बनावट लोडिंग असिंक्रोनस रूप से होती है, इसलिए आपको अपने कोड के साथ काम करना जारी रखने के लिए तत्कालीन पैरामीटर के माध्यम से एक फ़ंक्शन पास करना होगा:

 // Texture var texture = loadTexture("soft.png", function () { // Launching the render QueueNewFrame(); });

हार्डवेयर स्केलिंग का उपयोग करना

आधुनिक ब्राउज़र और विंडोज 8 कैनवास हार्डवेयर त्वरण का समर्थन करते हैं। यह, विशेष रूप से, का अर्थ है कि आप कैनवास को सामग्री में पैमाने पर करने के लिए GPU का उपयोग कर सकते हैं।

2 डी सुरंग प्रभाव के मामले में, एल्गोरिथ्म को कैनवास के प्रत्येक पिक्सेल को संसाधित करने की आवश्यकता होती है। उदाहरण के लिए, 1024x768 आकार के एक कैनवास के लिए, 786432 पिक्सल को संसाधित करने की आवश्यकता है। प्रदर्शन की निरंतरता सुनिश्चित करने के लिए, यह प्रति सेकंड 60 बार किया जाना चाहिए, जो प्रति सेकंड 47185920 पिक्सेल प्रसंस्करण से मेल खाती है!

जाहिर है, कोई भी समाधान जो आपको पिक्सेल की संख्या को कम करने में मदद करता है, ध्यान देने योग्य प्रदर्शन में सुधार लाएगा ।

मैं दोहराता हूं, कैनवास एक ऐसा उपकरण प्रदान करता है! निम्न कोड दिखाता है कि आंतरिक कैनवास बफर को DOM ऑब्जेक्ट के बाहरी आकार में स्केल करने के लिए हार्डवेयर त्वरण का उपयोग कैसे करें:

 // Setting hardware scaling canvas.width = 300; canvas.style.width = window.innerWidth + 'px'; canvas.height = 200; canvas.style.height = window.innerHeight + 'px';

DOM ऑब्जेक्ट के आकार ( कैनवस.स्टाइल.वायु और कैनवस.स्टाइल.हाइट ) और कैनवस कैनवस बफ़र के आकार ( कैनवस.व्यूस और कैनवस.हाइट ) के अंतर पर ध्यान दें।

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

इस उदाहरण में, प्रतिपादन 300x200 क्षेत्र में किया जाता है, और जीपीयू आपकी खिड़की के आकार को मापता है।

यह सुविधा सभी आधुनिक ब्राउज़रों द्वारा व्यापक रूप से समर्थित है, इसलिए आप इस पर भरोसा कर सकते हैं।

रेंडरिंग चक्र का अनुकूलन

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

RequestAnimationFrame

HTML5 के साथ आने वाली दिलचस्प विशेषताओं में से एक है window.requestAnimationFrame फ़ंक्शन। इसके बजाय Window.setInterval का उपयोग करने के लिए एक टाइमर बनाने के लिए जो आपके ड्राइंग चक्र को कॉल करता है (1000/16) मिलीसेकंड (पोषित 60fps तक पहुंचने के लिए), आप requestAnimationFrame का उपयोग करके ब्राउज़र को यह जिम्मेदारी सौंप सकते हैं। इस पद्धति के लिए एक कॉल कहती है कि आप चाहते हैं कि ब्राउज़र आपके कोड को जल्द से जल्द कॉल करे, ताकि ग्राफिकल प्रतिनिधित्व अपडेट हो सके।

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

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

कोड बहुत स्पष्ट है (ब्राउज़र उपसर्गों के उपयोग पर ध्यान दें):

 var intervalID = -1; var QueueNewFrame = function () { if (window.requestAnimationFrame) window.requestAnimationFrame(renderingLoop); else if (window.msRequestAnimationFrame) window.msRequestAnimationFrame(renderingLoop); else if (window.webkitRequestAnimationFrame) window.webkitRequestAnimationFrame(renderingLoop); else if (window.mozRequestAnimationFrame) window.mozRequestAnimationFrame(renderingLoop); else if (window.oRequestAnimationFrame) window.oRequestAnimationFrame(renderingLoop); else { QueueNewFrame = function () { }; intervalID = window.setInterval(renderingLoop, 16.7); } };

इस फ़ंक्शन का उपयोग करने के लिए, आपको बस अगले फ्रेम की सदस्यता के लिए अपने रेंडरिंग चक्र के अंत में इसे कॉल करना होगा:

 var renderingLoop = function () { ... QueueNewFrame(); };

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) तक पहुंच

अपने रेंडरिंग चक्र को अनुकूलित करने के लिए, आपको कम से कम एक स्वर्णिम नियम का उपयोग करना चाहिए: DOM को TURN न करें। हालाँकि इस स्थान पर आधुनिक ब्राउज़रों को विशेष रूप से अनुकूलित किया गया है, डोम वस्तुओं के गुणों को पढ़ना अभी भी एक तेजी से प्रतिपादन चक्र के लिए बहुत धीमा है।

उदाहरण के लिए, मेरे कोड में, मैंने इंटरनेट एक्सप्लोरर 10 प्रोफाइलर ( F12 डेवलपर टूल में उपलब्ध ) का उपयोग किया और परिणाम स्पष्ट हैं:

जैसा कि आप देख सकते हैं, कैनवास की चौड़ाई और ऊँचाई तक पहुँचने में रेंडर लूप में बहुत समय लगता है!

मूल कोड इस तरह दिखता है:

 var renderingLoop = function () { for (var y = -canvas.height / 2; y < canvas.height / 2; y++) { for (var x = -canvas.width / 2; x < canvas.width / 2; x++) { ... } } };

आप पूर्वनिर्धारित डिफ़ॉल्ट मानों के साथ दो वेरिएबल्स के साथ कैनवस के गुणों और कैनवस को बदल सकते हैं।

 var renderingLoop = function () { var index = 0; for (var y = -<b>canvasHeight</b> / 2; y < <b>canvasHeight</b> / 2; y++) { for (var x = -<b>canvasWidth</b> / 2; x < <b>canvasWidth</b> / 2; x++) { ... } } };

सरल, सही? यह समझना आसान नहीं हो सकता है, लेकिन मेरा विश्वास करो, यह एक कोशिश के लायक है!

प्रारंभिक गणना

प्रोफाइलर के अनुसार, Math.atan2 फ़ंक्शन कुछ धीमा है। वास्तव में, यह ऑपरेशन सीपीयू के अंदर नहीं किया जाता है, इसलिए परिणाम की गणना करने के लिए जावास्क्रिप्ट रनटाइम को कुछ संचालन करना होगा।

[अनुवाद: हालांकि, एक तकनीकी दृष्टिकोण से, यह माना जा सकता है कि एक विशिष्ट जेएस-रनटाइम कार्यान्वयन फ़िप्टन हार्डवेयर निर्देश पर भरोसा कर सकता है, कोई भी इसे प्राथमिकता नहीं दे सकता है। गणितीय कार्यों के लिए ECMAScript5 विनिर्देश बताता है कि वे (स्पष्ट रूप से) सन्निकटन हैं और सन माइक्रोसिस्टम्स गणितीय पुस्तकालय एल्गोरिदम (http://www.netlib.org/fdlibm) का उपयोग करने की सलाह देते हैं। किसी भी स्थिति में, एटैन 2 फ़ंक्शन का कार्यान्वयन, जो इसे प्राथमिक और तेज नहीं बनाता है।]

सामान्य तौर पर, यदि आप कुछ लंबे चलने वाले कोड के लिए प्रारंभिक गणना की व्यवस्था कर सकते हैं, तो यह हमेशा एक अच्छा विचार है। यहाँ, अपना रेंडरिंग चक्र शुरू करने से पहले, मैं Math.atan2 के मानों की गणना करता हूँ:

 // precompute arctangent var atans = []; var index = 0; for (var y = -canvasHeight / 2; y < canvasHeight / 2; y++) { for (var x = -canvasWidth / 2; x < canvasWidth / 2; x++) { atans[index++] = Math.atan2(y, x) / Math.PI; } }

Atans ऐरे को तब स्पष्ट रूप से प्रदर्शन में सुधार करने के लिए रेंडर लूप के अंदर इस्तेमाल किया जा सकता है।

Math.round, Math.floor और parseInt के उपयोग से बचें

ParseInt का उपयोग करने के बारे में हमारे मामले में समझ में आता है:

जब आप कैनवास के साथ काम करते हैं, तो आपको पिक्सेल को इंगित करने के लिए पूर्णांक निर्देशांक (x और y) का उपयोग करने की आवश्यकता होती है। हालाँकि, आपकी सभी गणना फ़्लोटिंग पॉइंट नंबरों का उपयोग करके की जाती है और जल्द ही या बाद में आपको उन्हें पूर्णांक में बदलने की आवश्यकता होगी।

जावास्क्रिप्ट संख्याओं को पूर्णांक में बदलने के लिए Math.round , Math.floor, या parseInt को भी कार्य प्रदान करता है। लेकिन ये फ़ंक्शन कुछ अतिरिक्त काम करते हैं (विशेष रूप से, रेंज की जांच या यह जांचना कि मान वास्तव में संख्याएं हैं; parseInt आम तौर पर अपने पैरामीटर को एक स्ट्रिंग में बदल देता है!)। इसलिए, मेरे रेंडर चक्र के अंदर, मुझे संख्याओं को परिवर्तित करने के लिए तेज़ तरीका चाहिए।

अपने पुराने असेंबलर कोड को याद करते हुए, मैंने थोड़ा ट्रिक लागू करने का फैसला किया: पार्सइंट का उपयोग करने के बजाय, बस नंबर को दाईं ओर शिफ्ट करें। रनटाइम संबंधित रजिस्टर से फ्लोटिंग-पॉइंट नंबर को पूर्णांक में स्थानांतरित करेगा और हार्डवेयर रूपांतरण लागू करेगा। नंबर को दाईं ओर 0 से शिफ्ट करने से नंबर अपरिवर्तित रहेगा और पूर्णांक मान वापस आपके पास आ जाएगा।

स्रोत कोड इस प्रकार था:

 u = parseInt((u < 0) ? texture.width + (u % texture.width) : (u >= texture.width) ? u % texture.width : u);

नया कोड इस तरह दिखता है:

 u = ((u < 0) ? texture.width + (u % texture.width) : (u >= texture.width) ? u % texture.width : u) >> 0;

बेशक, इस समाधान की आवश्यकता है कि आप संचरित संख्या की शुद्धता सुनिश्चित करें :)

अंतिम परिणाम

सभी वर्णित अनुकूलन का आवेदन निम्नलिखित रिपोर्ट की ओर जाता है:

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

हमने इस मूल गैर-अनुकूलित सुरंग के साथ शुरुआत की:

JSFiddle उदाहरण

और हम अनुकूलन के बाद इस परिणाम पर आए:

JSFiddle उदाहरण

[अनुवाद।: ये स्क्रीनशॉट एक अनुवादक के कंप्यूटर पर लिए गए थे, जिस पर एफपीएस प्रतिष्ठित 60 एफपीएस तक नहीं पहुंचता है, लेकिन यह इसके बहुत करीब घूमता है - IE10 में लगभग 50 एफपीएस।]

हम प्रत्येक आरेख के योगदान का मूल्यांकन निम्न आरेख के साथ कर सकते हैं जो मेरे कंप्यूटर पर फ्रेम दर दिखा रहा है:

तुलनात्मक प्रदर्शन

चल रहा है

इन मुख्य बिंदुओं को ध्यान में रखते हुए, आप अब आधुनिक ब्राउज़रों और विंडोज 8 के लिए तेज और सुगम खेल विकसित करने के लिए तैयार हैं!

गेम्स के लिए एचटीएमएल 5 कैनवस की शक्ति कैसे प्राप्त करें