रॉगुलाइक के लिए यथार्थवादी छाया

छवि

अच्छा समय, हैबर समुदाय।

कई साल पहले, मैं एक पोस्ट (1) के पार आया था। तब मुझे रोज़गुलिके (2) में गेमप्ले के लिए दिलचस्प तत्व बनाने का अवसर मिला। मान लीजिए कि एक दीवार के पीछे एक सहायक हो सकता है, तो हम उसे तब तक नहीं देखेंगे जब तक हम उसे दृष्टि की रेखा में नहीं चलाते। लेकिन मैं उस स्थिति को पसंद करता हूं जब हम, कालकोठरी के गलियारों के साथ यात्रा करते हैं, दृश्यता के क्षेत्र के आधार पर धीरे-धीरे वस्तुओं के स्थान की सुविधाओं को प्रकट करते हैं।

बाद में पदों में: (3) , (4) और (5) , 2 डी गेम में छाया ढलाई के प्रश्नों पर विचार किया गया। जैसा कि दोनों लेखकों ने स्वयं और टिप्पणियों में उल्लेख किया है, परछाई की गणना कैलकुलेटर के लिए और डिज़ाइन के लिए दोनों ही एक बहुत ही आसान और आसान काम नहीं है।

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

कार्यक्रम पास्कल में लिखा गया था, बस इसलिए कि मैं इसे अच्छी तरह से जानता हूं, और लाजर एक खुली आईडीई है जिसमें कई प्रकार के घटक हैं।

मूल विचार टाइल के प्रत्येक कोने के माध्यम से पर्यवेक्षक से लाइनें खींचना था, और फिर परिणामी आकृति को गहरा करना था।

छवि

हालांकि, इस तरह की छाया कुछ अप्राकृतिक दिखती है जब देखने का कोण बदल जाता है। छायाएं व्यापक हो रही हैं, अब संकरी हैं।

छवि

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

मेरे कार्यक्रम में, मैंने निम्नलिखित फ़ंक्शन का उपयोग किया:

//       function tangent_to_circle(x1,y1,x2,y2,r:Single; var x3,y3,x4,y4:Single):Boolean; var l,dx,dy,i,ii,ij:Single; begin dx := x1 - x2; dy := y1 - y2; l := Sqrt(dx*dx + dy*dy); if l<=r then begin tangent_to_circle:=false; exit; end; i := r/l; ii := i*i; ij := i * Sqrt(1 - ii); x3 := x2 + dx*ii - dy*ij; y3 := y2 + dx*ij + dy*ii; x4 := x2 + dx*ii + dy*ij; y4 := y2 - dx*ij + dy*ii; tangent_to_circle:=true; end; 

जहाँ (X1, y1) अवलोकन बिंदु है, (x2, y2) वृत्त का केंद्र है, ® इसका त्रिज्या है, और (x3, y3) और (x4, y4) रेखाओं और वृत्त का प्रतिच्छेदन बिंदु हैं। फ़ंक्शन तभी सही होता है जब पर्यवेक्षक सर्कल के बाहर होता है।

चूंकि प्रोसेसर त्रिकोणमिति के साथ बहुत अनुकूल नहीं है, इसलिए मैंने इसे न्यूनतम उपयोग करने की कोशिश की। वास्तव में एक सरल नियम (किसी न किसी मॉडल) पर निर्भर, विशेषज्ञ आपको बताएंगे कि क्यों।

(खराब) SIN, COS ..> '/', SQRT> 'DIV', 'MOD'> 'SHR', 'SHL'> '*'> ': =', '+', '-', ' ',' XOR '.. (अच्छा)

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

टाइल की छाया खींचते समय, मैं मूल रूप से छाया के साथ सेक्टर को भरने जा रहा था, लेकिन तब टाइल के अंदर की छवि खराब रूप से अलग थी (चित्र 3 में प्रश्न में सेक्टर हरा भरा है)। विभिन्न विकल्पों के साथ प्रयोग करने के बाद, मैंने छाया क्षेत्र से एक सेक्टर का चयन करना बंद कर दिया।

सेक्टर को आकर्षित करने के लिए, हमें रेडियन में एक कोण की आवश्यकता है, लेकिन त्रिकोणमिति अभी भी नहीं कर सका। (arctan2 - गणित मॉड्यूल लाइब्रेरी फ़ंक्शन)

 //     function alpha_angle(x1,y1,x2,y2:Single):Single; begin alpha_angle := arctan2(y1 - y2, x1 - x2); end; 

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

छवि

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

छवि

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

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

छवि

मुझे प्रभाव इतना पसंद आया कि मुझे एक दिए गए गुणक पैरामीटर के माध्यम से एक गतिशील प्रक्रिया को स्केलिंग करना पड़ा।

छवि

जो कुछ भी था वह अपारदर्शी दीवारें बनाने और समुदाय को परिणाम प्रस्तुत करने के लिए था।

छवि

मैं इस प्रभाव या इसके विकास का उपयोग करते हुए नए खेलों की प्रतीक्षा कर रहा हूं।
धन्यवाद!

डेमो जहां आप हैंडल को छू सकते हैं (विंडोज़ के लिए exe)।

भाग २ , भाग ३

संदर्भ:
1) habr.com/post/16927/
2) en.wikipedia.org/wiki/Roguelike
3) habr.com/post/204782/
4) habr.com/post/305252/
5) habr.com/post/319530/
6) wiki.freepascal.org/BGRABitmap
7) twitter.com/joecreates

Source: https://habr.com/ru/post/hi430438/


All Articles