Niestandardowy ekran ładowania dla FiveM: loadscreen, fxmanifest i shutdown

Ekran ładowania to mała strona internetowa, którą gracze widzą, podczas gdy pliki serwera się pobierają. To zwykły zasób z manifestem i plikiem HTML. Ten poradnik obejmuje pliki, manifest, zamykanie ekranu samemu i trzymanie go lekkim.

#Zasób

Utwórz folder z HTML i jego zasobami:

resources/[ui]/my_loadscreen/
  fxmanifest.lua
  index.html
  css/style.css
  js/app.js
  img/background.jpg
  audio/music.ogg

#fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'

files {
    'index.html',
    'css/style.css',
    'js/app.js',
    'img/background.jpg',
    'audio/music.ogg',
}

Dwie rzeczy liczą się tutaj:

• loadscreen 'index.html' mówi stronie FiveM pokazuje.
• Każdy plik, który strona używa, włącznie z HTML'em, musi być w files. Plik, który nie jest wymieniony, zwraca 404 i ekran jest pusty lub zepsuty w tej części. Wzorzec takie jak 'img/*' jest dozwolony, aby wymienić cały folder.

Dodaj to do server.cfg:

ensure my_loadscreen

#Minimalny index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Welcome to my server</h1>
  <div id="bar"><div id="fill"></div></div>
  <audio id="music" src="audio/music.ogg" autoplay loop></audio>
  <script src="js/app.js"></script>
</body>
</html>

Użyj względnych ścieżek, jak powyżej. Strona działa w przeglądarce gry, więc możesz używać zwykłego HTML, CSS i JavaScript. Dla paska postępu, strona otrzymuje wiadomości, podczas gdy gra się ładuje:

window.addEventListener('message', (e) => {
  if (e.data.eventName === 'loadProgress') {
    document.getElementById('fill').style.width = (e.data.loadFraction * 100) + '%'
  }
})

#Tylko jeden ekran ładowania

FiveM pokazuje pojedynczy ekran ładowania. Jeśli dwa zasoby deklarują loadscreen, tylko jeden jest używany, i który może się zmienić między startami. Więc:

• Usuń lub zatrzymaj każdy inny zasób ekranu ładowania z server.cfg.
• Gdy chcesz przetestować nowy, zakomentuj starą linię zamiast uruchamiać obydwa.

#Zamykanie ekranu samemu

Domyślnie FiveM zamyka ekran ładowania, gdy sesja gry jest gotowa. Skrypt wielopostaciowy lub spawn często potrzebuje ekran otwierania dłużej, aby ukryć świat, aż postać jest wybrana. Do tego manifest wyłącza automatyczne zamknięcie:

loadscreen_manual_shutdown 'yes'

Potem skrypt klienta musi go zamknąć:

-- client.lua
CreateThread(function()
    -- wait until your own condition: player spawned, character chosen...
    while not NetworkIsPlayerActive(PlayerId()) do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

ShutdownLoadingScreenNui zamyka stronę NUI twojego ekranu ładowania. Skrypt, który obsługuje spawn, takie jak skrypt wielopostaciowy, często wołuje go, lub rodzime za nim, dla ciebie. Sprawdzić ten skrypt najpierw, potem dodaj swoje własne wołanie tylko jeśli nic innego nie robi.

Ostrzeżenie: jeśli ustawisz loadscreen_manual_shutdown 'yes' i nic nie wołuje shutdown, gracze zostają na ekranie ładowania na zawsze. Jeśli to się stanie, zobacz players stuck on the loading screen.

#Muzyka i wideo: trzymaj je lekkie

Wszystko w files jest pobierane przez każdego gracza. Ciężki ekran ładowania czyni czekanie dłuższe, co jest przeciwieństwem celu.

• Muzyka: użyj .ogg lub .mp3, kilka minut na większość, i umiarkowani bitrate. Utwór 3 MB jest ok, utwór 60 MB nie. Dodaj przycisk wyciszenia i ustaw głośność nisko w kodzie, ponieważ głośny start irytuje graczy.
• Wideo: krótkie i zapętlone, w .webm lub .mp4, mała rozdzielczość i niska bitrate. Jeszcze lepiej, użyj dobrego obrazu tła, który jest znacznie mniejszy.
• Obrazy: skompresuj je. Tło 200 do 400 KB wygląda tak samo jak tło 8 MB na większości ekranów.
• Czcionki i biblioteki: włóż je w zasób. Ładowanie ich z internetu przy przyłączeniu czyni stronę wolniejszą, i się to nie powiedzie, jeśli host jest wyłączony.

Ponieważ gracze pobierają te pliki dla każdej nowej wersji, nie zmieniaj ich często. Gdy gracz wciąż widzi starą stronę po aktualizacji, poproś go, aby wyczyścił cache FiveM.

#Opcjonalne: kursor

Jeśli chcesz, aby gracz klikał na ekranie ładowania, dla zasad lub menu, dodaj poniżej do manifestu:

loadscreen_cursor 'yes'

#Częste problemy

• Pusty ekran, brak stylu. Plik brakuje w files, lub ścieżka w HTML jest zła.
• Pokazuje się domyślny ekran. Zasób nie jest uruchomiony, lub linia loadscreen brakuje.
• Nigdy się nie zamyka. Ustawiłeś loadscreen_manual_shutdown 'yes' i żaden skrypt nie wołuje ShutdownLoadingScreenNui().
• Muzyka się nie odtwarza. Sprawdzić ścieżkę pliku i format. Przetestuj stronę w zwykłej przeglądarce najpierw.

#Lista kontrolna