Qu'est-ce que NUI dans FiveM ?
NUI signifie Nouvelle interface utilisateur et est le système utilisé par FiveM pour restituer les interfaces HTML dans le client du jeu. Sous le capot, NUI est alimenté par Chromium Embedded Framework, ce qui signifie que tu peux utiliser les standards HTML, CSS et JavaScript pour créer des interfaces utilisateur riches et interactives. Cela ouvre d’énormes possibilités pour créer des écrans de téléphone personnalisés, des systèmes d’inventaire, des HUD et des panneaux d’administration qui semblent natifs du jeu tout en exploitant toute la puissance des technologies Web modernes.
Configuration de ton premier NUI
Pour créer une interface NUI, tu as besoin de trois choses : un fichier HTML déclaré comme ui_page dans ton fxmanifest.lua, les fichiers HTML/CSS/JS eux-mêmes et le code Lua pour communiquer entre le jeu et l'interface. Ton manifeste doit inclure ui_page 'html/index.html' et répertoriez tes ressources Web dans le files directif. La page HTML se charge par défaut dans une superposition invisible et tu contrôles sa visibilité via Lua en définissant l'état de focus NUI avec SetNuiFocus.
EnvoyerNUIMessage et RegisterNUICallback
La communication entre le Lua et ton NUI est bidirectionnelle. De Lua à l'interface utilisateur, tu utilises SendNUIMessage pour transmettre une table qui est sérialisée dans JSON et reçue dans JavaScript via un message écouteur d'événements sur l'objet window. Depuis l'interface utilisateur vers Lua, tu utilises la récupération API pour appeler les points de terminaison enregistrés auprès de RegisterNUICallback. Ce système de rappel permet à ton code JavaScript de déclencher les fonctions Lua et de recevoir des réponses, permettant une intégration transparente entre la logique du jeu et l'état de l'interface.
Conception réactive pour FiveM
Les lecteurs FiveM utilisent une large gamme de résolutions d'écran, tes conceptions NUI doivent donc être réactives. Utilisez des unités relatives comme vh, vwet des pourcentages au lieu de valeurs de pixels fixes pour la mise en page. CSS Flexbox et Grid fonctionnent parfaitement pour créer des mises en page adaptatives. Gardez à l'esprit que la superposition NUI se trouve au-dessus du jeu, utilisez donc des arrière-plans transparents lorsque cela est possible et évitez de couvrir tout l'écran, à moins que ton interface utilisateur ne soit censée être une expérience plein écran, comme un accessoire de téléphone ou d'ordinateur portable.
Considérations relatives aux performances
Les performances du NUI ont un impact direct sur la fréquence d'images du client de jeu. Évitez les animations CSS lourdes, les manipulations excessives du DOM et les grandes images. Utilisez les transformations CSS pour les animations au lieu de modifier les propriétés de mise en page et anti-rebondissez les événements JavaScript qui se déclenchent fréquemment. Si ton interface utilisateur est mise à jour régulièrement, envisagez d'utiliser requestAnimationFrame au lieu de setInterval. Lorsque l'interface utilisateur n'est pas visible, envoyez un message depuis Lua pour suspendre tous les intervalles ou animations en cours d'exécution dans ton JavaScript afin de libérer des ressources.
Utilisation de frameworks avec NUI
Alors que Vanilla HTML et JavaScript fonctionnent parfaitement pour les interfaces utilisateur simples, les interfaces complexes bénéficient de frameworks comme React, Vue ou Svelte. Ces frameworks gèrent efficacement la gestion des états et les mises à jour du DOM, réduisant ainsi le code que tu dois écrire. De nombreux développeurs FiveM utilisent React avec NUI en raison de son architecture basée sur des composants et de son écosystème solide. Configurez une étape de construction avec Vite ou webpack pour compiler ton code de framework dans des fichiers statiques qui peuvent être inclus dans ton ressource, et utilisez la version de production pour le déploiement afin de minimiser la taille du bundle.