हम सप्ताहांत में 3 डी शूटर के बारे में बातचीत जारी रखते हैं। अगर कुछ है, तो मैं आपको याद दिलाता हूं कि यह दूसरी छमाही है:

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

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


दुर्भाग्य से, अधिकांश छात्र 2 डी प्लेटफ़ॉर्मर्स जैसे सरल गेम चुनते हैं। मैं यह लेख यह दिखाने के लिए लिख रहा हूं कि तीन-आयामी दुनिया का भ्रम पैदा करना मारियो ब्रोज को क्लोन करने से ज्यादा मुश्किल नहीं है।

मैं आपको याद दिलाता हूं कि हम एक ऐसे मंच पर रुक गए हैं जो आपको दीवारों को बनावट करने की अनुमति देता है:

---

स्टेज 13: मानचित्र पर राक्षसों को आकर्षित करें

हमारे खेल में एक राक्षस क्या है? ये इसके निर्देशांक और बनावट संख्या हैं:

struct Sprite { float x, y; size_t tex_id; }; [..] std::vector<Sprite> sprites{ {1.834, 8.765, 0}, {5.323, 5.365, 1}, {4.123, 10.265, 1} }; 

कई राक्षसों को परिभाषित करने के बाद, एक शुरुआत के लिए हम बस उन्हें मानचित्र पर आकर्षित करते हैं:



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

---

स्टेज 14: 3 डी में राक्षसों के बजाय काले वर्ग

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

 void draw_sprite(Sprite &sprite, FrameBuffer &fb, Player &player, Texture &tex_sprites) { // absolute direction from the player to the sprite (in radians) float sprite_dir = atan2(sprite.y - player.y, sprite.x - player.x); // remove unnecessary periods from the relative direction while (sprite_dir - player.a > M_PI) sprite_dir -= 2*M_PI; while (sprite_dir - player.a < -M_PI) sprite_dir += 2*M_PI; // distance from the player to the sprite float sprite_dist = std::sqrt(pow(player.x - sprite.x, 2) + pow(player.y - sprite.y, 2)); size_t sprite_screen_size = std::min(2000, static_cast<int>(fb.h/sprite_dist)); // do not forget the 3D view takes only a half of the framebuffer, thus fb.w/2 for the screen width int h_offset = (sprite_dir - player.a)*(fb.w/2)/(player.fov) + (fb.w/2)/2 - sprite_screen_size/2; int v_offset = fb.h/2 - sprite_screen_size/2; for (size_t i=0; i<sprite_screen_size; i++) { if (h_offset+int(i)<0 || h_offset+i>=fb.w/2) continue; for (size_t j=0; j<sprite_screen_size; j++) { if (v_offset+int(j)<0 || v_offset+j>=fb.h) continue; fb.set_pixel(fb.w/2 + h_offset+i, v_offset+j, pack_color(0,0,0)); } } } 

आइए जानें कि यह कैसे काम करता है। यहाँ चित्र है:



पहली पंक्ति में, हम निरपेक्ष कोण sprite_dir पर विचार करते हैं (दिशा से खिलाड़ी के बीच का कोण प्रेत और अनुप्रास के बीच)। स्प्राइट और टकटकी दिशा के बीच का सापेक्ष कोण स्पष्ट रूप से दो पूर्ण कोणों को घटाकर प्राप्त किया जाता है: sprite_dir - player.a। खिलाड़ी से स्प्राइट की दूरी की गणना करने के लिए तुच्छ है, और स्प्राइट का आकार दूरी द्वारा स्क्रीन आकार का एक सरल विभाजन है। ठीक है, बस के मामले में, मैंने ऊपर से दो हजार काट दिए ताकि विशाल वर्ग प्राप्त न हो (वैसे, इस कोड को आसानी से शून्य से विभाजित किया जा सकता है)। h_offset और v_offset स्क्रीन पर स्प्राइट के ऊपरी बाएँ कोने के निर्देशांक देते हैं; फिर एक साधारण डबल लूप हमारे वर्ग को काले रंग से भर देता है। एक पेन और कागज के एक टुकड़े के साथ जांचें कि h_offset और v_offset की सही गणना की जाती है, मेरी ओर से एक (गैर-महत्वपूर्ण) त्रुटि है, लेख में कोड पर विश्वास करें :) खैर, रिपॉजिटरी में अधिक हाल का कोड भी तय किया गया है।



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

---

चरण 15: मानचित्र की गहराई

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


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

---

चरण 16: स्प्राइट्स के साथ समस्या

वे महान राक्षस निकले, हैं न? लेकिन इस स्तर पर मैं कोई कार्यक्षमता नहीं जोड़ूंगा, इसके विपरीत, मैं एक और राक्षस जोड़कर सब कुछ तोड़ दूंगा:


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

---

चरण 17: स्प्राइटिंग को छांटना

क्या समस्या थी? समस्या यह है कि मेरे पास ड्राइंग स्प्राइट का एक अनियंत्रित क्रम हो सकता है, और उनमें से प्रत्येक के लिए मैं दीवारों के साथ इसकी दूरी की तुलना करता हूं, लेकिन अन्य स्प्राइट्स के साथ नहीं, इसलिए दूर के प्राणी को निकटतम पर क्रॉल किया गया। क्या ड्राइंग स्प्राइट के लिए गहराई के नक्शे के साथ एक समाधान को अनुकूलित करना संभव है?


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


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

---

चरण 18: एसडीएल समय

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



बदलाव आप यहाँ देख सकते हैं । मैं अब gitpod का लिंक नहीं दूंगा, क्योंकि ब्राउज़र में एसडीएल ने अभी तक शुरू करना नहीं सीखा है :(

अपडेट: जानें! आप ब्राउज़र में एक क्लिक में कोड चला सकते हैं!

चरण 19: घटना प्रसंस्करण और सफाई

कीस्ट्रोक्स पर प्रतिक्रिया जोड़ें यह भी अजीब नहीं है, मैं वर्णन नहीं करूंगा। SDL जोड़ते समय, मैंने stb_image.h पर निर्भरता को हटा दिया। यह सुंदर है, लेकिन इसे संकलित करने में बहुत लंबा समय लगता है।

जो लोग नहीं समझते हैं, उनके लिए उन्नीसवें चरण के स्रोत यहां हैं । खैर, यहाँ एक विशिष्ट प्रदर्शन है:

निष्कर्ष

इस समय मेरे कोड में केवल 486 लाइनें हैं, और साथ ही मैंने उन पर बिल्कुल भी बचत नहीं की:

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

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

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