Pantalla de carga personalizada para FiveM: loadscreen, fxmanifest y shutdown

Una pantalla de carga es una pequeña página web que los jugadores ven mientras se descargan los ficheros del servidor. Es un recurso normal con un manifest y un fichero HTML. Esta guía cubre los ficheros, el manifest, cerrar la pantalla tú mismo y mantenerla ligera.

#El recurso

Crea una carpeta con el HTML y sus activos:

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

#El 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',
}

Dos cosas importan aquí:

• loadscreen 'index.html' nombra la página que FiveM muestra.
• Cada fichero que la página usa, incluyendo el HTML en sí, debe estar en files. Un fichero que no está listado devuelve un 404 y la pantalla está en blanco o rota en esa parte. Un patrón como 'img/*' es permitido para listar una carpeta completa.

Añádelo a server.cfg:

ensure my_loadscreen

#Un index.html mínimo

<!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>

Usa rutas relativas, como arriba. La página se ejecuta en el navegador del juego, así que puedes usar HTML, CSS y JavaScript normales. Para una barra de progreso, la página recibe mensajes mientras el juego carga:

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

#Solo una pantalla de carga

FiveM muestra una sola pantalla de carga. Si dos recursos declaran un loadscreen, solo uno se usa, y cuál puede cambiar entre inicios. Así que:

• Elimina o detén cualquier otro recurso de pantalla de carga de server.cfg.
• Cuando quieras probar uno nuevo, comenta la línea antigua en lugar de iniciar ambas.

#Cerrando la pantalla tú mismo

Por defecto FiveM cierra la pantalla de carga cuando la sesión del juego está lista. Un script de múltiples personajes o de spawn a menudo necesita que la pantalla permanezca abierta más tiempo, para ocultar el mundo hasta que se elige el personaje. Para eso, el manifest desactiva el cierre automático:

loadscreen_manual_shutdown 'yes'

Luego un script de cliente debe cerrarlo:

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

    ShutdownLoadingScreenNui()
end)

ShutdownLoadingScreenNui cierra la página NUI de tu pantalla de carga. Un script que maneja el spawn, como un script de múltiples personajes, a menudo lo llama, o los natives detrás de él, por ti. Comprueba ese script primero, luego añade tu propia llamada solo si nada más lo hace.

Cuidado: si estableces loadscreen_manual_shutdown 'yes' y nada llama al shutdown, los jugadores se quedan en la pantalla de carga para siempre. Si eso ocurre, ver players stuck on the loading screen.

#Música y video: mantenlos ligeros

Todo en files es descargado por cada jugador. Una pantalla de carga pesada hace la espera más larga, que es lo opuesto del objetivo.

• Música: usa .ogg o .mp3, unos pocos minutos como máximo, y una bitrate moderada. Una pista de 3 MB está bien, una de 60 MB no. Añade un botón de silencio, y establece el volumen bajo en el código, ya que un inicio ruidoso molesta a los jugadores.
• Video: corto y en bucle, en .webm o .mp4, resolución pequeña y bitrate baja. Mejor aún, usa una buena imagen de fondo, que es mucho más pequeña.
• Imágenes: comprime las. Un fondo de 200 a 400 KB se ve igual que uno de 8 MB en la mayoría de pantallas.
• Fuentes y librerías: pon las en el recurso. Cargarlas de Internet al unirse hace la página más lenta, y falla si el anfitrión está caído.

Ya que los jugadores descargan estos ficheros para cada nueva versión, no los cambies a menudo. Cuando un jugador aún ve la página antigua después de una actualización, pídele que limpie la caché de FiveM.

#Opcional: un cursor

Si quieres que el jugador haga clic en la pantalla de carga, para reglas o un menú, añade lo siguiente al manifest:

loadscreen_cursor 'yes'

#Problemas comunes

• Pantalla en blanco, sin estilos. Un fichero falta de files, o una ruta en el HTML es incorrecta.
• La pantalla por defecto se muestra. El recurso no se ha iniciado, o falta la línea loadscreen.
• Nunca se cierra. Estableciste loadscreen_manual_shutdown 'yes' y ningún script llama a ShutdownLoadingScreenNui().
• La música no se reproduce. Comprueba la ruta del fichero y el formato. Prueba la página en un navegador normal primero.

#Lista de verificación