एकता: एक ड्रॉकल में कई स्वास्थ्य बार खींचे

हाल ही में, मुझे एक समस्या को हल करने की आवश्यकता थी जो कई शीर्ष-दृश्य खेलों में काफी आम है: स्क्रीन पर दुश्मन के स्वास्थ्य सलाखों के पूरे झुंड को प्रस्तुत करना। कुछ इस तरह:


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

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

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

कैनवस का उपयोग क्यों नहीं?

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

हालांकि, मुझे इस दृष्टिकोण से संबंधित प्रत्येक फ्रेम में किए गए कार्य की मात्रा पसंद नहीं है। यदि आप कैनवास का उपयोग करते हैं, तो प्रत्येक फ्रेम में आपको निम्नलिखित ऑपरेशन करने होंगे:

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

वैसे भी, यह सब कैनवस ज्योमेट्री बफ़र्स को दूषित करेगा और प्रोसेसर में सभी वर्टेक्स डेटा के पुनर्निर्माण का नेतृत्व करेगा। मैं नहीं चाहता था कि यह सब ऐसे सरल तत्व के लिए किया जाए।

मेरे फैसले के बारे में संक्षेप में

मेरी कार्य प्रक्रिया का संक्षिप्त विवरण:

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

अब आइए समाधान को अधिक विस्तार से देखें।

क्या वृत्ति है?

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

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

अधिकांश आधुनिक एपीआई में इसके लिए पहले से ही कोड है, इसलिए आपको मैन्युअल रूप से ऐसा करने की आवश्यकता नहीं है। इस ऑपरेशन को "इंस्टेंसिंग" कहा जाता है; वास्तव में, यह पूर्वनिर्धारित प्रतिबंधों के साथ ऊपर वर्णित प्रक्रिया को स्वचालित करता है।

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

कक्षा खराब होने योग्य

हमारे दुश्मनों के पास Damageable नामक एक घटक होगा, जिससे उन्हें स्वास्थ्य Damageable और उन्हें टक्करों से नुकसान उठाने की अनुमति मिलेगी। हमारे उदाहरण में, यह काफी सरल है:

 public class Damageable : MonoBehaviour { public int MaxHealth; public float DamageForceThreshold = 1f; public float DamageForceScale = 5f; public int CurrentHealth { get; private set; } private void Start() { CurrentHealth = MaxHealth; } private void OnCollisionEnter(Collision other) { // Collision would usually be on another component, putting it all here for simplicity float force = other.relativeVelocity.magnitude; if (force > DamageForceThreshold) { CurrentHealth -= (int)((force - DamageForceThreshold) * DamageForceScale); CurrentHealth = Mathf.Max(0, CurrentHealth); } } } 

HealthBar वस्तु: स्थिति / बारी

स्वास्थ्य पट्टी वस्तु बहुत सरल है: वास्तव में, यह दुश्मन से जुड़ी सिर्फ एक क्वाड है।



हम पट्टी को लंबा और पतला बनाने के लिए इस वस्तु के पैमाने का उपयोग करते हैं, और इसे सीधे दुश्मन के ऊपर रखते हैं। इसके रोटेशन के बारे में चिंता न करें, हम HealthBar.cs में ऑब्जेक्ट से जुड़े कोड का उपयोग करके इसे ठीक कर HealthBar.cs :

  private void AlignCamera() { if (mainCamera != null) { var camXform = mainCamera.transform; var forward = transform.position - camXform.position; forward.Normalize(); var up = Vector3.Cross(forward, camXform.right); transform.rotation = Quaternion.LookRotation(forward, up); } } 

यह कोड हमेशा कैमरे की ओर क्वाड को निर्देशित करता है। हम आकार में फेरबदल और रोटेशन कर सकते हैं, लेकिन मैं उन्हें दो कारणों से यहां लागू करता हूं।

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

हम बताएंगे कि हम छाया को देखने के बाद पट्टी कैसे प्रस्तुत करते हैं।

Shader HealthBar

इस संस्करण में, हम एक साधारण क्लासिक लाल-हरी पट्टी बनाएंगे।

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

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

सबसे पहले, हम उन संपत्तियों की घोषणा करेंगे जिनकी हमें आवश्यकता है:

 Shader "UI/HealthBar" { Properties { _MainTex ("Texture", 2D) = "white" {} _Fill ("Fill", float) = 0 } 

_MainTex एक लाल-हरे रंग की बनावट है, और _Fill 0 से 1 तक का मूल्य है, जहाँ 1 पूर्ण स्वास्थ्य है।

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

  SubShader { Tags { "Queue"="Overlay" } Pass { ZTest Off 

अगला भाग स्वयं shader कोड है। हम प्रकाश व्यवस्था के बिना एक शेडर लिख रहे हैं (अनलिमिटेड), इसलिए हमें विभिन्न एकता सतह शेड्स के साथ एकीकरण के बारे में चिंता करने की ज़रूरत नहीं है, यह सिर्फ शीर्ष / खंड शेड के एक जोड़े है। सबसे पहले, बूटस्ट्रैप लिखें:

  CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile_instancing #include "UnityCG.cginc" 

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

शीर्ष संरचना में उदाहरण डेटा शामिल होना चाहिए, इसलिए हम निम्नलिखित कार्य करेंगे:

  struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID }; 

हमें यह भी निर्दिष्ट करने की आवश्यकता है कि हमारे लिए एकता (परिवर्तन) प्रक्रियाओं के अलावा, उदाहरणों के डेटा में वास्तव में क्या होगा:

  UNITY_INSTANCING_BUFFER_START(Props) UNITY_DEFINE_INSTANCED_PROP(float, _Fill) UNITY_INSTANCING_BUFFER_END(Props) 

इसलिए हम यह बता रहे हैं कि एकता को प्रत्येक उदाहरण के लिए डेटा को संग्रहीत करने के लिए "प्रॉप्स" नामक एक बफर बनाना होगा, और इसके अंदर हम प्रत्येक फ़्लोट को _Fill नामक एक संपत्ति के लिए उपयोग करेंगे।

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

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

इसके अलावा, आपको _Fill प्रॉपर्टी के अनुसार संक्रमण बिंदु के स्थान को लाल से हरे रंग में बदलने के लिए UV को बदलना होगा। यहाँ प्रासंगिक कोड स्निपेट है:

  UNITY_SETUP_INSTANCE_ID(v); float fill = UNITY_ACCESS_INSTANCED_PROP(Props, _Fill); // generate UVs from fill level (assumed texture is clamped) o.uv = v.uv; o.uv.x += 0.5 - fill; 

UNITY_SETUP_INSTANCE_ID और UNITY_ACCESS_INSTANCED_PROP इस उदाहरण के लिए निरंतर बफर से _Fill संपत्ति के वांछित संस्करण तक UNITY_ACCESS_INSTANCED_PROP सभी जादू करते हैं।

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

टुकड़ा shader सरल नहीं हो सकता है क्योंकि सभी काम पहले ही हो चुके हैं:

  return tex2D(_MainTex, i.uv); 

पूर्ण टिप्पणी shader कोड GitHub रिपॉजिटरी में उपलब्ध है ।

स्वास्थ्य सामग्री

फिर सब कुछ सरल है - हमें बस अपनी पट्टी को उस सामग्री को सौंपने की ज़रूरत है जिसे यह शेडर उपयोग करता है। लगभग कुछ भी नहीं किया जाना चाहिए, बस ऊपरी हिस्से में वांछित shader का चयन करें, एक लाल-हरे रंग की बनावट असाइन करें, और, सबसे महत्वपूर्ण बात, "GPU इंस्टेंस सक्षम करें" बॉक्स की जांच करें ।

HealthBar भरें संपत्ति अद्यतन

इसलिए, हमारे पास स्वास्थ्य बार ऑब्जेक्ट, शेडर और प्रदान की जाने वाली सामग्री है, अब हमें प्रत्येक उदाहरण के लिए _Fill प्रॉपर्टी सेट करने की आवश्यकता है। हम HealthBar.cs अंदर यह करते हैं:

  private void UpdateParams() { meshRenderer.GetPropertyBlock(matBlock); matBlock.SetFloat("_Fill", damageable.CurrentHealth / (float)damageable.MaxHealth); meshRenderer.SetPropertyBlock(matBlock); } 

हम CurrentHealth क्लास CurrentHealth को 0 से 1 के मान में बदल देते हैं, इसे MaxHealth द्वारा विभाजित किया जाता है। फिर हम इसे MaterialPropertyBlock का उपयोग करके _Fill प्रॉपर्टी को पास करते हैं।

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

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

चर सेट करने के लिए बॉयलरप्लेट के अलावा यहां लगभग कुछ भी नहीं है, और कोड बल्कि उबाऊ है; विवरण के लिए GitHub भंडार देखें।

डेमो

GitHub रिपॉजिटरी में एक परीक्षण डेमो है जिसमें बुराई नीले क्यूब्स का एक गुच्छा वीर लाल क्षेत्रों (हुर्रे!) द्वारा नष्ट कर दिया जाता है, लेख में वर्णित धारियों द्वारा प्रदर्शित नुकसान को उठाता है। यूनिटी 2018.3.6f1 में लिखा डेमो।

इंस्टेंसिंग का उपयोग करने के प्रभाव को दो तरीकों से देखा जा सकता है:

आँकड़े पैनल

Play पर क्लिक करने के बाद Game पैनल के ऊपर Stats बटन पर क्लिक करें। यहाँ आप देख सकते हैं कि कितने ड्रॉ कॉल इंस्टेंस की बदौलत सहेजे जाते हैं:



गेम लॉन्च करने के बाद, आप HealthBar सामग्री पर क्लिक कर सकते हैं और “GPU सक्षम करें” चेकबॉक्स को अनचेक कर सकते हैं, जिसके बाद सहेजे गए कॉल की संख्या शून्य हो जाएगी।

फ्रेम डिबगर

गेम लॉन्च करने के बाद, विंडो> विश्लेषण> फ़्रेम डीबगर पर जाएं, और फिर दिखाई देने वाली विंडो में "सक्षम करें" पर क्लिक करें।

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

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

इस प्रणाली का विस्तार कैसे किया जाए

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