LibCanvas पर पंद्रह

हाल ही में हैबे पर कैनवस पर टैग के बारे में एक लेख था।
एक उत्कृष्ट लेख, मुझे यकीन है कि शुरुआती लोग इसमें बहुत उपयोगी जानकारी पाएंगे। दुर्भाग्य से, कुछ अधिक सीपीयू खपत पर टिप्पणी की गई।
यह तकनीक की कमी नहीं है, बल्कि अनुभव और सुविधाजनक उपकरणों की कमी है।
इस विषय में, मैं आपको बताऊंगा कि कैसे, LibCanvas की मदद से, इस गेम को पूरी तरह से प्रोसेसर के लिए बिना किसी बाधा के बनाने और शानदार दिखने के लिए।

संदर्भ द्वारा खेल में, यह केवल एक बारीकियों को ठीक करने के लिए पर्याप्त था - प्रत्येक फ्रेम के अनावश्यक पुनर्विकास को हटाने के लिए और केवल तब ही इसका कारण बनता है जब कैनवास बदल गया था।
लेकिन हम और आगे बढ़ेंगे - हम चिप्स के आंदोलन का एक एनीमेशन पेश करेंगे। एनीमेशन के दौरान, जब हम पूरे कैनवास को फिर से रीडायरेक्ट करते हैं, तो हमें एक ही समस्या होगी - प्रोसेसर अनुचित रूप से भरा हुआ है, इसलिए हम यह सोचेंगे कि हम क्या कर सकते हैं।

गंदा आयत

यह नोटिस करना आसान है कि छवि बार-बार बदलती है। आपको इसका लाभ उठाने की आवश्यकता है और पूरे कैनवास को फिर से जोड़ने के बजाय, पुराने स्थान को स्पष्टता से मिटा दें और एक नया ड्रा करें।

हमारे लिए पुराने सेल को स्केच करना और नए को साफ़ करना पर्याप्त है (वास्तव में, हम चिप्स को खींचने के पिछले स्थान को लगातार बचा सकते हैं, लेकिन यह इतना महत्वपूर्ण नहीं है)।

var Tile = atom.Class({ [...] redraw: function () { this.libcanvas.ctx .clearRect( this.lastPositionRectangle ) .clearRect( this.field.emptyRectangle ); this.draw() }, [...] }) 

तो अब हम चिप redraw कोड है। मान लीजिए कि हमारे आवेदन से पहले हर फ्रेम को फिर से तैयार किया गया है। चिप आंदोलन कोड कुछ इस तरह से देखा गया:

 var Tile = atom.Class({ [...] move: function (point) { //  , ,    ,     this.field.blocked = true; this.animate({ time: 150, props: { x: point.x, y: point.y }, onFinish: function () { //   this.field.blocked = false; }, fn: 'sine-out' }); }, [...] }) 

हम प्रत्येक फ्रेम के स्वत: रिडरिंग को बंद कर देते हैं और एक ऐसा कोड जोड़ते हैं जो प्रत्येक चिप को हिलने पर अपने आप को फिर से खोलने के लिए मजबूर करता है:

 var Tile = atom.Class({ [...] move: function (point) { //  , ,    ,     this.field.blocked = true; this.animate({ time: 150, props: { x: point.x, y: point.y }, onProccess: this.redraw.bind(this), onFinish: function () { //   this.field.blocked = false; this.redraw(); }, fn: 'sine-out' }); }, [...] }) 

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

बफरिंग

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

अपने आवेदन के लिए, आप मोटे तौर पर मान सकते हैं कि (कार्यक्रम) == 'सिस्टम निष्क्रियता'

हम इस कष्टप्रद गलतफहमी को बफर में चिप को आरेखित करके ठीक करेंगे। एक नया छिपा हुआ कैनवस बनाएं, उसमें एक चिप लगाएं और फिर भारी फंक्शंस का एक गुच्छा बुलाने के बजाय खुद ही कैनवास को ड्रा करें। मैं इसके लिए atom.Class.Mutators.Generators प्लगइन का उपयोग करता हूं - एक बार एक वस्तु उत्पन्न करने का एक आसान तरीका और फिर इसे कैश से लेना।
मान लें कि हमारे पास निम्नलिखित कोड है जो एक चिप प्रदान करता है:

 var Tile = atom.Class({ [...] draw: function () { this.callHardDrawFunctions( this.libcanvas.ctx ); } [...] }) 

इसे निम्नलिखित कोड में बदलें:

 var Tile = atom.Class({ [...] Generators: { buffer: function () { var buffer = LibCanvas.buffer( this.shape, true ); this.callHardDrawFunctions( buffer.ctx ); return buffer; } }, draw: function () { this.libcanvas.ctx.drawImage({ image: this.buffer, draw : this.shape }); } [...] }) 

हां, यह थोड़ा कम सुरुचिपूर्ण हो गया, लेकिन, दूसरी ओर, हम लक्ष्य तक पहुंच गए, हमारे स्पॉट का प्रतिपादन बहुत तेज है और संसाधनों के लिए पूरी तरह से नहीं कर रहे हैं:


बफर इंजेक्शन से पहले


बफर इंजेक्शन के बाद

निष्कर्ष

कार्यक्रम और परिणाम का आनंद लें )