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 Elements के साथ यूजर इंटरएक्शन का पता लगाया जाता है।

हम देखेंगे कि जब माउस कर्सर किसी UI Element पर होवर करता है और जब उस तत्व पर क्लिक किया जाता है, तो उसे कैसे पहचाना जाता है। इन घटनाओं के साथ, आप गेमप्ले के दौरान अपने इंटरफेस को खिलाड़ी के प्रति प्रतिक्रिया दे सकते हैं।

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

इन घटनाओं से, आप Python logic को निष्पादित कर सकते हैं, इंटरएक्टिव व्यवहार बना सकते हैं, मेन्यू खोल सकते हैं, UI तत्वों को बदल सकते हैं, ध्वनियाँ चला सकते हैं, खेल शुरू कर सकते हैं, विंडोज बंद कर सकते हैं, या आपके इंटरफेस को जो भी कार्यशीलता की आवश्यकता है, उसे सक्रिय कर सकते हैं।

1. होवर की अनुमति दें

जब माउस कर्सर किसी UI Element पर होवर करता है, तो उसका पता लगाने के लिए, इच्छित UI Element का चयन करें और Behaviour टैब में Allow Hover विकल्प को सक्षम करें।

image.png

Preview में, आप बिना गेम चलाए UI Element की उपस्थिति का पूर्वावलोकन कर सकते हैं।

Allow Hover को सक्षम करने के बाद, पूर्वावलोकन क्षेत्र पर माउस कर्सर को ले जाएं ताकि आप सामान्य स्थिति और होवर स्थिति के बीच दृश्य परिवर्तन देख सकें।

यह इंटरफेस विकसित करते समय बहुत उपयोगी है, क्योंकि आप जल्दी से परीक्षण कर सकते हैं कि क्या तत्व अपेक्षित रूप से दृश्यता के रूप में प्रतिक्रिया कर रहा है।

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

image.png

image.png

2. क्लिक की अनुमति दें

यूआई एलिमेंट को यह पहचानने की अनुमति देने के लिए कि जब उपयोगकर्ता उस पर क्लिक करता है, Allow Click विकल्प को सक्षम करें।

image.png

Allow Hover की तरह, Allow Click का व्यवहार भी सीधे Preview में परीक्षण किया जा सकता है।

यह आपको यह सत्यापित करने की अनुमति देता है कि दबाने पर तत्व कैसा दिखता है, बिना गेम को बार-बार चलाए सिर्फ छोटे दृश्य समायोजनों का परीक्षण करने के लिए।

image.png

3. लॉजिक निष्पादित करना

UI इंटरएक्शन से लॉजिक निष्पादित करने के लिए, Allow Hover और Allow Click विकल्पों के बाईं ओर स्थित तीर आइकन पर क्लिक करें।

image.png

यहाँ हम Callbacks का उपयोग कर सकते हैं।

Callbacks आपको UI Element इंटरएक्शन से संबंधित घटनाओं तक पहुँच प्रदान करते हैं, जिससे यह संभव होता है कि कर्सर तत्व के भीतर जाए, तत्व को छोड़ें, उस पर क्लिक करें, या क्लिक छोड़ें।

इन घटनाओं में निष्पादित होने वाले लॉजिक को संपादित करने के लिए, पेंसिल आइकन पर क्लिक करें।

image.png

image.png

होवर कॉलबैक्स का परीक्षण करने के लिए, चलो प्रत्येक घटना में एक साधारण प्रिंट संदेश जोड़ते हैं।

On Hover In Callback में, जो तब निष्पादित होता है जब कर्सर UI Element पर पाया जाता है, इंटरएक्शन की पहचान की पुष्टि करने के लिए एक प्रिंट संदेश जोड़ें।

image.png

फिर, On Hover Out Callback में, जो तब बुलाया जाता है जब कर्सर तत्व से बाहर निकलता है, एक और प्रिंट संदेश जोड़ें जिससे आपको इस निकासी घटना का पता चल सके।

इस तरह, हम कंसोल में ठीक देख सकते हैं कि कर्सर UI Element क्षेत्र में कब प्रवेश और निकासी कर रहा है।

image.png

अब गेम चलाएँ और UI Element के साथ इंटरैक्ट करें, कर्सर को उस पर ले जाकर और फिर उसे हटा दें।

यह सुनिश्चित करने के लिए Console पर देखें कि प्रिंट संदेश कब प्रदर्शित होते हैं।

यह UI इंटरएक्शन लॉजिक को डिबग करने के सबसे सरल तरीकों में से एक है, क्योंकि यह सुनिश्चित करता है कि घटना सही तरीके से बुलाई जा रही है।

image.png

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

यह संकेतक किसी भी एक्शन से जुड़े तत्वों की पहचान करना बहुत आसान बनाता है।

जैसे-जैसे आपका इंटरफेस बढ़ता है, यह बहुत उपयोगी होता है क्योंकि आप जल्दी से देख सकते हैं कि कौन से UI Elements पहले से ही इंटरएक्शन लॉजिक कॉन्फ़िगर कर चुके हैं।

image.png

अब चलो UI Element के क्लिक घटनाओं की पुष्टि करने के लिए प्रिंट संदेश जोड़ते हैं।

On Click In Callback में, एक प्रिंट संदेश जोड़ें ताकि यह पहचान सकें कि तत्व पर क्लिक कब किया गया।

फिर On Click Out Callback का उपयोग करें एक और प्रिंट संदेश जोड़ने के लिए, जिससे आप यह सत्यापित कर सकें कि क्लिक पूरा हो गया है, जिसका अर्थ है कि जब माउस बटन छोडा जाता है।

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

उदाहरण के लिए, आप Click In पर बटन को दृश्य रूप से दबाना चाहते हैं, लेकिन केवल Click Out पर कार्रवाई की पुष्टि करें।

image.png

गेम चलाएँ और तत्व के साथ इंटरैक्ट करते समय Console पर देखें।

जब आप होवर करते हैं, क्लिक करते हैं, छोड़ते हैं, और UI Element से दूर चलते हैं, संबंधित कॉलबैक निष्पादित होने चाहिए और उनके प्रिंट संदेश कंसोल में दिखाई देने चाहिए।

image.png

इस बिंदु पर, आप पहले से ही जानते हैं कि Cave Engine में सबसे बुनियादी UI इंटरएक्शन का पता कैसे लगाया जाता है।

Allow Hover, Allow Click, और कॉलबैक्स को संयोजित करके, आप वास्तविक इंटरएक्टिव इंटरफेस बनाना शुरू कर सकते हैं, जैसे बटन जो मेन्यू खोलते हैं, सेटिंग स्लाइडर्स, पुष्टि विंडोज, पॉज़ मेन्यू, और आपके खेल की जरूरतों के लिए कोई अन्य UI व्यवहार।