मैंने एकता में 2 डी छाया कैसे किया

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

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

परिणाम आपके सामने है:



और इसकी उपलब्धि के मार्ग का विवरण कट के नीचे आपकी प्रतीक्षा कर रहा है।

समस्या का बयान

इसलिए, खेल में छाया जोड़ने के निर्णय के समय, मेरे पास था:

• दो स्प्राइट के रूप में स्थान, एक भीड़ और अन्य संस्थाओं के पीछे प्रदर्शित करने के लिए, दूसरा उनके सामने प्रदर्शित करने के लिए;

• मॉब और स्थिर विनाशकारी वस्तुएं, लगातार एनिमेटेड और कुछ से कुछ दर्जन तक अलग-अलग स्प्राइट्स से मिलकर;

• गोले, खुद और दुश्मन, ज्यादातर मामलों में या तो एक स्प्राइट या कणों की एक प्रणाली द्वारा दर्शाया गया था, बाद के मामले में किसी भी छाया की आवश्यकता नहीं थी;

• एक टैंक जिसमें एक ही योजना के अनुसार कई भागों को इकट्ठा किया जाता है;

• कई निश्चित राज्यों के साथ दीवारें, जो फिर से, अलग-अलग स्प्राइट का एक सेट हैं।

इस सब के लिए, सबसे सरल छाया की आवश्यकता थी, वस्तु के आकृति को दोहराते हुए, और एक निश्चित प्रकाश स्रोत से डाली जाती है।

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

कार्यान्वयन

दरअसल, मुख्य कैच यह निकला कि बौना, मोटे तौर पर 2.5 डी खेल है। एक्स और वाई अक्षों के साथ दो-आयामी अंतरिक्ष में विशाल बहुमत मौजूद है, और जेड अक्ष का उपयोग बहुत कम किया जाता है। दृष्टिगत रूप से, और आंशिक रूप से गेमप्ले में, वाई अक्ष का उपयोग ऊँचाई और गहराई दोनों को प्रदर्शित करने के लिए किया जाता है, उसी तरह से वर्चुअल वाई और जेड एक्सिस में विभाजित किया जाता है। छाया बनाने के लिए ऐसी स्थिति में मानक एकता उपकरण का उपयोग करना संभव नहीं था।

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

इस तरह के तुल्यकालिक एनीमेशन कुछ इस तरह से देखा गया:



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

नीचे दिए गए स्क्रीनशॉट से पता चलता है कि कई पारभासी खंडों की छाया कैसी दिखती है। उपयोग किए जाने वाले छाया विरूपण पैरामीटर भी दिखाई देते हैं: X अक्ष बाय -50 डिग्री के साथ रोटेशन, वाई अक्ष के साथ -140 डिग्री और रोटेशन एक्स के साथ पैमाने पर, मूल वस्तु के सापेक्ष 1.3 गुना बढ़ गया।



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

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

नीचे आप इस कैमरे के आउटपुट का एक उदाहरण देख सकते हैं:



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

निम्न स्क्रीनशॉट इस तरह के उल्लंघन का एक उदाहरण दिखाता है। भीड़ की एड़ी को सतह के संपर्क के बिंदु के रूप में लिया जाता है, लेकिन पैरों की छाया पहले से ही पैरों से परे होती है।



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

लेकिन फिर एक नई मुसीबत ने मेरा इंतजार किया। छाया और दर्जनों नई वस्तुओं के साथ, मंच पर एक साथ गेमऑब्जेक्ट की अधिकतम संख्या, और उनके साथ एनिमेटर और स्प्राइटरेंडर घटक, दोगुने से अधिक। जब मैंने मॉब की पूरी तरंग को लोकेशन पर जारी किया, जो लगभग 150 टुकड़ों की थी, तो प्रॉइलर ने मुझे लगभग 40ms दिखाए, जो केवल रेंडरिंग और एनीमेशन के लिए गए, और फ्रेम रेट लगभग 10 के पूरे विविध रूप में। मैंने अपनी खुद की स्क्रिप्ट्स को पूरी तरह से अनुकूलित किया, हर मिलीसेकंड के लिए लड़ते हुए, लेकिन यह पर्याप्त नहीं था।

अतिरिक्त अनुकूलन उपकरणों की तलाश में, मैं डायनेमिक बैचिंग के लिए विशाल प्रलेखन और मार्गदर्शिकाएँ ले आया।


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

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

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

यह कैच था। वास्तव में इस व्यवहार का कारण इंटरनेट के लिए अज्ञात है, लेकिन रेंडरटेक्स्चर में कैमरा छवियों को प्रस्तुत करते समय, SortingGroup अब बैचिंग को नहीं तोड़ता है। निर्णय बहुत ही अजीब, अतार्किक और सामान्य रूप से सबसे अधिक बैसाखी लग रहा था। लेकिन छाया के प्रतिपादन के रूप में एक ही विधि का उपयोग करके संस्थाओं के प्रतिपादन को लागू करने और इस प्रकार प्राप्त करने के बाद, छाया परत, एक इकाई परत के अलावा, मैंने पहले से ही काफी स्वीकार्य प्रदर्शन मान हासिल किए हैं।

नीचे स्क्रीनशॉट एक इकाई परत प्रदान करने का एक उदाहरण दिखाता है।



तो सामान्य तौर पर, Y समन्वय में एक निश्चित इकाई प्रदान करना इस तरह दिखता है:

1. इकाई को वाई - 20 पर रखा गया है;
2. संस्थाओं के लिए एक RenderTexture में इस समन्वय को देखते हुए एक कैमरे द्वारा एक इकाई प्रदान की जाती है;
3. इकाई छाया को Y + 20 पर रखा गया है;
4. एक इकाई की एक छाया को छाया के लिए एक रेंडरटेक्स्चर में इस समन्वय को देखने वाले कैमरे द्वारा खींचा जाता है;
5. मुख्य कैमरा स्क्रीन पर मुख्य स्थान स्प्राइट खींचता है - एकमात्र तत्व जो वर्तमान में सीधे स्क्रीन पर प्रदान किया जा रहा है;
6. मुख्य कैमरा सामग्री के रूप में RenderTexture छाया के साथ स्क्रीन पर एक विमान खींचता है;
7. मुख्य कैमरा सामग्री के रूप में संस्थाओं के एक RenderTexture के साथ स्क्रीन पर एक विमान खींचता है।

इस तरह के एक परत केक।

नीचे दिए गए स्क्रीनशॉट में, संपादक का कैमरा एक-दूसरे के सापेक्ष परतों के स्थान को प्रदर्शित करने के लिए तीन-आयामी मोड पर सेट है।

बारीकियों

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

निम्नलिखित स्क्रीनशॉट गोले और उनकी छाया के रोटेशन का एक उदाहरण दिखाता है।



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

नीचे दिया गया जीआईएफ किसी वस्तु को ऊंचाई पर ले जाने का एक उदाहरण दिखाता है।



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

हाथ से तैयार छाया के सही निर्माण के लिए, मुझे एक मौजूदा छाया के स्क्रीनशॉट के आधार पर लाइनों के डिजाइन को इकट्ठा करना था, जिसे नीचे स्क्रीनशॉट में देखा जा सकता है।



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

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

नीचे दिया गया स्क्रीनशॉट टैंक, इसकी छाया विधानसभा को दर्शाता है और यह अलग-अलग हिस्सों के रूप में भी है।



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

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

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

निष्कर्ष

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