Cocos2d में सममितीय मानचित्रों के साथ कार्य करना

Habrahabr.ru के सभी पाठकों को मेरा नमस्कार

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

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

शायद पर्याप्त प्रविष्टि। चलो शुरू हो जाओ!

दो प्रकार के कार्ड हैं, ये आइसोमेट्रिक और ऑर्थोगोनल हैं। फिलहाल, मैं "आइसोमेट्रिक" नक्शे के साथ अपने काम का वर्णन करूंगा, क्योंकि यह मुझे खेल के लिए बेहतर लगता है।

आइसोमेट्रिक नक्शे क्या हैं और वे हमें क्या देते हैं?

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



एक आइसोमेट्रिक मैप डिजाइन करना।

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

टिलमैप्स के दृष्टिकोण से, यदि आप "चित्र 1" को देखते हैं, तो आप एक आइसोमेट्रिक प्रक्षेपण बनाने के लिए ठोस कार्य देखेंगे। पहले के क्षेत्र को 45 डिग्री घुमाया जाता है और फिर इसकी विशिष्ट आइसोमेट्रिक आकृति देने के लिए इसकी Y अक्ष के साथ स्केलिंग की जाती है।



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



आइसोमेट्रिक नक्शे में वास्तविक दृश्य गहराई को जोड़ने के लिए, हमारे पास एक "टाइल" वस्तु होनी चाहिए जो हीरे के आकार के आकार से परे हो। सबसे अधिक इस्तेमाल किया जाने वाला दृष्टिकोण तीन आयामी वस्तुओं को डिजाइन करना है जैसे कि उन्हें 45 डिग्री के कोण पर देखा गया था। एक नियम के रूप में, ऐसी वस्तुएं एक से अधिक टाइल नहीं हैं। यह दृश्य गहराई का एहसास देता है। इसी तरह, यदि आप आइसोमेट्रिक टाइल ऑब्जेक्ट बनाते हैं जो दो टाइलों की ऊँचाई से बहुत अधिक है, तो यह एक ठोस 3 डी दृश्य बनाना बहुत मुश्किल होगा यदि ऑब्जेक्ट बहुत लंबा लगता है क्योंकि खिलाड़ी को केवल टिलमैप का हिस्सा दिखाई देगा।

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

चलिए नक्शा खुद बनाना शुरू करते हैं। हम एप्लिकेशन को खोलते हैं और कुछ सेटिंग्स बनाते हैं ताकि cocos2d पार्सर खुद हमारे नक्शे पर कसम न खाएं, "वरीयताएँ" मेनू आइटम ढूंढें और बेस 64 (गज़िप संपीड़ित) में "स्टोर टाइल परत डेटा" के रूप में डालें, आप इसे नीचे दिए गए चित्र में देख सकते हैं।



हम जारी रखते हैं । फ़ाइल का चयन करें will नया । नया नक्शा नाम के साथ एक संवाद खुल जाएगा। ओरिएंटेशन, आइसोमेट्रिक को सेट किया जाना चाहिए और मैप का आकार (मैप साइज) 30 प्लेट चौड़ा और 30 प्लेट ऊंचा है, मुझे लगता है कि यह हमारे लिए पर्याप्त है। यह टाइल की चौड़ाई और ऊँचाई (टाइल का आकार) यहाँ अजीब लगता है। हीरे की आकृति का आकार जो हमें विचार करना चाहिए जब टाइल बिछाते हैं तो 54x27 पिक्सेल होते हैं। फिर भी, टाइल का आकार 52x26 पर सेट है।



इस ऑफसेट का उद्देश्य (-2, -1) है ताकि बाद में हम तिलमाप के किनारों के साथ सीधी रेखाएं हों और नीचे दिखाई जा रही काली परत से बचें। यह आवश्यक है क्योंकि आदर्श रूप बनाना असंभव है जो एक दूसरे से समान दूरी पर स्थित हैं और ओवरलैप नहीं करते हैं।

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

<map version="1.0" orientation="isometric" width="30" height="30" tilewidth="54" tileheight="27"> 

जब तक हम तिलमाप के लिए सही ऑफसेट नहीं पा लेते हैं तब तक आप टिल्विड और टाइलहाइट मापदंडों को भी संपादित कर सकते हैं। इसी तरह, यदि आप उपयोग किए जा रहे आइसोमेट्रिक टाइल के आकार को निर्धारित करने में समस्या कर रहे हैं, तो आप टाइलटेट के मापदंडों को बदल सकते हैं, जैसे कि टिल्विड और टाइलहाइट:

 <tileset firstgid="1" name="dg_iso32" tilewidth="54" tileheight="49"> <image source="dg_iso32.png"/> </tileset> 

तब आपको केवल यह सुनिश्चित करने की आवश्यकता है कि टाइल में TMX फ़ाइल को मैन्युअल रूप से कोई भी परिवर्तन करने के बाद अपडेट किया गया है, क्योंकि Tiled स्वचालित रूप से फ़ाइल को अपडेट नहीं करेगा।

एक नई आइसोमेट्रिक टाइलसेट बनाना

आगे हमें आइसोमेट्रिक टाइल्स युक्त टाइलसेट में लोड करना होगा। हम dg_iso32.png छवि का उपयोग करेंगे। टाइल की गई में , मानचित्र Tiles नई टाइलसेट ... का चयन करें और dg_iso32.png फ़ाइल पर जाएँ।



कृपया ध्यान दें कि टाइल्ड में यह नए मैप डायलॉग बॉक्स में सेटिंग्स के अनुसार डिफ़ॉल्ट टाइल की चौड़ाई और ऊंचाई सेट करेगा, जो हम पहले सेट करते हैं। आइसोमेट्रिक टीलमैप्स के लिए, डिफ़ॉल्ट रूप से यह हमेशा आइसोमेट्रिक टाइलों को ओवरलैप करने के कारण सुधार की आवश्यकता होगी। जैसा कि मैंने पहले बताया, टाइलसेट dg_iso32.png 54 पिक्सल की चौड़ाई और 49 पिक्सल की ऊंचाई के साथ टाइल का उपयोग करता है। कृपया ध्यान दें कि आपको आइसोमेट्रिक टाइल के कैनवस की पूरी ऊंचाई का उपयोग करना होगा, न कि उस रोम्बस की ऊँचाई जो कि 27 पिक्सेल है। ऊपर दिया गया आंकड़ा दिखाता है कि सब कुछ कैसे कॉन्फ़िगर किया जाए।

मैं कुछ नियमों के बारे में कहना चाहता हूं जिन्हें आपको नहीं भूलना चाहिए।

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

Cocos2d के पिछले संस्करण में आंशिक रूप से पारदर्शी टाइलों के पीछे खेल के पात्रों और अन्य स्प्राइट्स के सही प्रदर्शन के साथ समस्याएं थीं। समाधान का हिस्सा हमारी परतों में cc_vertexz नाम के विशेष गुणों को जोड़ना है। ऐसा करने के लिए, हमें जमीनी परत का चयन करना होगा और उसमें "परत गुण" जोड़ना होगा। एक अन्य कुंजी दबाएँ या मैक पर Ctrl का उपयोग करें। Cc_vertexz नामक एक नई प्रॉपर्टी जोड़ें और इसका मान -1000 पर सेट करें । "ऑब्जेक्ट्स" परत के साथ भी ऐसा ही करें लेकिन रेखा "स्वचालित" (बिना उद्धरण) के दर्ज करें, जैसा कि नीचे दिए गए चित्र में दिखाया गया है।



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

फिर हमने जो कुछ भी किया है, उसे बचाते हैं, जिसका नाम हम isometric.tmx देंगे ।

Cocos2d में Isometric Tilemap डाउनलोड करें

अगला, हमारा Xcode खोलें और एक नया प्रोजेक्ट बनाएं।



आपको जो अच्छा लगे हम उसे कॉल करते हैं। मैंने अपना NewTileMap नाम दिया ।



अगला, हमारे नक्शे को हमारी परियोजना में खींचें जो हमने अभी बनाया था।



यह टिक करने के लिए मत भूलना कि हम केवल वस्तुओं की नकल करते हैं।

HelloWorldLayer.m फाइल पर जाएं और कोडिंग शुरू करें, आज यह ज्यादा नहीं है, तो और भी बहुत कुछ होगा।



init विधि में हम वहां मौजूद हर चीज को मिटा देते हैं और अपना कोड जोड़ते हैं।

 self.map = [CCTMXTiledMap tiledMapWithTMXFile:@"isometric.tmx"]; self.background = [_map layerNamed:@"Background"]; [self addChild:_map z:-1]; _map.position = CGPointMake(-500, -500); 

चूंकि हमने अपनी वस्तुओं को ऊपरी दाएं कोने में रखा है, हमें तुरंत वहां जाने की आवश्यकता है, इसके लिए हम स्थिति बदल रहे हैं।

खैर, शायद आप हमारे खेल को चला सकते हैं। और हम क्या देखते हैं?



यह वह नहीं है जो हम देखना चाहते थे! मुझे पता नहीं है कि किन कारणों से, लेकिन cocos2d किसी भी तरह एक मानक परियोजना निर्माण टेम्पलेट के साथ isometric नक्शे को सही ढंग से प्रदर्शित नहीं करता है। खैर, कुछ नहीं, इसे ठीक करो। स्मार्ट लोगों ने कहा कि यह ccMacros.h में परिभाषित CC_DIRECTOR_INIT से थोड़ा ठीक है । मैंने बस इतना ही किया, लेकिन इससे मुझे मदद नहीं मिली, मुझे पूरी तरह से प्रोजेक्ट "\ libs \ cocos2d" में फ़ोल्डर को बदलना पड़ा और फिर मुझे अभी भी AppDelegate.m को संपादित करने की आवश्यकता है।

अगर किसी ने इस समस्या को अलग तरीके से हल किया, तो मुझे यह जानकर खुशी होगी कि कैसे।



सभी ने सही किया और हमारे छोटे खेल को चलाने की कोशिश की।



अब सब कुछ वैसा ही है जैसा होना चाहिए! सब कुछ सही ढंग से प्रदर्शित किया गया है।
मुझे लगता है कि यह अभी के लिए पर्याप्त है, अगले अध्याय में हम नक्शे के साथ काम करना जारी रखेंगे।

स्टीफन इट्टरहेम - जानें iPhone और iPad Cocos2D गेम डेवलपमेंट ने लेख लिखने में मदद की।
जिनके लिए स्रोत कोड कोमल होगा, लिखो, मैं भेज दूंगा।