Hoe maak je een FiveM laadscherm

Een huidige FiveM laadscherm is een NUI bron verklaard met loadscreen in fxmanifest.lua. Houd de eerste versie lokaal en klein: één HTML document, één stylesheet en één script. Voeg pas voortgangs- of serveroverdrachtsgegevens toe nadat het basisscherm correct is geopend en gesloten.

Maak een back-up van de bestaande bron en behoud eerst de standaard automatische afsluiting. Een defect handmatig afsluitscript kan spelers achterlaten met het laadscherm nadat het spel klaar is.

Bronstructuur

resources/[local]/my_loadscreen/
├── fxmanifest.lua
└── html/
    ├── index.html
    ├── style.css
    └── app.js

fxmanifest.lua:

fx_version 'cerulean'
game 'gta5'

author 'Your name'
description 'FiveM loading screen'
version '1.0.0'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js'
}

Nieuwe bronnen moeten gebruiken fxmanifest.lua. Voeg geen legacy toe __resource.lua fallback. De directives worden gedefinieerd in de officiële resource manifest reference.

Maak toegankelijke HTML

html/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Connecting to Example RP</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Connecting to Example RP</h1>
    <progress id="progress" value="0" max="1" aria-label="Loading progress"></progress>
    <p id="status" aria-live="polite">Loading server resources…</p>
  </main>
  <script src="app.js"></script>
</body>
</html>

Gebruik tekst die leesbaar blijft over de achtergrond, rekening houdt met verminderde beweging en niet afhankelijk is van autoplay audio. Comprimeer afbeeldingen en video's voordat je ze verpakt; elke client moet de resource downloaden.

Lees de gedocumenteerde loading progress event

html/app.js:

const progress = document.getElementById('progress');
const status = document.getElementById('status');

window.addEventListener('message', (event) => {
  if (event.data?.eventName !== 'loadProgress') return;

  const value = Number(event.data.loadFraction);
  if (!Number.isFinite(value)) return;

  const clamped = Math.max(0, Math.min(1, value));
  progress.value = clamped;
  status.textContent = `Loading ${Math.round(clamped * 100)}%`;
});

De officiële Cfx.re loading-screen guide documenten loadProgress en de andere events die aan dit NUI frame worden blootgesteld. Behandel event data als input en update tekst met textContent, niet innerHTML.

Geef alleen veilige handover data door

Een server-side playerConnecting handler kan kleine waarden doorgeven met deferrals.handover. FiveM stelt ze beschikbaar als window.nuiHandoverData. Gebruik dit voor weergawaarden zoals een spelersnaam; neem nooit geheimen, tokens, privé-identificatoren of gegevens die recht geven op een recht op. Voeg door de speler gecontroleerde waarden in met textContent of innerText.

Schakel handmatig afsluiten alleen in wanneer vereist

Als het scherm moet vervagen nadat clientscripts zijn gestart, voeg dan deze regels toe:

loadscreen_manual_shutdown 'yes'
client_script 'client.lua'

Sluit het vervolgens af vanaf client.lua na de daadwerkelijke client-klaar-conditie:

CreateThread(function()
    while not NetworkIsSessionStarted() do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

Test opnieuw verbinden, bron herstarten en een trage client. Als het scherm vast kan blijven zitten, verwijder dan loadscreen_manual_shutdown en het clientscript om terug te keren naar automatische levenscyclusafhandeling.

Implementeer en verifieer

Toevoegen ensure my_loadscreen naar het beoogde punt in server.cfg.
Gebruik refresh En ensure my_loadscreen op een ontwikkelserver.
Verbind met een schone client en inspecteer de F8 en de serverconsole.
Test een trage verbinding, herverbinding, geannuleerde verbinding en serverherstart.
Controleer veelvoorkomende desktopresoluties en een client met weinig vermogen voordat je de productieressource vervangt.