Cave: गेम यूजर इंटरफेस (गेम UI) सिस्टम
UI एंकर को समझना
Lesson 3 of 6 • 10 XP
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 तत्वों को स्थिरता से स्थिति में रखने के तरीके को समझेंगे, यह सुनिश्चित करते हुए कि वे स्क्रीन के आकार के आधार पर जहाँ आप उन्हें अपेक्षित करते हैं, वहाँ बने रहें।
1. एक नया UI तत्व बनाना
एक नया UI Element Default बनाएं।
इसे दृश्य में जोड़ने के बाद, इसे चुनें और Properties पैनल पर नज़र डालें।
वहाँ, आपको तत्व की स्थिति, स्केल, उपस्थिति, और एंकरिंग के लिए जिम्मेदार सेटिंग्स मिलेंगी। इस पाठ में, हम इन गुणों का उपयोग करेंगे ताकि हम समझ सकें कि एंकरिंग प्रणाली कैसे काम करती है और यह इंटरफ़ेस के व्यवहार को कैसे प्रभावित करती है।
2. स्थिति
डिफ़ॉल्ट रूप से, Cave Engine में UI तत्वों की स्थिति प्रतिशत मानों में परिभाषित की जाती है।
यह आपको विभिन्न स्क्रीन संकल्पों के लिए बेहतर अनुकूलित इंटरफ़ेस बनाने में मदद करता है।
प्रारंभ में, UI तत्व स्क्रीन के केंद्र में एंकर किया जाता है। इसलिए, जब स्थिति मान को 0 पर सेट किया जाता है, तो तत्व ठीक इंटरफ़ेस के केंद्र में दिखाई देता है।
3. स्केल
जैसे स्थिति, Cave Engine में UI तत्वों का स्केल भी डिफ़ॉल्ट रूप से प्रतिशत मानों में परिभाषित होता है।
स्केल मान बदलने से, आप UI तत्व के आकार को सीधे स्क्रीन पर बढ़ा या घटा सकते हैं।
यह इंटरफ़ेस के आयाम को समायोजित करना आसान बनाता है जबकि इसे प्रतिक्रियाशील रखते हुए।
4. प्रतिशत और निरपेक्ष पिक्सेल मान
जैसा कि हमने पहले देखा, डिफ़ॉल्ट रूप से, Cave Engine में UI तत्वों की स्थिति और स्केल प्रतिशत का उपयोग करके परिभाषित की जाती हैं।
अधिकांश मामलों में, यह अनुशंसित व्यवहार है, क्योंकि यह इंटरफ़ेस को इसके स्थान और आकार को संकल्प या मॉनिटर आकार के आधार पर सुसंगत बनाए रखने में मदद करता है।
इस उदाहरण में, हमने UI तत्व के स्केल को X और Y अक्षों पर 10% पर सेट किया। हमने स्थिति को X अक्ष पर 25% पर सेट किया, जो क्षैतिज अक्ष के अनुरूप है।
इस सेटअप के साथ, तत्व अपने एंकर बिंदु के सापेक्ष 25% दाएं की ओर मूव होता है।
चूँकि मान प्रतिशत में परिभाषित किए जाते हैं, यह स्थिति किसी भी संकल्प या मॉनिटर आकार के स्वतंत्र रूप से संरक्षित रहेगी, यह सुनिश्चित करते हुए कि इंटरफ़ेस विभिन्न उपकरणों में स्थिर बने।
प्रतिशत मानों के अलावा, Cave Engine आपको पिक्सेल में निरपेक्ष मानों का उपयोग करने की भी अनुमति देता है।
यह मोड तब उपयोगी होता है जब आपको किसी UI तत्व का एक निश्चित आकार या निश्चित स्थिति होनी चाहिए।
एकाई प्रकार को बदलने के लिए, उस स्थिति या स्केल अक्ष के बगल में लॉक आइकन पर क्लिक करें जिसे आप संशोधित करना चाहते हैं।
जब आप ऐसा करते हैं, तो मान प्रतिशत (%) और निरपेक्ष पिक्सेल (px) के बीच स्विच हो जाएगा, जिससे आप प्रत्येक स्थिति के लिए सबसे उपयुक्त इकाई चुन सकें।
जब आप निरपेक्ष पिक्सेल मान का उपयोग करते हैं, तो UI तत्व अब स्क्रीन संकल्प के अनुसार आनुपातिक रूप से अनुकूलित नहीं होगा।
इसका अर्थ है कि, कोई मायने नहीं रखता कि खेल कम-संResolution या उच्च-संResolution मॉनिटर पर चल रहा है, पिक्सेल मान ठीक उसी तरह लागू किया जाएगा जैसा कि कॉन्फ़िगर किया गया है।
इसी प्रकार का व्यवहार स्थिति के Y अक्ष पर और स्केल के दोनों X और Y अक्षों पर लागू होता है।
यह मोड तब अनुशंसित होता है जब आपको किसी तत्व को एक निश्चित आकार या निश्चित स्थिति बनाए रखने की आवश्यकता होती है, बिना स्क्रीन या इसके माता-पिता UI तत्व की चौड़ाई और ऊँचाई पर विचार किए।
उदाहरण के लिए, आप चाहते होंगे कि एक आइकन हमेशा ठीक 64 पिक्सेल चौड़ा हो, या एक छोटा अंतर हमेशा ठीक 20 पिक्सेल सीमा से हो।
5. स्थिति एंकरिंग
स्थिति और स्केल गुणों में उपलब्ध एंकर आइकन UI तत्व का एंकर बिंदु दर्शाता है।
जब आप स्थिति एंकर के आइकन पर क्लिक करते हैं, तो Anchor Point विंडो प्रदर्शित होगी। वहाँ, आप तत्व के वर्तमान एंकर बिंदु को देख सकते हैं।
डिफ़ॉल्ट रूप से, नए UI तत्व स्क्रीन के केंद्र में एंकर किए जाते हैं, जो कॉन्फ़िगरेशन विंडो में नीले वृत्त द्वारा प्रदर्शित होता है।
यह एंकर बिंदु तत्व को इंटरफ़ेस में स्थिति के लिए संदर्भ के रूप में कार्य करता है। इस बिंदु से, स्थिति मानों को चुने गए एंकर के अनुसार लागू किया जाएगा।
कल्पना कीजिए कि आप एक मिनीमैप बनाना चाहते हैं, जो आमतौर पर स्क्रीन के निचले-बाएँ कोने में रखा जाता है।
इस मामले में, तत्व को केंद्र पर एंकर रखा जाना समझ में नहीं आता, क्योंकि इसकी स्थिति स्क्रीन के केंद्र बिंदु से गणना की जाएगी।
इस प्रकार के इंटरफ़ेस के लिए, बस Anchor Point को वांछित निचले कोने में बदल दें।
इससे तत्व उस स्क्रीन क्षेत्र का उपयोग संदर्भ के रूप में करेगा, जिससे इसे स्थिति देना आसान होगा और यह सुनिश्चित होगा कि यह उपयोग किए जा रहे संकल्प के बावजूद सही स्थान पर रहे।
जब स्थिति मान 0 पर सेट किए जाते हैं, चाहे प्रतिशत (%) या निरपेक्ष पिक्सेल (px) का उपयोग करते हुए, UI तत्व बिल्कुल उसके एंकर बिंदु पर स्थित होगा।
दूसरे शब्दों में, Anchor Point तत्व की स्थिति के लिए संदर्भ बन जाता है।
उस बिंदु से, आपको केवल स्थिति मानों को समायोजित करने की आवश्यकता है ताकि आप तत्व को वांछित दिशा में बढ़ा सकें।
6. स्केल एंकरिंग
अब चलिए समझते हैं कि स्केल एंकरिंग कैसे काम करती है।
इसे करने के लिए, UI तत्व के एंकर बिंदु को फिर से स्क्रीन के केंद्र में बदलें और स्थिति मानों को 0 पर सेट करें, जिससे तत्व ठीक केंद्र में लौट आए।
तत्व को केंद्र में रखते हुए, यह देखना आसान हो जाएगा कि एंकरिंग स्केल व्यवहार को कैसे प्रभावित करती है और यह समझना कि UI तत्व को किस बिंदु से रिसाइज किया जाएगा।
जब स्केल एंकर बिंदु केंद्र पर सेट होता है, तो तत्व के स्केल को बढ़ाने या घटाने से दोनों पक्षों पर समान रूप से प्रभाव पड़ेगा। तत्व बाएँ और दाएँ दोनों में एक साथ बढ़ेगा या घटेगा।
हालांकि, कुछ स्थितियों में, यह वांछित व्यवहार नहीं होता है।
उदाहरण के लिए, एक स्वास्थ्य बार या प्रगति बार की कल्पना करें। इस मामले में, आप आमतौर पर चाहते हैं कि तत्व केवल एक दिशा में बढ़े या घटे।
इसको हासिल करने के लिए, स्केल एंकर बिंदु को वांछित दिशा में बदल दें।
जब आप ऐसा करते हैं, तो एक छोटा कर्सर प्रदर्शित होगा, जो स्केल किनारे को दर्शाता है।
अब, जब आप स्केल को बढ़ाते या घटाते हैं, तो तत्व केवल एंकर बिंदु की विपरीत दिशा में बढ़ेगा। इससे बार और अन्य गतिशील UI तत्व बनाना बहुत आसान हो जाएगा।
7. एंकर और स्केल को समायोजित करना
अब जब हम समझ चुके हैं कि स्केल एंकर बिंदु तत्व के रिसाइजिंग व्यवहार को कैसे प्रभावित करता है, हम अपने प्रोजेक्ट के लिए इंटरफ़ेस को उस तरीके से कॉन्फ़िगर कर सकते हैं जो सबसे अच्छा हो।
स्थिति एंकर को स्क्रीन के निचले-बाएँ कोने में वापस करें, या किसी अन्य स्थिति को चुनें जो आपके द्वारा बनाए जा रहे इंटरफ़ेस के लिए अधिक समझ में आती है।
आप स्केल एंकर के साथ भी ऐसा ही कर सकते हैं, यह निर्धारित करते हुए कि तत्व किस बिंदु से रिसाइज होगा।
इस उदाहरण में, हम स्थिति के X अक्ष और स्केल के X अक्ष के लिए निरपेक्ष पिक्सेल मानों का उपयोग करेंगे, जबकि Y अक्ष के लिए प्रतिशत मान रखते हुए।
यह सेटअप तत्व को स्क्रीन के आयामों के बावजूद एक वर्ग अनुपात बनाए रखने की अनुमति देता है, जबकि अभी भी ऊर्ध्वाधर धुरी पर प्रतिक्रियाशील व्यवहार को संरक्षित करता है।
इस बिंदु पर, आपको Cave Engine में UI एंकरिंग के काम करने के तरीके का अच्छा ज्ञान होना चाहिए।
एंकर इंटरफ़ेस निर्माण का एक सबसे महत्वपूर्ण भाग है, क्योंकि वे यह निर्धारित करते हैं कि जब स्क्रीन का आकार बदलता है तो UI तत्वों का व्यवहार कैसा होगा।
स्थिति एंकर, स्केल एंकर, प्रतिशत मान, और पिक्सेल मानों को मिलाकर, आप ऐसे इंटरफ़ेस बना सकते हैं जो सटीक और प्रतिक्रियाशील दोनों हों।