🎖️ 🧑🏼‍🤝‍🧑🏼 🧑🏾 एकता UI में दृश्य घटक बनाएँ। कण प्रणाली 🤛🏼 🚺 👩🏾‍🔬

नमस्ते! यह लेख कैनवस ई में एक कण प्रणाली की कल्पना के लिए एक घटक के उदाहरण का उपयोग करके यूआई में अपने स्वयं के दृश्य घटकों को बनाने के बारे में है।

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

सिद्धांत का एक सा या जहां घटक निर्माण शुरू करने के लिए

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

घटक निर्माण

आधार

हम एक UIParticleSystem स्क्रिप्ट बनाकर कार्यान्वयन शुरू करते हैं जो MaskableGraphic वर्ग से विरासत में मिली है। MaskableGraphic ग्राफिक क्लास का एक व्युत्पन्न है और इसके अलावा मास्क के साथ काम करता है। OnPopulateMesh विधि को ओवरराइड करें। एक जाल कण प्रणाली जाल के कोने उत्पन्न करने के लिए VertexHelper के साथ काम करने का आधार इस तरह दिखेगा:

public class UIParticleSystem : MaskableGraphic { protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); ... int particlesCount = ... ; for (int i = 0; i < particlesCount; i++) { Color vertexColor = ... ; Vector2[] vertexUV = ... ; UIVertex[] quadVerts = new UIVertex[4]; for (int j = 0; j < 4; j++) { Vector3 vertixPosition = ... ; quadVerts[j] = new UIVertex() { position = vertixPosition, color = vertexColor, uv0 = vertexUV }; } vh.AddUIVertexQuad(quadVerts); } } }

सबसे पहले, आपको Clear Method को कॉल करके मौजूदा डेटा से VertextHelper को साफ़ करना होगा । उसके बाद, आप इसे चोटियों के बारे में नए डेटा के साथ भरना शुरू कर सकते हैं। इसके लिए, AddUIVertexQuad विधि का उपयोग किया जाएगा, जो आपको एक बार में 4 कोने के बारे में जानकारी जोड़ने की अनुमति देता है। इस विधि को उपयोग में आसानी के लिए चुना गया है, जैसा कि प्रत्येक कण एक आयत है। प्रत्येक शीर्ष को UIVertex ऑब्जेक्ट द्वारा वर्णित किया गया है। सभी मापदंडों में, हमें केवल स्कैन की स्थिति, रंग और कुछ निर्देशांक भरने की आवश्यकता है।

VertexHelper

वर्टेक्स हेल्पर में वर्टेक्स जानकारी जोड़ने के लिए तरीकों का एक पूरा सेट है, साथ ही वर्तमान डेटा प्राप्त करने के लिए एक जोड़ी है। अधिक जटिल ज्यामिति के लिए, सबसे अच्छा समाधान AddUIVertexStream विधि का चयन करना होगा, जो कोने की सूची और सूचकांकों की सूची को स्वीकार करता है।

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

 protected void Update() { SetVerticesDirty(); }

मेन टेक्स्ट प्रॉपर्टी को ओवरराइड करें। यह इंगित करता है कि कौन सी बनावट कैनवस रेंडर को पास की जाएगी और सामग्री में उपयोग की जाएगी , _MainTex shader संपत्ति । ऐसा करने के लिए, एक ParticleImage फ़ील्ड बनाएं, जिसे mainTexture प्रॉपर्टी द्वारा वापस किया जाएगा।

 public Texture ParticleImage; public override Texture mainTexture { get { return ParticleImage; } }

कण प्रणाली

मेष कोने उत्पन्न करने के लिए डेटा पार्टिकल सिस्टम घटक से लिया जाएगा, जो कणों के स्थान, उनके आकार, रंग आदि पर सभी गणनाओं में लगा हुआ है।
ParticleSystemRenderer घटक, जिसे निष्क्रिय करने की आवश्यकता होगी, कण प्रतिपादन में शामिल है, इसलिए अन्य घटक, UIParticleSystem और CanvasRenderer, मेष बनाने और UI में इसे रेंडर करने के लिए जिम्मेदार होंगे।

ऑपरेशन के लिए आवश्यक फ़ील्ड बनाएं और उन्हें अवेक विधि में आरंभ करें।

UIBehaviour

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

 private ParticleSystem _particleSystem; private ParticleSystemRenderer _particleSystemRenderer; private ParticleSystem.MainModule _main; private ParticleSystem.Particle[] _particles; protected override void Awake() { base.Awake(); _particleSystem = GetComponent<ParticleSystem>(); _main = _particleSystem.main; _particleSystemRenderer = GetComponent<ParticleSystemRenderer>(); _particleSystemRenderer.enabled = false; int maxCount = _main.maxParticles; _particles = new ParticleSystem.Particle[maxCount]; }

पार्टिकल्स सिस्टम कणों को संग्रहीत करने के लिए _particles फ़ील्ड का उपयोग किया जाएगा, और
_Main का उपयोग MainModule मॉड्यूल की सुविधा के लिए किया जाता है।

चलो कण प्रणाली से सीधे सभी आवश्यक डेटा लेते हुए, OnPopulateMesh विधि जोड़ें। सहायक चर वेक्टर 3 [] _quadCorners और वेक्टर 2 [] _simpleUV बनाएँ ।

_quadCorners में कण के केंद्र के सापेक्ष आयत के 4 कोनों के निर्देशांक होते हैं। प्रत्येक कण का प्रारंभिक आकार पक्षों के साथ एक वर्ग माना जाता है 1x1।
_simpleUV - uv स्कैन के निर्देशांक, इस मामले में सभी कण बिना किसी विस्थापन के एक ही बनावट का उपयोग करते हैं।

 private Vector3[] _quadCorners = new Vector3[] { new Vector3(-.5f, -.5f, 0), new Vector3(-.5f, .5f, 0), new Vector3(.5f, .5f, 0), new Vector3(.5f, -.5f, 0) }; private Vector2[] _simpleUV = new Vector2[] { new Vector2(0,0), new Vector2(0,1), new Vector2(1,1), new Vector2(1,0), };

 protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); int particlesCount = _particleSystem.GetParticles(_particles); for (int i = 0; i < particlesCount; i++) { var particle = _particles[i]; Vector3 particlePosition = particle.position; Color vertexColor = particle.GetCurrentColor(_particleSystem) * color; Vector3 particleSize = particle.GetCurrentSize3D(_particleSystem); Vector2[] vertexUV = _simpleUV; Quaternion rotation = Quaternion.AngleAxis(particle.rotation, Vector3.forward); UIVertex[]quadVerts = new UIVertex[4]; for (int j = 0; j < 4; j++) { Vector3 cornerPosition = rotation * Vector3.Scale(particleSize, _quadCorners[j]); Vector3 vertexPosition = cornerPosition + particlePosition; vertexPosition.z = 0; quadVerts[j] = new UIVertex(); quadVerts[j].color = vertexColor; quadVerts[j].uv0 = vertexUV[j]; quadVerts[j].position = vertexPosition; } vh.AddUIVertexQuad(quadVerts); } }

vertexPosition

सबसे पहले, कण के केंद्र के सापेक्ष वर्टेक्स की स्थानीय स्थिति की गणना की जाती है, इसके आकार (ऑपरेशन वेक्टर 3.Scale (particleSize, _quadCorners [j] ) और रोटेशन (एक वेक्टर द्वारा चतुर्धातुक रोटेशन को गुणा करते हुए) को ध्यान में रखते हुए। कण की स्थिति के बाद ही परिणाम में जोड़ा जाता है

अब चलो मानक घटकों का उपयोग करके परीक्षण के लिए एक सरल यूआई बनाएं।

ParticleSystem घटक में एक UIParticleSystem जोड़ें

दृश्य को चलाएं और घटक के परिणाम की जांच करें।

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

SimulationSpace

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

 protected override void OnPopulateMesh(VertexHelper vh) { ... Vector3 particlePosition; switch (_main.simulationSpace) { case ParticleSystemSimulationSpace.World: particlePosition = _rectTransform.InverseTransformPoint(particle.position); break; case ParticleSystemSimulationSpace.Local: particlePosition = particle.position; break; case ParticleSystemSimulationSpace.Custom: if (_main.customSimulationSpace != null) particlePosition = _rectTransform.InverseTransformPoint( _main.customSimulationSpace.TransformPoint(particle.position) ); else particlePosition = particle.position; break; default: particlePosition = particle.position; break; } ... }

ParticleSystemRenderer गुण का अनुकरण करें

अब हम ParticleSystemRenderer कार्यक्षमता का हिस्सा लागू करते हैं। अर्थात्, RenderMode , SortMode , Pivot के गुण।

RenderMode

हम खुद को इस तथ्य तक सीमित करते हैं कि कण हमेशा कैनवास के विमान में ही स्थित होंगे। इसलिए, हम केवल दो मूल्यों को लागू करते हैं: बिलबोर्ड और स्ट्रेच्डबिल ।
आइए, इसके लिए हमारी गणना CanvasParticleSystemRenderMode बनाएँ।

 public enum CanvasParticleSystemRenderMode { Billboard = 0, StretchedBillboard = 1 }

 public CanvasParticleSystemRenderMode RenderMode; public float SpeedScale = 0f; public float LengthScale = 1f; protected override void OnPopulateMesh(VertexHelper vh) { ... Quaternion rotation; switch (RenderMode) { case CanvasParticleSystemRenderMode.Billboard: rotation = Quaternion.AngleAxis(particle.rotation, Vector3.forward); break; case CanvasParticleSystemRenderMode.StretchedBillboard: rotation = Quaternion.LookRotation(Vector3.forward, particle.totalVelocity); float speed = particle.totalVelocity.magnitude; particleSize = Vector3.Scale(particleSize, new Vector3(LengthScale + speed * SpeedScale, 1f, 1f)); rotation *= Quaternion.AngleAxis(90, Vector3.forward); break; default: rotation = Quaternion.AngleAxis(particle.rotation, Vector3.forward); break; } ... }

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

SortMode

इसी तरह, CanvasParticlesSortMode एन्यूमरेशन बनाएँ। और हम केवल कण जीवनकाल के आधार पर छँटाई को लागू करते हैं।

 public enum CanvasParticlesSortMode { None = 0, OldestInFront = 1, YoungestInFront = 2 }

 public CanvasParticlesSortMode SortMode;

सॉर्टिंग के लिए, हमें कण जीवनकाल पर डेटा संग्रहीत करने की आवश्यकता होती है, जिसे चर _particleElapsedLifetime में संग्रहीत किया जाएगा। सॉर्टिंग Array.Sort पद्धति का उपयोग करके कार्यान्वित की जाती है।

 private float[] _particleElapsedLifetime; protected override void Awake() { ... _particles = new ParticleSystem.Particle[maxCount]; _particleElapsedLifetime = new float[maxCount]; } protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); int particlesCount = _particleSystem.GetParticles(_particles); for (int i = 0; i < particlesCount; i++) _particleElapsedLifetime[i] = _particles[i].startLifetime - _particles[i].remainingLifetime; switch (SortMode) { case CanvasParticlesSortMode.None: break; case CanvasParticlesSortMode.OldestInFront: Array.Sort(_particleElapsedLifetime, _particles, 0, particlesCount,Comparer<float>.Default); Array.Reverse(_particles, 0, particlesCount); break; case CanvasParticlesSortMode.YoungestInFront: Array.Sort(_particleElapsedLifetime, _particles, 0, particlesCount, Comparer<float>.Default); break; } ... }

प्रधान आधार

कण के केंद्र बिंदु को ऑफसेट करने के लिए एक धुरी क्षेत्र बनाएं।

 public Vector3 Pivot = Vector3.zero;

और जब शीर्ष स्थिति की गणना करते हैं, तो हम इस मूल्य को जोड़ते हैं।

 Vector3 cornerPosition = Vector3.Scale(particleSize, _quadCorners[j] + Pivot); Vector3 vertexPosition = rotation * cornerPosition + particlePosition; vertexPosition.z = 0;

समायोज्य आकार

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

जब RectTransform घटक का आकार बदला जाता है, तो OnRectTransformDimensionsChange विधि को कहा जाता है। हम रेक्टट्रांसफॉर्म के आयामों को फिट करने के लिए आकार में एक पैमाने पर बदलाव को लागू करके इस पद्धति को फिर से परिभाषित करते हैं।

सबसे पहले, RectTransform घटक और ShapeModule मॉड्यूल के लिए चर बनाएं। आकार स्केलिंग को अक्षम करने के लिए, ScaleShapeByRectTransform चर बनाएं।

इसके अलावा, स्केलिंग का प्रदर्शन तब किया जाना चाहिए जब घटक अपने प्रारंभिक पैमाने को सेट करने के लिए सक्रिय हो।

 private RectTransform _rectTransform; private ParticleSystem.ShapeModule _shape; public bool ScaleShapeByRectTransform; protected override void Awake() { ... _rectTransform = GetComponent<RectTransform>(); _shape = _particleSystem.shape; ... } protected override void OnEnable() { base.OnEnable(); ScaleShape(); } protected override void OnRectTransformDimensionsChange() { base.OnRectTransformDimensionsChange(); ScaleShape(); } protected void ScaleShape() { if (!ScaleShapeByRectTransform) return; Rect rect = _rectTransform.rect; var scale = Quaternion.Euler(_shape.rotation) * new Vector3(rect.width, rect.height, 0); scale = new Vector3(Mathf.Abs(scale.x), Mathf.Abs(scale.y), Mathf.Abs(scale.z)); _shape.scale = scale; }

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

ऑपरेशन का परीक्षण करने के लिए, रेक्टट्रांसफॉर्म को आकार देने वाले एनीमेशन को एक कण प्रणाली से जोड़कर चलाएं ।

प्रारंभ

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

ExecuteInEditMode

आपको विशेषता ExecuteInEditMode को निर्दिष्ट करने की आवश्यकता नहीं है, क्योंकि ग्राफिक पहले से ही इस व्यवहार को लागू करता है और स्क्रिप्ट को संपादक में निष्पादित किया जाता है।

 private bool _initialized; protected void Initialize() { if (_initialized) return; _initialized = true; _rectTransform = GetComponent<RectTransform>(); _particleSystem = GetComponent<ParticleSystem>(); _main = _particleSystem.main; _textureSheetAnimation = _particleSystem.textureSheetAnimation; _shape = _particleSystem.shape; _particleSystemRenderer = GetComponent<ParticleSystemRenderer>(); _particleSystemRenderer.enabled = false; _particleSystemRenderer.material = null; var maxCount = _main.maxParticles; _particles = new ParticleSystem.Particle[maxCount]; _particlesLifeProgress = new float[maxCount]; _particleRemainingLifetime = new float[maxCount]; } protected override void Awake() { base.Awake(); Initialize(); } protected override void OnPopulateMesh(VertexHelper vh) { Initialize(); ... } protected override void OnRectTransformDimensionsChange() { #if UNITY_EDITOR Initialize(); #endif ... }

OnRectTransformDimensionsChange विधि को Awake से पहले बुलाया जा सकता है। इसलिए, हर बार इसे बुलाया जाता है, चर को आरंभ करना आवश्यक है।

प्रदर्शन और अनुकूलन

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

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

एकता UI में दृश्य घटक बनाएँ। कण प्रणाली