🚤 👏🏾 🏪 एक फल निंजा क्लोन खेल लेखन (भाग 1) 👩‍🎓 🕳️ 🎐

एलन टैन द्वारा इस महान ट्यूटोरियल में , हम Cocos2D और Box2D का उपयोग करके हाफब्रिक स्टूडियो से फ्रूट निंजा के समान अपना गेम बनाएंगे।
ऐसे अधिकांश खेलों में, जब कोई खिलाड़ी किसी स्प्राइट को काटता है, तो उसे दो पूर्व-तैयार स्प्राइट में विभाजित किया जाता है; कोई फर्क नहीं पड़ता कि हम किस स्थान पर वस्तु काटते हैं।
हालाँकि, इस ट्यूटोरियल में हम एक बढ़िया काम करेंगे। हमारे फलों को कई टुकड़ों में काटा जा सकता है, और खिलाड़ी की उंगली कहां गई, इसके आधार पर उन्हें काट दिया जाएगा!
जाहिर है, यह गाइड शुरुआती लोगों के लिए नहीं है और इसके लिए Cocos2D और Box2D के उन्नत ज्ञान की आवश्यकता है। यदि आपने अभी-अभी iOS के लिए प्रोग्रामिंग शुरू की है, तो आपको कम से कम Cocos2D और Box2D के परिचय पर अपनी आँखों के ऊपर जाना चाहिए।

और यहाँ कुछ शानदार ट्रिक का उपयोग करके वीडियो गेम बनाया गया है!

सभी इच्छुक कृपया एक कट के लिए पूछें! चेतावनी: अनुवादित पाठ के बहुत सारे!

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

यह ट्यूटोरियल तीन भागों में विभाजित है:

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

पर्याप्त शब्द - चलो बात करते हैं!

चलो शुरू करें: प्रोजेक्ट लॉन्च करें

हम Cocos2D 2.X का उपयोग करेंगे, इसलिए यदि आपने पहले से ही ऐसा नहीं किया है तो इसे डाउनलोड करें । आप 2.X के बजाय Cocos2D 1.X का उपयोग कर सकते हैं। संस्करण 1.X के साथ, आप Cocos2D 2.X के लिए PRKit और CCBlade को बदलने के चरण को छोड़ सकते हैं, लेकिन सुनिश्चित करें कि आप पोर्ट किए गए वर्गों के बीच के अंतर को पूरी तरह से समझते हैं।
डाउनलोड करने के बाद, टर्मिनल में निम्नलिखित कमांड्स का उपयोग करके टेम्पलेट्स को अनज़िप और इंस्टॉल करें:

cd ~/Downloads/cocos2d-iphone-2.0-beta ./install-templates.sh -f -u

Xcode लॉन्च करें और Box2D टेम्पलेट के साथ एक नया iOS \ cocos2d v2.x \ cocos2d iOS प्रोजेक्ट बनाएं, इसे CutCutCut नाम दें।
अब हमारी परियोजना कुछ इस तरह दिखनी चाहिए:

पहले हमें एक अच्छा प्रोजेक्ट बेस बनाने के लिए टेम्पलेट को साफ़ करना होगा।
HelloWorldLayer.h खोलें और निम्न पंक्ति हटाएं:

 CCTexture2D *spriteTexture_;// weak ref

HelloWorldLayer.mm पर जाएं और निम्नलिखित परिवर्तन करें:

मुझे क्लिक करें

 //       #import "PhysicsSprite.h" //   init   - (id)init { if( (self=[super init])) { // enable events self.isTouchEnabled = YES; self.isAccelerometerEnabled = YES; CGSize s = [CCDirector sharedDirector].winSize; //   [self initPhysics]; [self scheduleUpdate]; } return self; } //     - (void)createMenu { // } - (void)addNewSpriteAtPosition:(CGPoint)p methods { // } //     ccTouchesEnded [self addNewSpriteAtPosition: location];

हमने HelloWorldLayer से सभी PhysicsSprite संदर्भ हटा दिए हैं, लेकिन अभी तक परियोजना से फ़ाइलों को नहीं हटाया है। बाद में, हमें कुछ हद तक PhysicsSprite.mm से एक विधि की प्रतिलिपि बनाने की आवश्यकता होगी, इसलिए हम सब कुछ छोड़ देंगे जैसा कि यह है।
प्रोजेक्ट शुरू करने के लिए कमांड + आर दबाएं, और आपको चारों ओर एक हरे रंग की सीमा के साथ एक काली स्क्रीन देखनी चाहिए:

शेष कोड डीबगिंग मोड लॉन्च करता है: स्क्रीन पर सभी Box2D ऑब्जेक्ट्स के चारों ओर एक हरे रंग का फ्रेम खींचता है। स्क्रीन के चारों ओर यह हरी रेखा देखें? ये initPhysics boilerplate विधि द्वारा बनाई गई दीवारें हैं।
शेष कोड का सावधानीपूर्वक निरीक्षण करें, सुनिश्चित करें कि आप इसे पूरी तरह से समझते हैं। हम Box2D दुनिया को इनिशियलाइज़ करते हैं, दीवारें (ग्रीन लाइन) सेट करते हैं, डीबग मोड शुरू करते हैं, आदि। यह "लगभग खाली" परियोजना Box2D के साथ काम करने के लिए सुविधाजनक है।

संसाधन पैक

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

पृष्ठभूमि karitnka; विकी द्वारा चित्रित फल; चित्र फ़ोल्डर में कुछ अन्य चित्र
ध्वनि फ़ोल्डर में gomix.it के साथ बनाया गया पृष्ठभूमि संगीत
ध्वनि प्रभाव bfxr का उपयोग करके या ध्वनि फ़ोल्डर में फ़्रीसाउंड से डाउनलोड किया गया
कण कण में कण डिजाइनर का उपयोग करके बनाई गई सभी कण प्रणालियां
फिजिक्सएडिटर के साथ बनाई गई PLIST फाइल जिसमें Misc फोल्डर में फ्रूट और बॉम्ब क्लास के लिए वर्टिकल होते हैं
क्लास फोल्डर में फलों और बम की कक्षाएं
PRKit और CCBlade के वर्जन फोल्डर फोल्डर में

PRKit के साथ बनावट बहुभुज बनाएं

हमारा लक्ष्य कई हिस्सों में स्प्राइट में कटौती करना है। एक विशिष्ट CCSprite में एक बनावट और एक बाउंडिंग बॉक्स होता है जो वास्तविक चित्र से स्वतंत्र होता है। यह हमें शोभा नहीं देता, क्योंकि हमारे लिए यह जरूरी है कि हम स्प्रिट बनाने के लिए छवि के वास्तविक आकार को जानें, जो कि कटा हुआ, कटा हुआ और विभाजित हो सकता है।
हमें बनावट बहुभुज बनाने की आवश्यकता है जो:

बहुभुज / आकृति और चित्र के बीच संबंध बनाएं (बनावट मानचित्रण)
चित्र के केवल उन हिस्सों को दिखाएँ जो बहुभुज की सीमाओं में फिट होते हैं (बनावट भरना)

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

खेल को चलाएं, आपको निम्नलिखित त्रुटियां मिलेंगी:

त्रुटियां दिखाई देती हैं क्योंकि PRKit को Cocos2D 1.X के लिए विकसित किया गया था, जो OpenGL ES 1.1 का उपयोग करता है, जबकि हम OpenGL ES 2.0 के साथ Cocos2D 2.X का उपयोग करते हैं। और वे एक दूसरे से काफी अलग हैं।
इसे ठीक करने के लिए, PRFilledPolygon.m खोलें और निम्नलिखित बदलाव करें:

मुझे क्लिक करें

 //    initWithPoints: andTexture: usingTriangulator: self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTexture]; //   calculateTextureCoordinates   - (void)calculateTextureCoordinates { for (int j = 0; j < areaTrianglePointCount; j++) { textureCoordinates[j] = ccpMult(areaTrianglePoints[j],1.0f/texture.pixelsWide*CC_CONTENT_SCALE_FACTOR()); textureCoordinates[j].y = 1 - textureCoordinates[j].y; } } //   draw   - (void)draw { CC_NODE_DRAW_SETUP(); ccGLBindTexture2D( self.texture.name ); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); ccGLBlendFunc( blendFunc.src, blendFunc.dst); ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position | kCCVertexAttribFlag_TexCoords ); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, areaTrianglePoints); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, textureCoordinates); glDrawArrays(GL_TRIANGLES, 0, areaTrianglePointCount); }

चलिए स्टेप बाय स्टेप बदलते हैं।
सबसे पहले, Cocos2D में प्रत्येक CCNode में एक OpenGL ES 2.0 शेडर प्रोग्राम जुड़ा हुआ है। PRFilledPolygon को आकर्षित करने के लिए, हमें अंतर्निहित "स्थिति / बनावट" शेडर को पेंच करने की आवश्यकता है, जिसे हम init विधि में लागू करते हैं।
अगला, हमें बहुभुज में प्रत्येक बिंदु के लिए सही बनावट निर्देशांक सेट करने की आवश्यकता है। ऐसा करने के लिए, हमें कुछ बदलावों की गणना करने की आवश्यकता है।

आकार: चूंकि यह वर्ग बनावट निर्देशांक की अपनी गणना करता है, इसलिए यह रेटिना डिस्प्ले का समर्थन नहीं करता है। इसे ठीक करने के लिए, हम CC_CONTENT_SCALE_FACTOR द्वारा बस बनावट को बढ़ाते हैं। नियमित और रेटिना डिस्प्ले के मूल्यों को परिवर्तित करने के लिए Cocos2D डेवलपर्स द्वारा प्रदान किया गया एक गुणांक।
विस्तृत करें Y: किसी कारण से, PRFIlledPolygon बनावट को उल्टा कर देता है, इसलिए हम अभी y मान का विस्तार करते हैं।

अंत में, हमने OpenGL ES 2.0 के लिए कोड को अपडेट किया। हमने Cocos2D 2.X के लिए CCSprite में रेंडरिंग को भी बदल दिया है:

हम प्रतिपादन के लिए स्प्राइट तैयार करने के लिए CC_NODE_DRAW_SETUP () के साथ आकार देकर शुरू करते हैं।
GlDisableClientState () और glEnableClientState () की कॉल को पदावनत और अनदेखा किया जाता है।
GlVertexPointer () और glTexCoordPointer () दोनों को glVertexAttribPointer () से बदल दिया गया है, जो पहले तर्क के साथ शीर्ष स्थान या बनावट का समन्वय करता है।
GlTexEnvf () फ़ंक्शन की शुरुआत, जो तस्वीर को दोहराने के लिए जिम्मेदार है यदि बहुभुज बनावट से बड़ा हो जाता है, तो कॉल को glTexParameteri () से बदल दिया जाता है।

यदि आपके लिए कुछ स्पष्ट नहीं है, तो आप iPhone के लिए OpenGL ES 2.0 पर ट्यूटोरियल देख सकते हैं और Cocos2i 2 में कस्टम शेड्स कर सकते हैं। लेकिन आपको इसके बारे में ज्यादा चिंता करने की जरूरत नहीं है, क्योंकि अब हम केवल कक्षाओं को Cocos2D 2.X:] में ही भेज रहे हैं।
प्रोजेक्ट को चलाएं और PRKit त्रुटियाँ दूर होनी चाहिए!
PRKit का उपयोग शुरू करने का समय आ गया है। हम क्लास PRFilledPolygon के PolygonSprite का एक उपवर्ग बनाएंगे जो हमारे फलों को प्रदान करेगा।
PolygonSprite को PRFilledPolygon के आधार पर बनाया जाता है, बॉक्स 2 डी बॉडी को स्प्राइट के साथ जोड़कर, कुछ अन्य चर और तरीकों को लागू करने के लिए जोड़ा जाता है।
चलो करते हैं। कमांड + एन दबाएं और iOS \ cocos2d v2.x \ CCNode टेम्पलेट का उपयोग करके एक नई फ़ाइल बनाएं। इसे PRFilledPolygon का उपवर्ग बनाएं और इसे PolygonSprite.m नाम दें ।
PolygonSprite.h पर स्विच करें और निम्नलिखित परिवर्तन करें:

मुझे क्लिक करें

 //     #import "Box2D.h" #import "PRFilledPolygon.h" #define PTM_RATIO 32 //   @interface b2Body *_body; BOOL _original; b2Vec2 _centroid; //   @interface @property(nonatomic,assign)b2Body *body; @property(nonatomic,readwrite)BOOL original; @property(nonatomic,readwrite)b2Vec2 centroid; //   @end - (id)initWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original; - (id)initWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original; + (id)spriteWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original; + (id)spriteWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original; - (id)initWithWorld:(b2World*)world; + (id)spriteWithWorld:(b2World*)world; - (b2Body*)createBodyForWorld:(b2World*)world position:(b2Vec2)position rotation:(float)rotation vertices:(b2Vec2*)vertices vertexCount:(int32)count density:(float)density friction:(float)friction restitution:(float)restitution; - (void)activateCollisions; - (void)deactivateCollisions;

यह कोड आधार चर और तरीकों की घोषणा करता है जिन्हें हमें बहुभुज बनाने की आवश्यकता होगी:

शरीर: यह एक बॉक्स 2 डी शरीर है जो हमारे स्प्राइट से जुड़ा हुआ है। यह भौतिकी के अनुकरण के लिए आवश्यक है।
मूल: पूरे और कटे हुए दोनों टुकड़े बहुभुज वर्ग की वस्तुएं होंगे, इसलिए हमारे लिए यह आवश्यक है कि हम किसी तरह से उनमें अंतर करें। यदि मान YES है, तो टुकड़ा पूरा है, अन्यथा यह पूरे का एक टुकड़ा है।
केंद्रक: बहुभुज का केंद्र हमेशा चित्र का केंद्र नहीं होता है, इसलिए इस चर का उपयोग करना बहुत सुविधाजनक है।
गुण: हम अपने चर का उपयोग करते हैं।
init / spriteWith *: हमारी मुख्य आरंभीकरण विधियाँ।
अन्य विधियाँ: ये विधियाँ Box2D निकाय बनाती हैं और उन तथा उनके चरों पर काम करती हैं।
PTM_RATIO: हम पिक्सेल और मीटर को परस्पर संबद्ध करते हैं। Box2D पिक्सल के बजाय मीटर का उपयोग करता है।

PolygonSprite.m पर स्विच करें और इसका नाम बदलकर PolygonSprite.mm करें । सभी वर्ग जिसमें ऑब्जेक्टिव-सी (कोकोस 2 डी) और सी ++ (बॉक्स 2 डी) शामिल हैं, उनका विस्तार ".एमएम" होना चाहिए।
अगला, PolygonSprite.mm के लिए निम्नलिखित परिवर्तन करें:

मुझे क्लिक करें

 //   @implementation @synthesize body = _body; @synthesize original = _original; @synthesize centroid = _centroid; + (id)spriteWithFile:(NSString *)filename body:(b2Body *)body original:(BOOL)original { return [[[self alloc]initWithFile:filename body:body original:original] autorelease]; } + (id)spriteWithTexture:(CCTexture2D *)texture body:(b2Body *)body original:(BOOL)original { return [[[self alloc]initWithTexture:texture body:body original:original] autorelease]; } + (id)spriteWithWorld:(b2World *)world { return [[[self alloc]initWithWorld:world] autorelease]; } - (id)initWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original { NSAssert(filename != nil, @"Invalid filename for sprite"); CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage: filename]; return [self initWithTexture:texture body:body original:original]; } - (id)initWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original { //      Box2D b2Fixture *originalFixture = body->GetFixtureList(); b2PolygonShape *shape = (b2PolygonShape*)originalFixture->GetShape(); int vertexCount = shape->GetVertexCount(); NSMutableArray *points = [NSMutableArray arrayWithCapacity:vertexCount]; for(int i = 0; i < vertexCount; i++) { CGPoint p = ccp(shape->GetVertex(i).x * PTM_RATIO, shape->GetVertex(i).y * PTM_RATIO); [points addObject:[NSValue valueWithCGPoint:p]]; } if ((self = [super initWithPoints:points andTexture:texture])) { _body = body; _body->SetUserData(self); _original = original; //    _centroid = self.body->GetLocalCenter(); //   (anchor point)    self.anchorPoint = ccp(_centroid.x * PTM_RATIO / texture.contentSize.width, _centroid.y * PTM_RATIO / texture.contentSize.height); //    ,    PolygonSprite } return self; } - (id)initWithWorld:(b2World *)world { //     return nil; }

Cocos2D की तरह ही, सभी spriteWith * तरीके initWith * मेथड कन्वर्टर के ऑटोरेलिज हैं। अब तक, initWithWorld पद्धति का कोई उपयोग नहीं है, लेकिन बाद में हम इसे सक्रिय रूप से उपयोग करेंगे।
InitWithFile और initWithTexture विधियों में कई परिवर्तन हैं। फल बनाने की प्रक्रिया निम्न एल्गोरिथम का अनुसरण करती है:

initWithWorld: यह विधि अभी तक कुछ भी नहीं लौटाती है। हम बाद में उसके साथ काम करेंगे।
initWithFile: यह विधि फ़ाइल से बनावट जोड़ती है और इसे initWithTexture विधि से पास करती है।
initWithTexture: हमारी मुख्य विधि। PRFilledPolygon बहुभुज की बनावट और कोने प्राप्त करता है। इसलिए, जैसा कि पिछले चरण ने पहले से ही बनावट को संसाधित किया है, इस पद्धति में हम शीर्ष रेखाओं के साथ काम करेंगे: हम उन्हें एक बॉक्स 2 डी शरीर में इकट्ठा करेंगे। PRFillePolygon में उन्हें पास करने के बाद, हम उन आवश्यक चर को इनिशियलाइज़ करते हैं जो हमने पहले घोषित किए थे।
initWithPoints: यह तरीका जो कुछ भी करता है वह PRKit से संबंधित है। सबसे अधिक संभावना है, आपको अब PRKit का उपयोग करने की आवश्यकता नहीं होगी।

अभी भी PolygonSprite.mm निम्नलिखित तरीके जोड़ें:

मुझे क्लिक करें

 - (void)setPosition:(CGPoint)position { [super setPosition:position]; _body->SetTransform(b2Vec2(position.x/PTM_RATIO,position.y/PTM_RATIO), _body->GetAngle()); } - (b2Body*)createBodyForWorld:(b2World *)world position:(b2Vec2)position rotation:(float)rotation vertices:(b2Vec2*)vertices vertexCount:(int32)count density:(float)density friction:(float)friction restitution:(float)restitution { b2BodyDef bodyDef; bodyDef.type = b2_dynamicBody; bodyDef.position = position; bodyDef.angle = rotation; b2Body *body = world->CreateBody(&bodyDef); b2FixtureDef fixtureDef; fixtureDef.density = density; fixtureDef.friction = friction; fixtureDef.restitution = restitution; fixtureDef.filter.categoryBits = 0; fixtureDef.filter.maskBits = 0; b2PolygonShape shape; shape.Set(vertices, count); fixtureDef.shape = &shape; body->CreateFixture(&fixtureDef); return body; } - (void)activateCollisions { b2Fixture *fixture = _body->GetFixtureList(); b2Filter filter = fixture->GetFilterData(); filter.categoryBits = 0x0001; filter.maskBits = 0x0001; fixture->SetFilterData(filter); } - (void)deactivateCollisions { b2Fixture *fixture = _body->GetFixtureList(); b2Filter filter = fixture->GetFilterData(); filter.categoryBits = 0; filter.maskBits = 0; fixture->SetFilterData(filter); }

इस कोड में, हम सबसे पहले setPosition विधि को CCNode में लोड करते हैं ताकि जब हम स्प्राइट पोजिशन को अपडेट करें, तो Box2D का बॉडी भी अपडेट हो जाए।
अगला, हम एक बॉक्स 2 डी बॉडी बनाने और घोषित करने के लिए एक विधि बनाते हैं। एक शरीर बनाने के लिए, हमें इसकी वस्तु, आकृति और बनावट को घोषित करने की आवश्यकता है। अब तक, हम कुछ भी जटिल नहीं घोषित कर रहे हैं, क्योंकि इस पद्धति का उपयोग थोड़ी देर बाद किया जाएगा।
केवल उन चीज़ों पर ध्यान देने की ज़रूरत है जो श्रेणीबिट्स और मास्कबिट्स हैं। हम उन्हें वस्तुओं के बीच टकरावों को फ़िल्टर करने के लिए उपयोग करते हैं ताकि यदि श्रेणी और मुखौटा मेल खाते हैं, तो दो वस्तुओं के बीच टकराव होगा। हम इन मानों को 0 पर सेट करते हैं, क्योंकि वस्तुओं के आरंभ होते ही हमें टकरावों की आवश्यकता नहीं होती है।
उसके बाद, हम दो तरीकों की घोषणा करते हैं, जो कि श्रेणीबिट्स और मास्कबिट्स को बदल देते हैं, ताकि हम जब चाहें तब अपने बहुभुज के टकरावों को सक्रिय और निष्क्रिय कर सकें।
PolygonSprite.mm में जोड़ने लायक एक और चीज है:

मुझे क्लिक करें

 -(CGAffineTransform) nodeToParentTransform { b2Vec2 pos = _body->GetPosition(); float x = pos.x * PTM_RATIO; float y = pos.y * PTM_RATIO; if ( !isRelativeAnchorPoint_ ) { x += anchorPointInPoints_.x; y += anchorPointInPoints_.y; } //   float radians = _body->GetAngle(); float c = cosf(radians); float s = sinf(radians); if( ! CGPointEqualToPoint(anchorPointInPoints_, CGPointZero) ){ x += c*-anchorPointInPoints_.x+ -s*-anchorPointInPoints_.y; y += s*-anchorPointInPoints_.x+ c*-anchorPointInPoints_.y; } //   transform_ = CGAffineTransformMake( c, s, -s,c, x,y ); return transform_; }

याद रखें कि मैंने PhysicsSprite के बारे में कुछ कैसे उल्लेख किया है? खैर, यहाँ यह है। यहां होने वाली सभी जाँच यह है कि बॉक्स 2 डी फॉर्म की स्थिति और स्प्राइट की स्थिति समान है।
ऊपर दिए गए कोड को कॉपी करने के बाद, आप PhysicsSprite.h और PhysicsSprite.mm को प्रोजेक्ट से हटा सकते हैं, क्योंकि हमने उनका उपयोग शून्य कर दिया है।
परियोजना को चलाएं, सब कुछ सुचारू रूप से चलना चाहिए। हमने कुछ समय के लिए PolygonSprite के साथ काम किया।

फल को चिह्नित करें

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

बहुभुज उत्तल होना चाहिए, आंतरिक कोण 180 डिग्री से अधिक नहीं होना चाहिए।
बहुभुजों में 8 से अधिक कोने नहीं होने चाहिए।

सामान्य तौर पर, हम इन सीमाओं से परे काम कर सकते हैं, उदाहरण के लिए, यदि हमारे शरीर में कई रूप हैं। Box2D अवतल आकृतियों के साथ काम कर सकता है यदि हम त्रिकोणीय पद्धति का उपयोग करते हैं और कई त्रिभुजों से अवतल आकृतियाँ बनाते हैं, लेकिन यह ट्यूटोरियल के दायरे से बाहर है।
जितना संभव हो उतना ट्यूटोरियल को सरल बनाने के लिए, हम नियम का पालन करेंगे: एक शरीर - एक रूप।

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

एक नजर इन दो फलों पर:

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

तरबूज बहुभुज तस्वीर के लिए एकदम सही हैं, जबकि एक केला के रूप में एक विशाल निकासी है।
Box2D हमारी वस्तु के हिस्से के रूप में इस अंतर को पहचानता है, और केले की अन्य वस्तुओं के साथ टकराव, इसकी कटाई पर्याप्त रूप से स्वाभाविक नहीं होगी।
इसका मतलब यह नहीं है कि हम एक केले का उपयोग नहीं कर सकते हैं, बस इसे करने की अनुशंसा अभी तक नहीं की गई है।

पहला फल बनाएं

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

तरबूज को खींचें। संसाधन फ़ोल्डर से बाएँ फलक पर जाएँ। अब आपको केंद्र पैनल में तरबूज देखना चाहिए।
विंडो के नीचे स्लाइडर को खींचकर छवि को आपके लिए सुविधाजनक स्तर तक बढ़ाएं। बहुभुज बनाने के लिए इस पैनल के शीर्ष पर बहुभुज पर क्लिक करें।
बहुभुज पर राइट-क्लिक करें और "वर्टेक्स जोड़ें" चुनें। दोहराएँ जब तक आप 5-8 कोने हैं। तरबूज के चारों ओर चक्कर लगाएं ताकि:

लैंडफिल उत्तल था।
तरबूज के सभी पिक्सल बहुभुज के अंदर थे।

नोट: आकृतियों को आकर्षित करने का दूसरा तरीका PhysicsEditor में जादू की छड़ी उपकरण का चयन करना है। बस कोने की संख्या 5-8 पर सेट करें और इस उपकरण का उपयोग करें।

संसाधनों फ़ोल्डर में छवियाँ फ़ोल्डर से सभी फलों और बम चित्रों के लिए बहुभुज जोड़ें।
आपको निम्न चित्र के रूप बनाने होंगे:

banana.png
bomb.png
grapes.png
pineapple.png
strawberry.png
watermelon.png

जब आप ऊपरी दाहिने कोने में कर रहे हों, तो "Box2D जेनेरिक (PLIST)" में निर्यातक को मान बदलें, और आपको निम्न जैसा कुछ प्राप्त करना चाहिए:

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

तरबूज / फिक्स्चर / आइटम 0 / बहुभुज का विस्तार करें और आपको आइटम 0 का एक और मूल्य देखना चाहिए, जो एक सरणी है। यह सरणी हमारा रूप है। यदि आपने सब कुछ सही किया है, तो आपको केवल एक सरणी देखना चाहिए।
यदि आप एक से अधिक सरणी देखते हैं (उदाहरण के लिए: आइटम 0, आइटम 1), तो आपने 8 से अधिक कोने बनाए हैं या एक अवतल आकृति का उपयोग किया है। यदि ऐसा होता है, तो PhysicsEditor पर वापस लौटें और आकृति को ठीक करें।
आगे, सामग्री की अंतिम सूची देखने के लिए आइटम 0 का विस्तार करें।ये प्रारूप {x, y} में हमारे कोने और उनके मान हैं।
अब जब हमारे पास बहुभुज के लंबवत मान हैं, तो हम तरबूज वर्ग के साथ जारी रख सकते हैं।
Xcode में, iOS \ cocos2d v2.x \ CCNode क्लास टेम्पलेट का उपयोग करके एक नई फ़ाइल बनाएं। इसे Poly PolySprite को उपवर्गित करें और इसे तरबूज का नाम दें। तरबूज खोलें। और निम्नलिखित परिवर्तन करें:

 //     #import "PolygonSprite.h"

तरबूज पर स्विच करें। इसका नाम बदलकर तरबूज रख दें। मिमी , और निम्नलिखित init विधि जोड़ें:

मुझे क्लिक करें

 //   @implementation - (id)initWithWorld:(b2World *)world { int32 count = 7; NSString *file = @"watermelon.png"; b2Vec2 vertices[] = { b2Vec2(5.0/PTM_RATIO,15.0/PTM_RATIO), b2Vec2(18.0/PTM_RATIO,7.0/PTM_RATIO), b2Vec2(32.0/PTM_RATIO,5.0/PTM_RATIO), b2Vec2(48.0/PTM_RATIO,7.0/PTM_RATIO), b2Vec2(60.0/PTM_RATIO,14.0/PTM_RATIO), b2Vec2(34.0/PTM_RATIO,59.0/PTM_RATIO), b2Vec2(28.0/PTM_RATIO,59.0/PTM_RATIO) }; CGSize screen = [[CCDirector sharedDirector] winSize]; b2Body *body = [self createBodyForWorld:world position:b2Vec2(screen.width/2/PTM_RATIO,screen.height/2/PTM_RATIO) rotation:0 vertices:vertices vertexCount:count density:5.0 friction:0.2 restitution:0.2]; if ((self = [super initWithFile:file body:body original:YES])) { //   -     } return self; }

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

फल को स्क्रीन पर जोड़ें।

अब तक, स्क्रीन पर कुछ भी नहीं हो रहा है, लेकिन हम हर स्वाद और रंग के लिए फल देखना चाहते हैं! :] HelloWorldLayer.h पर
स्विच करें और निम्नलिखित परिवर्तन करें:

 //     #import "PolygonSprite.h" //   @interface CCArray *_cache; //   @interface @property(nonatomic,retain)CCArray *cache;

HelloWorldLayer.mm पर वापस जाएं और निम्नलिखित परिवर्तन करें:

मुझे क्लिक करें

 //     #import "Watermelon.h" //   @implementation @synthesize cache = _cache; //    init,  [self initPhysics] [self initSprites]; //    dealloc,   [super dealloc] [_cache release]; _cache = nil; //  -  @implementation  @end - (void)initSprites { _cache = [[CCArray alloc] initWithCapacity:53]; //     .      . PolygonSprite *sprite = [[Watermelon alloc] initWithWorld:world]; [self addChild:sprite z:1]; [sprite activateCollisions]; [_cache addObject:sprite]; }

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

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

आगे क्या है?

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

अनुवादक का नोट

मैं raywenderlich.com से ट्यूटोरियल ट्रांसलेट करता रहता हूं ।
मैं अत्यधिक iOS के लिए सभी गेम डेवलपर्स के लिए इस साइट की सलाह देता हूं!
यदि निम्नलिखित भागों के अनुवाद का दावा किया जाता है, तो मैं अनुवाद करूंगा।
पाए गए सभी अशुद्धियों और टाइपो के बारे में, कृपया इब्राहीम या यहाँ टिप्पणियों में लिखें।
मुझे ट्यूटोरियल के बारे में सभी सवालों के जवाब देने में खुशी होगी!

एक फल निंजा क्लोन खेल लेखन (भाग 1)

चलो शुरू करें: प्रोजेक्ट लॉन्च करें

संसाधन पैक

PRKit के साथ बनावट बहुभुज बनाएं

फल को चिह्नित करें

पहला फल बनाएं

फल को स्क्रीन पर जोड़ें।

आगे क्या है?

अनुवादक का नोट

More articles: