😛 🖖 👩🏿‍🚒 RectTransformUtility, या एक घटक कैसे बनाया जाए जो स्क्रीन के पीछे UI तत्वों को एनिमेट करता है 🧝🏽 📨 👐

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

सरल चुनौती

एक कार्य है - आपको एक घटक की आवश्यकता है जो स्क्रीन के चयनित किनारे से परे UI तत्व को एनिमेटेड करता है। घटक बैंगनी होना चाहिए जहां यह पदानुक्रमित रूप से स्थित है, एंकर किन स्थानों में हैं, स्क्रीन का आकार क्या है, और स्क्रीन किस स्थान पर स्थित है। एक निश्चित समय के लिए घटक को 4 पक्षों (ऊपर, नीचे, बाएं, दाएं) में साफ करने में सक्षम होना चाहिए।

सोच

सिद्धांत रूप में, यह कैसे किया जा सकता है? ऑब्जेक्ट के निर्देशांक में स्क्रीन के आकार का पता लगाएं, ऑब्जेक्ट को स्क्रीन के किनारे से परे समन्वय करने के लिए स्थानांतरित करें, और ऐसा लगता है कि मामला टोपी में है। लेकिन एक जोड़े हैं लेकिन:

UI के सापेक्ष स्क्रीन के निर्देशांक कैसे पता करें?

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

RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, new Vector2(Input.mousePosition), null, out topRightLocalCoord);

ये सीधे RectTransformUtility और ScreenPointToLocalPointInRectangle हैं। यहां हमें स्क्रीन पर बिंदु की स्थिति के आधार पर, रेक्ट (RectTransform) के अंदर स्थानीय निर्देशांक मिलते हैं।
वर्तमान उदाहरण में, हमें माउस कर्सर के स्थानीय निर्देशांक मिलते हैं, हमें उन्हें स्क्रीन के किनारे से बदलने की आवश्यकता है:

 RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, new Vector2(Screen.width, Screen.height), null, out topRightLocalCoord);

और इसलिए हमें स्क्रीन के ऊपरी दाहिने बिंदु का समन्वय मिला, ताकि वस्तु स्क्रीन को दाईं ओर छोड़ दे, हमारी वस्तु इस बिंदु से अधिक दूर होनी चाहिए + आइए हम कहते हैं कि चौड़ाई की चौड़ाई या निर्दिष्ट इंडेंट।

तो, पहला कैविएट

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

दो तरीके हैं , पहला है वैश्विक निर्देशांक का उपयोग करना, इसके लिए वे वैश्विक हैं। या प्रत्येक रेक्ट के स्थानीय निर्देशांक में स्क्रीन के निर्देशांक की गणना अलग से करें।

पहले मामले पर विचार करें - स्थानीय निर्देशांक को वैश्विक में कैसे परिवर्तित किया जाए।

अधिकांश googled विधियाँ उपयोग करती हैं - TransformPoint।

 transform.position = myCanvas.transform.TransformPoint(pos);

इस प्रकार, हम स्थानीय निर्देशांक को वैश्विक में परिवर्तित करते हैं।

मेरी राय में, यह आम तौर पर एक अतिरिक्त कदम है, क्योंकि RectTransformUtility में एक ScreenPointToWorldPointInRectangle विधि है जो तुरंत वैश्विक स्थिति लौटाती है।

हमें स्क्रीन के दाहिने किनारे से परे की परत को शिफ्ट करने की आवश्यकता है, इसके लिए हम एक्स पोजिशन से मिली कोऑर्डिनेट करते हैं, और वाई उस रेक को छोड़ देते हैं जिसे हम घुमाते हैं ताकि वह बस दाईं ओर जाए।

 new Vector3(topRightCoord.x+offset, rectTransform.position.y, 0);

परिणामस्वरूप समन्वय DoTween द्वारा खिलाया जाता है।

 rectTransform.DOMove(new Vector3(correctedTargetRight.x, rectTransform.position.y, 0), timeForHiding);

और हुर्रे, वस्तु दाईं ओर निकल जाती है। लेकिन ...

दूसरी बारीकियाँ

यहां हमें पता चलता है कि वास्तव में रेक्ट की पोजिशन रेक्ट पिवट पर निर्भर करती है।

इसलिए, वस्तु धुरी के आधार पर स्थिति के साथ नृत्य कर सकती है, साथ ही वस्तु बहुत बड़ी हो सकती है और ऑफसेट इसे स्क्रीन के पीछे पूरी तरह से धक्का नहीं देगा, हमेशा एक मौका होगा कि टुकड़ा बाहर चिपकेगा।

यही है, हमें ऑफसेट को क्षतिपूर्ति करने की आवश्यकता है जो कि रेक्ट + पिवट के आकार को ध्यान में रखेगा।

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

कोड उदाहरण

  var targetRight = new Vector3(topRightLocalCoord.x, rectTransform.position.y, 0); rectTransform.position = targetRight; rectTransform.anchoredPosition += rectTransform.sizeDelta; var correctedTargetRight = rectTransform.position; rectTransform.localPosition = startPoint; rectTransform.DOMove(new Vector3(correctedTargetRight.x, rectTransform.position.y, 0), timeForHiding);

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

इस बिंदु पर, हम बैसाखी के लिए नहीं कहेंगे, और स्थानीय निर्देशांक में स्क्रीन आकार प्राप्त करने के विचार पर लौटेंगे।

दूसरा तरीका

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

तीसरी बारीकियाँ

 RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, new Vector2(Screen.width, Screen.height), null, out topRightCoord); RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, new Vector2(0, 0), null, out bottomScreenCoord);

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

चौथा संज्ञा

स्थानीय समन्वय माता-पिता के केंद्र के सापेक्ष ऑफ़सेट है, जब एक और रेक्ट में आयत अंतर्निहित होती है, जो कैनवास के एक छोटे से हिस्से पर कब्जा करती है, तो हमें एक समन्वय की आवश्यकता होती है जो विस्थापन दोनों को ध्यान में रखता है, ठीक है, सब कुछ सरल है।

 ((Vector3)bottomLeftCoord + rectTransform.localPosition)

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

  (Vector3)topRightCoord + rectTransform.localPosition + (new Vector3((rectTransform.sizeDelta.x * rectTransform.pivot.x) + rectTransform.sizeDelta.x, 0, 0));

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

निष्कर्ष

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

ठीक है, घटक खुद, अगर कोई इसके साथ खेलना चाहता है, तो इसके लिए DoTween की आवश्यकता होगी:

अंग

 using DG.Tweening; using UnityEngine; public enum Direction { DEFAULT, RIGHT, LEFT, TOP, BOTTOM } public enum CanvasType {OVERLAY, CAMERATYPE} public class HideBeyondScreenComponent : MonoBehaviour { [SerializeField] private Direction direction; [SerializeField] private CanvasType canvasType; [SerializeField] private float timeForHiding = 1; [SerializeField] private float offset = 50; private Vector3 startPoint; private RectTransform rectTransform; private Vector2 topRightCoord; private Vector2 bottomLeftCoord; private void Start() { rectTransform = transform as RectTransform; startPoint = rectTransform.localPosition; Camera camera = null; if (canvasType == CanvasType.CAMERATYPE) camera = Camera.main; RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, new Vector2(Screen.width, Screen.height), camera, out topRightCoord); RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, new Vector2(0, 0), camera, out bottomLeftCoord); Hide(); } public void Show() { rectTransform.DOLocalMove(startPoint, timeForHiding); } public void Hide() { switch (direction) { case Direction.LEFT: rectTransform.DOLocalMove(new Vector3(EndPosition(Direction.LEFT).x, rectTransform.localPosition.y, 0), timeForHiding); break; case Direction.RIGHT: rectTransform.DOLocalMove(new Vector3(EndPosition(Direction.RIGHT).x, rectTransform.localPosition.y, 0), timeForHiding); break; case Direction.TOP: rectTransform.DOLocalMove(new Vector3(rectTransform.localPosition.x, EndPosition(Direction.TOP).y, 0), timeForHiding); break; case Direction.BOTTOM: rectTransform.DOLocalMove(new Vector3(rectTransform.localPosition.x, EndPosition(Direction.BOTTOM).y, 0), timeForHiding); break; } } private Vector3 NegativeCompensation() { return new Vector2((-rectTransform.sizeDelta.x - offset) + rectTransform.sizeDelta.x * rectTransform.pivot.x, (-rectTransform.sizeDelta.y - offset) + rectTransform.sizeDelta.y * rectTransform.pivot.y); } private Vector3 PositiveCompensation() { return new Vector2((rectTransform.sizeDelta.x * rectTransform.pivot.x) + offset, (rectTransform.sizeDelta.y * rectTransform.pivot.y) + offset); } private Vector2 EndPosition(Direction direction) { switch (direction) { case Direction.LEFT: return ((Vector3)bottomLeftCoord + rectTransform.localPosition) + NegativeCompensation(); case Direction.RIGHT: return (Vector3)topRightCoord + rectTransform.localPosition + PositiveCompensation(); case Direction.TOP: return ((Vector3)topRightCoord + rectTransform.localPosition) + PositiveCompensation(); case Direction.BOTTOM: return ((Vector3)bottomLeftCoord + rectTransform.localPosition) + NegativeCompensation(); } return startPoint; } }

RectTransformUtility, या एक घटक कैसे बनाया जाए जो स्क्रीन के पीछे UI तत्वों को एनिमेट करता है

सरल चुनौती

दूसरा तरीका

निष्कर्ष

More articles: