🗄️ 👧🏻 🤶🏿 LibCanvas पर Isometric सैपर (html5) 🔯 💲 🚑

यह विषय HTML5 और LibCanvas पर पिछले विषय क्लासिक माइनस्वीपर से अलग होगा। बल्कि इसे एक निरंतरता भी कहा जा सकता है। और पहले भाग में चरण-दर-चरण और विस्तृत निर्देश थे कि खिलौने को कैसे काम किया जाए, फिर इस भाग में कुछ दिलचस्प ट्रिक्स होंगे, "इसे कैसे रेंडर करें"।

प्ले आइसोमेट्रिक "माइनस्वीपर"

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

आइसोमेट्रिक दृश्य
एक गंदे हैक के माध्यम से प्रतिपादन गति का अनुकूलन
स्प्रिट एनिमेशन
खींचने योग्य परतें
एप्लिकेशन की सुविधाओं के अनुसार माउस हैंडलर का अनुकूलन करें

गीतात्मक विषयांतर

फिर भी, मैं निरर्थक आलोचना में नहीं जाने का प्रस्ताव करता हूं, "क्लासिक सैपर बेहतर है", "इस रूप के द्वार बकवास हैं" और "आपके पास वहां थोड़ा अनियमित सूत्र की छाया है।" लक्ष्य थोड़े समय में एक अच्छा खिलौना बनाना था (कला भाग के पूर्ण कार्यान्वयन के लिए लगभग 8 घंटे और खाली समय में इत्मीनान से गति से कोड के पूर्ण कार्यान्वयन के लिए लगभग 4 घंटे)। और इस खिलौने के आधार पर कुछ दृष्टिकोण प्रकट करने के लिए।

आइसोमेट्रिक दृश्य

चलो सबसे आसान और सबसे दिलचस्प के साथ शुरू करते हैं। LibCanvas पर Isometric खेल दो टूल - LibCanvas.App ढांचे को LibCanvas.App कार्यान्वित किए जाते हैं, जो पिछले दो विषयों और IsometricEngine.Projection वर्ग में वर्णित था।

IsometricEngine.Projection की एक विशेषता यह है कि यह स्वयं कुछ भी लागू नहीं करता है। यह केवल आइसोमेट्रिक 2d निर्देशांक और इसके विपरीत में अंतरिक्ष में 3 डी निर्देशांक का अनुवाद करने के लिए एक सुविधाजनक और त्वरित तरीका प्रदान करता है।

 var projection = new IsometricEngine.Projection({ factor: new Point3D(1, 0.5, 1) }); //   3d  2d var point2d = projection.toIsometric(new Point3D(100, 50, 10)); //   2d  3d var point3d = projection.to3d( mouse.point, 0 );

2d निर्देशांक से अनुवाद करते समय, यह हमेशा स्पष्ट नहीं होता है कि किस बिंदु पर विचार किया जाना है, इसलिए, भविष्य के जेड-समन्वय को भी संकेत दिया जाना चाहिए

वैसे, यह किस तरह का factor ? सिद्धांत रूप में, सही आइसोमेट्रिक प्रक्षेपण 120 ° के कोण के साथ एक प्रक्षेपण है, लेकिन व्यवहार में, खिलौने ~ 117 डिग्री के कोण के साथ एक प्रक्षेपण का उपयोग करते हैं ताकि लाइनें पिक्सेल ग्रिड में आ जाएं।

यह सिर्फ कारक है और आपको पहलू अनुपात निर्धारित करने की अनुमति देता है। आप किसी भी दृष्टिकोण को चुन सकते हैं:

 //   factor: new Point3D( 1, 0.5, 1) //   factor: new Point3D(0.866, 0.5, 0.866)

अपने आवेदन में, मैंने सभी नियमों के बारे में एक लानत नहीं दी और बस कारक को चित्र के आकार के बराबर बना दिया, जिसके कारण मेरे पास निर्देशांक में चित्र का बायाँ कोना है [0;0;0] , और दाहिने कोने में [1;1;0]

 factor: new Point3D(90, 52, 54)

तो मैंने इस टूल को एप्लिकेशन की आवश्यकताओं के लिए कैसे अनुकूलित किया? लेकिन बहुत सरल है। इस तरह एक सेल एलिमेंट बनाएं, जहां सेल केवल आकृति के केंद्र के आसपास खींची गई हो।

 /** @class IsoMines.Cell */ atom.declare( 'IsoMines.Cell', App.Element, { renderTo: function (ctx, resources) { ctx.drawImage({ image : resources.get('images').get('static-carcass'), center: this.shape.center }); } });

और फिर, प्रक्षेपण का उपयोग करते हुए, मैंने वांछित संख्या में कोशिकाओं का निर्माण किया, उन्हें बहुभुज पारित किया:

 createPolygon: function (point) { var p = this.projection; return new Polygon( p.toIsometric(new Point3D(point.x , point.y , 0)), p.toIsometric(new Point3D(point.x+1, point.y , 0)), p.toIsometric(new Point3D(point.x+1, point.y+1, 0)), p.toIsometric(new Point3D(point.x , point.y+1, 0)) ); }, createCells: function () { var size = this.fieldSize, x, y, point; for (x = size.width; x--;) for (y = size.height; y--;) { point = new Point(x, y); new IsoMines.Cell(this.layer, { point : point, shape : this.createPoly(point) }); }

मैं प्रलेखन पढ़ने की अत्यधिक सलाह देता हूं - यह बहुत दिलचस्प है, IMHO।

रेंडरिंग स्पीड ऑप्टिमाइज़ेशन

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

ऐसा करने के लिए, सबसे पहले, आपको एक परत बनाते समय LibCanvas.App में चौराहे की जांच को अक्षम करना होगा

 this.layer = this.app.createLayer({ intersection: 'manual' });

दूसरे, सफाई विधि को खाली करके ओवरराइड करें:

 /** @class IsoMines.Cell */ atom.declare( 'IsoMines.Cell', App.Element, { clearPrevious: function () {} });

मान लीजिए कि हम किसी कारण से पूरी तरह से सफाई से इनकार नहीं कर सकते। उदाहरण के लिए ... हमारी छवि में पारभासी क्षेत्र या ऐसा कुछ है। परिणामस्वरूप, आप उपयोगकर्ता kazmiruk की तरह एक समस्या का सामना करेंगे :

यह LibCanvas.App के दो " LibCanvas.App " से LibCanvas.App - बाउंडिंगशीटंगल को बाउंडिंग फिगर माना जाता है, और यह इसे ठीक से मिटा देता है। यह इनमें से किसी भी व्यवहार को फिर से परिभाषित करने के लिए पर्याप्त है (उनमें से केवल एक, दोनों का कोई मतलब नहीं है):

 /** @class IsoMines.Cell */ atom.declare( 'IsoMines.Cell', App.Element, { //     ,    boundingRectangle get currentBoundingShape () { return this.shape; } //    , .      clearPrevious: function (ctx) { ctx.clear( this.shape ); } });

वास्तव में, इस अनुकूलन का उपयोग सभी स्थिर या अर्ध-स्थिर परतों के लिए किया जा सकता है। मत भूलो कि हमारे पास कई अलग-अलग परतें हो सकती हैं और उनमें से प्रत्येक की अपनी व्यवहार रणनीति है:

 this.layerStatic = this.app.createLayer({ intersection: 'manual' }); this.layerDynamic = this.app.createLayer({ intersection: 'auto' });

स्प्रिट एनिमेशन

अगला दिलचस्प विषय यह है कि एनिमेशन को कैसे सम्मिलित किया जाए और कैसे काम किया जाए - सुंदर चित्र एक ला गिफ। यह इन उद्देश्यों के लिए है कि मेरे पसंदीदा प्लगइन्स में से एक है - एनीमेशन ।

मुख्य विचार यह है कि हम एक पीएनजी-फाइल स्थानांतरित करते हैं, जिसमें बहुत सारे एनीमेशन होते हैं, जिसे हम "वीडियो" में एकत्र करते हैं। यह ऐसा दिखता है, लेकिन पृष्ठभूमि में वर्गों के बजाय पारभासी के साथ, दो बार कई फ्रेम और प्रत्येक फ्रेम का आकार:

।

एक एनीमेशन बनाना तीन चरणों में विभाजित है:

1. कटा हुआ फ्रेम

एनिमेशन का उपयोग करते हुए। हमने कई छोटे चित्रों में अपने ग्रिड चित्र को काट दिया:

 var frames = new Animation.Frames( image, 180, 104 );

आपके पास एक स्प्राइट में कई अलग-अलग एनिमेशन हो सकते हैं। कटिंग केवल एक बार किया जाना चाहिए, और फिर सभी प्रोटोटाइप के लिए इसका उपयोग करना चाहिए।

2. प्रोटोटाइप एनीमेशन

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

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

 this.animationSheets = atom.object.map({ opening : atom.array.range( 12, 23), closing : atom.array.range( 23, 12), locking : atom.array.range( 0, 11), unlocking: atom.array.range( 11, 0) }, function (sequence) { return new Animation.Sheet({ frames: frames, delay : 40, sequence: sequence }); }); console.log( this.animationSheets );

3. एनीमेशन का सार

लेकिन हर बार एक सीधी शुरुआत के लिए एक एनीमेशन ऑब्जेक्ट बनाया जाता है, जहां हम कॉलबैक भेजते हैं और घटनाओं पर लटका सकते हैं। सैपर में, मैंने राज्य को स्विच करके एनिमेशन का शुभारंभ किया:

IsoMines.Cell में एनिमेटेड स्टेट स्विचिंग

 /** @class IsoMines.Cell */ atom.declare( 'IsoMines.Cell', App.Element, { preStates: { opened: 'opening', closed: 'unlocking', locked: 'locking' }, changeState: function (state, callback) { this.state = this.preStates[state]; this.animation = new Animation({ sheet : this.sheets[this.state], onUpdate: this.redraw, onStop : function () { this.state = state; this.animation = null; this.redraw(); callback && callback.call(this); }.bind(this) }); }, getGatesImage: function () { return (this.animation && this.animation.get()) || 'gates-' + this.state; }, renderTo: function (ctx) { this.drawImage(ctx, this.getGatesImage()); this.drawImage(ctx, 'static-carcass'); }, drawImage: function (ctx, image) { if (typeof image == 'string') { image = this.layer.app.resources.get('images').get(image); } ctx.drawImage({ image : image, center: this.shape.center }); }, });

खींचने योग्य परतें

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

सिद्धांत बहुत सरल है, हालांकि यह कुछ वर्गों में से एक है जो प्रलेखन द्वारा कवर नहीं किया गया है। उम्मीद है कि जल्द ही इसे ठीक कर लें)।

तो, शुरुआत के लिए, आइए App.LayerShift का उपयोग करें, जो आपको इसके सभी तत्वों के साथ परत को स्थानांतरित करने की अनुमति देता है और बदलाव के लिए फ्रेम सेट करता है (यदि हम अनन्तता के लिए कहीं घसीटा नहीं जाना चाहते हैं, और फिर इसे नहीं पा सकते हैं)।

उसके बाद, हम बिल्ट-इन क्लास App.Dragger उपयोग करेंगे, जो हमें हमारी परत को खींचने की अनुमति देता है। प्रारंभ कॉलबैक में, हम यह निर्धारित करेंगे कि इस ड्रैग को किन परिस्थितियों में शुरू किया जाना चाहिए।

खैर, मोड के आधार पर, हम ड्रेज की सीमाओं को निर्धारित करेंगे - एक पूर्ण-स्क्रीन और न्यूनतम स्थिति में, वे अलग-अलग होंगे।

परत को पागल बनाना

  initDragger: function () { this.shift = new App.LayerShift(this.layer); this.updateShiftLimit(); new App.Dragger( this.mouse ) .addLayerShift( this.shift ) .start(function (e) { return e.button == 1 || e.shiftKey; }); }, updateShiftLimit: function () { var padding = new Point(64, 64); this.shift.setLimitShift(new Rectangle( new Point(this.app.container.size) .move(this.layerSize, true) .move(padding, true), padding )); },

यह ध्यान देने योग्य है कि, डिफ़ॉल्ट रूप से, ड्रैगिंग के दौरान ड्राइंग जमी हुई है। मैंने इस अनुकूलन को पुराने खिलौनों, जैसे कि फ़राओं और सीज़र 3 पर देखा - जब मैंने वहाँ नक्शा स्थानांतरित किया - एनिमेशन बंद हो गए, और "दीवार के खिलाफ झुकाव" आप इसे स्पष्ट रूप से नोटिस कर सकते थे। यह व्यवहार बदलने के लिए काफी आसान है, लेकिन इसके लिए अपने वंशज App.Dragger आवश्यकता होगी

माउस हैंडलर अनुकूलन

अनुप्रयोग विकास के अंतिम समय में जिस विषय को छुआ गया है वह एक प्रोफाइलर के साथ अनुकूलन है।

तथ्य यह है कि, डिफ़ॉल्ट रूप से, हैंडलर शुरू में एक धीमी गति के एल्गोरिथ्म के अनुसार काम करता है, लेकिन एक बहुत ही सार्वभौमिक एल्गोरिथ्म - यह माउस स्वामित्व के लिए तत्वों के सभी आकारों की जांच करता है और अगर यह 5 * 5 आकार के साथ बिल्कुल भी महसूस नहीं करता है, तो एक पेशेवर 30/16 आकार आधा हजार है ऐसे तत्व जिन्हें प्रत्येक माउस आंदोलन से गुजरना पड़ता है, और 100 * 100 के आकार के साथ अवास्तविक 10,000 ऑब्जेक्ट होंगे । चेहरे पर द्विघात वृद्धि (

लेकिन प्रत्येक एप्लिकेशन के अपने अनुकूलन के तरीके हैं - तेज एल्गोरिदम और कैशिंग। इसके लिए, माउसहैंडलर हमारे स्वयं के "तत्व खोज इंजन" को पारित करने की क्षमता प्रदान करता है, जिसके निर्माण में हम सभी आवश्यक डेटा स्थानांतरित कर सकते हैं:

 this.mouseHandler = new App.MouseHandler({ mouse: this.mouse, app: this.app, search: new IsoMines.FastSearch(this.shift, this.projection) });

हमारे खेल के मामले में, हम पूरे तत्व को अनुक्रमित हैश में दर्ज करेंगे, और फिर IsometricEngine.Projection.to3D पद्धति का उपयोग करके खोज करेंगे - इसलिए O(N ² ) जटिलता के बजाय हमें O(C) जटिलता प्राप्त होती है - किसी तत्व की खोज करने की निरंतर गति।

क्लिक की गई सेल के लिए त्वरित खोज

 /** @class IsoMines.FastSearch */ atom.declare( 'IsoMines.FastSearch', App.ElementsMouseSearch, { initialize: function (shift, projection) { this.projection = projection; this.shift = shift; this.cells = {}; }, add: function (cell) { return this.set(cell, cell); }, remove: function (cell) { return this.set(cell, null); }, set: function (cell, value) { this.cells[cell.point.y + '.' + cell.point.x] = value; return this; }, findByPoint: function (point) { point = point.clone().move(this.shift.getShift(), true); var path = this.projection.to3D(point), cell = this.cells[Math.floor(path.y) + '.' + Math.floor(path.x)]; return cell ? [ cell ] : []; } });

अनुकूलन की गुणवत्ता की जांच करने के लिए, मैंने लगभग 1000 तत्वों (33x33) के आकार के साथ एक नक्शा बनाया, पहली बार त्वरित खोज को बंद कर दिया, प्रोफाइलर के नीचे क्षेत्र में माउस के लिए एक लंबा समय लिया और फिर त्वरित खोज को चालू किया और माउस को फिर से क्षेत्र में स्थानांतरित कर दिया। परिणाम:

करने के लिए:

के बाद:

एप्लिकेशन लोड 74.4% से घटकर 3.4% हो गया - इस तरह के एक सरल तरीके से बीस गुना से अधिक। मेरी राय में इस पद्धति का विशेष लाभ यह है कि यह आपको डिफ़ॉल्ट एल्गोरिथ्म का उपयोग करके एप्लिकेशन को जल्दी से प्रोटोटाइप करने की अनुमति देता है, और बाद की तारीख में स्थानांतरण का अनुकूलन करता है।

प्ले आइसोमेट्रिक "माइनस्वीपर"

पोस्ट स्क्रिप्ट

कुछ हफ़्ते में मैं कीव में जावास्क्रिप्ट फ्रेमवर्क दिवस पर विषय "एटमजस और लिब्कनव्स" के साथ बोलूंगा। अब तक मैंने यह तय नहीं किया है कि मैं क्या बताने जा रहा हूं, क्योंकि इस सर्वेक्षण में दो बिंदुओं पर आपकी राय दिलचस्प है, उत्तर के लिए अग्रिम धन्यवाद।

और हाँ, यदि आपके कोई प्रश्न हैं, लेकिन किसी कारण से आप उन्हें यहाँ नहीं पूछ सकते हैं, तो होबे पर - ईमेल पर लिखें: shocksilien@gmail.com

LibCanvas पर Isometric सैपर (html5)

प्ले आइसोमेट्रिक "माइनस्वीपर"

गीतात्मक विषयांतर

आइसोमेट्रिक दृश्य

स्प्रिट एनिमेशन

1. कटा हुआ फ्रेम

2. प्रोटोटाइप एनीमेशन

3. एनीमेशन का सार

खींचने योग्य परतें

माउस हैंडलर अनुकूलन

प्ले आइसोमेट्रिक "माइनस्वीपर"

पोस्ट स्क्रिप्ट

More articles: