बॉक्स-, कोकोस- और पिज्जा- 2 डी

इस लेख में मैं आपके साथ हमारी कंपनी में पहला iOS गेम बनाने की कहानी साझा करना चाहता हूं और आपको 2d ग्राफिक्स इंजन - cocos2d का उपयोग करने के अनुभव के बारे में बताता हूं। कहानी में, हम कुछ तकनीकी समस्याओं से गुजरेंगे, जिन्हें हमें खेल के विकास के दौरान सामना करना पड़ा, और गेमप्ले के विकास के बारे में शुरुआत से अंत तक बात करते हैं।



सुबह में, मैं अपने सहयोगियों आर्सेनी और वैलेंटाइन के साथ आंतरिक कॉर्पोरेट हैकाथॉन के लिए एक विचार पर काम करने के लिए मिला, जिसे हमारी कंपनी में मासिक आयोजित किया जाता है। गेमिंग में हममें से किसी को भी कम या ज्यादा गंभीर अनुभव नहीं था, लेकिन हमने सोचा कि खेल को विकसित करने के लिए यह अच्छा होगा।

प्रारंभ में, हमने जो विचार चुना वह यह था: खिलाड़ी के सामने एक रसदार केक था जिसे कम समय में छोटे टुकड़ों में जल्दी से काटने की आवश्यकता थी। गेम को गतिशीलता देने के लिए, कटे हुए टुकड़ों को किसी प्रकार के भौतिक इंजन का उपयोग करके एनिमेटेड किया जाना था। एक छोटी खोज के बाद, हमने फैसला किया कि यह cocos2d इंजन पर एक गेम बनाने के लिए सबसे अधिक उत्पादक होगा (क्योंकि मैं और आर्सेनी iOS डेवलपर हैं) और box2d (क्योंकि यह मुफ़्त है और cocos2d के साथ ठीक काम करता है), और हमने खुद को केवल एक iOS प्लेटफ़ॉर्म तक सीमित कर लिया।

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

इस तथ्य से प्रेरित होकर कि सबसे श्रमसाध्य हिस्सा हमारे लिए लिखा गया था, हमने राहत की सांस ली, लेकिन लंबे समय तक नहीं - पहली कठिनाइयां काफी जल्दी दिखाई दीं। पहला प्रोटोटाइप लॉन्च करने के बाद, हमने सुप्रसिद्ध बॉक्स 2 डी सीमा को याद किया - प्रति आकृति 8 से अधिक कोने नहीं। ट्यूटोरियल और पूर्वोक्त पुस्तकालय के आधार पर, हमें कट केक के आकार को बहुभुज बनाने की जरूरत थी, क्योंकि box2d को सर्कल सेगमेंट (जो एक गोल केक काटकर प्राप्त किया जाएगा) के साथ काम करने का तरीका नहीं जानता है। इसलिए, बॉक्स 2 डी की सीमाओं और इस तथ्य को ध्यान में रखते हुए कि हमारा केक अपने वास्तविक आकार के करीब होना चाहिए, हमने फैसला किया कि इसमें अष्टकोण की एक सरणी शामिल होगी, जो अंततः एक गोल आकृति के लिए एक अनुमानित आकृति बनाती है। इस समाधान से बनावट के साथ समस्याएं पैदा हुईं, जैसा कि ट्यूटोरियल में हम उन निकायों के बारे में बात कर रहे थे जिनमें बिल्कुल एक आकृति शामिल है। PRFilledPolygon कंस्ट्रक्टर को वर्सेट्स की एक सरणी में पास करने से समस्या हल हो गई थी जो केवल आकृति की बाहरी सीमा बनाती है। परिणाम:



कई आकारों से मिलकर फिट बॉडी के लिए मूल कटिंग एल्गोरिदम को भी संशोधित करने की आवश्यकता थी। एक छोटी चर्चा के बाद, यह केवल 8 से 24 तक आंकड़े की अधिकतम संख्या को बढ़ाने का निर्णय लिया गया (बॉक्स 2 डी सेटिंग्स में संबंधित पैरामीटर को संपादित करके) और ठीक एक आकृति वाले निकायों में वापस लौटना (कुछ परियोजनाओं के लिए यह समाधान अस्वीकार्य होगा, लेकिन हमारे उद्देश्यों के लिए यह काफी उपयुक्त था)। प्रोफाइलिंग से पता चला कि आठ चोटियों और 24 के साथ गति में कोई गंभीर अंतर नहीं हैं। हालांकि, स्क्रीन पर टुकड़ों की संख्या को दो सौ या उससे अधिक करने के बाद, एफपीएस तेजी से 10 तक गिर गया, जिससे खेल खेलना लगभग असंभव हो गया। लगभग 20% प्रोसेसर का समय टकरावों की गणना पर खर्च किया गया, बाकी टुकड़ों और उनके एनीमेशन को प्रस्तुत करने पर।

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



इस समय तक, वेलेंटाइन ने एक केक मॉडल बनाया:



प्रस्तुत केक वास्तव में प्रभावशाली लग रहा था, लेकिन इस तरह के सरलीकृत काटने की प्रक्रिया के लिए बहुत यथार्थवादी था, यही कारण है कि हमने इसे एक साधारण पिज्जा दृश्य के साथ बदलने का फैसला किया:



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



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



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

//...... - (void)setValue:(id)value forKey:(NSString *)key{ if([key isEqualToString:@"position"] && [value isKindOfClass:[NSString class]]){ CGPoint pos = CGPointFromString(value); self.position = pos; } else if([key isEqualToString:@"laserConditions"]){ NSMutableArray *conditions = [NSMutableArray array]; for(NSDictionary *conditionDescription in value){ LaserObstacleCondition *condition = [[[LaserObstacleCondition alloc] init] autorelease]; [condition setValuesForKeysWithDictionary:conditionDescription]; [conditions addObject:condition]; } [super setValue:conditions forKey:key]; } else{ [super setValue:value forKey:key]; } } //...... //Afterawrds the values got set with the dictionary read from the plist file: [self setValuesForKeysWithDictionary: dictionary]; 

दुनिया और स्तरों के चयन के लिए मेनू दिखाने के लिए, हमने कुछ एक्सटेंशन के साथ CCMenu का उपयोग किया: CCMenu + Layout (आपको ग्रिड पर मेनू आइटम की व्यवस्था करने की अनुमति देता है) और CCMenuAdvanced (स्क्रॉलिंग जोड़ता है)। वैलेंटाइन ने स्तरों को डिजाइन करना शुरू कर दिया, और आर्सेनी और मैंने प्रभावों को लागू करना शुरू कर दिया।

दृश्य प्रभावों के लिए, हमने CCBlade का उपयोग किया, एक पुस्तकालय जो उपयोगकर्ता स्पर्श को एनिमेट करता है। इसके अलावा, आकृति के प्रत्येक कट को प्रभावों द्वारा आवाज दी गई थी, जैसे स्टार वार्स से लेजर तलवार की आवाज। हमारे द्वारा जोड़ा गया एक और प्रभाव छोटे टुकड़ों का गायब होना है। बिना किसी प्रभाव के कटिंग काफी उबाऊ लग रही थी, इसलिए हमने पारदर्शिता में एक सहज बदलाव के साथ स्लाइस को हटाने और गायब होने वाले आकार पर एक "+" जोड़ने का फैसला किया।

PRFilledPolygon में CCLayerRGBA प्रोटोकॉल को जोड़कर पारदर्शिता परिवर्तन भाग को लागू किया गया था। ऐसा करने के लिए, हमने PRFilledPolygon में उपयोग किए जाने वाले मानक shader प्रोग्राम को kCCShader_PositionTexture_uColor में बदल दिया:

 -(id) initWithPoints:(NSArray *)polygonPoints andTexture:(CCTexture2D *)fillTexture usingTriangulator: (id<PRTriangulator>) polygonTriangulator{ if( (self=[super init])) { //Changing the default shader program to kCCShader_PositionTexture_uColor self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTexture_uColor]; } return self; } 

और उसे एक रंग की वर्दी दी

 //first we configure the color in the color setter: colors[4] = {_displayedColor.r/255., _displayedColor.b/255., _displayedColor.g/255., _displayedOpacity/255.}; //then we pass this color as a uniform to the shader program, where colorLocation = glGetUniformLocation( _shaderProgram.program, "u_color") -(void) draw { //... [_shaderProgram setUniformLocation:colorLocation with4fv:colors count:1]; //... } 

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



ध्वनि प्रभावों के लिए, हमने साधारण ऑडियो इंजन पर एक छोटा आवरण लिखा है। हालाँकि, कुछ समस्याएं थीं: हम असमर्थित .wav फ़ाइल स्वरूपों में आए, लेकिन, सौभाग्य से, यह केवल समर्थित 8 या 16 बिट पीसीएम प्रारूप में फ़ाइलों को परिवर्तित करके तय किया गया था। दूसरे मामले में, प्रभाव या तो बिल्कुल नहीं खेला गया, या स्पीकर से एक दरार सुनाई दी।

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



वह उन्हें अच्छे पासिंग स्तर या गेम के प्रोमो इमेज को सोशल नेटवर्क पर साझा करने के लिए मुफ्त में भी प्राप्त कर सकता है।



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