X_HUD_TextUI is designed to enhance the visual and interactive elements of your FiveM server by providing a modern TextUI system. It supports customizable animations, glass blur effects, and sound notifications, making it perfect for roleplay servers, interactive scenarios, and any server looking to improve player engagement.
✨ Features
Interactive UI Notifications: Display customizable messages with keys for player interaction.
Modern Glass Effect: Utilizes WebGL for a sleek, modern look with glass blur effects.
Customizable Shine/Reflection Effects: Add visual flair with adjustable shine settings.
Built-in Sound Support: Play sounds when the UI opens or closes.
Easy-to-Use API: Simple client and server exports for seamless integration.
Fully Configurable: Customize appearance, behavior, animations, and more.
🛠️ Installation
Step-by-Step Guide
Download the Resource:
Download the X_HUD_TextUI resource from the or .
Extract the Folder:
Extract the downloaded folder to your FiveM server's resources directory.
Update server.cfg:
Add the following line to your server.cfg file to ensure the resource starts automatically:ensure X_HUD_TextUI
Restart Your Server:
Restart your server to apply the changes and load the new resource.
📖 Usage
Client-side
-- Show TextUI with a key and text
exports['X_HUD_TextUI']:Show('E', 'Press to interact')
-- Hide TextUI
exports['X_HUD_TextUI']:Hide()
-- Using events
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')
TriggerEvent('X_HUD_TextUI:hide')
Server-side
-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')
-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)
-- Using events
TriggerClientEvent('X_HUD_TextUI:show', playerId, 'E', 'Press to interact')
TriggerClientEvent('X_HUD_TextUI:hide', playerId)
⚙️ Configuration
Customizing Appearance and Behavior
Edit the config.js file to customize the appearance and behavior of the TextUI:
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)
// Animation Settings
Animation: {
enabled: true,
type: 'slide', // Options: 'fade', 'slide', 'scale'
direction: 'up', // Options: 'up', 'down', 'left', 'right' (only for slide animation)
duration: 300, // Duration in milliseconds
easing: 'ease-out' // CSS easing function
},
// Pulse Effect
PulseEffect: {
enabled: false,
intensity: 1.1, // Max scale during pulse
speed: 1000, // Duration of one pulse cycle in milliseconds
},
// Shine Effect (Reflection)
ShineEffect: {
enabled: true,
duration: 1250, // Duration of one shine cycle in milliseconds
angle: 45, // Angle of the shine in degrees
opacity: 0.2, // Opacity of the shine effect (0.0 to 1.0)
size: 5, // Size of the shine in % (100 = full element width)
travel: 2500, // How far the shine travels in % (higher value = longer travel distance)
cooldown: 5000 // Time to wait between shine effects (milliseconds)
},
// Sound Settings
Sound: {
enabled: true, // Play sound when UI opens
file: 'sound1.mp3', // Options: sound1.mp3, sound2.mp3, sound3.mp3, sound4.mp3, sound5.mp3
volume: 0.5, // Volume level (0.0 to 1.0)
playOnClose: true, // Play sound when UI closes
closeFile: 'sound3.mp3' // Sound file to play when closing UI
},
// 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
}
🔄 Framework Integration
ESX Framework Integration
Add this to your client script to use X_HUD_TextUI as the default notification system:
-- In your ESX client script (e.g.: es_extended/client/functions.lua)
function ESX.TextUI(message, type)
exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', message)
end
function ESX.HideUI()
exports['X_HUD_TextUI']:Hide()
end
Example of usage in your ESX scripts:
-- Show TextUI
ESX.TextUI('Press E to interact')
-- Hide TextUI
ESX.HideUI()
QBCore Framework Integration
Add this to your client script to use X_HUD_TextUI as the default notification system:
-- In your QBCore client script (e.g.: qb-core/client/functions.lua)
function QBCore.Functions.DrawText(text)
exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', text)
end
function QBCore.Functions.HideText()
exports['X_HUD_TextUI']:Hide()
end
Example of usage in your QBCore scripts:
-- Show TextUI
QBCore.Functions.DrawText('Press E to interact')
-- Hide TextUI
QBCore.Functions.HideText()
📝 Examples
Basic Usage
-- Show TextUI
exports['X_HUD_TextUI']:Show('E', 'Press to interact')
-- Hide TextUI
exports['X_HUD_TextUI']:Hide()
Event Usage
-- Show TextUI using an event
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')
-- Hide TextUI using an event
TriggerEvent('X_HUD_TextUI:hide')
Server-side Usage
-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')
-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)
