💾X_HUD_HelpNotify

🌟 Overview

X_HUD_HelpNotification provides a modern, clean UI for displaying help notifications with a glass effect. It’s designed to be context-aware, meaning notifications will automatically disappear when the context is lost. This makes it ideal for proximity-based interactions, roleplay scenarios, and guiding players through specific actions.

✨ Features

Modern UI: Clean design with glass effect, animations, and customizable styling.
Context-Aware: Notifications disappear when context is lost, ensuring they only appear when relevant.
Position Flexibility: 9 position presets for flexible placement on the screen.
Developer-Friendly: Simple export and event system for easy integration.
Performance Optimized: Minimal resource usage ensures smooth performance.
Test Point: Built-in test point for quick setup verification.

🛠️ Installation

Download the Script:
- Download the script from the Tebex Store or GitHub.
Extract the Folder:
- Extract the downloaded folder to your FiveM resources directory.
Update server.cfg:
- Add ensure X_HUD_HelpNotification to your server.cfg file.
Restart Your Server:
- Restart your server to load the new resource.

📖 Usage

Basic Usage

The notification system requires continuous triggering to remain visible. This makes it perfect for proximity-based notifications or hints that should only appear in specific contexts.Important: This script MUST be triggered in a loop with a wait time of 0 to display properly. It’s designed to be refreshed every frame.

Example Code

-- Example of using the notification in a loop
Citizen.CreateThread(function()
    while true do
        local playerCoords = GetEntityCoords(PlayerPedId())
        local distance = #(playerCoords - vector3(-269.4, -955.3, 30.2))
        
        if distance < 3.5 then
            exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')
        end
        
        Citizen.Wait(0)
    end
end)

Exports

-- Show a help notification with a key and text
exports['X_HUD_HelpNotification']:ShowHelpNotification(key, text)

-- Example:
exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')

Events

-- Trigger the notification event with a key and text
TriggerEvent('helpnotify', key, text)

-- Example:
TriggerEvent('helpnotify', 'E', 'Press to interact')

-- Alternative event name
TriggerEvent('X_HUD_HelpNotification:showHelpNotification', key, text)

⚙️ Configuration

Server-Side Configuration (`config.lua`)

-- Default Key
Config.DefaultKey = 'E' -- Default key to show in notifications if none specified

-- Test Point (You can toggle this to test the notification system)
Config.EnableTestPoint = true -- Set to false to disable the test point
Config.TestPoint = {
    coords = vector3(-269.4, -955.3, 30.2),
    distance = 3.5,
    helpText = "Press to interact",
    marker = {
        type = 1,
        size = vector3(3.0, 3.0, 0.5),
        color = {r = 0, g = 255, b = 0, a = 25},
        bobUpAndDown = false,
        faceCamera = false,
        rotate = false
    }
}

UI Configuration (`html/config.js`)

const Config = {
    // Notification Settings
    DefaultPosition: 'bottom-middle', // Position options: top-left, top-middle, top-right, middle-left, center, middle-right, bottom-left, bottom-middle, bottom-right
    PositionPercentages: {
        top: 20, // % from top (when using top positions)
        bottom: 7, // % from bottom (when using bottom positions)
        left: 5, // % from left (when using left positions)
        right: 5, // % from right (when using right positions)
    },
    DefaultScale: 1.0, // Scale of the notification (1.0 is default)

    // Appearance
    BackgroundColor: {r: 0, g: 0, b: 0, a: 0.4}, // Background color with opacity (RGBA format)
    TextColor: {r: 255, g: 255, b: 255, a: 1.0}, // Text color (RGBA format)
    ButtonColor: {r: 0, g: 255, b: 0, a: 0.1}, // Bright green button color with transparency (RGBA format)
    BorderRadius: '8px', // Rounded corners
    FontFamily: 'Poppins, sans-serif', // Font family
    
    // Button Size
    ButtonSize: {
        width: 50, // Width in pixels
        height: 50, // Height in pixels
        fontSize: 26 // Font size in pixels
    },
    
    // Glass Effect
    GlassEffect: true, // Enable/disable glass effect
    GlassBlur: 4, // Blur amount in px
    GlassOpacity: 0.6, // Opacity of the glass effect
    
    // Glow Effect
    GlowEffect: true, // Enable/disable glow effect
    GlowColor: {r: 0, g: 255, b: 0, a: 0.7}, // Bright green glow color with intensity (RGBA format)
    GlowSpread: '10px', // Glow spread
}

🎨 UI Customization

Notification Position

You can customize the position of the notification using the DefaultPosition setting in html/config.js. Available options include:

top-left
top-middle
top-right
middle-left
center
middle-right
bottom-left
bottom-middle
bottom-right

Colors and Effects

Adjust the appearance of the notification by modifying the following settings in html/config.js:

BackgroundColor: Background color with opacity (RGBA format)
TextColor: Text color (RGBA format)
ButtonColor: Button color with transparency (RGBA format)
GlowEffect: Enable or disable the glow effect
GlowColor: Color of the glow effect (RGBA format)

Glass Effect

The glass effect can be customized using:

GlassEffect: Enable or disable the glass effect
GlassBlur: Strength of the blur effect
GlassOpacity: Opacity of the glass effect

🔄 Troubleshooting

Common Issues

Notification Not Appearing:
- Ensure the script is properly loaded and enabled in server.cfg.
- Check for typos in the export or event names.
- Verify that the script is being triggered in a loop with Citizen.Wait(0).
Styling Issues:
- Ensure the html/config.js file is correctly configured.
- Check for browser console errors in the FiveM debug menu.
Test Point Not Working:
- Ensure Config.EnableTestPoint is set to true in config.lua.
- Verify that the test point coordinates are correct.

📥 Download & Support

Tebex Store: Download Link
Discord Support: Join Discord

PreviousFull Configuration Breakdown NextFull Configuration Breakdown

Last updated 2 months ago