कार्ड गेम में कार्ड के लिए ड्रॉप शैडो इफ़ेक्ट खींचने के लिए मैं किन तकनीकों का उपयोग करूंगा?


13

इन प्रकार की छाया बनाने के लिए किस प्रकार के छायांकन एल्गोरिदम का उपयोग किया जा सकता है? यहाँ छवि विवरण दर्ज करें

मैं जो बना रहा हूं, वह समान है, लेकिन यह एक 2D ड्राइंग एपीआई के साथ किया गया है जो OpenGL द्वारा संचालित है ताकि कोई Z समन्वय न हो।

इसके अलावा, हाथ के लिए, मैं वास्तव में एक छायांकित महसूस करना चाहूंगा जैसे यहां देखा गया है: यहाँ छवि विवरण दर्ज करें

मुझे यकीन नहीं है कि एक छायांकित रूप को कैसे प्राप्त किया जा सकता है।

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

मुझे किस प्रकार के एल्गोरिदम को देखना चाहिए (धब्बा से अलग जो मुझे पता है कि करने की आवश्यकता होगी?)

धन्यवाद

अपडेट करें

मैं एक 2D कार्ड गेम बना रहा हूं। मैं ताश के पत्तों की बूंदों को थोड़ा जोड़ना चाहता हूं, जैसे:

यहाँ छवि विवरण दर्ज करें

जिस तरह से मैं यह करने की सोच रहा हूं वह है:

  • एक बनावट रखें जो बैकबफ़र के समान आकार का हो।
  • उस बनावट के लिए कार्ड के रूप में गहरे आयत बनाएं।

  • उस बनावट को धुंधला करें।

  • मेरे कार्डों को उस बनावट की ओर आकर्षित करें।
  • कार्डों पर अतिरिक्त प्रकाश व्यवस्था करें।
  • इस बनावट को बैकबफ़र की ओर आकर्षित करें।

मेरे प्रश्न हैं:

  • क्या ऐसा करने का यह सही तरीका है?

  • क्या बनावट को प्रस्तुत किए बिना ऐसा करने का एक तरीका है (बिटमैप
    को बैकबफ़र जितना बड़ा रखते हुए )?

  • क्या यह मान लेना सुरक्षित है कि अधिकतम बनावट का आकार
    बैकबफ़र आकार से अधिक नहीं होगा ? (मेरा क्या मतलब है, अगर
    बैकबफ़र 2000x3000 है, तो क्या यह कहना सुरक्षित है कि मैं
    उस आकार की वीडियो मेमोरी में एक बनावट बना सकता हूं ?

धन्यवाद


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

जवाबों:


18

मुझे लगता है कि हर कोई इस समस्या का बहुत जटिल समाधान दे रहा है।

यहाँ छवि विवरण दर्ज करें

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

अगला, इन-गेम, जब हम कार्ड खींचना चाहते हैं, तो सबसे पहले मल्टीप्लेटिव (या अल्फा) मिश्रण के साथ धुंधली काली छवि को खींचते हैं, कुछ दिशा में ऑफसेट करते हैं, और फिर कार्ड को उसके ऊपर खींचते हैं। देखा।

आगे की प्रवंचना के लिए, आप प्रभाव (d) प्राप्त करने के लिए छाया और कार्ड रेंडर के बीच वैकल्पिक कर सकते हैं, या पहले सभी छाया खींच सकते हैं और फिर कार्ड, जैसे (e) (मैं (e) मामले में कार्ड को दिखाने के लिए कि वे दिखाते हैं 'फिर भी अलग हैं =)

अधिक सूक्ष्म, पारदर्शी छाया बनाने के लिए छाया के लिए शुद्ध काले (या पूर्ण अल्फा) का उपयोग नहीं करना भी सबसे अच्छा है।


2
खेल से बाहर छाया करने के लिए +1। आप इसे एक कदम आगे भी ले जा सकते हैं और जहां दृश्य में रोशनी है वहां छाया को रखा जा सकता है।
फ्रेंचीजेड

+1, अच्छा चित्रण। इसके अलावा, यदि आप E टेबल पर डार्क शैडो और स्टेंसिल के साथ कार्ड्स पर अर्ध-चमकदार रेंडर का उपयोग कर सकते हैं। यह अधिक जटिल होगा, लेकिन इसका प्रभाव और भी अच्छा होगा :)
क्रॉमस्टर

2

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

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


SSAO ओवरकिल है =) यह बताने में बहुत मुश्किल है कि छायांकन तकनीक का उपयोग कैसे किया जाता है बिना उदाहरण के एनिमेटेड। यदि कार्ड हमेशा उसी क्रम में आते हैं और एक-दूसरे के ऊपर फैलते हैं, तो केवल छाया को पूर्व-रेंडर करना सबसे आसान होगा, लेकिन आप कार्रवाई में खेल को देखते हुए डब्ल्यू / आउट कभी नहीं जान पाएंगे।
पैट्रिक ह्यूजेस

0

क्या आप छाया नक्शा नहीं कर सकते थे? एक दृश्य के लिए एक दृश्य प्रस्तुत करना। केवल गहराई मूल्यों को बचाएं और छाया में सामान्य गहराई मान की जांच करें कि क्या छाया का प्रतिपादन किया जाना चाहिए या नहीं।


मैं एक Z बफर का उपयोग नहीं कर रहा हूं, कोई 'गहराई' नहीं है।
jmasterx

0

निम्न प्रक्रिया को ऑफ़-स्क्रीन रेंडर लक्ष्य की आवश्यकता नहीं है। हालाँकि, ऐसा करने में, यह इस आवश्यकता को प्राप्त करता है कि तालिका पहले खींची जाए । या कम से कम, पिक्सल पर कुछ भी नहीं खींचा जाता है कि तालिका को खींचने से पहले तालिका को कवर किया जाएगा। इसके लिए यह भी आवश्यक है कि तालिका स्वयं एक, एकल, गैर-अतिव्यापी टुकड़ा: एक छवि हो।

इसके अलावा, आपके फ़्रेमबफ़र को एक अल्फा घटक की आवश्यकता होती है।

  1. एक कार्ड की एक greyscale छवि प्राप्त करें। किनारों के चारों ओर फजी बनाएं, संभवतः इसके आकार का विस्तार। यह आपकी छाया कार्ड छवि है। ध्यान दें कि यह एकल-चैनल छवि है। जब आप इस बनावट को अपनी छाया में एक्सेस करते हैं, तो आपको यह सुनिश्चित करना चाहिए कि आप अल्फा घटक में एकल मान डालें। यह आपके shader में या कहीं और किया जा सकता है।

    छवि में 0.0 के मान का अर्थ है कि कोई छाया नहीं है। छवि में 1.0 के मान का अर्थ है कुल छाया । यानी पूरी तरह से काली पिच। आप शायद 0.5 या अपने गहरे रंग के रूप में मान चाहते हैं।

  2. स्क्रीन को ऐसे साफ करें कि अल्फा शून्य पर सेट हो ।

  3. प्रतिपादन से पहले कुछ भी (या कम से कम कुछ भी है कि "के तहत" तालिका रेंडर किया जाएगा पर), प्रत्येक कार्ड के लिए, फजी बनावट, कार्ड (लेकिन एक ही उन्मुखीकरण के साथ) की वास्तविक स्थिति से ऑफसेट प्रस्तुत करना। शेडर द्वारा रंग आउटपुट होना चाहिए, इसके लिए मिश्रण विन्यास होना चाहिए (ओपनजीएल पार्लेंस में)

    glBlendEquation(GL_MAX);

    इस मिश्रण मोड का उपयोग बढ़ते हुए गहरे या हल्के से छाया को ओवरलैप करने के लिए किया जाता है। यह बस उस पिक्सेल के लिए लिखे गए सबसे गहरे मान को लेता है। यह काफी अच्छा दिखना चाहिए।

    आपको कलर राइट को बंद करने के लिए कलर राइट मास्क का भी इस्तेमाल करना चाहिए।

  4. टेबल रेंडर करें। ऐसा करते समय सम्मिश्रण इस प्रकार स्थापित किया जाना चाहिए:

    glBlendEquation(GL_ADD);
    glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_ZERO);

यदि प्रतिबंध आपके लिए बहुत अधिक प्रतिबंधात्मक हैं, तो आपको रेंडर लक्ष्य का उपयोग करना होगा। यह अग्रानुसार होगा:

  1. पहले की तरह छाया कार्ड छवि बनाएं।

  2. सबसे पहले, छाया को प्रस्तुत करें। छाया फ़्रेमबफ़र को बांधें (जो केवल एकल-चैनल छवि होने की आवश्यकता है, यदि आपका हार्डवेयर उनमें से किसी एक को प्रस्तुत कर सकता है)। इसके मूल्य को शून्य पर साफ़ करें।

  3. प्रत्येक कार्ड के लिए, छाया कार्ड छवि को प्रस्तुत करें, पहले की तरह ऑफसेट करें। आपके शेडर को आउटपुट रंग के सभी चार घटकों के लिए समान मूल्य लिखना चाहिए। ब्लेंड मोड फिर से होना चाहिए glBlendEquation(GL_MAX)

  4. नियमित फ़्रेमबफ़र पर वापस जाएं। वह सब कुछ ड्रा करें जिसे आप छाया देना चाहते हैं।

  5. अब छाया चित्र के साथ एक पूर्ण-स्क्रीन क्वाड ड्रा करें जो हमने प्रस्तुत किया है। शेडर को आउटपुट के अल्फा में छाया छवि से प्राप्त टेक्सल को स्टोर करना चाहिए; RGB अप्रासंगिक है। मिश्रण मोड होना चाहिए:

    glBlendEquation(GL_ADD);
    glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_ALPHA);

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

@NathanReed: मुझे लगा कि वह जानता है कि चीजों को कैसे बंद करना है। इसके अलावा, "अंतर-कार्ड छाया" का कोई मतलब नहीं है, जैसा कि मैंने सवाल के तहत अपनी टिप्पणी में बताया है।
निकोल बोलस

1
यह वास्तव में प्रतिनिधित्व नहीं कर सकता है कि आप वास्तव में कार्ड कैसे पकड़ेंगे, लेकिन यह अच्छा लग रहा है! यह वास्तव में "मतलब" नहीं है कार्ड के लिए तालिका के ऊपर तैरने के लिए जैसा कि वे पहले शॉट में करते हैं, या तो ...
नाथन रीड

0

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

कॉल होंगे:

glEnable (GL_STENCIL_TEST);
glStencilFunc (GL_EQUAL, 1, 2);
glStencilOp (GL_KEEP, GL_KEEP, GL_INCR);

// draw shadow textures

glDisable (GL_STENCIL_TEST);

केवल इस बार परेशानी हो सकती है यदि आपके पास दो धुंधले किनारे हैं जो थोड़ा ओवरलैप करते हैं; अन्यथा यह मूल OpenGL 1.1 की पेशकश से परे फैंसी कुछ भी नहीं चाहिए और सभी हार्डवेयर पर काम करेगा (उम्मीद है कि पुराने 3DFX कार्ड, जो मुझे लगता है कि आप वास्तव में समर्थन के बारे में चिंतित नहीं हैं ...)

एक दूसरा विकल्प, जो गैर-प्रदर्शन-महत्वपूर्ण गेम में बहुत अच्छा काम करना चाहिए, glCopyTexSubImage2D है। यह बैकबफ़र की तुलना में छोटे बनावट के साथ भी काम करेगा और यह सभी हार्डवेयर पर भी अच्छी तरह से समर्थित है (यह OpenGL 1.1 का हिस्सा है और Doom 3 ने इसका उपयोग किया है, इसलिए आप समर्थन के बहुत अच्छे होने की उम्मीद कर सकते हैं)।

मूल सेटअप इस तरह होगा:

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.