Canel पर चित्रफलक .js और Box2d का संयोजन

हमारे खेल को बनाने के सबसे कठिन पहलुओं में से एक दो बहुत ही शांत पुस्तकालयों को संयोजित करना था: ईसेनेल.जेएस और बॉक्स 2 डिडब । इस लेख में, हम गेम की मुख्य गेम ऑब्जेक्ट बनाने की मूल बातें पर विचार करेंगे ताकि आप बॉक्स 2 डी आकार को एक्स, वाई सिस्टम और ऑब्जेक्ट के रोटेशन के पैरामीटर को चित्रफलक में प्रदर्शित कर सकें।

इस लेख को शुरू करने से पहले, यह मान लिया जाता है कि आपको बुनियादी ज्ञान है कि कैसे बॉक्स 2 डी और चित्रफलक काम करते हैं। यदि आप box2d दुनिया के काम से परिचित नहीं हैं, तो कृपया सेठ लाड से box2d सामग्री पढ़ें। यदि आप चित्रफलक से परिचित नहीं हैं, तो आपको दस्तावेज़ के साथ खुद को परिचित करने की आवश्यकता है ताकि आप समझ सकें कि वस्तुओं को दृश्य में कैसे जोड़ा जाए और पूरे प्रदर्शन पदानुक्रम का अध्ययन करें (संकेत: इसमें फ्लैश प्रोग्रामिंग के साथ कई सामान्य पहलू हैं)।

ठीक है, चलो विवरण में तल्लीन करते हैं। हम गिरने वाले गुलाबी पक्षियों का एक सरल प्रदर्शन बनाने जा रहे हैं।

ब्राउज़र में देखें - स्रोत डाउनलोड करें

चूंकि हम पहले से ही ईजेल और बॉक्स 2 डी की मूल बातें समझते हैं, हम इंस्टॉलेशन कोड को छोड़ देंगे और दो पुस्तकालयों के संयोजन की प्रक्रिया में तल्लीन हो जाएंगे। यदि आप जानकारी को याद रखना चाहते हैं, तो बस डेमो ज़िप संग्रह डाउनलोड करें या डेमो पृष्ठ पर स्रोत कोड देखें।

चित्रफलक में अब एक निश्चित स्थिति में दृश्य में एक वस्तु जोड़ना काफी आसान है। यह है कि हम चक्रीय फ़ंक्शन के आधार पर पक्षियों को स्क्रीन पर कैसे जोड़ते हैं।

ध्यान दें कि निम्नलिखित में सभी कोड आवेषण डेमो.जेएस से गैर-कार्यात्मक अंश हैं। कार्य कोड प्राप्त करने के लिए, आपको ज़िप संग्रह डाउनलोड करना होगा।

var tick = function(dt, paused) { birdDelayCounter++; if(birdDelayCounter % 10 === 0) { // ,       birdDelayCounter = 0; birds.spawn(); } } 

 var spawn = function() { var birdBMP = new Bitmap("images/bird.png"); birdBMP.x = Math.round(Math.random()*500); birdBMP.y = -30; birdBMP.regX = 25; //        birdBMP.regY = 25; stage.addChild(birdBMP); } 

यह काफी परिचित लगता है। इस कोड के साथ, पक्षी को कैनवास के शीर्ष पर एक यादृच्छिक स्थिति में दृश्य में जोड़ा जाता है। वस्तु स्वयं काफी बहुमुखी है। आप इसकी स्थिति की प्रतिलिपि बना सकते हैं, इसे स्थानांतरित कर सकते हैं, आदि। हालांकि, यदि आप अपनी वस्तु पर भौतिक कानून लागू करना चाहते हैं, तो आपको इसे बॉक्स 2 डी पर भेजने की आवश्यकता है।

regX और regY (शुरुआती बिंदु) महत्वपूर्ण हैं जब आप एक चित्र वस्तु को बॉक्स 2 डी पर स्नैप करते हैं। यह इस तथ्य के कारण है कि बॉक्स 2d ऑब्जेक्ट में केंद्र में एक प्रारंभिक स्थिति है, चित्रफलक वस्तुओं के शीर्ष पर स्थिति के विपरीत।

इसलिए, हमारी वस्तुओं को पहले ही दृश्य में जोड़ दिया गया है, आगे प्रभावशाली कार्यों के लिए उन्हें बॉक्स 2 डी पर भेजने का समय है।

 box2d.createBird(birdBMP); 

 var createBird = function(skin) { var birdFixture = new b2FixtureDef; birdFixture.density = 1; birdFixture.restitution = 0.6; birdFixture.shape = new b2CircleShape(24 / SCALE); //  bird.png       var birdBodyDef = new b2BodyDef; birdBodyDef.type = b2Body.b2_dynamicBody; birdBodyDef.position.x = skin.x / SCALE; //  skin x  y  box2d      birdBodyDef.position.y = skin.y / SCALE; var bird = world.CreateBody(birdBodyDef); bird.CreateFixture(birdFixture); bodies.push(bird); } 

उपरोक्त कोड का उपयोग करके, एक गोल बॉक्स 2 डी बॉडी उसी स्थिति में बनाई गई है और बिटमैप के समान आकार। दुर्भाग्य से, पक्षी की छवि बॉक्स 2 डी ऑब्जेक्ट से जुड़ी नहीं है। डिबग कैनवास के बिना, आप ऑब्जेक्ट के गोल बॉक्स 2 डी को नहीं देख सकते हैं, और पक्षी स्थिर रहता है। हम बॉक्स 2 डी शरीर की स्थिति का अनुसरण करते हुए छवि कैसे बनाते हैं?

... अभिनेता! अभिनेता दृश्य बॉक्स 2 डी प्रदर्शन का मुख्य हिस्सा हैं। मूल रूप से, यह वह है जो खेल चक्र के दौरान स्थानांतरित होने के लिए मजबूर हो जाते हैं और बॉक्स 2 डी निकायों के मीट्रिक पदों का पिक्सेल निर्देशांक में अनुवाद करते हैं। चलो इसे बनाते हैं।

 var actor = new actorObject(bird, skin); bird.SetUserData(actor); //  actor     ,       ,    

 var actorObject = function(body, skin) { this.body = body; this.skin = skin; this.update = function() { //  box2d    this.skin.rotation = this.body.GetAngle() * (180 / Math.PI); this.skin.x = this.body.GetWorldCenter().x * SCALE; this.skin.y = this.body.GetWorldCenter().y * SCALE; } actors.push(this); } 

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

 //  world.step for(var i=0, l=actors.length; i<l; i++) { actors<i>.update(); } 

छवि अब सब कुछ प्रदर्शित करती है जो बॉक्स 2 डी बॉडी शारीरिक प्रक्रियाओं के अनुकरण के हिस्से के रूप में करती है।

यदि आप एक विशिष्ट बिंदु पर शरीर और उसकी छवि को हटाना चाहते हैं, तो आप शरीर को सरणी में जोड़ सकते हैं। प्रत्येक चरण से पहले निकाले जाने चाहिए।

 //  world.step for(var i=0, l=bodiesToRemove.length; i<l; i++) { removeActor(bodiesToRemove<i>.GetUserData()); // get the actor object in the user data of the body and send to removeActor function bodiesToRemove<i>.SetUserData(null); world.DestroyBody(bodiesToRemove<i>); } //  world.step if(bodies.length > 30) { bodiesToRemove.push(bodies[0]); bodies.splice(0,1); } 

 var removeActor = function(actor) { stage.removeChild(actor.skin); actors.splice(actors.indexOf(actor),1); } 

अंत में हमने कर दिखाया! यदि आप समझते हैं कि टकराव, आउट-ऑफ-बैंड डिटेक्शन आदि में बॉक्स 2 डी फिल्टर कैसे काम करता है, तो आप कई महत्वपूर्ण कदम उठा सकते हैं। मुझे उम्मीद है कि भविष्य में हम इस सामग्री से अधिक परिचित हो जाएंगे।

ब्राउज़र में देखें - स्रोत डाउनलोड करें

लेखक जस्टिन श्रेडर
www.luxanimals.com/blog/article/combining_easel_box2d