Loading Screen

gsd-loadscreen · Free · Standalone - works on every framework

A clean, modern loading screen for RedM.

Features

• Real loading progress - the bar and the stage name follow the game's actual loading (Starting up → Loading game data → Loading the world → Joining the server). The bar never jumps back.
• Welcome by name - "Welcome, Arthur".
• Background - cross-fading pictures with a slow zoom in and out, or a looping video.
• Panel with news, rules and staff tabs.
• Tips that change above the loading bar.
• Music player - pause, next song and volume (every player's volume is remembered).
• Link buttons - Discord, website, store or any link, opened in the player's browser.
• Stays up until the world has really loaded: no black screen between the loading bar and spawning.
• Everything is set in one file (config.js). Fonts are built in - nothing is loaded from the internet.
• Languages: English, Hungarian, German.

Requirements

None - no framework, no database, no other resource.

Installation

1. Put the gsd-loadscreen folder into your resources folder.

2. Add it to your server.cfg:

   ensure gsd-loadscreen

3. Only one loading screen can run at a time. Turn off your old one:

   • RSG: rsg-loading starts with ensure [framework], so add stop rsg-loading after the line of gsd-loadscreen.
   • VORP: comment out the old one, for example # ensure loadingscreen.

4. Put your pictures (and music, video, logo) into gsd-loadscreen/assets/ and set them in config.js. The script comes without pictures: until you add your own, the background is black.

5. Restart the server.

Configuration (config.js)

Setting	What it does
locale	'en', 'hu' or 'de' - language of the screen's own texts
server.name, server.tagline	name of your server and the line under it
server.logo, server.logoHeight	logo file (e.g. 'assets/logo.png') and its height in px; leave the logo empty to show only the name
backgrounds	list of pictures, e.g. 'assets/backgrounds/1.jpg'; empty list and no video = black background
backgroundSeconds	time per picture
fadeSeconds	cross-fade time between two pictures
zoom	slow zoom in / out on every picture: 1.08 = 8 %, 1 = off
shuffle	random picture order
video	a video instead of the pictures, e.g. 'assets/background.webm' (muted, looped)
darkness	how much the background is darkened so the texts stay readable (0 - 1)
show.welcome / tips / percent / panel / music / links	show or hide each part of the screen
panelSide	'right' or 'left' - 'left' mirrors the whole layout
music	list of songs: { title, artist, file: 'assets/music/song.mp3' }
volume	default volume (0 - 1)
autoplay, shuffleMusic	start the music by itself, random song order
tips, tipSeconds	the tips above the loading bar and their time
tabs	order of the panel tabs: 'news', 'rules', 'staff' (leave one out to hide it)
news	{ date, title, text } entries
rules	list of rules
staff	{ name, role, highlight } - highlight: true gives the role a red label
links	buttons: { label, url, icon }, icon: 'discord', 'website', 'store' or 'link'; the first one is red
debug	true shows a small box in the bottom left corner with what the screen receives - for troubleshooting only
closeDelay	seconds the screen stays after the world has loaded
colors	accent (the red), text, muted, panel

The screen's own texts (stage names, button words) are in html/locales.js. Add a language by copying one block there.

Tips

• Pictures: .jpg or .webp, around 1920×1080, a few hundred KB each. Every player downloads them when joining, so big files slow down connecting.
• Video: use .webm. RedM's built-in browser often cannot play .mp4 (H.264). Keep it small (a few MB).
• Music: .mp3 or .ogg. Browsers may block music until the player clicks once; the play button then starts it.
• Only use pictures, music and videos you have the right to use.

FAQ

My old loading screen shows instead of this one. Two loading screens are running. Stop the old one (see Installation, step 3).

The screen stays black for a moment after connecting. The first moments after connecting belong to RedM itself (connecting and downloading the resource list). The loading screen appears right after that. Big pictures or videos make this moment longer.

The welcome line shows no name. The name is the player's RedM account name and arrives a moment after the screen appears. Set debug: true in config.js to see what the screen receives.

The music does not start. Check the file path in config.js and that the file is in assets/music/. If the browser blocked autoplay, press the play button.