एक स्तर संपादक के रूप में पेंट का उपयोग करना

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

मैं अभी भी इस तरह के उद्देश्यों के लिए एक संपादक नहीं बनाना चाहता था। मैं वर्णन करूंगा कि मैंने इस लेख में पेंट के साथ इसे कैसे हल किया।

मैं खेलों का नाम नहीं दूंगा और उन्हें लिंक दूंगा, क्योंकि यह खेलों का प्रदर्शन या विज्ञापन नहीं है, बल्कि उनमें इस्तेमाल होने वाली विधि का वर्णन है।

असमान नक्शा

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

मैं फोन पर फिल्माए गए वीडियो की गुणवत्ता के लिए माफी मांगता हूं

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

वीडियो का स्तर बाईं ओर दिखाया गया है (4 गुना बढ़ा):

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

स्तर फ़ाइल में 3 परतें होती हैं:

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

पानी पृथ्वी को काटता है, पृष्ठभूमि पृथ्वी और पानी को काटती है, इसलिए उन्हें 3 परतों में विभाजित किया जाता है। मानचित्र फ़ाइल में वर्ण का आकार पिक्सेल का आधा आकार है।

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

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

सबसे पहले, टेक्स_वेल बनावट को तैयार करने की आवश्यकता है। ऐसा करने के लिए, हम इस बनावट के पिक्सल के लिए एक सरणी बनाएंगे:

unsigned int pix[w*h]; 

जहां w स्तर के साथ फ़ाइल की चौड़ाई है, h 3 से विभाजित की गई ऊंचाई है (क्योंकि तीन परतें हैं)।

अब लूप में हम प्रत्येक परत से स्रोत के नक्शे के प्रत्येक पिक्सेल को पढ़ते हैं और, रंग (यह टाइल का प्रकार) के आधार पर, पिक्सेल पिक्सेल में संबंधित रंग चैनलों में भरते हैं, अर्थात्:

 for(int i=0;i<w*h;i++) //    { int c=GetPixel(i%w,i/w); //   1-  if(c==RGB(0,0,0)) pix[i]=0xff; //   –   (R ) c=GetPixel(i%w,i/w+h); //   2-  if(c==RGB(0,0,255)) pix[i]|=0xff0000; //  –  (B ) c=GetPixel(i%w,i/w+h+h); //   3-  if(c==RGB(127,127,127)) pix[i]|=0xff00; //  –  (G ) } 

तकनीकी विशेषता: वास्तव में, w और h मानचित्र की चौड़ाई और ऊंचाई के लिए दो के निकटतम उर्ध्व शक्ति के बराबर हैं, लापता पिक्सेल लाल-कोडित (ग्राउंड) हैं, और इस चक्र को एक छद्म कोड माना जा सकता है।

यह देखा जा सकता है कि सरणी में समान पिक्सेल में भूमि, पानी और पृष्ठभूमि हो सकती है। पिक्स सरणी के आधार पर, टेक्स_लेवल बनावट बनाई गई है, पिक्स सरणी स्वयं अभी भी हमारे लिए उपयोगी है।

बाईं ओर समाप्त टेक्स_लेवल बनावट है, और दाईं ओर यह खेल में है। कैमरा शुरुआती स्थिति में है।

इसे स्थानांतरित करने के लिए और अधिक सुविधाजनक बनाने के लिए, हम केवल टेक्स_लेवल से आर चैनल का उत्पादन करेंगे, अर्थात। केवल पृथ्वी।

पहले आपको इन विशाल वर्गों से छुटकारा पाने की आवश्यकता है। ऐसा करने के लिए, Pix_ को टेक्स_लेवल टेक्सचर में ट्रांसफर होने से पहले गॉस के अनुसार धोया जाना चाहिए (ब्लर त्रिज्या को आनुभविक रूप से चुना गया था)। अब वही स्थान बहुत बेहतर दिखता है:

बाईं ओर धुंधला होने से पहले जमीन है, उसके बाद दाईं ओर।
तकनीकी विवरण: धुंधला होने से पहले, आपको पिक्स सरणी को 2 बार खींचने की आवश्यकता है ताकि मूल पिक्सेल पहले से ही खींची गई सरणी में 2x2 पिक्सेल पर कब्जा कर ले।

लेकिन यहां पृथ्वी की सीमा बहुत धुंधली है। एक धुंधली सीमा को एक स्पष्ट में बदलने की प्रक्रिया को समझने के लिए (आइए इस प्रक्रिया को एक स्पष्ट सीमा फ़िल्टर कहते हैं), हम एक आयामी आयाम पर विचार करते हैं, क्योंकि वह समान है। तब पृथ्वी की धुंधली सीमा कुछ इस तरह दिखाई देगी:

इस ग्राफ से 0.5 घटाएँ, कुछ बड़ी संख्या से गुणा करें (इस परियोजना में यह 50 है) और सीमा के साथ इसे बंद करें (क्लैंप ऑपरेशन) [0; 1], यानी वह सब कुछ जो 0 से कम है, 0 में बदल जाता है, और 1 से अधिक सब कुछ 1 में बदल जाता है:

नतीजतन, सफेद तुरंत काला नहीं होता है (यह महत्वपूर्ण है)।

अब हम अपने टेक्स_लेवल बनावट के साथ इन सभी कार्यों को करेंगे। इस बनावट से चयन को level_color में संग्रहीत होने दें, फिर फ़िल्टर इस तरह दिखता है: clamp((level_color.r – 0.5) * 50.0, 0.0, 1.0)

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

टेक्स_लेवल + शोर के बाईं ओर, दाईं ओर, एक स्पष्ट सीमा फ़िल्टर।

तकनीकी विवरण: शोर बनावट में मूल्यों की सीमा 0 से 1 तक है, इसलिए टेक्स_लेवल नमूने में k (शोर - 0.5) * k जोड़ें, जहां k सीमा सीमा गुणांक है (परियोजना में यह 0.3 है)।

अब यह सिर्फ बनावट लगाने के लिए रह गया है। पृथ्वी की बनावट पहले से मौजूद है (यह सिर्फ एक साधारण बनावट है), लेकिन अभी भी पानी नहीं है, आपको इसे पहले तैयार करने की आवश्यकता है।

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

बाएं से दाएं: धुंधला पानी सीमा, एनिमेटेड शोर प्लस फिल्टर, नीले से आकाश की बनावट के लिए प्रक्षेप।

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

तकनीकी विवरण: पानी के नीचे की धाराओं के कारण "चलती शैवाल" के प्रभाव को देने के लिए, हमने शैवाल के साथ स्प्राइट प्रदान करते समय बनावट के एक्स-घटक के विस्थापन का उपयोग किया। इस ऑफसेट की परिमाण को सभी एक ही बनावट से एनिमेटेड शोर के साथ पढ़ा गया था।

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

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

टकराव का पता लगाना

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

यह एक धुंधली सीमा के साथ तस्वीर से अलग है, क्योंकि बिलिनियर फ़िल्टरिंग का उपयोग वहां किया गया था, और यहां धुंधला होने के बाद सरणी के केवल कच्चे मान हैं।

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

गतिशील नक्शा

इसलिए, लेख की शुरुआत में सामने आई पहली समस्या हल हो गई है: कोई टाइल दिखाई नहीं दे रही है, केवल असमान चट्टानी परिदृश्य हैं। लेकिन चलती तत्वों के बारे में क्या? यह दूसरा गेम दिखाएगा - सुपर मीट बॉय का एक एनालॉग:

कई चलती तत्व हैं: परिपत्र आरी एक सीधी रेखा में चलती है या केंद्र के चारों ओर घूमती है, एक स्पाइक और एक आरा, दरवाजे, बिखरने वाली टाइल के साथ एक चलती मंच। और आरी के अभी भी अलग-अलग आकार हैं।

रेंडरिंग प्रक्रिया पूरी तरह से पहले गेम के अनुरूप है, इसलिए हम नक्शे के प्रारूप पर विचार करने के लिए खुद को प्रतिबंधित करते हैं। वीडियो का नक्शा इस तरह दिखता है (5 बार बड़ा किया गया):

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

तकनीकी ख़ासियत: टेक्स_लेवल बनावट केवल जमीन और पृष्ठभूमि पर रखी गई है (इस खेल में कोई पानी नहीं है), और अन्य सभी वस्तुओं को स्तर फ़ाइल से सरणी में पढ़ा जाता है।

तीसरी परत पर विचार करें। यहां लाल और नीले दरवाजे हैं जो संबंधित कुंजियों के साथ हैं। तो, दरवाजे भी ऑब्जेक्ट हैं, लेकिन उन्हें ऑब्जेक्ट लेयर में नहीं रखा जा सकता है, क्योंकि इस परत में लाल और नीले रंग पहले से ही स्पाइक्स और रोटेशन के केंद्रों (क्रमशः जिसके बारे में नीचे) द्वारा कब्जा कर लिया गया है। सामान्य तौर पर, इस परत में टाइल्स के समूह चिह्नित किए जाते हैं। एक ही समूह की टाइलों का रंग समान है, और वे सभी एक-दूसरे से सटे हुए हैं। दो प्रकार के समूह हैं:

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

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

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

विचारों का विकास। सैद्धांतिक रूप से, पेंट का उपयोग करके, आप 3 डी शूटर के लिए एक नक्शा बना सकते हैं, मैप फ़ाइल में परतों का एक मैट्रिक्स शामिल होगा। इस मैट्रिक्स की पंक्ति खेल में परत की ऊंचाई से मेल खाती है, और कॉलम में एक ही प्रकार की परतें होती हैं। उदाहरण के लिए, 1 कॉलम में मैप ज्योमेट्री होगी (एक लेयर दी गई ऊंचाई पर मैप का एक सेक्शन है), दूसरे कॉलम में आप पिन के प्रमुख रंगों का उपयोग करके टेक्सचर असाइन कर सकते हैं, 3rd प्लेस ऑब्जेक्ट्स में, आदि।

शायद यही सब है। मुझे उम्मीद है कि विषय "पेंट से मानचित्र संपादक" का पता चला है।