विंडोमैकसॉफ्टवेयरसेटिंग्ससुरक्षाउत्पादकतालिनक्सएंड्रॉइडप्रदर्शनकॉन्फ़िगरेशनएप्पल सभी

अनरियल इंजन में कस्टम उपयोगकर्ता इंटरफ़ेस कैसे बनाएं

संपादित 3 महीने पहले द्वारा ExtremeHow संपादकीय टीम

अनरियल इंजनउपयोगकर्ता इंटरफ़ेसयूआई डिजाइनयूएमजीएचयूडीब्लूप्रिंट्सग्राफिक्सविजेट्सयूएक्सअन्तरक्रियात्मक डिज़ाइन

अनुवाद अपडेट किया गया 3 महीने पहले

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

UMG की मूल बातें समझना

अनरियल मोशन ग्राफिक्स (UMG) अनरियल इंजन के भीतर दृश्य यूआई प्रणाली है। UMG डेवलपर्स को बटन, टेक्स्ट लेबल, स्लाइडर और अन्य यूआई तत्व बनाने में सक्षम बनाता है। ब्लूप्रिंट्स और C++ के उपयोग के माध्यम से, डेवलपर्स आसानी से अपने गेम प्रोजेक्ट में UMG विजेट्स को एकीकृत कर सकते हैं।

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

अपने प्रोजेक्ट को सेट अप करें

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

यूआई विजेट ब्लूप्रिंट बनाना

  1. सामग्री ब्राउज़र में, उस फ़ोल्डर पर नेविगेट करें जहां आप अपना नया यूआई विजेट बनाना चाहते हैं। सामग्री ब्राउज़र में राइट-क्लिक करें और उपयोगकर्ता इंटरफ़ेस → विजेट ब्लूप्रिंट चुनें। अपने विजेट का नाम "MainMenuWidget" या कुछ वर्णनात्मक नाम रखें।
  2. विजेट ब्लूप्रिंट संपादक खोलने के लिए नव निर्मित विजेट पर डबल-क्लिक करें। यहां, आप अपने यूआई लेआउट को डिज़ाइन और अनुकूलित कर सकते हैं।

यूआई लेआउट डिज़ाइन करना

विजेट ब्लूप्रिंट संपादक में तीन प्रमुख क्षेत्र हैं: पदानुक्रम पैनल, डिज़ाइनर टैब, और ग्राफ़ टैब।

पदानुक्रम पैनल

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

डिज़ाइनर टैब

डिज़ाइनर टैब वह स्थान है जहाँ आप अपने विजेट्स को कैनवास पर भौतिक रूप से व्यवस्थित करते हैं। आप इंटरफ़ेस बनाना शुरू करने के लिए कैनवास पर पैलेट से विजेट्स को ड्रैग और ड्रॉप कर सकते हैं। पैलेट में उपलब्ध विजेट्स में शामिल हैं:

ग्राफ टैब

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

सरल मुख्य मेनू बनाना

1. मुख्य मेनू का डिज़ाइन

हमारे विजेट के डिज़ाइनर टैब में, आइए एक साधारण लेआउट बनाएं जिसमें एक शीर्षक और एक प्रारंभ बटन शामिल है:

  1. पैलेट से, टेक्स्ट विजेट को कैनवास पर ड्रैग करें। विवरण पैनल में, टेक्स्ट प्रॉपर्टी को "मुख्य मेनू" पर सेट करें।
  2. इसके बाद, बटन विजेट को अपने टेक्स्ट के नीचे कैनवास पर ड्रैग करें। बटन के भीतर, दूसरा टेक्स्ट विजेट ड्रैग करें और इसका टेक्स्ट "खेल प्रारंभ करें" पर सेट करें।

2. बटन इंटरैक्शन संभालना

अब, हम यह परिभाषित करना चाहते हैं कि जब हम "खेल प्रारंभ करें" बटन पर क्लिक करें तो क्या होता है। ऐसा करने के लिए, ग्राफ टैब पर जाएं।

  1. ग्राफ़ टैब में, पदानुक्रम में बटन का चयन करें। विवरण पैनल में, घटनाओं अनुभाग तक स्क्रॉल करें और OnClicked के बगल में + पर क्लिक करके एक नई घटना बनाएं।
  2. यह घटना ग्राफ़ में एक OnClicked नोड जोड़ता है। यहां से, आप वह लॉजिक परिभाषित कर सकते हैं जो बटन दबाए जाने पर होता है। उदाहरण के लिए, आप "ओपन लेवल" नोड का उपयोग करके एक नया लेवल लोड कर सकते हैं और आप जिस लेवल को लोड करना चाहते हैं उसका नाम निर्दिष्ट कर सकते हैं।

C++ में यूआई कार्यक्षमता का कार्यान्वयन

C++ से परिचित लोगों के लिए, अनरियल इंजन आपको प्रोग्राम के माध्यम से UMG विजेट्स बनाने और हेरफेर करने की अनुमति देता है। नीचे एक उदाहरण दिया गया है जो C++ का उपयोग करके विजेट बनाने और प्रदर्शित करने के लिए:

#include “MainMenuWidget.h” #include “Blueprint/UserWidget.h” // विउपोर्ट में विजेट को बनाने और जोड़ने का फ़ंक्शन void AYourGameMode::BeginPlay() { Super::BeginPlay(); // सुनिश्चित करें कि विजेट वर्ग मान्य है if (MainMenuWidgetClass != nullptr) { UUserWidget* MainMenu = CreateWidget (GetWorld(), MainMenuWidgetClass); if (MainMenu != nullptr) { MainMenu->AddToViewport(); } } }

उपरोक्त कोड GameMode के BeginPlay विधि के ट्रिगर होने पर गेमप्ले के दौरान विजेट बनाता है। आपको यह सुनिश्चित करने की आवश्यकता है कि MainMenuWidgetClass आपके विजेट ब्लूप्रिंट का एक मान्य संदर्भ है।

अपने यूआई के लिए इंटरेक्टिविटी जोड़ना

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

स्लाइडर्स

वॉल्यूम नियंत्रण जैसी सेटिंग्स के लिए स्लाइडर उपयोगी होते हैं। आप स्लाइडर के मान को कैप्चर कर सकते हैं और इसे ऑडियो सिस्टम पर लागू कर सकते हैं। नीचे दिया गया उदाहरण दिखाता है कि स्लाइडर में परिवर्तन कैसे संभालें:

// खेल की मास्टर वॉल्यूम बदलने की घटना void UMyGameInstance::OnVolumeSliderChanged(float Value) { // मान लें कि मान सीमा [0.0, 1.0] में है UGameplayStatics::SetSoundMixClassOverride(this, SoundMix, SoundClass, Value, 1.0f, 0.0f); }

प्रगति बार

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

// प्रगति बार को अपडेट करने के लिए тик फ़ंक्शन void ULoadingScreen::NativeTick(const FGeometry& MyGeometry, float InDeltaTime) { Super::NativeTick(MyGeometry, InDeltaTime); // मान लें कि LoadProgress अन्यत्र अपडेट हो रहा है ProgressBar->SetPercent(LoadProgress); }

उपयोगकर्ता इंटरफ़ेस में सुधार

एक बार आपका यूआई कार्यात्मक हो जाने के बाद, इसका ध्यान सौंदर्य पर केंद्रित करें। आकर्षक उपयोगकर्ता इंटरफ़ेस उपयोगकर्ता अनुभव में सुधार कर सकता है। यहां कुछ सुझाव दिए गए हैं:

शैली

टेक्स्ट और बटन के लिए गुण जैसे फ़ॉन्ट, रंग और आकार संशोधित करने के लिए विवरण पैनल का उपयोग करें। अधिक उन्नत स्टाइल के लिए, स्लेट के माध्यम से स्टाइलशीट का उपयोग करने पर विचार करें, जो अनरियल की यूआई विजेट लाइब्रेरी है।

एनीमेशन

यूआई तत्वों को एनिमेट करने के लिए, एनीमेशन पैनल का उपयोग करें। एनीमेशन कुछ तत्वों पर ध्यान आकर्षित करने या उपयोगकर्ता क्रियाओं के लिए फीडबैक प्रदान कर सकते हैं। उदाहरण के लिए, आप चाहते हैं कि बटन उस पर होवर करने पर रंग बदल दे।

अपने यूआई का परीक्षण करें

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

निष्कर्ष

UMG का उपयोग करके अनरियल इंजन में कस्टम उपयोगकर्ता इंटरफेस बनाना खिलाड़ी के अनुभव को काफी हद तक बढ़ा सकता है। चाहे आप एक बुनियादी मुख्य मेनू या एक जटिल इन-गेम HUD डिज़ाइन कर रहे हों, UMG की मूल जानकारी को समझना और ब्लूप्रिंट या C++ का उपयोग करके इंटरैक्टिविटी को शामिल करना आवश्यक है। अभ्यास और प्रयोग के साथ, आप सहज और दृश्य रूप से आकर्षक इंटरफेस विकसित कर सकते हैं जो आपके गेम के पूरक हैं।

यदि आपको लेख की सामग्री में कुछ गलत लगता है, आप कर सकते हैं


टिप्पणियाँ