كيفية بناء واجهة مستخدم FiveM مخصصة باستخدام NUI (HTML/CSS/JS)
تعلم بناء واجهات غنية داخل اللعبة لـ FiveM باستخدام NUI. يغطي إعداد HTML/CSS/JS، مراسلة Lua، التعامل مع التركيز ونصائح تصحيح الأخطاء للمطورين.
Agency Scripts
المؤسس والمطور الرئيسي في Agency Scripts
ما هو NUI في FiveM؟
NUI تعني واجهة المستخدم الجديدة وهو النظام الذي يستخدمه FiveM لعرض واجهات HTML داخل عميل اللعبة. تحت الغطاء، يتم تشغيل NUI بواسطة Chromium Embedded Framework، مما يعني أنه يمكنك استخدام HTML وCSS وJavaScript القياسية لبناء واجهات غنية وتفاعلية. هذا يفتح إمكانيات هائلة لإنشاء شاشات هاتف مخصصة، وأنظمة الجرد، وHUDs، ولوحات الإدارة التي تبدو أصلية للعبة مع الاستفادة الكاملة من قوة تقنيات الويب الحديثة.
إعداد أول NUI لك
لإنشاء واجهة NUI، تحتاج إلى ثلاثة أشياء: ملف HTML معلن كـ ui_page في fxmanifest.lua، ملفات HTML/CSS/JS نفسها، وكود Lua للتواصل بين اللعبة والواجهة. يجب أن يتضمن ملف التعريف الخاص بك ui_page 'html/index.html' وقم بإدراج أصول الويب الخاصة بك في files التوجيه. يتم تحميل صفحة HTML داخل طبقة غير مرئية بشكل افتراضي، وتتحكم في ظهورها عبر Lua بضبط حالة تركيز NUI باستخدام SetNuiFocus.
SendNUIMessage و RegisterNUICallback
الاتصال بين Lua وNUI الخاص بك ثنائي الاتجاه. من Lua إلى واجهة المستخدم، تستخدم SendNUIMessage لتمرير جدول يتم تسلسله إلى JSON ويتم استقباله في JavaScript عبر message مستمع حدث على كائن النافذة. من واجهة المستخدم إلى Lua، تستخدم fetch API لاستدعاء نقاط النهاية المسجلة مع RegisterNUICallback. يتيح لك نظام الاستدعاءات العكسية هذا أن يقوم كود JavaScript الخاص بك بتشغيل دوال Lua واستقبال الردود، مما يمكن من تكامل سلس بين منطق اللعبة وحالة الواجهة.
تصميم متجاوب لـ FiveM
لاعبو FiveM يستخدمون مجموعة واسعة من دقات الشاشة، لذا يجب أن تكون تصاميم NUI الخاصة بك متجاوبة. استخدم وحدات نسبية مثل vh, vw، والنسب المئوية بدلاً من القيم الثابتة بالبكسل للتخطيط. تعمل CSS Flexbox و Grid بشكل مثالي لإنشاء تخطيطات متكيفة. ضع في اعتبارك أن طبقة NUI تقع فوق اللعبة، لذا استخدم خلفيات شفافة حيثما أمكن وتجنب تغطية الشاشة بأكملها إلا إذا كان واجهة المستخدم الخاصة بك مخصصة لتجربة ملء الشاشة مثل الهاتف أو جهاز الكمبيوتر المحمول.
اعتبارات الأداء
أداء NUI يؤثر مباشرة على معدل إطارات عميل اللعبة. تجنب الرسوم المتحركة الثقيلة باستخدام CSS، والتلاعب المفرط بـ DOM، والموارد الكبيرة من الصور. استخدم تحولات CSS للرسوم المتحركة بدلاً من تغيير خصائص التخطيط، وقم بتقليل تكرار أحداث JavaScript التي تُطلق بشكل متكرر. إذا كان واجهتك تتحدث بانتظام، فكر في استخدام requestAnimationFrame بدلاً من setInterval. عندما لا تكون الواجهة مرئية، أرسل رسالة من Lua لإيقاف أي فترات أو رسوم متحركة جارية في JavaScript لتحرير الموارد.
استخدام الأُطُر مع NUI
بينما تعمل HTML وJavaScript العادية جيدًا للواجهات البسيطة، تستفيد الواجهات المعقدة من أُطُر مثل React، Vue، أو Svelte. هذه الأُطُر تدير الحالة وتحديثات DOM بكفاءة، مما يقلل من الكود الذي تحتاج لكتابته. يستخدم العديد من مطوري FiveM React مع NUI بسبب هيكلها المعتمد على المكونات والنظام البيئي القوي. قم بإعداد خطوة بناء باستخدام Vite أو webpack لترجمة كود الإطار إلى ملفات ثابتة يمكن تضمينها في المورد الخاص بك، واستخدم البناء الإنتاجي للنشر لتقليل حجم الحزمة.