Ekran ladowania to pierwsza rzecz, ktora gracze widza po polaczeniu z Twoim serwerem FiveM. Domyslnie FiveM wyswietla prosty ekran, ale mozesz go calkowicie zastapic wlasnym projektem w HTML, CSS i JavaScript. Dodaj logo serwera, muzyke, pasek postepu i informacje o serwerze.
Czym jest ekran ladowania FiveM?
Ekran ladowania (loading screen) to zasob (resource), ktory FiveM wyswietla, gdy gracz laczy sie z serwerem i pobiera pliki. Technicznie jest to zwykla strona internetowa wyswietlana w wbudowanej przegladarce. Mozesz uzyc wszystkiego, co dziala na normalnej stronie: obrazow, animacji, wideo, dzwieku i elementow interaktywnych.
Struktura plikow
W folderze resources na serwerze utworz nowy folder, na przyklad loadingscreen. Struktura wyglada tak:
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(opcjonalnie)loadingscreen/logo.png(opcjonalnie)loadingscreen/music.mp3(opcjonalnie)
Starsze serwery czasem uzywaja __resource.lua zamiast fxmanifest.lua. Oba formaty dzialaja, ale fxmanifest.lua jest aktualnym standardem.
Manifest: fxmanifest.lua
Plik manifestu informuje FiveM, ktore pliki naleza do zasobu. Utworz fxmanifest.lua o nastepujacej tresci:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
Linia loadscreen 'index.html' jest kluczowa: informuje FiveM, ze ten zasob jest ekranem ladowania. Wymien wszystkie pliki potrzebne stronie w bloku files.
Tworzenie prostego ekranu ladowania
Utworz plik index.html. Oto podstawowy przyklad:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Logo serwera">
<h1>Witamy na naszym serwerze</h1>
<p>Prosimy o cierpliwosc, serwer sie laduje...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Muzyka i pasek postepu
Dodaj muzyke w tle za pomoca elementu audio w HTML:
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Utrzymuj plik muzyczny maly (maksymalnie 2 do 3 MB), aby sam ekran ladowania wczytywal sie szybko. Dla paska postepu nasluchuj w JavaScript zdarzenia FiveM, ktore raportuje postep ladowania. Dodaj nastepujacy kod do script.js:
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Wgrywanie na serwer
Wgraj caly folder loadingscreen do folderu resources na serwerze FiveM. Mozesz to zrobic przez menedzer plikow w panelu gry lub przez SFTP. W HostValues dane SFTP znajdziesz w zakladce Settings swojego serwera.
Aktywacja w server.cfg
Otworz plik server.cfg i dodaj nastepujaca linie:
ensure loadingscreen
Umiesz te linie najlepiej na gorze, przed innymi zasobami. Zrestartuj serwer, a ekran ladowania bedzie aktywny.
Wyswietlanie informacji o serwerze
Na ekranie ladowania mozesz rowniez wyswietlac informacje, takie jak nazwa serwera, adres IP, regulamin lub link do Discorda. Dodaj je po prostu jako tekst lub linki w HTML. Dzieki temu gracze od razu wiedza, gdzie sie znajduja i jak skontaktowac sie z zespolem.
Wskazowki dla klientow HostValues
- Uzyj menedzera plikow w panelu gry do szybkich zmian w plikach HTML lub CSS.
- Wieksze pliki, takie jak muzyka lub wideo, wgrywaj przez SFTP. Dane polaczenia znajdziesz w zakladce Settings.
- Przetestuj ekran ladowania, laczac sie z wlasnym serwerem. Zmiany sa widoczne natychmiast po restarcie.
Czeste problemy i rozwiazania
- Ekran ladowania sie nie pojawia: sprawdz, czy linia
ensurejest wserver.cfgi czy nazwa folderu dokladnie sie zgadza. Upewnij sie rowniez, zefxmanifest.luazawiera linieloadscreen 'index.html'. - Pliki sie nie laduja: wszystkie pliki uzywane przez strone musza byc wymienione w bloku
filesmanifestu. Nie zapomnij o obrazach i czcionkach. - Muzyka nie gra: niektore przegladarki blokuja automatyczne odtwarzanie. FiveM domyslnie zezwala na autoplay, ale sprawdz, czy sciezka i nazwa pliku sa poprawne.
- Bialy ekran: otworz
index.htmllokalnie w przegladarce, aby sprawdzic bledy HTML. Brakujacy tag lub zla sciezka do pliku CSS czesto powoduje pusty ekran.
Nie mozesz sobie poradzic? Otworz zgloszenie do supportu, nasz zespol chetnie Ci pomoze.
Wskazówka: w HostValues możesz wynająć serwer FiveM i być online w kilka minut.