स्क्रिप्ट ऑब्जेक्ट्स के साथ एकता में MVC। भाग २

Cem Ugur Karacam के लेखों की श्रृंखला की निरंतरता (भाग 1 यहाँ पढ़ा जा सकता है )।

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



आइए देखें कि हमारे काम में क्या शामिल होगा। हमारे पास है:

• विषय और सूची के बारे में जानकारी के लिए दृश्य घटक बनाना;
• इन्वेंट्री में आइटम का एक प्रीफैब बनाएं;
• विचारों के साथ सूची भरें;
• आइटम दृश्य पर क्लिक करके कंसोल में जानकारी प्रदर्शित करें।

यह बहुत कुछ है। सबसे पहले, स्क्रीन रिज़ॉल्यूशन को समायोजित करें।



हम एकता यूआई वस्तुओं का उपयोग करेंगे। एक खाली कैनवास बनाएं (पदानुक्रम विंडो → यूआई → कैनवास) पर राइट-क्लिक करें।



अगला, दो पैनल बनाएं - आइटम और इन्वेंट्री के बारे में जानकारी।
हम पृष्ठभूमि के लिए एक ऑब्जेक्ट भी बनाते हैं, इसे बीजी कहते हैं और इसे वर्टिकल लेआउट घटक असाइन करते हैं।







अब पृष्ठभूमि के बच्चों को लंबवत रूप से संरेखित किया जाएगा।

बीजी के अंदर एक पैनल बनाते हैं।



रेक्टट्रांसफॉर्म घटक में, हम केवल पैनल ऊंचाई - 300 सेट करते हैं, और वर्टिकल लेआउट घटक के नियंत्रण के तहत चौड़ाई को स्वचालित छोड़ देते हैं। यहाँ बीजी ऑब्जेक्ट के लिए मेरी सेटिंग्स हैं:





अब पैनल को डुप्लिकेट करें और ऊंचाई को 440 पर सेट करें।



फिर हम पैनलों को सही नाम देते हैं।



यह इस तरह दिखना चाहिए:



InfoPanel ऑब्जेक्ट पर काम करने की कहानी अगले भाग में जारी रहेगी।

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



अब ग्रिड पैनल ग्रुप कंपोनेंट में ग्रिड सेटिंग्स के अनुसार इन्वेंट्री पैनल के प्रत्येक चाइल्ड ऑब्जेक्ट को स्क्रीन पर रखा जाएगा। बटन पर वापस चलते हैं।



बटन सही ढंग से काम नहीं करता है क्योंकि हमने अभी तक ग्रिड को कॉन्फ़िगर नहीं किया है। अभी के लिए, आइटम के आइकन के बच्चे के रूप में बटन के लिए छवि ऑब्जेक्ट जोड़ें और छवि घटक से Raycast लक्ष्य ध्वज को हटा दें ताकि छवि पर क्लिक करने से बटन पर क्लिक न हो।



अब बटन को कई बार कॉपी करें। इस पाठ के लिए चार प्रतियां पर्याप्त होंगी। यहां बताया गया है कि यह कैसा दिखना चाहिए:



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

एक नई स्क्रिप्ट बनाएं और उसे ItemView कहें।



आइटम दृश्य डेटा संग्रहण, दृश्य प्रस्तुति, क्लिक लोड होने से पहले प्रसंस्करण और प्रारंभिक स्थिति के लिए ज़िम्मेदार है।

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class ItemView : MonoBehaviour { public Button button; public Image ItemIcon; private ItemData itemData; } 

प्रारंभिक अवस्था सेट करने के लिए एक विधि बनाएँ।

 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class ItemView : MonoBehaviour { public Button button; public Image itemIcon; private ItemData itemData; public void InitItem(ItemData item) { this.itemData = item; button.onClick.AddListener(ButtonClicked); } private void ButtonClicked() { Debug.Log(itemData.name); } } 

मुझे लगता है कि हमारी परियोजना के लिए आपको कई आइकन की आवश्यकता होगी। मुझे एसेट स्टोर पर एक मुफ्त किट मिली। आइए इसे प्रोजेक्ट में जोड़ें।



अब आप एक वैरिएबल जोड़ सकते हैं जो आइटम के लिए आइकन को आइटमडॉट क्लास के अंदर स्टोर करेगा ।

 using UnityEngine; [CreateAssetMenu] public class ItemData : ScriptableObject { public string itemName; public ItemType type; public float attack; public Sprite icon; public float GetPrice() { return attack * 40; } } public enum ItemType { Dagger, Axe, Hammer, Potion } 

अब ItemView में हम दृश्य में एक आइकन जोड़ सकते हैं।

 public void InitItem(ItemData item) { this.itemData = item; itemIcon.sprite = itemData.icon; button.onClick.AddListener(ButtonClicked); } 

दृश्य में बटन के लिए एक स्क्रिप्ट जोड़ें और आइटम के साथ वस्तु का नाम बदलें। उसके बाद, हम ItemIcon फ़ील्ड में एक ImageIcon ऑब्जेक्ट असाइन करेंगे।



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



प्रस्तुति लगभग हो चुकी है। इन्वेंट्री को भरने के लिए हमें 4 आइटम चाहिए। हम उन मॉडलों को आइकन बनाएंगे और असाइन करेंगे जो हमने पिछले पाठ में किए थे।



हो गया। अब एक ItemViewController स्क्रिप्ट बनाएं ।

 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ItemViewController : MonoBehaviour { public Inventory inventoryHolder; public Transform inventoryViewParent; public GameObject itemViewPrefab; private void Start() { foreach (var item in inventoryHolder.inventory) { var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent); itemGO.GetComponent<ItemView>().InitItem(item); } } } 

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

अब, प्रारंभ विधि में, आइटम की प्रस्तुति का एक उदाहरण बनाएं और प्रत्येक इन्वेंट्री आइटम के मॉडल से डेटा के साथ प्रस्तुति डेटा को भरने के लिए InitItem विधि को कॉल करें।

ठीक है, अंत में, दृश्य में एक खाली ऑब्जेक्ट बनाएं, नियंत्रक स्क्रिप्ट को इसमें संलग्न करें और दृश्य में आवश्यक वस्तुओं के लिंक असाइन करें।



सुनिश्चित करें कि सभी आइटम इन्वेंट्री में असाइन किए गए हैं।



हमने काफी कुछ किया है। अब देखते हैं कि सब कुछ कैसे काम करता है।



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



अब फिर से परीक्षण।



बधाई हो, सब कुछ काम करता है।

अगले भाग में हम सूचना पैनल से निपटेंगे।