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

पिछले कुछ वर्षों में, यह शैली तेजी से लोकप्रिय हो गई है और GoNNER और बाबा यू है जैसे खेलों में सक्रिय रूप से उपयोग की जाती है ।


यह ट्यूटोरियल आपके द्वारा उपयोग की जाने वाली गणित की shader कोडिंग की मूल बातें से लेकर आपकी जरूरत की सभी चीजों को कवर करता है। लेख के अंत में पूर्ण एकता पैकेज डाउनलोड करने के लिए एक लिंक है।

डूडल स्टूडियो 95 की सफलता ने मुझे इस ट्यूटोरियल को बनाने के लिए प्रेरित किया ! ।

परिचय

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


1000 लाइक और 4000 रीट्वीट के बाद, यह स्पष्ट हो गया कि सरल ट्यूटोरियल के लिए एक मजबूत मांग है, जो कि उन लोगों द्वारा भी अध्ययन किया जा सकता है जिनके पास शेड बनाने का लगभग कोई ज्ञान नहीं है।

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

कामचोर प्रभाव एनाटॉमी

डूडल प्रभाव को फिर से बनाने के लिए, हमें सबसे पहले यह समझने की जरूरत है कि यह कैसे काम करता है और इसमें किन तकनीकों का उपयोग किया जाता है।

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

स्प्राइट का छिड़काव करें। एकता कई तरह के शेड्स के साथ आती है। यदि आप प्रदान की गई एकता 2D उपकरण का उपयोग करते हैं, तो सबसे अधिक संभावना है कि आप स्प्राइट्स के साथ काम कर रहे हैं। यदि ऐसा है, तो आपको स्प्राइट शेडर की आवश्यकता है - स्प्राइट SpriteRenderer यूनिटी के साथ संगत एक विशेष प्रकार का शेड। या आप अधिक पारंपरिक अनलिमिटेड शेडर से शुरू कर सकते हैं।

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

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

चरण 1: स्प्राइट शेडर को पूरा करना

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

यदि आप चाहते हैं कि डूडल शेडर स्प्राइट SpriteRenderer यूनिटी के साथ पूरी तरह से संगत हो, तो हमें मौजूदा SpriteRenderer को पूरक करने की आवश्यकता है। दुर्भाग्य से, हम इसे सीधे एकता से ही एक्सेस नहीं कर सकते।

आप यूनिटी डाउनलोड संग्रह पृष्ठ पर जाकर यूनिटी के संस्करण के लिए बिल्ड इन शेडर्स पैकेज डाउनलोड करके प्राप्त कर सकते हैं, जिसके साथ आप काम कर रहे हैं। यह एक ज़िप फ़ाइल है जिसमें आपके एकता बिल्ड के साथ आने वाले सभी शेड्स के स्रोत कोड होते हैं।


डाउनलोड करने के बाद, इसे अनज़िप करें और अंतर्निहितin builtin_shaders-2018.1.6f1\DefaultResourcesExtra Sprites-Diffuse.shader में Sprites-Diffuse.shader फ़ाइल builtin_shaders-2018.1.6f1\DefaultResourcesExtra । यह वह फाइल है जिसे हम ट्यूटोरियल में उपयोग करेंगे।

चरण 2: ऑफसेट कोने

Sprites-Diffuse.shader अंदर एक फ़ंक्शन है जिसे vert कहा जाता है, जो कि शीर्ष फ़ंक्शन है जो हमने ऊपर के बारे में बात की थी। इसका नाम महत्वपूर्ण नहीं है, मुख्य बात यह है कि यह #pragma के vertex: खंड में निर्दिष्ट के साथ मेल खाता है:

 #pragma surface surf Lambert vertex:vert nofog nolightmap nodynlightmap keepalpha noinstancing 

संक्षेप में, 3 डी मॉडल के प्रत्येक शीर्ष के लिए वर्टेक्स फ़ंक्शन को कहा जाता है और यह निर्णय लेता है कि इसे दो-आयामी आयाम वाले स्थान पर सुपरइम्पोज़ कैसे किया जाए। इस ट्यूटोरियल में, हम केवल इस बात में रुचि रखते हैं कि किसी ऑब्जेक्ट को कैसे स्थानांतरित किया जाए।

appdata_full v पैरामीटर में vertex फ़ील्ड होती है, जिसमें ऑब्जेक्ट स्थान में प्रत्येक शीर्ष की 3 डी स्थिति होती है । जब मान बदलता है, तो शीर्ष शिफ्ट हो जाता है। यही है, उदाहरण के लिए, नीचे दिखाया गया कोड एक्स शेड के साथ ऑब्जेक्ट को उसके shader एक इकाई के साथ स्थानांतरित कर देगा।

 void vert (inout appdata_full v, out Input o) { v.vertex = UnityFlipSprite(v.vertex, _Flip); v.vertex.x += 1; #if defined(PIXELSNAP_ON) v.vertex = UnityPixelSnap (v.vertex); #endif UNITY_INITIALIZE_OUTPUT(Input, o); o.color = v.color * _Color * _RendererColor; } 

डिफ़ॉल्ट रूप से, एकता में बनाए गए 2 डी गेम केवल एक्स और वाई अक्षों के साथ संचालित होते हैं, इसलिए हमें दो-आयामी विमान पर स्प्राइट को स्थानांतरित करने के लिए v.vertex.xy को बदलने की आवश्यकता है।

यादृच्छिक ऑफसेट

डूडल प्रभाव बेतरतीब ढंग से प्रत्येक शीर्ष की स्थिति को बदलता है। एक shader में यादृच्छिक संख्याओं का नमूना लेना हमेशा एक मुश्किल काम रहा है। यह मुख्य रूप से वितरित GPU वास्तुकला के कारण होता है, जो कि अधिकांश पुस्तकालयों ( Mathf.Random सहित) में उपयोग किए गए एल्गोरिदम के मनोरंजन की दक्षता को जटिल और कम करता है।

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

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

हम प्रत्येक शीर्ष की एक यादृच्छिक ऑफसेट उत्पन्न करने के लिए random3 का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण में, यादृच्छिक संख्या को _NoiseScale संपत्ति का उपयोग करके स्केल किया _NoiseScale है, जो आपको विस्थापन बल को नियंत्रित करने की अनुमति देता है।

 void vert (inout appdata_full v, out Input o) { ... float2 noise = random3(v.vertex.xyz).xy * _NoiseScale; v.vertex.xy += noise; ... } 

अब हमें random3 कोड random3 लिखना random3 ।

शेडर में बेतरतीबी

शेड्स में उपयोग किए जाने वाले सबसे आम और प्रतिष्ठित छद्म आयामी कार्यों में से एक डब्ल्यू लेख द्वारा 1998 के लेख से लिया गया है, शीर्षक के तहत " यादृच्छिक संख्या उत्पन्न करने में, y = [(a + x) पाप (bx)] mod 1 " की मदद से।

 float rand(float2 co) { return fract(sin(dot(co.xy ,float2(12.9898,78.233))) * 43758.5453); } 

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

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

चरण 3: समय जोड़ें

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

हमारे मामले में, मैंने वर्तमान समय को सेकंड में जोड़ा है _Time.y को शीर्ष स्थिति में।

 float time = float3(_Time.y, 0, 0); float2 noise = random3(v.vertex.xyz + time).xy * _NoiseScale; v.vertex.xy += noise; 

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

समय बदल रहा है

_Time.y को जोड़ने के साथ मुख्य समस्या यह है कि यह स्प्राइट को हर फ्रेम में एनिमेटेड _Time.y है। यह हमारे लिए अवांछनीय है, क्योंकि अधिकांश हाथ से खींचे गए एनिमेशन में फ्रेम दर कम होती है। समय घटक निरंतर नहीं होना चाहिए, लेकिन असतत होना चाहिए। इसका मतलब है कि अगर हम प्रति सेकंड पांच फ्रेम प्रदर्शित करना चाहते हैं, तो इसे प्रति सेकंड केवल पांच बार बदलना चाहिए। यही है, समय को एक सेकंड के पांचवें में बांधा जाना चाहिए। केवल मान्य मान होना चाहिए $$$\ frac {0} {5} = 0$। $$$\ frac {1} {5} = 0.2$। $$$\ frac {2} {5} = 0.4$। $$$\ frac {3} {5} = 0.6$। $$$\ frac {4} {5} = 0.8$। $$$\ frac {5} {5} = 1$के साथ, और इतने पर ...

मैंने अपने ब्लॉग में पहले से ही How to Snap To Grid में स्नैप कवर किया है। इस लेख में, मैंने एक स्थानिक ग्रिड पर किसी वस्तु की स्थिति को बांधने की समस्या का समाधान प्रस्तावित किया। यदि हमें समय ग्रिड से समय बांधने की आवश्यकता है, तो गणित, और इसलिए कोड समान होगा।

नीचे दिखाया गया फ़ंक्शन संख्या x लेता है और इसे पूर्णांक मानों से बांधता है जो snap गुणक हैं।

 inline float snap (float x, float snap) { return snap * round(x / snap); } 

अर्थात्, हमारा कोड इस प्रकार है:

 float time = snap(_Time.y, _NoiseSnap); float2 noise = random3(v.vertex.xyz + float3(time, 0.0, 0.0) ).xy * _NoiseScale; v.vertex.xy += noise; 

निष्कर्ष

इस आशय का यूनिटी पैकेज पैट्रन पर मुफ्त में डाउनलोड किया जा सकता है।

अतिरिक्त संसाधन

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