NUI के साथ FiveM के लिए अपनी UI कैसे बनाएँ (HTML/CSS/JS)

FiveM में NUI क्या है?

NUI का अर्थ New User Interface है और यह वह प्रणाली है जिसका उपयोग FiveM गेम क्लाइंट के अंदर HTML-आधारित इंटरफेस प्रस्तुत करने के लिए करता है। इसके पीछे Chromium Embedded Framework है, जिसका मतलब है कि आप मानक HTML, CSS, और JavaScript का उपयोग करके समृद्ध, इंटरैक्टिव UI बना सकते हैं। इससे कस्टम फोन स्क्रीन, इन्वेंटरी सिस्टम, HUDs, और एडमिन पैनल बनाने की विशाल संभावनाएँ खुलती हैं जो गेम के लिए मूल लगते हैं और आधुनिक वेब तकनीकों की पूरी शक्ति का लाभ उठाते हैं।

अपना पहला NUI सेट अप करना

NUI इंटरफ़ेस बनाने के लिए, आपको तीन चीजें चाहिए: एक HTML फ़ाइल घोषित की गई ui_page आपके fxmanifest.lua", HTML/CSS/JS फ़ाइलें स्वयं, और गेम और इंटरफ़ेस के बीच संचार के लिए Lua कोड। आपका मैनिफेस्ट शामिल होना चाहिए ui_page 'html/index.html' और अपने वेब एसेट्स को सूचीबद्ध करें files directive। डिफ़ॉल्ट रूप से HTML पेज एक अदृश्य ओवरले के अंदर लोड होता है, और आप NUI फोकस स्टेट सेट करके Lua के ज़रिए इसकी दृश्यता नियंत्रित करते हैं, इसके लिए SetNuiFocus.

SendNUIMessage और RegisterNUICallback

Lua और आपके NUI के बीच संचार द्विदिश है। Lua से UI तक, आप उपयोग करते हैं SendNUIMessage एक तालिका पास करने के लिए जो JSON में सीरियलाइज़ होती है और JavaScript में प्राप्त होती है एक message विंडो ऑब्जेक्ट पर इवेंट लिसनर। UI से Lua तक, आप fetch API का उपयोग करके पंजीकृत endpoints को कॉल करते हैं RegisterNUICallbackयह कॉलबैक सिस्टम आपके JavaScript कोड को Lua फ़ंक्शंस ट्रिगर करने और प्रतिक्रियाएं प्राप्त करने देता है, जिससे गेम लॉजिक और इंटरफ़ेस स्टेट के बीच सहज एकीकरण संभव होता है।

FiveM के लिए रेस्पॉन्सिव डिज़ाइन

FiveM खिलाड़ी विभिन्न स्क्रीन रिज़ॉल्यूशन का उपयोग करते हैं, इसलिए आपकी NUI डिज़ाइन प्रतिक्रियाशील होनी चाहिए। सापेक्ष इकाइयों का उपयोग करें जैसे vh, vwऔर लेआउट के लिए निश्चित पिक्सेल मानों के बजाय प्रतिशत। CSS Flexbox और Grid अनुकूली लेआउट बनाने के लिए पूरी तरह से काम करते हैं। ध्यान रखें कि NUI ओवरले गेम के ऊपर बैठता है, इसलिए जहां संभव हो पारदर्शी पृष्ठभूमि का उपयोग करें और पूरे स्क्रीन को कवर करने से बचें जब तक कि आपकी UI एक पूर्ण-स्क्रीन अनुभव जैसे फोन या लैपटॉप प्रॉप न हो।

प्रदर्शन विचार

NUI प्रदर्शन सीधे गेम क्लाइंट फ्रेम दर को प्रभावित करता है। भारी CSS एनिमेशन, अत्यधिक DOM हेरफेर, और बड़े छवि संसाधनों से बचें। लेआउट गुणों को बदलने के बजाय एनिमेशन के लिए CSS ट्रांसफॉर्म का उपयोग करें, और बार-बार चलने वाले JavaScript इवेंट्स को डिबाउंस करें। यदि आपकी UI नियमित रूप से अपडेट होती है, तो setInterval के बजाय requestAnimationFrame का उपयोग करने पर विचार करें। जब UI दिखाई नहीं देता है, तो Lua से एक संदेश भेजें ताकि आपके JavaScript में चल रहे किसी भी अंतराल या एनिमेशन को रोककर संसाधनों को मुक्त किया जा सके।

NUI के साथ फ्रेमवर्क का उपयोग

जबकि वनीला HTML और JavaScript सरल UI के लिए ठीक काम करते हैं, जटिल इंटरफेस React, Vue, या Svelte जैसे फ्रेमवर्क से लाभान्वित होते हैं। ये फ्रेमवर्क राज्य प्रबंधन और DOM अपडेट को कुशलतापूर्वक संभालते हैं, जिससे आपको लिखने वाले कोड की मात्रा कम होती है। कई FiveM डेवलपर्स React का उपयोग NUI के साथ करते हैं क्योंकि इसकी कंपोनेंट-आधारित वास्तुकला और मजबूत इकोसिस्टम है। Vite या webpack के साथ एक बिल्ड स्टेप सेटअप करें ताकि आपका फ्रेमवर्क कोड स्थैतिक फ़ाइलों में संकलित हो सके जिन्हें आपके रिसोर्स में शामिल किया जा सके, और डिप्लॉयमेंट के लिए उत्पादन बिल्ड का उपयोग करें ताकि बंडल आकार न्यूनतम हो।