CocosBuilder का परिचय का अनुवाद।
मूल लेख के लेखक अली हफीजी हैं , जो आईओएस और एंड्रॉइड के लिए एक डेवलपर हैं।

CocosBuilder एक नि: शुल्क उपकरण है जो आपको Cocos2D का उपयोग करके अपने गेम को विकसित करने के दौरान स्प्राइट, लेआउट और दृश्यों को जल्दी और आसानी से प्रबंधित करने की अनुमति देता है।

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

CocosBuilder दिखाई देने से पहले, Cocos2D गेम में एक मूल इंटरफ़ेस बनाना भी डेवलपर के लिए सिरदर्द था। खेल में एक मेनू या बटन जोड़ने के लिए, आपने आमतौर पर ऐसा कुछ किया:

• अनुमान लगाने की कोशिश कर रहा है। "मम्म ... मुझे लगता है कि यह बटन लगभग 50 से 50 होना चाहिए।"
• एप्लिकेशन लॉन्च। "हाँ, वास्तव में नहीं ..."
• एक और प्रयास। "मुझे लगता है कि 60 से 50 बेहतर होंगे!"
• जाँच करें और सब कुछ नया है। "अरे नहीं, यह वैसे भी नहीं है। Grrr! ”

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

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

कैट जंप गेम

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

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

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

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

CocosBuilder के साथ शुरू करना

यदि आपने पहले से ऐसा नहीं किया है, तो CocosBuilder डाउनलोड करें । नवीनतम संस्करण डाउनलोड करना सुनिश्चित करें, जो लेखन के समय 2.1 है। नमूना फ़ाइलों को भी डाउनलोड करें।


डाउनलोड किए गए संग्रह से CocosBuilder को अनज़िप करें और एप्लिकेशन फ़ोल्डर में कॉपी करें।
CocosBuilder में एक नई परियोजना बनाने से पहले, आपको अपनी परियोजना के लिए एक निर्देशिका बनाने की आवश्यकता है। यह वह जगह है जहां आप सभी खेल संसाधनों / परिसंपत्तियों को संग्रहीत करेंगे।

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

अपने डेस्कटॉप पर एक नया फ़ोल्डर बनाएं और इसे CocosBuilderFiles नाम दें । फिर इस फ़ोल्डर में दो सबफोल्डर्स बनाएं और उन्हें रिसोर्स एंड सीन्स नाम दें।


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

CocosBuilder लॉन्च करें और मेनू आइटम File \ New \ New प्रोजेक्ट चुनें। प्रोजेक्ट कैटजंप को नाम दें और इसे CocosBuilderFiles फ़ोल्डर में सहेजें।
अब जब आपने प्रोजेक्ट बना लिया है, तो आपको कोकोसबर्नस्टल के बाईं ओर प्रोजेक्ट के साइडबार में संसाधन और दृश्य फ़ोल्डर दिखाई देंगे। यह भी ध्यान दें कि CocosBuilder ने स्वचालित रूप से ccbResources नामक एक नया फ़ोल्डर बनाया है। वहां आपको HelloCocosBuilder.ccb नामक एक नई फ़ाइल दिखाई देगी । इसकी सामग्री देखने के लिए किसी फ़ाइल पर डबल-क्लिक करें।
यह एक बहुत ही सरल परत है, जिस पर "हैलो कोकोसब्यूलर" लिखा है:


चिंता न करें, आपका कैटजम्प खेल उससे थोड़ा अधिक जटिल होगा।

देखो, माँ, वहाँ कोई कोड नहीं है!

खेल का मुख्य मेनू बनाकर कैटजम्प को फिर से डिज़ाइन करना शुरू करें। इस दृश्य में तीन बटन होंगे:

• खेल - तो खेल शुरू होता है!
• विकल्प - हम मापदंडों के साथ एक दृश्य दिखाते हैं जहां उपयोगकर्ता खेल की कठिनाई का स्तर चुन सकते हैं।
• के बारे में - आइए वह दृश्य दिखाएं जहां गेम खेलने के तरीके के बारे में जानकारी होगी।

और पहली चीज जो आपको करने की आवश्यकता है वह है HelloCocosBuilder.ccb फ़ाइल को हटाना, क्योंकि यह CocosBuilder द्वारा बनाई गई एक टेम्पलेट फ़ाइल है।

नोट: आप सोच सकते हैं कि किसी प्रोजेक्ट से अप्रयुक्त दृश्य फ़ाइल को हटाना काफी सरल है, लेकिन मैं इसे सीधे CocosBuilder से करने में सक्षम नहीं था। मुझे CocosBuilder बंद करना पड़ा, HelloCocosBuilder.ccb को फाइंडर से हटा दिया, और फिर CocosBuilder में प्रोजेक्ट को फिर से चलाया। अगर किसी को यह करने का एक आसान तरीका पता है, तो कृपया मंच पर पोस्ट करें!

फिर मेनू आइटम File \ New \ New फ़ाइल चुनें। दिखाई देने वाली विंडो में, सुनिश्चित करें कि CCLayer को रूट ऑब्जेक्ट प्रकार फ़ील्ड में चुना गया है और निम्नलिखित अनुमति प्रकारों की जांच करें: iPhone लैंडस्केप और iPhone 5 लैंडस्केप ।


Create बटन पर क्लिक करें, MainMenuScene फ़ाइल का नाम दर्ज करें और इसे पर्दे के फ़ोल्डर में सहेजें।
प्रोजेक्ट पैनल को कुछ इस तरह दिखना चाहिए:


ठीक है, यहाँ आपने अपना पहला दृश्य बनाया है! अब, कुछ स्प्राइट जोड़ने के बारे में कैसे?
टूलबार पर CCSprite बटन पर क्लिक करें। संकेत: बटन नीचे की छवि में परिचालित है।


तो आप दृश्य में एक नया स्प्राइट जोड़ें।
निर्मित स्प्राइट का चयन करें और इसके फ्रेम के रूप में Title_catjump.png फ़ाइल सेट करें। ऐसा करने के लिए, सही साइडबार का उपयोग करें, जिस पर चयनित आइटम के गुण दिखाई देते हैं। स्प्राइट फ़्रेम फ़ील्ड के पास, ड्रॉप-डाउन मेनू में CCSprite अनुभाग में, संसाधन \ सामान्य फ़ोल्डर में Title_catjump.png फ़ाइल का चयन करें।


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

बहुत बढ़िया! अब आपके पास एक पृष्ठभूमि छवि है। अगली बात यह है कि मेनू आइटम के लिए बटन जोड़ें।
स्क्रीन पर एक नया बटन बनाने के लिए CCControlButton टूलबार आइटम पर क्लिक करें।


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


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


हुर्रे, पहले दृश्य का लेआउट पूरा हो गया है!

एक परत को एक वर्ग से कनेक्ट करें

आगे बढ़ने से पहले, आपको कुछ समायोजन करने की आवश्यकता है। यदि आप CocosBuilder में बनाई गई परत का उपयोग करके एक दृश्य बनाते हैं, और यदि दृश्य की यह परत एक कस्टम वर्ग है, तो आपको CocosBuilder को इस वर्ग का नाम बताना होगा।
उदाहरण के लिए, यदि आप MainMenuScene फ़ाइल का उपयोग करके किसी दृश्य को आरंभ करते हैं, और आप चाहते हैं कि इसकी परत उस वर्ग की हो, जिसे आपने बनाया है, तो आपको कोड कनेक्शंस अनुभाग में इस वर्ग का नाम निर्दिष्ट करना होगा।
MainMenuScene.ccb फ़ाइल का चयन करें और समयरेखा में CCLayer रूट नोड का चयन करें।
कोड कनेक्शन अनुभाग में, कस्टम वर्ग फ़ील्ड में, अपने MainMenuLayer वर्ग का नाम टाइप करें। अब, जब आप इस दृश्य को इनिशियलाइज़ करते हैं, तो CocosBuilder मेनमेन्यूलेयर नामक एक वर्ग की तलाश करेगी और इसका उपयोग दृश्य परत को तुरंत करने के लिए करेगी।


इसके बाद, आपको CocosBuilder इंटरफ़ेस फ़ाइल प्रकाशित करनी होगी। ऐसा करने के लिए, बस मेनू आइटम File \ Publish चुनें। इसलिए आप एक नई फ़ाइल बनाएँ जिसका नाम है MainMenuScene.ccbi इन द सीरीज़ डायरेक्टरी।
CocosBuilder के साथ खिलवाड़ करना बंद करें - अब यह सब Xcode में आज़माने का समय है!

कोड लिखने का समय!

सबसे पहले, सुनिश्चित करें कि आपके पास इस ट्यूटोरियल को लिखने के समय Cocos2D 2.X (2.1-beta4) का नवीनतम संस्करण है।
फिर Xcode चलाएं और iOS \ cocos2d v2.x \ cocos2d टेम्पलेट के साथ एक नया प्रोजेक्ट बनाएं। उत्पाद नाम फ़ील्ड में कैटजम्प डालें, हमेशा की तरह कंपनी पहचानकर्ता फ़ील्ड भरें, और डिवाइस परिवार फ़ील्ड में iPhone चुनें:


प्रोजेक्ट बनाना समाप्त करें और इसे अपनी डिस्क पर कहीं सहेजें।
फिर, प्रोजेक्ट की जड़ में, एक नया सीन समूह बनाएँ, और MainMenuScene.ccb फ़ाइल को खींचें जिसे आपने पहले बनाया था। सुनिश्चित करें कि "आइटम को समूह के फ़ोल्डर में गंतव्य (यदि आवश्यक हो) कॉपी करें" चेकबॉक्स चेक किया गया है और कैटजम्प के बगल में "लक्ष्य में जोड़ें" अनुभाग भी चेक किया गया है।

अब आपको अपने प्रोजेक्ट में CCBReader जोड़ने की आवश्यकता है। CCBReader नमूना फ़ाइलों के साथ पूरा होता है जिसे आपने CocosBuilder से पहले डाउनलोड किया था। अपनी हार्ड ड्राइव पर एक फ़ोल्डर में नमूना फ़ाइलों को अनज़िप करें (यदि आपने पहले से ऐसा नहीं किया है)। अपने प्रोजेक्ट \ cocos2d-iphone फ़ोल्डर में CCBReader फ़ोल्डर का पता लगाएँ।
अपने प्रोजेक्ट में संपूर्ण CCBReader फ़ोल्डर खींचें। सुनिश्चित करें कि "किसी भी जोड़े गए फ़ोल्डर के लिए समूह बनाएँ" चयनित है और चेकबॉक्स "गंतव्य समूह के फ़ोल्डर में आइटम कॉपी करें" चेक किया गया है। CCControlExtension फ़ोल्डर के साथ भी ऐसा ही करें।
इसके बाद, अपने प्रोजेक्ट में एक नया समूह बनाएं और उसे नाम दें। IOS \ cocos2d v2.x \ CCNode टेम्पलेट के साथ एक नई फ़ाइल बनाएँ। इसे CCLayer का उपवर्ग बनाएं और इसे MainMenuLayer.m नाम दें।
कोड लिखने से पहले, AppDelegate.m खोलें और निम्नलिखित आयात विवरण जोड़ें (फ़ाइल में मौजूद #import स्टेटमेंट के तुरंत बाद):

#import "CCBReader.h" 

फिर आवेदन खोजें: didFinishLaunchingWithOptions: प्रक्रिया, और इसमें लाइन:

 [director_ pushScene: [IntroLayer scene]]; 

एक बार जब आप इसे पा लें, तो इसे इस से बदल दें:

 [director_ pushScene: [CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]]; 

और वह सब आपको CocosBuilder के साथ बनाए गए दृश्यों को चलाने के लिए कोड में करने की आवश्यकता है! CCBReader वर्ग MainMenuScene.ccbi फ़ाइल को पार्स करेगा और स्वयं दृश्य बनाएगा!
लेकिन इससे पहले कि आप कार्यक्रम शुरू करें, आपको एक आखिरी कदम उठाने की जरूरत है। उस पृष्ठभूमि छवि को याद रखें जो आपने अपने कोकोसबस्टर प्रोजेक्ट के फ़ोल्डर में ccbResources फ़ोल्डर से अपने दृश्य और बटन छवियों को जोड़ा था?
ये चित्र प्रोजेक्ट में नहीं हैं, लेकिन हमें प्रोग्राम को सामान्य रूप से काम करने के लिए इनकी आवश्यकता है। अन्यथा, एप्लिकेशन त्रुटि का कारण होगा। (वास्तव में, आप कार्यक्रम चलाने की कोशिश करके इसे अभी देख सकते हैं ...)
अपने CocosBuilder प्रोजेक्ट के संसाधन फ़ोल्डर से सभी फ़ाइलें लें और उन्हें अपने Xcode प्रोजेक्ट के संसाधन फ़ोल्डर में खींचें। CcbResources फ़ोल्डर की सभी फ़ाइलों के साथ भी ऐसा ही करें। पहले की तरह, सुनिश्चित करें कि आइटम "गंतव्य समूह के फ़ोल्डर में कॉपी करें" के बगल में एक चेकमार्क है, कि आइटम "किसी भी जोड़े गए फ़ोल्डर के लिए समूह बनाएं" का चयन किया गया है और हमारे कैटजम्प प्रोजेक्ट के बगल में एक चेकमार्क है।


अब प्रोग्राम चलाएं। यदि आपको CCBReader.m के संकलन के दौरान एक त्रुटि संदेश मिलता है, तो पंक्ति को निम्न के साथ त्रुटि से बदलें:

 return [_bundle pathForResource:resource ofType:ext inDirectory:subpath]; 

कार्यक्रम को चलाएं, आपको तीन बटन के साथ मुख्य मेनू दिखाई देगा, जैसा कि नीचे दिखाया गया है:

घटनाओं

बधाई हो, अब आपके पास CocosBuilder में कोड की सिर्फ एक पंक्ति के साथ काम करने वाला एक लेआउट है! :)
लेकिन ऐसी घटना कैसे प्राप्त करें कि उपयोगकर्ता इनमें से किसी एक बटन पर क्लिक करे?
CocosBuilder को संभालना आसान है! यह आपको उस विधि का नाम निर्दिष्ट करने की अनुमति देता है जिसे उपयोगकर्ता बटन पर क्लिक करता है। आप उस घटना को भी निर्दिष्ट कर सकते हैं जिसके लिए इस पद्धति को बुलाया जाएगा (मापदंडों के एक सेट का उपयोग करके)।
आइए इस कार्यक्षमता को MainMenuScene में जोड़ें। CocosBuilder में MainMenuScene.ccb खोलें और Play बटन चुनें। दाएँ फलक में, CCNode अनुभाग में, टैग गुण के मान को 1 में बदलें।
फिर, CCControl अनुभाग में, बटन के नाम के साथ चयनकर्ता पाठ बॉक्स भरें : विधि जिसे बुलाया जाएगा। यह भी सुनिश्चित करें कि लक्ष्य फ़ील्ड में दस्तावेज़ रूट मान शामिल है।


अन्य दो बटन के लिए भी ऐसा ही करें, लेकिन विभिन्न टैग्स के साथ - विकल्प के लिए - टैग फ़ील्ड 2 के बारे में, 3 के लिए होगा।
कमाल! आपके पास CCLayer में दिए गए चयनकर्ता के साथ संबंधित बटन प्रेस हैं। परिवर्तन सहेजें, MainMenuScene.ccb प्रकाशित करें, और प्रकाशित फ़ाइल को प्रोजेक्ट के Xcode फ़ोल्डर में कॉपी करें।

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

अब Xcode में MainMenuLayer.m खोलें और वहां निम्नलिखित आयात विवरण जोड़ें:

 #import "CCControlButton.h" #import "CCBReader.h" 

वैकल्पिक रूप से, #import स्टेटमेंट के ठीक नीचे स्थिरांक के साथ निम्नलिखित #define स्टेटमेंट जोड़ें। वे उन बटनों के टैग का वर्णन करते हैं जिन्हें आपने मंच पर रखा था:

 #define PLAY_BUTTON_TAG 1 #define OPTIONS_BUTTON_TAG 2 #define ABOUT_BUTTON_TAG 3 

बटन के बारे में क्या है : विधि? इसे MainMenuLayer.m में जोड़ें:

 -(void)buttonPressed:(id)sender { CCControlButton *button = (CCControlButton*) sender; switch (button.tag) { case PLAY_BUTTON_TAG: [[CCDirector sharedDirector] replaceScene:[CCTransitionCrossFade transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"GameScene.ccbi"]]]; break; case OPTIONS_BUTTON_TAG: [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"OptionsScene.ccbi"]]]; break; case ABOUT_BUTTON_TAG: [[CCDirector sharedDirector] replaceScene:[CCTransitionCrossFade transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"AboutScene.ccbi"]]]; break; } } 

इस पद्धति में, सब कुछ स्पष्ट होना चाहिए: यहां, प्रत्येक बटन को अलग से दबाया जाता है। उदाहरण के लिए, अबाउट बटन पर क्लिक करने पर, AboutScene.ccbi दृश्य प्रदर्शित होता है।

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

कुछ भी जटिल नहीं है!

मुख्य मेनू की तरह, कठिनाई चयन दृश्य में तीन बटन होंगे, और यह दृश्य बनाना उतना ही आसान होगा।
विकल्प दृश्य में, बटनों पर क्लिक करने से उपयोगकर्ता को आसान, मध्यम या हार्ड का चयन करने की अनुमति मिलेगी। मुख्य मेनू पर लौटने के लिए एक बटन भी होगा।
CocosBuilder खोलें और File \ New \ New फ़ाइल का चयन करके एक नया दृश्य बनाएं (MainMenuScene बनाते समय उसी चरणों का पालन करें), इसे OptionsScene नाम दें और इसे परिदृश्य फ़ोल्डर में सहेजें।
दृश्य में तीन बटन जोड़ें और उन्हें आसान, मध्यम और हार्ड नाम दें। फिर उनके टैग को क्रमशः 1, 2 और 3 पर सेट करें।
जब उपयोगकर्ता बटन पर क्लिक करता है, तो घटनाओं को प्राप्त करने के लिए, आपको उस विधि को निर्दिष्ट करना होगा जिसे कॉल किया जाएगा। जैसे आपने MainMenuScene के साथ किया था, कठिनाई को लिखिए। चयनकर्ता फ़ील्ड के प्रत्येक बटन के लिए बटन दबाएं : लक्ष्य फ़ील्ड में दस्तावेज़ रूट का चयन करें।

नोट : मुझे आश्चर्य है कि इस दस्तावेज़ रूट का क्या मतलब है। इसका अर्थ है डिफ़ॉल्ट टाइमलाइन ट्री में रूट नोड। जल्द ही आप रूट नोड (CCLayer) को एक कस्टम वर्ग - OptionsLayer पर सेट करेंगे। इसका अर्थ है कि OptionsLayer वर्ग दस्तावेज़ रूट के रूप में कार्य करेगा।

आपका लेआउट इस तरह दिखेगा:

अब मुख्य मेनू पर वापस जाने के लिए बटन। इस बार, CCControlButton को जोड़ने के बजाय, आपको CCMenu मेनू आइटम जोड़ना होगा।
टूलबार पर CCMenu बटन पर क्लिक करें।


तो आप CCMenu मेनू बनाएं और इसे OptionsScene लेयर में जोड़ें। अब टूलबार पर CCMenuItemImage बटन पर क्लिक करके CCMenuItemImage मेनू आइटम जोड़ें।


सामान्य और चयनित क्षेत्रों में अलग-अलग स्प्राइट्स निर्दिष्ट करें, प्रत्येक के लिए - btn-back-0.png और btn-back-1.png । इन गुणों को दाईं ओर पैनल के CCMenuItemImage सेक्शन में बदला जा सकता है।


दृश्य के ऊपरी बाएं कोने में "बैक" बटन डालें और बैकबटनप्रेस्ड लिखें: इसके लिए चयनकर्ता। लक्ष्य फ़ील्ड में दस्तावेज़ रूट का चयन करना याद रखें।
वह सब है! दृश्य इस तरह दिखना चाहिए:


जैसे आपने पहले MainMenuScene के साथ किया था, OptionsScene के लिए एक कस्टम वर्ग जोड़ें। इसे OptionsLayer नाम दें ।


पहले की तरह, परिवर्तन सहेजें, दृश्य प्रकाशित करें, और XBI प्रोजेक्ट में CCBI फ़ाइल जोड़ें।
Xcode पर जाएं, Layers समूह में एक नया वर्ग बनाएं और इसे OptionsLayer नाम दें (सुनिश्चित करें कि यह CCLayer वर्ग का उपवर्ग है), जैसा आपने पहले किया था।
फिर OptionsLayer.m की शुरुआत में निम्नलिखित आयात और परिभाषा कथन जोड़ें:

 #import "CCBReader.h" #import "CCControlButton.h" #define DIFFICULTY_EASY_BUTTON_TAG 1 #define DIFFICULTY_MEDIUM_BUTTON_TAG 2 #define DIFFICULTY_HARD_BUTTON_TAG 3 

साथ ही साथ निम्नलिखित तरीके हैं:

 -(void)backButtonPressed:(id)sender { [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]]]; } -(void)difficultyButtonPressed:(id)sender { CCControlButton *button = (CCControlButton*) sender; NSString *difficultyLevel = @"Hard"; if (button.tag == DIFFICULTY_EASY_BUTTON_TAG) { difficultyLevel = @"Easy"; } else if(button.tag == DIFFICULTY_MEDIUM_BUTTON_TAG) { difficultyLevel = @"Medium"; } NSLog(@"Difficulty is set to %@", difficultyLevel); } 

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

बारी आई है ... आग की!

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


तो आप कणों की एक उग्र प्रणाली बनाते हैं। एक कण प्रणाली का चयन करें और कण बनावट संपत्ति को cat_leap_1.png में बदलें । जब तक आप परिणाम से खुश न हों तब तक CCParticleSystemQuad पैरामीटर के साथ खेलें। फिर स्क्रीन के निचले दाएं कोने में कण प्रणाली को स्थानांतरित करें, जैसा कि नीचे दिखाया गया है:


अब आपको कुछ टेक्स्ट जोड़ने की जरूरत है। टूलबार पर निम्नलिखित बटन पर क्लिक करके CCLabelBMFont जोड़ें:


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


आप लगभग इस दृश्य के साथ कर रहे हैं! जो भी शेष है वह बैक बटन है।
ऊपरी बाएँ कोने में वापस बटन जोड़ें, जैसा आपने पहले किया था। एक चयनकर्ता के रूप में, BackButtonPressed : , को लक्ष्य फ़ील्ड में लिखें - दस्तावेज़ रूट।
अंतिम चरण इस दृश्य के लिए एक कस्टम वर्ग जोड़ना है, साथ ही पिछले दो दृश्यों के लिए भी है। कस्टम क्लास का नाम AboutLayer है , जैसा कि नीचे दिखाया गया है:


पहले की तरह, परिवर्तनों को सहेजें, दृश्य प्रकाशित करें, और इसे Xcode प्रोजेक्ट में जोड़ें। फिर Xcode पर जाएं और Layers ग्रुप में एक नया Cocos2D क्लास बनाएं। इसे AboutLayer नाम दें और सुनिश्चित करें कि यह CCLayer वर्ग का उपवर्ग है।
AboutLayer.m को खोलें और निम्नलिखित आयात विवरण जोड़ें:

 #import "CCBReader.h" 

और यह विधि भी:

 -(void)backButtonPressed:(id)sender { [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]]]; } 

जब उपयोगकर्ता बैक बटन (ग्रीन एरो) पर क्लिक करता है, तो विधि को बुलाया जाएगा और यह विधि वर्तमान दृश्य को मेनमेनू दृश्य से बदल देती है।
गेम लॉन्च करें। चेक करें: अबाउट बटन पर क्लिक करने से अबाउट सीन दिखाई देता है और बैक बटन आपको मेन मेन्यू में लौटा देता है। अपने समय के कुछ ही मिनटों में बुरा नहीं, हुह?

खेल में!

अंत में, यह हमारे स्टार को खेल में लाने का समय है - एक बिल्ली जो एक कठिन दिन होगा! आपको बस इतना करना है कि आप सही जगह पर खेल के लिए आवश्यक सभी स्प्राइट्स डाल दें, और आप कोड को उठाए बिना ऐसा करेंगे। तो चलिए शुरू करते है!
CocosBuilder पर जाएं और एक नई फ़ाइल बनाएं। इसे GameScene नाम दें और इसे पर्दे के फ़ोल्डर में सहेजें।
फिर नया स्प्राइट बनाने के लिए टूलबार पर CCSprite बटन पर क्लिक करें। इस स्प्राइट के फ़्रेम फ़ील्ड को bg.png पर सेट करें और इसे स्क्रीन के केंद्र में रखें। आपका दृश्य निम्नलिखित की तरह दिखना चाहिए:


अब खेल का मुख्य चरित्र जोड़ें - बिल्ली! फिर से CCSprite बटन पर क्लिक करके परत में एक और स्प्राइट जोड़ें। स्प्राइट के फ़्रेम फ़ील्ड में, cat_stand_1.png और निर्देशांक X: 75, Y: 75 का चयन करें।
इसके अलावा, हम दो CCLabelBMFonts तत्व जोड़ते हैं। वे बिल्ली के जीवन की संख्या, और छलांग की संख्या को दिखाएंगे।
CCLabelBMFont बटन को दो बार दबाएं और परिणामस्वरूप तत्वों को पाठ में दर्ज करें Lives: और Dodges:। इन तत्वों के लिए, फ़ॉन्ट Arial.fnt बनें । स्क्रीन के ऊपरी बाएँ और दाएँ कोने में परिणामी पाठ तत्व रखें, जैसा कि नीचे दिखाया गया है:


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


अब पाठ तत्वों के लिए समान दोहराएं और उन्हें लाइफलैब और डोडलेजलैब चर में बांधें ।
लगता है कि आगे क्या होगा? पिछले दृश्यों की तरह, इस दृश्य को परत वर्ग के लिंक की आवश्यकता है। इस दृश्य को GameLayer वर्ग से लिंक करें, जैसा कि नीचे दिखाया गया है:


परिवर्तन सहेजें, दृश्य प्रकाशित करें, और प्रोजेक्ट में CCBI फ़ाइल जोड़ें। Xcode पर जाएं और Layers समूह में एक नया वर्ग बनाएं, इसे GameLayer नाम दें और सुनिश्चित करें कि यह CCLayer का उपवर्ग है।
यह खेल तर्क का वर्णन करने का समय है। लेकिन चूंकि यह CocosBuilder (गेम लॉजिक के निर्माण के बजाय) के साथ काम करने के लिए एक गाइड है, बस GameLayer.m को कोड के इस लंबे ब्लॉक के साथ बदलें:



खेल के तर्क के साथ क्या हो रहा है, इसका अंदाजा लगाने के लिए कोड को देखने के लिए स्वतंत्र महसूस करें, लेकिन इसके बारे में बहुत चिंता न करें - CocosBuilder हमारा ध्यान केंद्रित है।
#Defines स्टेटमेंट के तुरंत बाद कोड के शीर्ष पर चर को नोटिस करें:

 CCLabelBMFont *livesLabel; CCLabelBMFont *dodgesLabel; CCSprite *cat; 

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

खेल का अंत

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

• मुख्य मेनू : उपयोगकर्ता को मुख्य मेनू में लौटाता है।
• रीप्ले : उपयोगकर्ता फिर से गेम खेलता है।

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


Xcode पर वापस जाएं और प्रोजेक्ट में CCBI फ़ाइल जोड़ें। फिर Layers समूह में एक नया Cocos2D वर्ग बनाएं और इसे GameOverLayer नाम दें , यह सुनिश्चित करते हुए कि यह वर्ग CCLayer वर्ग का उपवर्ग है।
GameOverLayer.m पर निम्नलिखित आयात विवरण जोड़ें:

 #import "CCControlButton.h" #import "CCBReader.h" 

साथ ही परिभाषा ऑपरेटर:

 #define MAIN_MENU_BUTTON_TAG 1 #define PLAY_AGAIN_BUTTON_TAG 2 

एक विधि जोड़ें जो एक बटन क्लिक को संभालती है:

 -(void)buttonPressed:(id)sender { CCControlButton *button = (CCControlButton*) sender; switch (button.tag) { case MAIN_MENU_BUTTON_TAG: [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipY transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]]]; break; case PLAY_AGAIN_BUTTON_TAG: [[CCDirector sharedDirector] replaceScene:[CCTransitionFadeUp transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"GameScene.ccbi"]]]; break; } } 

प्रोग्राम चलाएं। अब आपके पास पूरी तरह कार्यात्मक खेल है।
क्या यह गेम कोड में स्प्राइट पदों का चयन करने से ज्यादा आसान था?

समस्या निवारण CocosBuilder त्रुटियाँ

CocosBuilder जल्दी और कुशलता से दृश्य बनाने के लिए एक महान उपकरण है। हालांकि, यह उपकरण संचार में बहुत अच्छा नहीं है जब दृश्य में कुछ गड़बड़ हो। आपके समय को बचाने के लिए, मैंने एक चेकलिस्ट को एक साथ रखा है, जिस स्थिति में दृश्य ठीक से काम नहीं करता है या आपको अप्रत्याशित त्रुटियां प्राप्त होती हैं।

• , CocosBuilder . . CocosBuilder , , . — .
• CCBI- Xcode-, , Add to target , . , Add to targets, . CCBI. , , .
• संदेशों को डीबग कंसोल में पढ़ें। अगर CocosBuilder आपको यह नहीं बता सकती है कि क्या गलत हुआ, तो डिबग कंसोल में एक संदेश हो सकता है जो आपको यह पता लगाने में मदद करे कि क्या गलत हुआ। यदि यह कहता है: "फ़ाइल नहीं मिली: GameOver.ccbi", तो इसका मतलब है कि GameOver.ccbi फ़ाइल को प्रोजेक्ट में नहीं जोड़ा गया है, या आप जिस लक्ष्य को संकलित कर रहे हैं, वह असेंबली का हिस्सा नहीं है, या बस फ़ाइल नाम में कोई त्रुटि है।
• सुनिश्चित करें कि आप सील नहीं हैं। जब आप चर नाम, कस्टम वर्ग या ईवेंट चयनकर्ताओं के नाम जैसे पाठ दर्ज करते हैं, तो गलती न करना बहुत महत्वपूर्ण है। क्लिपबोर्ड के माध्यम से कॉपी करने का प्रयास करें।

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

आगे क्या है?

यहां अंतिम ड्राफ्ट के लिए संपूर्ण स्रोत कोड है ।
अब आप अपने गेम बनाने के लिए CocosBuilder का उपयोग करने के लिए तैयार हैं। मुझे आशा है कि यह ट्यूटोरियल आपको नए गेम बनाने में बहुत समय बचाता है!