Domyślny ekran ładowania FiveM jest funkcjonalny, ale nudny. Własny ekran ładowania natychmiast nadaje Twojemu serwerowi profesjonalny wygląd. Gracze widzą go jako pierwsze podczas łączenia, więc to Twoja szansa na zrobienie dobrego wrażenia. W tym artykule pokażemy, jak go zbudować i zainstalować.
Jak działa ekran ładowania FiveM?
Ekran ładowania to prosta strona internetowa (HTML, CSS, JavaScript), którą FiveM wyświetla podczas ładowania zasobów serwera. Jest to zasób na serwerze ze specjalnym typem: loadscreen. FiveM wstrzykuje stronę do wbudowanej przeglądarki.
Tworzenie ekranu ładowania
Utwórz nowy folder w katalogu resources/, na przykład [loadscreen]/moj-loadscreen. Potrzebujesz dwóch plików:
fxmanifest.lua:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'logo.png'
}
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server Logo">
<h1>Mój serwer RP</h1>
<p>Ładowanie...</p>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</div>
<script>
var count = 0, total = 1;
window.addEventListener('message', function(e) {
if (e.data.eventName === 'loadProgress') {
count = e.data.loadFraction;
document.getElementById('progress').style.width = Math.floor(count * 100) + '%';
}
});
</script>
</body>
</html>
Stylizacja
Użyj CSS, aby nadać kształt ekranowi ładowania. Popularne elementy:
- Obraz tła lub wideo miasta
- Logo serwera wycentrowane
- Pasek postępu pokazujący stan ładowania
- Zasady serwera lub porady jako przewijany tekst
- Linki do mediów społecznościowych (Discord, strona internetowa)
Utrzymuj mały rozmiar plików. Duże obrazy spowalniają ładowanie samego ekranu ładowania. Używaj WebP dla obrazów i kompresuj wideo.
Instalacja na serwerze
- Wgraj folder do
resources/[loadscreen]/. - Dodaj w
server.cfg:ensure moj-loadscreen. - Zrestartuj serwer.
Ekran ładowania pojawi się automatycznie, gdy gracz się połączy.
Dodawanie muzyki
Dodaj plik audio do zasobu i odtwórz go w JavaScript:
var audio = new Audio('music.mp3');
audio.volume = 0.3;
audio.loop = true;
audio.play();
Utrzymuj niską głośność (0.2 do 0.4) i wybierz spokojną muzykę w tle. Głośna muzyka podczas łączenia odstraszy graczy.
Gotowe ekrany ładowania
Nie chcesz budować samodzielnie? Dostępne są darmowe i płatne ekrany ładowania:
- Forum CFX releases: darmowe ekrany ładowania od społeczności.
- Tebex: płatne premium ekrany ładowania z zaawansowanymi funkcjami.
Dostosuj kolory, logo i tekst do swojego serwera.
Czy mogę użyć wideo jako tła?
Tak. Użyj elementu HTML5 <video> z atrybutami autoplay, muted i loop. Utrzymuj wideo poniżej 10 MB i używaj formatu MP4 z kodowaniem H.264 dla najlepszej kompatybilności.
Dlaczego nie widzę mojego ekranu ładowania?
Sprawdź: czy zasób jest w server.cfg z ensure? Czy ścieżka w fxmanifest.lua jest poprawna? Czy loadscreen jest poprawnie napisany? Sprawdź konsolę F8 w poszukiwaniu błędów.
Czy mogę wyświetlić postęp ładowania?
Tak. FiveM wysyła eventy loadProgress do strony. Użyj powyższego przykładu JavaScript, aby wypełnić pasek postępu na podstawie rzeczywistego stanu ładowania.
Skonfiguruj własny ekran ładowania na serwerze FiveM w HostValues z pełnym dostępem do plików.
