Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

इस पाठ में, आप Cave Engine में UI तत्वों के दृश्य रूप को अनुकूलित करने के लिए सीखेंगे।

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

UI स्टाइल उपयोगी होते हैं क्योंकि वे आपको कई UI तत्वों में समान दृश्य कॉन्फ़िगरेशन का पुन: उपयोग करने की अनुमति देते हैं। इससे आपके इंटरफ़ेस को संगठित और सुसंगत बनाए रखना आसान हो जाता है।

1. UI स्टाइल

डिफ़ॉल्ट रूप से, जब आप Cave Engine में UI तत्व डिफ़ॉल्ट बनाते हैं, तो इसमें पहले से ही एक UI स्टाइल निर्दिष्ट होता है।

इस शैली को डिफ़ॉल्ट शैली कहा जाता है।

image.png

यह शैली UI तत्व की प्रारंभिक उपस्थिति को परिभाषित करने की जिम्मेदार होती है।

आप इसे सामग्री ब्राउज़र में इंटरफ़ेस फ़ोल्डर के अंदर पा सकते हैं।

image.png

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

इसलिए, यह एक अच्छा अभ्यास है कि डिफ़ॉल्ट शैली को Cave Engine का डिफ़ॉल्ट इंटरफ़ेस स्टाइल बनाए रखें और अपनी प्रोजेक्ट अनुकूलन के लिए एक नया UI स्टाइल बनाएं।

इस तरह, आप अपने UI तत्वों की उपस्थिति को संशोधित कर सकते हैं बिना गलती से हर तत्व को बदलने के जो अभी भी डिफ़ॉल्ट शैली का उपयोग कर रहे हैं।

image.png

UI तत्व का चयन करें और, शैली ओवरराइड गुण में, डिफ़ॉल्ट शैली को उस नए UI स्टाइल से बदलें जिसे हमने अभी बनाया है।

अब यह UI तत्व आपके कस्टम स्टाइल का उपयोग करेगा बजाय डिफ़ॉल्ट के।

image.png

शैली को संपादित करने के लिए, UI स्टाइल फ़ील्ड के पास स्थित पेंसिल आइकन पर क्लिक करें।

आप सीधे सामग्री ब्राउज़र में शैली फ़ाइल का चयन करके भी शैली संपादक खोल सकते हैं।

image.png

2. अनुकूलन

UI स्टाइल संपादक के अंदर, आप तत्व की दृश्य विशेषताओं को अनुकूलित कर सकते हैं।

9-स्लाइस स्केलिंग विकल्प आपको बिना तत्व के किनारों और कोनों को विकृत किए एक UI तत्व का आकार बदलने की अनुमति देता है।

जब सक्षम किया गया, तो तत्व नौ क्षेत्रों में विभाजित होता है। चार कोने हमेशा एक ही आकार में रहते हैं, किनारे केवल एक दिशा में खींचे जाते हैं, और केवल मध्य क्षेत्र को स्वतंत्र रूप से आकार दिया जाता है।

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

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

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

  • टिंट आपको UI तत्व पर लागू किए गए रंग को बदलने की अनुमति देता है। यह तत्व द्वारा उपयोग की जाने वाली छवि के ऊपर रंग ओवरले की तरह काम करता है, जिससे आपको बिना मूल बनावट को संपादित किए इसकी उपस्थिति को संशोधित करने की अनुमति मिलती है।

  • अल्फा UI तत्व की पारदर्शिता स्तर को नियंत्रित करता है। उच्च मूल्य तत्व को अधिक अव्यक्त बनाते हैं, जबकि निम्न मूल्य इसे अधिक पारदर्शी बनाते हैं।

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

image.png

समान सेटिंग्स को UI तत्व के हॉवर और क्लिक राज्यों पर भी लागू किया जा सकता है।

इसका मतलब है कि आप प्रत्येक इंटरैक्शन राज्य के लिए विशेष छवि, रंग, पारदर्शिता, और धुंधला मूल्य निर्धारित कर सकते हैं।

उदाहरण के लिए, एक बटन जब निष्क्रिय होता है तो एक रंग हो सकता है, जब माउस इसके ऊपर होता है तो उज्जवल हो सकता है, और फिर जब क्लिक किया जाता है तो फिर से बदल सकता है।

यह खिलाड़ी को स्पष्ट दृश्य प्रत्युत्तरी और इंटरफ़ेस को अधिक प्रतिक्रियाशील और परिष्कृत बनाता है।

image.png

इस बिंदु पर, आप अब समझते हैं कि UI शैलियाँ Cave Engine में UI तत्वों की उपस्थिति को कैसे नियंत्रित करती हैं।

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