कब्रिस्तान कीपर के हुड के तहत: ग्राफिक प्रभाव कैसे लागू किया जाता है

सभी को नमस्कार! पूरे 4 साल तक मैंने हैबर में नहीं लिखा। पोस्ट की मेरी अंतिम श्रृंखला विभिन्न टूल और ट्रिक्स के बारे में थी जो हमने अपने आखिरी गेम (एकता पर विकसित करते हुए) पर उपयोग की थी। तब से, हमने सफलतापूर्वक गेम जारी किया, और एक नया रिलीज़ भी किया। तो अब आप थोड़ा सांस ले सकते हैं और कुछ नए लेख लिख सकते हैं जो किसी के लिए उपयोगी हो सकते हैं।


आज मैं उन ग्राफिक ट्रिक्स और ट्रिक्स के बारे में बात करना चाहता हूं, जिनका उपयोग हम चित्र बनाने के लिए करते थे जो आप ऊपर GIF में देखते हैं।

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

शुरुआत करने के लिए, मैं संक्षेप में बताऊंगा कि चित्र हमारे खेल में क्या होने वाला है:

1. परिवर्तनीय परिवेश प्रकाश - दिन के समय के आधार पर रोशनी में एक सामान्य परिवर्तन।
2. LUT- रंग सुधार - दिन के समय (या क्षेत्र के प्रकार) के आधार पर तस्वीर के स्वर को बदलने के लिए जिम्मेदार है।
3. गतिशील प्रकाश स्रोत - मशाल, स्टोव, लैंप।
4. सामान्य मानचित्र - वस्तुओं को वॉल्यूम देने के लिए जिम्मेदार, विशेष रूप से प्रकाश स्रोतों को स्थानांतरित करते समय।
5. 3 डी प्रकाश वितरण का गणित - यह सुनिश्चित करने के लिए ज़िम्मेदार है कि स्क्रीन के केंद्र में प्रकाश स्रोत किसी ऐसी वस्तु को सही ढंग से प्रकाशित करता है जो अधिक है, लेकिन एक ऐसी वस्तु को रोशन नहीं करता है जो कम है (यानी बिना साइड वाले कैमरे की ओर मुड़ता है)।
6. छाया - प्रकाश स्रोतों की स्थिति को स्प्राइट, घुमाव और प्रतिक्रिया द्वारा बनाया गया।
7. वस्तुओं की ऊंचाई का अनुकरण - कोहरे के सही प्रदर्शन के लिए।
8. अन्य सज्जाकार: बारिश, हवा, एनिमेशन (पत्ते और घास के छायादार एनीमेशन सहित), आदि।

अब और विस्तार से।

परिवर्तनीय परिवेश प्रकाश

यहाँ, सिद्धांत रूप में, कुछ खास नहीं। रात में - गहरा, दिन के दौरान - हल्का। प्रकाश का रंग समय-ढाल द्वारा निर्धारित होता है। रात तक, प्रकाश स्रोत न केवल गहरा हो जाता है, बल्कि एक नीले रंग का टिंट प्राप्त करता है।

यह इस तरह दिखता है:

LUT रंग सुधार

LUT (लुक-अप टेबल) - रंग स्वैप टेबल। मोटे तौर पर, यह एक त्रि-आयामी आरजीबी सरणी है जहां प्रत्येक नोड पर एक रंग मूल्य होता है, जिसे संबंधित द्वारा प्रतिस्थापित किया जाना चाहिए। यही है, यदि निर्देशांक (1, 1, 1) पर एक लाल बिंदु स्थित है, तो इसका मतलब है कि तस्वीर में सभी सफेद रंग को लाल रंग से बदल दिया जाएगा। यदि निर्देशांक (1, 1, 1) सफेद हैं (आर = 1, जी = 1, बी = 1), तो कोई बदलाव नहीं है। तदनुसार, परिवर्तनों के बिना LUT के पास इन समान निर्देशांक के अनुरूप प्रत्येक समन्वय के लिए एक रंग है। यानी बिंदु पर (0.4, 0.5, 0.8) रंग है (आर = 0.4, जी = 0.5, बी = 0.8)।

खैर, यह ध्यान देने योग्य है कि सुविधा के लिए वे दो-आयामी के रूप में एक 3 डी बनावट पेश करते हैं। उदाहरण के लिए, यह वह है जो "डिफ़ॉल्ट" LUT दिखता है (रंग रेंडरिंग बदले बिना):



इसे प्रारंभिक रूप से लागू किया जाता है, यह जल्दी और आसानी से काम करता है।

इसे स्थापित करना बहुत आसान है - आप कलाकार को खेल से कोई भी चित्र देते हैं और कहते हैं "रंग टोन ताकि यह शाम की तरह महसूस हो।" उसके बाद, रंग सुधार की सभी परतों को डिफ़ॉल्ट LUT पर लागू करें और शाम LUT प्राप्त करें।

हमारे मामले में, कलाकार थोड़ा अटक गया और दिन के अलग-अलग समय (रात, गोधूलि, शाम, आदि) के लिए 10 अलग-अलग एलयूटी बनाए। यह उनका सेटअप कैसा दिखता है:


परिणामस्वरूप, दिन के समय के आधार पर, एक ही स्थान भिन्न दिखता है:



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

गतिशील प्रकाश स्रोत और सामान्य नक्शे

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


इस तरह के मानदंड काफी सरल रूप से तैयार किए गए हैं। कलाकार लगभग 4 तरफ से ब्रश से प्रकाश को पेंट करता है:


और फिर यह स्क्रिप्ट सामान्य नक्शे पर जा रही है:


यदि आप ऐसा करने वाले शेडर (और सॉफ़्टवेयर) की तलाश कर रहे हैं, तो आप स्प्राइट लैंप की दिशा में देख सकते हैं।

3 डी लाइट सिमुलेशन

यह थोड़ा और जटिल है। आप केवल स्प्राइट उठा सकते हैं और उसे हाइलाइट कर सकते हैं। हमें यह विचार करने की आवश्यकता है कि क्या स्प्राइट प्रकाश स्रोत या "सामने" है।

इस तस्वीर पर ध्यान दें:


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

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

छाया

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

कुल में, प्रत्येक वस्तु में अधिकतम 4 छायाएं हो सकती हैं। एक सूर्य से है, और तीन गतिशील प्रकाश स्रोतों से हैं। नीचे दी गई तस्वीर सिद्धांत दिखाती है:



कार्य "अगले 3 प्रकाश स्रोतों को खोजने और छाया की दूरी / कोण की गणना करने के लिए" एक स्क्रिप्ट द्वारा हल किया जाता है जो अपडेट में घूमता है। हां, यह बहुत तेजी से काम नहीं करता है, क्योंकि आपको बहुत गणित करना है। अगर मैंने अभी लिखा है, तो मैं एकता में समानांतर नौकरियों के नए नए सिस्टम का उपयोग करूंगा। लेकिन तब यह अभी तक नहीं था, इसलिए मैंने साधारण स्क्रिप्ट को यथासंभव अनुकूलित किया।

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

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

दूसरा नुकसान यह है कि किसी वस्तु के लिए एक छाया बनाना कभी-कभी मुश्किल होता है जिसका पृथ्वी के साथ संपर्क स्थान बहुत लम्बा होता है। उदाहरण के लिए, बाड़ से छाया को देखें:


परिपूर्ण नहीं है। यदि आप बाड़ के स्प्राइट को पारभासी बनाते हैं तो यह ऐसा दिखता है:


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

कोहरा और ऊंचाई सिमुलेशन

खेल में कोहरा है। यह इस तरह दिखता है (ऊपर सामान्य संस्करण है, नीचे प्रभाव दिखाने के लिए 100% कोहरा है)।



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

हवा

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

हमने शेडर का उपयोग करके विकृति विकल्प को चुना। यह इस तरह दिखता है:


यदि आप इस shader को एक चेक्ड टेक्सचर पर लागू करते हैं, तो यह स्पष्ट हो जाता है कि क्या होता है:


यह भी ध्यान देने योग्य है कि हम पूरे ताज को नहीं देख रहे हैं, लेकिन केवल व्यक्तिगत पत्ते हैं:


हम हवा में भी गेहूं हिलाते हैं, लेकिन सब कुछ सरल है - शीर्ष shader एक्स-निर्देशांक को विकृत करता है, वाई-घटक को ध्यान में रखता है। बिंदु जितना ऊंचा होगा, स्टैगर उतना ही मजबूत होगा। ऐसा किया जाता है ताकि केवल शीर्ष डगमगाता है, लेकिन जड़ नहीं करता है। प्लस - एक्स / वाई से वॉबलबल चरण बदलता है ताकि स्क्रीन पर अलग-अलग स्प्राइट्स बेतरतीब ढंग से छिड़के।


जब एक खिलाड़ी उनके पास से गुजरता है तो गेहूं और घास को हिलाने के प्रभाव को पैदा करने के लिए भी उसी शेड का उपयोग किया जाता है।


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

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

PPS: मैं यह कहने का अवसर लेता हूं कि अब हम टीम (प्रोग्रामर, पीएम, केएम, कलाकार) में कई सक्षम लोगों को ढूंढना चाहते हैं। विवरण स्टूडियो की वेबसाइट पर हैं। मुझे उम्मीद है कि इस वाक्यांश ने नियमों का उल्लंघन नहीं किया है।