Introduction à RageUI

Performance

Optimisé pour FiveM avec un système de rendu efficace et une gestion mémoire intelligente.

Personnalisable

Interface entièrement customisable avec support des thèmes et des styles personnalisés.

Facile d'usage

API simple et intuitive pour créer rapidement des menus complexes et interactifs.

Fonctionnalités principales

  • Système de menus et sous-menus hiérarchiques
  • Support des items interactifs (boutons, checkboxes, listes)
  • Gestion automatique des sons et feedbacks audio
  • Interface NUI moderne avec HTML/CSS/JS
  • Sauvegarde automatique des états de menu

Installation

1

Télécharger RageUI

Intégrez le fichier rageui.lua dans votre ressource FiveM.

-- Dans votre fxmanifest.lua
fx_version 'cerulean'
game 'gta5'

client_scripts {
    'rageui.lua',
    'client.lua'
}
2

Configuration de base

Initialisez RageUI dans votre script client.

-- Exemple de base dans client.lua
local mainMenu = RageUI.CreateMenu("Menu Principal", "Description du menu")

-- Ouvrir le menu avec une commande
RegisterCommand("menu", function()
    RageUI.Visible(mainMenu, not RageUI.Visible(mainMenu))
end, false)
3

Premier menu fonctionnel

Créez votre premier menu avec des items interactifs.

-- Boucle de rendu du menu
Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        
        if RageUI.IsVisible(mainMenu) then
            RageUI.Button("Option 1", "Description", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    print("Option 1 sélectionnée !")
                end
            end)
            
            RageUI.Button("Fermer", "Fermer le menu", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    RageUI.CloseAll()
                end
            end)
        end
    end
end)

Référence API

Création de menus

RageUI.CreateMenu()

Crée un nouveau menu principal.

local menu = RageUI.CreateMenu(
    "Titre",           -- Titre du menu
    "Sous-titre",      -- Sous-titre (optionnel)
    X,                 -- Position X (optionnel)
    Y                  -- Position Y (optionnel)
)

RageUI.CreateSubMenu()

Crée un sous-menu lié à un menu parent.

local submenu = RageUI.CreateSubMenu(
    parentMenu,        -- Menu parent
    "Titre du sous-menu",
    "Sous-titre"
)

Gestion de l'affichage

RageUI.Visible()

Contrôle la visibilité d'un menu.

-- Afficher/masquer un menu
RageUI.Visible(menu, true)   -- Afficher
RageUI.Visible(menu, false)  -- Masquer

-- Vérifier si un menu est visible
if RageUI.Visible(menu) then
    -- Le menu est visible
end

RageUI.IsVisible()

Utilisé dans la boucle de rendu pour vérifier la visibilité.

if RageUI.IsVisible(menu) then
    -- Rendu des items du menu
end

Contrôles

RageUI.CloseAll()

Ferme tous les menus ouverts.

RageUI.CloseAll()

RageUI.GoBack()

Retourne au menu parent ou ferme si c'est le menu principal.

RageUI.GoBack()

Items interactifs

RageUI.Button()

Crée un bouton cliquable dans le menu.

RageUI.Button(
    "Label",              -- Texte du bouton
    "Description",        -- Description (optionnel)
    {RightLabel = "→"},   -- Options (optionnel)
    true,                 -- Enabled (true/false)
    function(Hovered, Active, Selected)
        if Selected then
            -- Action à effectuer
        end
    end
)

RageUI.Checkbox()

Crée une case à cocher.

local checked = false

RageUI.Checkbox(
    "Option",             -- Label
    "Description",        -- Description
    checked,              -- État actuel
    {},                   -- Options
    function(Hovered, Active, Selected, Checked)
        if Selected then
            checked = Checked
            print("État:", checked)
        end
    end
)

RageUI.List()

Crée une liste déroulante avec navigation gauche/droite.

-- Variables pour la liste
local listIndex = 1
local listItems = {"Option 1", "Option 2", "Option 3"}

RageUI.List(
    "Sélection",          -- Label de la liste
    listItems,            -- Tableau des options
    listIndex,            -- Index actuel (commence à 1)
    "Description",        -- Description (optionnel)
    {},                   -- Options (optionnel)
    true,                 -- Enabled (true/false)
    function(Hovered, Active, Selected, Index)
        if Selected then
            listIndex = Index
            print("Sélectionné:", listItems[Index])
        end
        
        -- Mise à jour en temps réel lors du hover
        if Active then
            listIndex = Index
        end
    end
)

-- Exemple avancé avec RightLabel dynamique
RageUI.List(
    "Choix multiple",
    listItems,
    listIndex,
    "Utilisez ← → pour naviguer",
    {RightLabel = listItems[listIndex]},  -- Afficher la valeur actuelle
    true,
    function(Hovered, Active, Selected, Index)
        listIndex = Index
        if Selected then
            ESX.ShowNotification("Option : " .. listItems[Index])
        end
    end
)

RageUI.Slider()

Crée un slider pour les valeurs numériques.

local sliderValue = 50

RageUI.Slider(
    "Volume",             -- Label
    sliderValue,          -- Valeur actuelle
    0,                    -- Valeur minimum
    100,                  -- Valeur maximum
    "Description",        -- Description
    {},                   -- Options
    true,                 -- Enabled
    function(Hovered, Active, Selected, Value)
        if Selected then
            sliderValue = Value
            print("Nouvelle valeur:", Value)
        end
    end
)

RageUI.Separator()

Ajoute un séparateur visuel avec texte optionnel.

-- Séparateur simple
RageUI.Separator()

-- Séparateur avec texte
RageUI.Separator("~b~Section Options")

-- Séparateur coloré
RageUI.Separator("~r~Danger Zone")

Système audio

RageUI.PlaySound()

Joue un son prédéfini.

-- Sons disponibles
RageUI.PlaySound(RageUI.Settings.Audio.Select)    -- Sélection
RageUI.PlaySound(RageUI.Settings.Audio.Back)      -- Retour
RageUI.PlaySound(RageUI.Settings.Audio.UpDown)    -- Navigation
RageUI.PlaySound(RageUI.Settings.Audio.LeftRight) -- Navigation horizontale
RageUI.PlaySound(RageUI.Settings.Audio.Error)     -- Erreur

Exemples pratiques

Menu basique avec boutons

-- Création du menu
local mainMenu = RageUI.CreateMenu("Menu Principal", "Sélectionnez une option")

-- Commande pour ouvrir le menu
RegisterCommand("menu", function()
    RageUI.Visible(mainMenu, not RageUI.Visible(mainMenu))
end, false)

-- Boucle de rendu
Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        
        if RageUI.IsVisible(mainMenu) then
            RageUI.Button("Option 1", "Description de l'option 1", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    ESX.ShowNotification("Option 1 sélectionnée !")
                end
            end)
            
            RageUI.Button("Option 2", "Description de l'option 2", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    ESX.ShowNotification("Option 2 sélectionnée !")
                end
            end)
            
            RageUI.Separator("~r~Actions")
            
            RageUI.Button("Fermer", "Fermer le menu", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    RageUI.CloseAll()
                end
            end)
        end
    end
end)

Items interactifs (Checkbox, List)

-- Variables pour les états
local checkboxState = false
local listIndex = 1
local listItems = {"Option A", "Option B", "Option C"}

Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        
        if RageUI.IsVisible(mainMenu) then
            -- Checkbox
            RageUI.Checkbox("Activer fonction", "Active ou désactive la fonction", checkboxState, {}, function(Hovered, Active, Selected, Checked)
                if Selected then
                    checkboxState = Checked
                    print("Checkbox état:", checkboxState)
                end
            end)
            
            -- Liste déroulante
            RageUI.List("Sélectionner option", listItems, listIndex, "Choisissez dans la liste", {}, true, function(Hovered, Active, Selected, Index)
                if Selected then
                    listIndex = Index
                    print("Option sélectionnée:", listItems[Index])
                end
            end)
        end
    end
end)

Navigation avec sous-menus

-- Création des menus
local mainMenu = RageUI.CreateMenu("Menu Principal", "Menu principal")
local settingsMenu = RageUI.CreateSubMenu(mainMenu, "Paramètres", "Configuration")
local playerMenu = RageUI.CreateSubMenu(mainMenu, "Joueur", "Informations joueur")

-- Menu principal
Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)
        
        -- Menu principal
        if RageUI.IsVisible(mainMenu) then
            RageUI.Button("Paramètres", "Accéder aux paramètres", {RightLabel = "→"}, true, function(Hovered, Active, Selected)
                if Selected then
                    RageUI.Visible(settingsMenu, true)
                end
            end)
            
            RageUI.Button("Profil Joueur", "Voir les informations", {RightLabel = "→"}, true, function(Hovered, Active, Selected)
                if Selected then
                    RageUI.Visible(playerMenu, true)
                end
            end)
        end
        
        -- Sous-menu paramètres
        if RageUI.IsVisible(settingsMenu) then
            RageUI.Button("Audio", "Paramètres audio", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    print("Menu audio")
                end
            end)
            
            RageUI.Button("Vidéo", "Paramètres vidéo", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    print("Menu vidéo")
                end
            end)
        end
        
        -- Sous-menu joueur
        if RageUI.IsVisible(playerMenu) then
            RageUI.Button("Statistiques", "Voir les stats", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    print("Affichage des statistiques")
                end
            end)
            
            RageUI.Button("Inventaire", "Ouvrir l'inventaire", {}, true, function(Hovered, Active, Selected)
                if Selected then
                    print("Ouverture inventaire")
                end
            end)
        end
    end
end)

Fonctionnalités Avancées

Sauvegarde d'État

RageUI sauvegarde automatiquement la position et l'état de vos menus entre les sessions.

-- La position du menu est automatiquement sauvegardée
-- dans menuStates[menuId] pour chaque menu

Interface NUI

Interface utilisateur moderne avec HTML/CSS/JS pour une expérience fluide.

-- Messages NUI automatiques pour :
-- - 'menuClosed' : fermeture du menu
-- - 'itemSelected' : sélection d'item
-- - 'checkboxChanged' : changement de checkbox
-- - 'listChanged' : changement de liste

Optimisation Mémoire

Gestion intelligente de la mémoire avec nettoyage automatique des callbacks inutilisés.

-- Nettoyage automatique dans RageUI.Visible()
if itemCallbacks then
    for key, _ in pairs(itemCallbacks) do
        if string.find(key, Menu.Id, 1, true) == nil then
            itemCallbacks[key] = nil
        end
    end
end

Personnalisation Visuelle

Système de thèmes et de couleurs personnalisables pour s'adapter à votre serveur.

-- Paramètres personnalisables
local menu = RageUI.CreateMenu(
    "Titre", "Sous-titre",
    X, Y,  -- Position
    TextureDictionary, TextureName,  -- Texture custom
    R, G, B, A  -- Couleurs RGBA
)

Bonnes Pratiques

Performance

  • Utilisez Citizen.Wait(0) dans vos boucles de rendu
  • Évitez les calculs lourds dans les callbacks
  • Fermez les menus quand ils ne sont plus nécessaires

UX/UI

  • Utilisez des descriptions claires pour vos items
  • Organisez vos menus de manière logique
  • Implémentez des confirmations pour les actions importantes

Développement

  • Testez tous vos callbacks et interactions
  • Gérez les cas d'erreur et les états invalides
  • Documentez vos menus pour l'équipe