Twilight Loading Screenpaidv1.1.0Standalone

Installation & Config

Get Twilight Loading Screen running and make it your own.

Installation

Download the resource

Download twilight-loadscreen from your CFX Portal granted assets and place it in your resources folder.

Start it

Add it to your server.cfg.

server.cfg

ensure twilight-loadscreen

One loading screen at a time

Only one loading screen can run. If your framework ships its own, such as the loadscreen resource in the Qbox recipe, stop it with stop loadscreen after your ensures or remove it.

General Settings

All settings live in config.lua. Changes apply to players the next time they connect.

config.lua

Config.VersionCheck = true
 
Config.Logo = 'logo.png'
Config.Video = 'loading.webm'
 
Config.Colors = {
    Accent = '#6d28d9',
    Text = '#ddd6fe',
    Panel = '#000000',
    Background = 'rgba(15, 10, 25, 0.98)',
}

Option	Type	Default	Description
VersionCheck	boolean	true	Prints whether you are on the latest version at startup.
Logo	string	'logo.png'	Logo file in the media folder, or a full image URL.
Video	string	'loading.webm'	Background video file in the media folder, or a full video URL.
Colors.Accent	string	'#6d28d9'	Accent colour for the progress bar, borders, buttons, highlights and glows. Must be a hex colour.
Colors.Text	string	'#ddd6fe'	Main text colour. Any CSS colour.
Colors.Panel	string	'#000000'	Background of the boxes, buttons and info panel. Any CSS colour.
Colors.Background	string	'rgba(15, 10, 25, 0.98)'	Page colour shown behind the video. Any CSS colour.

Loading Stages

The text next to the progress bar changes as loading moves along. Each label shows until progress reaches its Percent, and the last label shows once loading is complete.

config.lua

Config.LoadingStages = {
    { Percent = 15, Label = 'Initializing...' },
    { Percent = 30, Label = 'Loading Scripts...' },
    { Percent = 45, Label = 'Loading Assets...' },
    { Percent = 60, Label = 'Loading Database...' },
    { Percent = 75, Label = 'Connecting Server...' },
    { Percent = 100, Label = 'Loading Complete!' },
}

Add, remove or rename as many stages as you like.

Tips

Tips are shown in the Tips section of the info panel.

config.lua

Config.Tips = {
    'Report rule breakers to staff',
    'Report any bugs you find in the discord',
}

Branding

Put your logo, background video and staff pictures in the media folder of the resource, then set their file names in config.lua.

twilight-loadscreen

media/
    logo.png
    loading.webm
    staff/
        pugwugg.png

Any image format works for the logo and staff pictures, including .gif.
Use .webm (VP9) for the video. FiveM cannot play .mp4 files that use H.264, which is most of them.
Players download the media folder while connecting, so keep the video small. A 720p, 30fps webm is usually 5-15MB.

Requirements

Info Panels