जावास्क्रिप्ट गेमिंग: भाग 1. Box2d और भौतिकी की मूल बातें

एक प्रस्तावना के बजाय।

मैंने हमेशा प्यार किया है और कंप्यूटर गेम पसंद करूंगा। उनके पास अपने स्वयं के आंतरिक जादू के कुछ प्रकार हैं, जो हमेशा एक ही समय में आकर्षित और मोहित करते हैं। अपने पूरे जीवन में मैंने दर्जनों खेल फिर से खेले हैं, अनुभवी वोल्फेंस्टीन और ड्यून 2 से आधुनिक ब्लॉकबस्टर्स तक। और अब, अगले हिट को खत्म करने और अंतिम वीडियो और क्रेडिट को देखते हुए, सोचा "क्या होगा? .." मेरे सिर में अधिक से अधिक बार चमकता है।

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

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

सामान्य तौर पर, कम रोग, अधिक काम। मुझे आशा है कि आप रुचि लेंगे। CPAP ^ _ ^ में एंग्री बर्ड्स का उपयोग करने के लिए हर्ष देवताओं ने मुझे माफ कर दिया

परिचयात्मक और अस्वीकरण

नोटों की पूरी श्रृंखला का अंतिम लक्ष्य एंग्री बर्ड्स का पूर्ण विकसित क्लोन बनाना है, जिसमें कम से कम 3 प्रकार के हथियार और 5 अलग-अलग स्तर हैं। हां, उनमें से पहले से ही पर्याप्त हैं, और विभिन्न लेआउट में, और यहां तक ​​कि एंग्री बर्ड्स स्वयं कम से कम 3 संस्करण हैं, लेकिन क्या आपको कुछ अभ्यास करने की आवश्यकता है? इस प्रक्रिया में, मैं सभी पहलुओं को छूने की कोशिश करूंगा - भौतिक इंजन ही, रास्टर ग्राफिक्स वाला काम, स्तरीय संपादक (जिसे आपको निश्चित रूप से आवश्यकता होगी), मेनू / क्रेडिट / सेटिंग्स, ध्वनि और संगीत के रूप में बाध्यकारी, और एक हजार अन्य छोटी चीजें। वास्तव में, मैं खुद अभी तक यह सब नहीं कर पाया हूं, लेकिन लिखने की प्रक्रिया में मैं यहां बताऊंगा कि मैं इसे कैसे और किस तरह से करने में कामयाब रहा और इससे क्या हुआ।

मैं विशेष रूप से दीर्घवृत्त के साथ कोड के कुछ लंबे टुकड़े दिखाऊंगा। उन लोगों के लिए जो विशेष रूप से अधीर हैं, नोट के अंत में एक कामकाजी उदाहरण के लिए एक लिंक है।

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

चलो चलते हैं!

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

मैंने कई कारणों से बॉक्स 2 डी को भौतिक इंजन के रूप में चुना:

1. उसके पास काफी मजबूत फ़्लैश समुदाय है जहां आप मदद या सलाह मांग सकते हैं।
2. Box2dWeb लाइब्रेरी जिसे मैंने उपयोग करने का निर्णय लिया है वह प्रत्यक्ष Box2dAS पोर्ट है, इसलिए कम से कम संदर्भ API पहले से मौजूद है।
3. पर्याप्त उपयोगी जानकारी, हालांकि मंगोलियाई विरोधी में, विकास प्रक्रिया और इंजन के अंदरूनी हिस्सों के बारे में।
4. और, ज़ाहिर है, सैकड़ों सफल अनुप्रयोग।

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

< html >
< सिर >
< शीर्षक > गुस्से में पक्षियों WRYYYYYYYY !!!! < / शीर्षक >
< script src = "/js/jquery.js" प्रकार = "टेक्स्ट / जावास्क्रिप्ट" > < / script >
< script src = "/js/box2d.js" type = "text / javascript" > < / script >

< स्क्रिप्ट >
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({
नया खेल ();
});
< / script >
< शरीर >
<कैनवास आईडी = "कैनवास" चौड़ाई = "800" ऊंचाई = "600" शैली = " पृष्ठभूमि- रंग : # 333333 ; "> </ कैनवास>
< / शरीर >
< script type = "text / javascript" >
खेल = समारोह () {
...
}
< / script >
< / html >

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

खेल = समारोह ( ) {

// मैंने स्थिरांक के रूप में ऑब्जेक्ट प्रकारों को तुरंत नामित करने का निर्णय लिया
const PIG = 1 ;
const BIRD = 2 ;
const PLANK = 3 ;

// "फेंक" को संसाधित करते समय हमें जिस ध्वज की आवश्यकता होगी।
isMouseDown = false ;

// वर्चुअल गुलेल के लिए भविष्य का गम
mouseJoint = false ;

// फेक प्रोसेसिंग के दौरान उपयोग किया जाता है
शरीर = असत्य ;
माउसपोजिशन = { x : 0 , y : 0 } ;

// हमारी वर्तमान जरूरतों के लिए सभी आवश्यक संसाधन।
// मैंने इसे फिर से परिभाषित करने का फैसला किया ताकि एक असंगत और अपठनीय कोड के किलोमीटर को अवरुद्ध न करें।
// प्रत्येक संसाधन का मूल्य मैं लेख में बाद में समझाने की कोशिश करूंगा।
b2AABB = Box2D। टकराव की। b2AABB ;
b2World = Box2D। गतिशीलता । b2World ;
b2Vec2 = Box2D। आम। मठ । b2Vec2 ;
b2DebugDraw = Box2D। गतिशीलता । b2DebugDraw ;
b2Body = Box2D। गतिशीलता । बी 2 बॉडी ;
b2BodyDef = Box2D। गतिशीलता । b2BodyDef ;
b2FixtureDef = Box2D। गतिशीलता । b2FixtureDef ;
b2PolygonShape = Box2D। टकराव की। आकृतियाँ । b2PolygonShape ;
b2CircleShape = Box2D। टकराव की। आकृतियाँ । b2CircleShape ;
b2MouseJointDef = Box2D। गतिशीलता । जोड़ों में । b2MouseJointDef ;
b2ContactListener = Box2D। गतिशीलता । b2ContactListener ;

// हमारी दुनिया बनाएं।
दुनिया = नया b2World (
नया b2Vec2 ( 0 , 10 ) // ग्रेविटी वेक्टर।
, सच्चा // doleep flag।
) ;

init = function ( ) { // हमारी दुनिया में हर चीज का इनिशियलाइज़ेशन, जब कोई ऑब्जेक्ट बनाया जाता है
...
}

init ( ) ;
}

मैं अपनी दुनिया के मापदंडों पर थोड़ा और विस्तार से ध्यान देना चाहूंगा। पहला गुरुत्वाकर्षण सदिश है। Box2d पर्याप्त विस्तार में आसपास की दुनिया के भौतिकी मॉडल, इसलिए यह गुरुत्वाकर्षण के प्रभाव के बिना नहीं कर सकता था। हम इस वेक्टर का उपयोग वाई अक्ष के साथ प्रति सेकंड 10 आभासी मीटर के बराबर गुरुत्वाकर्षण त्वरण को सेट करने के लिए करते हैं। दूसरा पैरामीटर: doSleep, वर्तमान में निष्क्रिय तत्वों की गणना नहीं करने की अनुमति देता है। यह काम की गति को बहुत प्रभावित करता है और मैं इस पैरामीटर को बदलने की सलाह नहीं देता।

मैं यह भी जोड़ना चाहूंगा कि डिफ़ॉल्ट रूप से Box2d ऊपरी बाएँ कोने में एक शुरुआत के साथ एक समन्वय प्रणाली का उपयोग करता है।

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

खेल = समारोह ( ) {
...
init = function ( ) {
खिड़की। सेटइंटरवल ( अपडेट , 1000/60 ) ;
}

अद्यतन = फ़ंक्शन ( ) {
दुनिया। चरण ( 1/60 , 10 , 10 ) ;
दुनिया। ड्राडेबुगडेटा ( ) ;
दुनिया। ClearForces ( ) ;
}
}

अद्यतन () फ़ंक्शन में, हम, सबसे पहले, दुनिया को अपडेट करने की आवृत्ति निर्धारित करते हैं - प्रति सेकंड 60 फ़्रेम, और वस्तुओं की गति और उनकी स्थिति को प्रति 1 घड़ी चक्र में बदलने की अधिकतम संसाधित संख्या भी निर्धारित करते हैं। इन मापदंडों में वृद्धि के साथ, समग्र प्रतिक्रिया दर में वृद्धि होगी, लेकिन वस्तुओं की संख्या में वृद्धि के साथ, हम खुद को सिस्टम संसाधनों में दफन कर सकते हैं, और एक कमी के साथ, हम माप से माप तक वस्तुओं की गलत प्रसंस्करण प्राप्त करते हैं। 10 - काफी समझदार औसत।

खैर, अब, यह हमारे कैनवास को इंजन हैंडलर को बांधने के लायक है, ताकि हम इस पर कुछ आकर्षित कर सकें।

खेल = समारोह ( ) {
...
init = function ( ) {
बिल्डवर्ल्ड ( ) ;
initDraw ( ) ;

खिड़की। सेटइंटरवल ( अपडेट , 1000/60 ) ;
}

initDraw = function ( ) {
debugDraw = new b2DebugDraw ( ) ;

debugDraw। सेटस्प्राइट ( दस्तावेज़। GetElementById ( "कैनवास" ) । GetContext ( "2d" ) ) ;
debugDraw। सेटड्रास्केल ( 30.0 ) ;
debugDraw। SetFillAlpha ( 0.5 ) ;
debugDraw। सेटलाइनिटी ( 1.0 ) ;
debugDraw। सेटफ्लैग्स ( b2DebugDraw। E_shapeBit | b2DebugDraw। E_jointBit ) ;
दुनिया। सेटडबगड्रॉ ( डीबगड्रॉ ) ;
}

buildWorld = function ( ) {
fixDef = new b2FixtureDef ( ) ;

fixDef। घनत्व = 1.0 ;
fixDef। घर्षण = 0.5 ;
fixDef। पुनर्स्थापन = 0.2 ;
}
}

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

यह भी ध्यान देने योग्य है कि Box2d पिक्सल पर ग्रिड डेटा के रूप में काम नहीं करता है। यह मूल रूप से मानक सी प्रणाली का उपयोग करने के लिए डिज़ाइन किया गया था - इसलिए हमारे पास मीटर, किलोग्राम, सेकंड और इसी रूपांतरण हैं। अब मैं इस क्षेत्र में विवरण में नहीं जाऊंगा, बस ध्यान रखें कि बॉक्स 2 डी दृश्य में 1 मीटर स्क्रीन अंतरिक्ष के लगभग 30 पिक्सल है।

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

ड्राइंग

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

खेल = समारोह ( ) {
...
पिगडाटा = फ़ंक्शन ( ) { } ;
PigData। प्रोटोटाइप । GetType = function ( ) {
वापसी PIG ;
}

प्लांकडाटा = फ़ंक्शन ( ) { }
... // GetType () PigData.GetType () के समान

buildWorld = function ( ) {
...
bodyDef = new b2BodyDef ( ) ;
bodyDef। type = b2Body b2_staticBody ;

fixDef। आकार = नया b2PolygonShape ;
fixDef। आकार । सेटैसबॉक्स ( 20 , 2 ) ;
bodyDef। स्थिति । सेट ( 10 , 600/30 + 1.8 ) ;
दुनिया। CreateBody ( bodyDef ) । CreateFixture ( FixDef ) ;

... // 3 और दीवारें

कैनवासपोजिशन = $ ( "#canvas" ) । ऑफसेट ( ) ;
}

buildLevel = function ( ) {

createPlank ( 22 , 20 , 0.25 , 2 )
... // 8 और बोर्ड बनाना

createPig ( 20 , 11 , 0.5 ) ;
... // 2 और अतिरिक्त सूअर
}

createPlank = function ( x , y , चौड़ाई , ऊंचाई ) {
bodyDef। type = b2Body b2_dynamicBody ;
fixDef। आकार = नया b2PolygonShape ;
fixDef। आकार । SetAsBox (
चौड़ाई
, ऊँचाई
) ;

bodyDef। स्थिति । x = x ;
bodyDef। स्थिति । y = y ;
तख़्त = संसार। CreateBody ( bodyDef ) ;
तख़्त। सेटयूसेरडाटा ( नया प्लांकडाटा ( ) ) ;
तख़्त। CreateFixture ( FixDef ) ;
}

createPig = function ( x , y , r ) {
... // एक विधि CreatePlank विधि के समान है, सिवाय इसके कि CircleShape और PigData () का उपयोग किया जाता है;
}
}

Box2d आपको किसी भी भौतिक ऑब्जेक्ट को एक अतिरिक्त "उपयोगकर्ता" इंटरफ़ेस से बांधने की अनुमति देता है, जिसके साथ आप सीधे गेम लॉजिक को लागू कर सकते हैं। यही कारण है कि हमने 2 ऑब्जेक्ट जोड़े - पिगडाटा और प्लैंकडाटा, जो ऑब्जेक्ट के प्रकार को वापस करते हैं। यह थोड़ा बाद में महत्वपूर्ण हो जाएगा जब हम टकराव से निपटने का काम करेंगे।

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

वहां हम ऑब्जेक्ट के ज्यामितीय आकार, इसके ऊपरी बाएं कोने की स्थिति और आयामों को इंगित करते हैं। सब कुछ मीटर में है (ओह, मैंने कब तक अनुमान लगाया है कि मेरे आकार और पिक्सेल मेल नहीं खाते हैं!)।

खैर, अंत में, हम नई ड्रावेल () विधि को समाप्त करते हैं, जो हमें बोर्डों और सूअरों के साथ-साथ पूरे स्तर पर आकर्षित करेगा।

गुलेल

कहानी का सबसे दिलचस्प हिस्सा। अब आइए एक गुलेल का एक मनमाना प्रोटोटाइप बनाने की कोशिश करें जो हमारे पक्षियों को सूअरों में लॉन्च करेगा।

इसके लिए हमें एक माउस की आवश्यकता है।

खेल = समारोह ( ) {
...
init = function ( ) {
bindMouse ( ) ;
...
}

bindMouse = function ( ) {
$ ( दस्तावेज ) । मूसडाउन ( फ़ंक्शन ( ई ) {
isMouseDown = true ;
संभाल ( ई ) ;
$ ( दस्तावेज ) । बाइंड ( " मूसमोव " , { } , हैंडलहाउस ) ;
} ;

$ ( दस्तावेज ) । माउसअप ( फ़ंक्शन ( ई ) {
isMouseDown = false ;
$ ( दस्तावेज ) । unbind ( "मूसमव" ) ;
} ;
}

संभाल = कार्य ( ई ) {
माउसएक्स = ( ई। क्लाइंटएक्स - कैनवसपॉइंट। बाएं ) / 30 ;
माउसवाई = ( ई। क्लाइंटवाई - कैनवासपोजिशन। शीर्ष ) / 30 ;
} ;

अद्यतन = फ़ंक्शन ( ) {
अगर ( isMouseDown ) {
अगर ( ( शरीर ) ) {
mousePosition = { x : mouseX , y : mouseY } ;
createPig ( mouseX , mouseY , 0.40 ) ;
body = getBodyAtMouse ( ) ;

md = new b2MouseJointDef ( ) ;
md। bodyA = संसार। GetGroundBody ( ) ;
md। bodyB = शरीर ;
md। लक्ष्य । सेट ( माउसपोजिशन। एक्स , माउसपोजिशन। वाई ) ;
md। collideConnected = true ;
md। maxForce = 300.0 * शरीर। गेटमैस ( ) ;
mouseJoint = दुनिया। CreateJoint ( md ) ;
शरीर। सेटआवेक ( सच्चा ) ;
}

शरीर। सेटपोजिशन ( नया b2Vec2 ( mouseX , mouseY ) ) ;
}

अगर ( mouseJoint और& ! isMouseDown ) {
mouseX = mousePosition। x ;
mouseY = माउसपाइप। य ;
अगर ( getBodyAtMouse ( ) )
दुनिया। नष्ट करना ( माउसजॉइंट ) ;
mouseJoint = null ;
शरीर = असत्य ;
}
}
...
}
}

तो हमने यहाँ क्या किया है? पहला, निश्चित रूप से, मूसडाउन और माउसअप माउस संचालकों ने हमारे छोटे से खेल में प्रवेश किया है। अब, जब आप खेल के मैदान में माउस बटन पर क्लिक करते हैं, isMouseDown ध्वज सेट किया जाएगा, ठीक है, जब आप माउस को स्थानांतरित करते हैं, तो mouseX और mouseY में संग्रहीत निर्देशांक बदल जाएंगे। दूसरी चीज जो हमने हासिल की थी, जब माउस को क्लिक किया गया था, तब ऑब्जेक्ट का डायनामिक निर्माण था, इस हिस्से को मैंने अपडेट () विधि में डाला। मोटे तौर पर, हम तुरंत एक नया "पक्षी" बनाते हैं यदि यह वहां नहीं था, भले ही यह हमारे देश में "सुअर" प्रकार के साथ एक वस्तु है - यह खराब नहीं होता है।

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

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

यदि दबाया जाता है, isMouseDown फ्लैग बदल जाता है और दूसरी स्थिति काम करना शुरू कर देती है, जो एक ही गेटबॉक्सीएटमाउस विधि का उपयोग करके निर्धारित करता है कि क्या शरीर संलग्न लिगामेंट के केंद्र को पार कर गया है, और यदि पार किया गया है, तो यह लिगामेंट को हटा देता है। बदले में, शरीर, अर्थात्। हमारे पक्षी-सुअर को उन सभी सूअरों के डर से मुक्त उड़ान के लिए भेजा जाता है, जो ^ _ ^ नहीं उड़ते हैं।

GetBodyAtMouse () पद्धति पर, मैं और अधिक विस्तार से जानना चाहूंगा, यह बहुत दिलचस्प है।

फ़ंक्शन getBodyAtMouse ( ) {
mousePVec = new b2Vec2 ( mouseX , mouseY ) ;

var aabb = new b2AABB ( ) ;
aabb। निचला हिस्सा । सेट ( माउसएक्स - 0.001 , माउसवाई - 0.001 ) ;
aabb। ऊपरी भाग । सेट ( माउसएक्स + 0.001 , माउसवाई + 0.001 ) ;

चयनितबॉडी = अशक्त ;
दुनिया। QueryAABB ( getBodyCallback , aabb ) ;
चयनित चयन करें ;
}

getBodyCallback = फ़ंक्शन ( स्थिरता ) {
अगर ( स्थिरता। GetBody ) ( ) GetType ( ) ! = b2Body। b2_staticroody {
अगर ( स्थिरता। GetShape ) ( ) । TestPoint ( स्थिरता। GetBody ( ) । GetTransform ( ) , mousePVec ) ) {
चयनितबॉडी = स्थिरता। गेटबॉडी ( ) ;
झूठे लौटना ;
}
}
सच लौटना ;
}

यहां पहली बात यह है कि वर्तमान माउस की स्थिति के साथ एक नया वेक्टर बनाना है। अगला, हम एक संरचना बनाते हैं जो माउस पॉइंटर के तहत बॉक्स 2 डी समन्वय प्रणाली में स्क्रीन स्पेस का हिस्सा आवंटित करता है, और getBodyCallback का उपयोग करके हम यह निर्धारित करते हैं कि क्या माउस शरीर के नीचे का क्षेत्र किसी भी शरीर के साथ प्रतिच्छेदन करता है, और यदि ऐसा है, तो एक नया चयनितबॉडी सेट करें। सिद्धांत रूप में, सब कुछ सरल और गैर-तुच्छ है।

सूअरों

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

खेल = समारोह ( ) {
...
GameContactListener = function ( ) { } ;
GameContactListener। प्रोटोटाइप = b2ContactListener। प्रोटोटाइप ;

GameContactListener। प्रोटोटाइप । PostSolve = फ़ंक्शन ( संपर्क , आवेग ) {
अगर ( संपर्क। GetFixtureB ( ) । GetBody ( ) । GetUserData ( ) ) {
var BangedBody = संपर्क। GetFixtureB ( ) । गेटबॉडी ( ) ;
अगर ( संपर्क। GetFixtureB ( ) । GetBody ( ) । GetUserData ( ) । GetType ( ) == PIG ) {
var imp = 0 ;
( आवेग में। normalImpulses ) {
imp = imp + आवेग। normalImpulses [ a ] ;
}

अगर ( imp > 3 ) {
destroyedBodies। धक्का ( बांगडबॉडी ) ;
BangedBody। दृश्यमान = झूठा ;
बांगडबॉडी = अशक्त ;
}
}
}

var contactListener = new GameContactListener ( ) ;
दुनिया। सेटकॉन्टैक्टलिस्टनर ( कांटेक्टलिस्ट ) ;
अद्यतन = फ़ंक्शन ( ) {
...
बरबादी = अर्रे ( ) ;
...
संसार । ClearForces ( ) ; // महत्वपूर्ण!
जबकि ( नष्ट किया गया। लंबाई > 0 ) {
दुनिया। नष्टबोधी ( बरबादी । पाली ) ( ) ;
}
}
}

पहली चीज जो हम यहां करते हैं, वह है मानक कांटेक्टलिस्ट को फिर से परिभाषित करना। यह सभी टकरावों को संभालने के लिए जिम्मेदार वस्तु है। वहां, हमारी पद्धति का उपयोग करते हुए, हम UserData () की जांच करते हैं और संतुष्ट होते हैं कि हम वास्तव में मम्प्स को मारते हैं, और यदि हम उस गति से संतुष्ट हैं जिसके साथ हम इसे हिट करते हैं, तो हम इसे युद्ध के मैदान से छिपाते हैं और इसे हटाने के लिए सरणी में डालते हैं।

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

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

परिणाम

फूफा, किन्नर जैसी चादर ख़त्म। मैं कोड की प्रचुरता और संभावित त्रुटियों के लिए माफी मांगता हूं।

जैसा कि मैंने वादा किया था - एक उदाहरण का लिंक जिसमें मैंने ऊपर वर्णित सब कुछ पूरी तरह से लागू किया है।

खैर, परिणामी कार्य का एक स्क्रीनशॉट:



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

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

आपके ध्यान के लिए धन्यवाद, मैं एक बार रचनात्मक आलोचना ^ _ ^ करूंगा

उपयोगी की सूची

code.google.com/p/box2dweb - जावास्क्रिप्ट के लिए Box2dWeb, Box2dAS पोर्ट।
www.box2dflash.org/docs/2.1a/reference - एंटीमॉन्ग एपीआई संदर्भ।
docs.google.com/View?id=dfh3v794_41gtqs6wf4&pli=1 - रूसी में एक काफी संपूर्ण मार्गदर्शिका। VirtualMaestro और उनके ब्लॉग के लिए धन्यवाद - flashnotes.ru। Box2d के बारे में बहुत सारी उपयोगी चीजें हैं।
www.emanueleferonato.com - विशेष रूप से सामान्य रूप से और Indie Box2d के बारे में एक बहुत ही उपयोगी ब्लॉग।
ant-karlov.ru - मास्टरमाइंड का ब्लॉग, अगर किसी को दिलचस्पी होगी ^ _ ^