यह पाठ उन लोगों के लिए है जो केवल प्रोग्रामिंग में महारत रखते हैं। मुख्य विचार कदम से कदम दिखाना है कि आप स्वतंत्र रूप से कैसे खेल ला ला वोल्फेंस्टीन 3 डी बना सकते हैं । ध्यान दें, मैं कार्मैक के साथ बिल्कुल भी प्रतिस्पर्धा करने वाला नहीं हूं, वह एक प्रतिभाशाली है और उसका कोड सुंदर है। मैं पूरी तरह से अलग जगह पर लक्ष्य कर रहा हूं: मैं आधुनिक कंप्यूटरों की विशाल कंप्यूटिंग शक्ति का उपयोग करता हूं ताकि छात्र कुछ दिनों में अनुकूलन के विकारों में फंस गए बिना मजाकिया प्रोजेक्ट बना सकें। मैं विशेष रूप से धीमा कोड लिखता हूं, क्योंकि यह बहुत छोटा है और समझने में आसान है। कार्मैक 0x5f3759df लिखता है , मैं 1 / sqrt (x) लिखता हूं । हमारे अलग-अलग लक्ष्य हैं।

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

शीट लंबी हो गई, इसलिए मैंने टेक्स्ट को दो भागों में तोड़ दिया:

• भाग एक: ड्राइंग दीवारें
• भाग दो: हमारे विश्व + विंडो इंटरफ़ेस में निवास करते हैं

मेरे भंडार से कोड निष्पादन इस तरह दिखता है:


यह एक समाप्त खेल नहीं है, लेकिन केवल छात्रों के लिए एक रिक्त है। दो नए लोगों द्वारा लिखे गए समाप्त खेल का एक उदाहरण, दूसरा भाग देखें ।

यह पता चला है कि मैंने आपको थोड़ा धोखा दिया है, मैं आपको यह नहीं बताता कि एक सप्ताह के अंत में पूरा गेम कैसे बनाया जाए। मैंने केवल एक 3D इंजन बनाया है। राक्षस मुझ पर नहीं चलते हैं, और मुख्य चरित्र शूट नहीं करता है। लेकिन कम से कम मैंने इस इंजन को एक शनिवार में लिखा था, आप कमिट्स के इतिहास की जांच कर सकते हैं। सिद्धांत रूप में, रविवार कुछ खेलने योग्य बनाने के लिए पर्याप्त है, अर्थात, एक सप्ताह के अंत में आप मिल सकते हैं।

इस लेखन के समय, रिपॉजिटरी में कोड की 486 लाइनें होती हैं:

haqreu@daffodil:~/tinyraycaster$ cat *.cpp *.h | wc -l 486 

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

इसलिए, मैं सभी कोड को चरणों में तोड़ता हूं, जो नंगे C ++ कंपाइलर से शुरू होता है। शेड्यूल ( tyts , tyts , tyts ) पर अपने पिछले लेखों की तरह, मैं नियम "वन स्टेप = वन कमिट" का पालन करता हूं, क्योंकि गिटब कोड परिवर्तन के इतिहास को देखने के लिए बहुत सुविधाजनक बनाता है।

चरण 1: डिस्क पर चित्र सहेजें

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



यहाँ पूर्ण C ++ कोड है जो हमें इसकी आवश्यकता है:

 #include <iostream> #include <fstream> #include <vector> #include <cstdint> #include <cassert> uint32_t pack_color(const uint8_t r, const uint8_t g, const uint8_t b, const uint8_t a=255) { return (a<<24) + (b<<16) + (g<<8) + r; } void unpack_color(const uint32_t &color, uint8_t &r, uint8_t &g, uint8_t &b, uint8_t &a) { r = (color >> 0) & 255; g = (color >> 8) & 255; b = (color >> 16) & 255; a = (color >> 24) & 255; } void drop_ppm_image(const std::string filename, const std::vector<uint32_t> &image, const size_t w, const size_t h) { assert(image.size() == w*h); std::ofstream ofs(filename); ofs << "P6\n" << w << " " << h << "\n255\n"; for (size_t i = 0; i < h*w; ++i) { uint8_t r, g, b, a; unpack_color(image[i], r, g, b, a); ofs << static_cast<char>(r) << static_cast<char>(g) << static_cast<char>(b); } ofs.close(); } int main() { const size_t win_w = 512; // image width const size_t win_h = 512; // image height std::vector<uint32_t> framebuffer(win_w*win_h, 255); // the image itself, initialized to red for (size_t j = 0; j<win_h; j++) { // fill the screen with color gradients for (size_t i = 0; i<win_w; i++) { uint8_t r = 255*j/float(win_h); // varies between 0 and 255 as j sweeps the vertical uint8_t g = 255*i/float(win_w); // varies between 0 and 255 as i sweeps the horizontal uint8_t b = 0; framebuffer[i+j*win_w] = pack_color(r, g, b); } } drop_ppm_image("./out.ppm", framebuffer, win_w, win_h); return 0; } 

यदि आपके पास हाथ में एक कंपाइलर नहीं है, तो इससे कोई फर्क नहीं पड़ता है, यदि आपके पास जीथब पर खाता है, तो आप इस कोड को देख सकते हैं, इसे संपादित कर सकते हैं और चला सकते हैं (sic!) ब्राउज़र से सीधे एक क्लिक में।



इस लिंक के बाद, gitpod आपके लिए एक वर्चुअल मशीन बनाएगा, VS कोड लॉन्च करेगा और रिमोट मशीन पर एक टर्मिनल खोलेगा। टर्मिनल कमांड के इतिहास में (कंसोल पर क्लिक करें और ऊपर तीर दबाएं), पहले से ही कमांड का एक पूरा सेट है जो आपको कोड संकलित करने, इसे चलाने और परिणामी तस्वीर खोलने की अनुमति देता है।

तो आपको इस कोड से क्या समझने की आवश्यकता है। सबसे पहले, मैं चार-बाइट पूर्णांक प्रकार uint32_t में जो रंग संग्रहीत करता हूं। प्रत्येक बाइट आर, जी, बी या ए का एक घटक है। फ़ंक्शन pack_color () और unpack_color () आपको प्रत्येक रंग के व्यक्तिगत घटकों को प्राप्त करने की अनुमति देता है।

दूसरा, दो आयामी चित्र, मैं सामान्य एक आयामी सरणी में संग्रहीत करता हूं। निर्देशांक (x, y) के साथ पिक्सेल पर जाने के लिए मैं छवि [x] [y] नहीं लिखता, लेकिन मैं छवि [x + y * चौड़ाई] लिखता हूं। यदि दो-आयामी सूचनाओं को एक-आयामी सरणी में पैक करने का यह तरीका आपके लिए नया है, तो अभी एक पेन लें और उससे निपटें। मेरे लिए व्यक्तिगत रूप से, यह चरण मस्तिष्क तक नहीं पहुंचता है, यह सीधे रीढ़ की हड्डी में संसाधित होता है। तीन और अधिक आयामी सरणियों को ठीक उसी तरह से पैक किया जा सकता है, लेकिन हम दो घटकों से ऊपर नहीं उठेंगे।

फिर मैं एक साधारण डबल चक्र में अपनी तस्वीर के माध्यम से चलाता हूं, इसे एक ढाल के साथ भरता हूं, और इसे .ppm प्रारूप में डिस्क पर सहेजता हूं।

---

स्टेज 2: एक स्तर का नक्शा बनाएं

हमें अपनी दुनिया का नक्शा चाहिए। इस बिंदु पर, मैं सिर्फ डेटा संरचना का निर्धारण करना चाहता हूं और स्क्रीन पर एक मानचित्र तैयार करना चाहता हूं। यह कुछ इस तरह दिखना चाहिए:



बदलाव आप यहाँ देख सकते हैं । वहां सब कुछ सरल है: मैंने मानचित्र को पात्रों के एक-आयामी सरणी में हार्डकोड किया, एक आयत को खींचने के कार्य को परिभाषित किया, और मानचित्र के चारों ओर चला गया, प्रत्येक कोशिका को चित्रित किया।

मैं आपको याद दिलाता हूं कि यह बटन इस स्तर पर कोड लॉन्च करेगा:

---

स्टेज 3: एक खिलाड़ी जोड़ें

नक्शे पर किसी खिलाड़ी को खींचने में सक्षम होने के लिए हमें क्या करने की आवश्यकता है? जीपीएस निर्देशांक पर्याप्त हैं :)



दो चर x और y जोड़ें, और खिलाड़ी को उचित स्थान पर आकर्षित करें:



बदलाव आप यहाँ देख सकते हैं । Gitpod के बारे में मुझे अधिक याद नहीं होगा :)

---

स्टेज 4: उर्फ ​​वर्चुअल रेंजफाइंडर पहली किरण का निशान

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



और अब मैं नारंगी किरण के साथ सरकना चाहता हूं। यह कैसे करना है? बेहद सरल। आइए हरे रंग के दाहिने त्रिभुज को देखें। हम जानते हैं कि cos (player_a) = a / c, और वह sin (player_a) = b / c।



यदि मैं मनमाने ढंग से c (धनात्मक) मान लेता हूँ और x = player_x + c * cos (player_a) और y = player_y + c * sin (player_a) गिनता हूँ तो क्या होगा? हम खुद को बैंगनी बिंदु पर पाएंगे; पैरामीटर को शून्य से अनंत तक अलग-अलग करके, हम अपने नारंगी किरण के साथ इस बैंगनी डॉट को स्लाइड बना सकते हैं, और सी (x, y) से (player_x, player_y) की दूरी है!

हमारे ग्राफिक्स इंजन का दिल इस चक्र है:

  float c = 0; for (; c<20; c+=.05) { float x = player_x + c*cos(player_a); float y = player_y + c*sin(player_a); if (map[int(x)+int(y)*map_w]!=' ') break; } 

हम किरण के साथ बिंदु (x, y) को स्थानांतरित करते हैं, अगर यह मानचित्र पर एक बाधा के पार आता है, तो हम चक्र को समाप्त करते हैं, और चर c बाधा को दूरी देता है! लेजर रेंजफाइंडर क्या नहीं है?



बदलाव आप यहाँ देख सकते हैं ।

---

चरण 5: सेक्टर अवलोकन

एक बीम ठीक है, लेकिन फिर भी हमारी आँखें एक पूरे क्षेत्र को देखती हैं। आइए व्यूइंग एंगल फ़ॉव (देखने का क्षेत्र) को कॉल करें:



और ५१२ किरणें छोड़ें (वैसे, ५१२?), पूरे देखने के क्षेत्र को चिकना करते हुए:


बदलाव आप यहाँ देख सकते हैं ।

---

स्टेज 6: 3 डी!

और अब प्रमुख बिंदु। 512 किरणों में से प्रत्येक के लिए, हमें निकटतम बाधा के लिए दूरी मिली है, है ना? और अब एक दूसरी तस्वीर 512 पिक्सेल चौड़ी (स्पॉइलर) बनाते हैं; जिसमें प्रत्येक किरण के लिए हम एक ऊर्ध्वाधर खंड खींचेंगे, और खंड की ऊंचाई बाधा के लिए दूरी के विपरीत आनुपातिक है:



एक बार फिर, यह 3 डी भ्रम बनाने की कुंजी है, सुनिश्चित करें कि आप समझते हैं कि दांव पर क्या है। ऊर्ध्वाधर खंडों को आकर्षित करना, वास्तव में, हम एक पिकेट बाड़ को खींचते हैं, जहां प्रत्येक हिस्सेदारी की ऊंचाई छोटी होती है, यह उससे दूर है:



बदलाव आप यहाँ देख सकते हैं ।

---

स्टेज 7: पहला एनीमेशन

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


बदलाव आप यहाँ देख सकते हैं ।

---

चरण 8: मछली की आंख में सुधार

क्या आपने देखा कि जब हम एक दीवार को करीब से देखते हैं, तो मछली का एक बड़ा प्रभाव हमें क्या मिलता है? यह इस तरह दिखता है:



क्यों? हाँ, बहुत सरल है। यहाँ हम दीवार को देखते हैं:



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

इस विकृति को ठीक करने के लिए बिल्कुल भी मुश्किल नहीं है, यह देखो कि यह कैसे किया जाता है । कृपया सुनिश्चित करें कि आप समझते हैं कि कोसाइन कहां से आया है। कागज के एक टुकड़े पर आरेख बनाएं इससे बहुत मदद मिलती है।

---

चरण 9: बनावट फ़ाइल लोड करें

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



इस बिंदु पर, मैं सिर्फ बनावट को स्मृति में लोड करता हूं। लिखित कोड का परीक्षण करने के लिए, मैं स्क्रीन के ऊपरी बाएं कोने में सूचकांक 5 के साथ बनावट के रूप में आकर्षित करता हूं:


बदलाव आप यहाँ देख सकते हैं ।

---

चरण 10: बनावट का अल्पविकसित उपयोग

अब मैं बेतरतीब ढंग से उत्पन्न रंगों को फेंक देता हूं और इसी बनावट के ऊपरी बाएँ पिक्सेल को ले जाकर अपनी दीवारों को रंग देता हूं:


बदलाव आप यहाँ देख सकते हैं ।

---

चरण 11: वास्तविक के लिए दीवारों का बनावट

और अब लंबे समय से प्रतीक्षित क्षण आ गया है जब हम अंत में ईंट की दीवारों को देखते हैं:



मूल विचार बहुत सरल है: यहां हम वर्तमान किरण के साथ-साथ भाग लेते हैं और बिंदु x, y पर रुकते हैं। मान लें कि हम एक "क्षैतिज" दीवार पर बसे हैं, तो y लगभग पूर्णांक है (वास्तव में नहीं, क्योंकि किरण के साथ चलने का हमारा तरीका एक छोटी सी त्रुटि का परिचय देता है)। आइए x का भिन्नात्मक भाग लेते हैं और इसे हिटएक्स कहते हैं। भिन्नात्मक भाग एक से कम है, इसलिए, यदि हम बनावट के आकार से गुणा करते हैं (मेरे पास 64 हैं), तो यह हमें बनावट स्तंभ देगा जो इस स्थान पर तैयार करने की आवश्यकता है। यह इसे सही आकार में फैलाने के लिए बना हुआ है और यह चीज़ टोपी में है:



सामान्य तौर पर, यह विचार अत्यंत आदिम है, लेकिन इसके लिए सावधानीपूर्वक निष्पादन की आवश्यकता है, क्योंकि हमारे पास "ऊर्ध्वाधर" दीवारें हैं (जो कि हिट [शून्य पूर्णांक] के करीब हैं)। उनके लिए, बनावट स्तंभ को hity, y के भिन्नात्मक भाग द्वारा निर्धारित किया जाता है। बदलाव आप यहाँ देख सकते हैं ।

---

स्टेज 12: रिफ्लेक्टर का समय!

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

  for (size_t frame=0; frame<360; frame++) { std::stringstream ss; ss << std::setfill('0') << std::setw(5) << frame << ".ppm"; player.a += 2*M_PI/360; render(fb, map, player, tex_walls); drop_ppm_image(ss.str(), fb.img, fb.w, fb.h); } 

खैर, यहाँ परिणाम है:


बदलाव आप यहाँ देख सकते हैं ।

जारी रखने के लिए ... तुरंत

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