Jak stworzyć ekran ładowania FiveM

Aktualny ekran ładowania FiveM jest zasobem NUI zadeklarowanym za pomocą loadscreen w fxmanifest.lua. Zachowaj pierwszą wersję lokalną i małą: jeden dokument HTML, jeden arkusz stylów i jeden skrypt. Dodaj dane o postępie lub przekazaniu serwera dopiero po prawidłowym otwarciu i zamknięciu podstawowego ekranu.

Zrób kopię zapasową istniejącego zasobu i najpierw zachowaj domyślne automatyczne wyłączenie. Zepsuty skrypt ręcznego wyłączania może sprawić, że gracze będą patrzeć na ekran ładowania po tym, jak gra będzie gotowa.

Struktura zasobu

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'
}

Nowe zasoby powinny używać fxmanifest.lua. Nie dodawaj starszego __resource.lua fallback. Dyrektywy są zdefiniowane w oficjalnych referencje manifestu zasobu.

Twórz dostępne 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>

Używaj tekstu, który pozostaje czytelny na tle, szanuje zmniejszony ruch i nie polega na automatycznym odtwarzaniu dźwięku. Kompresuj obrazy i wideo przed ich spakowaniem; każdy klient musi pobrać zasób.

Przeczytaj udokumentowane zdarzenie postępu ładowania

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)}%`;
});

Oficjalny przewodniku po ekranach ładowania Cfx.re dokumenty loadProgress i inne zdarzenia udostępnione w tej ramce NUI. Traktuj dane zdarzenia jako dane wejściowe i aktualizuj tekst za pomocą textContent, nie innerHTML.

Przekazuj tylko bezpieczne dane przekazania

Serwerowy playerConnecting handler może przekazywać małe wartości za pomocą deferrals.handover. FiveM udostępnia je jako window.nuiHandoverData. Używaj tego do wyświetlania wartości, takich jak nazwa gracza; nigdy nie dołączaj poufnych informacji, tokenów, prywatnych identyfikatorów ani danych, które przyznają uprawnienia. Wstaw wartości kontrolowane przez gracza za pomocą textContent Lub innerText.

Włącz ręczne wyłączanie tylko wtedy, gdy jest to wymagane

Jeśli ekran musi zniknąć po uruchomieniu skryptów klienta, dodaj te linie:

loadscreen_manual_shutdown 'yes'
client_script 'client.lua'

Następnie zamknij go z client.lua po faktycznym warunku gotowości klienta:

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

    ShutdownLoadingScreenNui()
end)

Przetestuj ponowne połączenia, restarty zasobów i wolnego klienta. Jeśli ekran może pozostać zablokowany, usuń loadscreen_manual_shutdown oraz skrypt klienta, aby powrócić do automatycznego zarządzania cyklem życia.

Wdróż i zweryfikuj

Dodaj ensure my_loadscreen w zamierzonym punkcie server.cfg.
Używać refresh I ensure my_loadscreen na serwerze deweloperskim.
Połącz się z czystym klientem i sprawdź konsolę F8 oraz serwera.
Przetestuj wolne połączenie, ponowne połączenie, anulowane połączenie i restart serwera.
Sprawdź typowe rozdzielczości pulpitu i słabego klienta przed zastąpieniem zasobu produkcyjnego.