$ USD
  • $ USD
  • € EUR
  • £ GBP
Pantalla de carga de FiveM

Cómo crear una pantalla de carga personalizada de FiveM

Bien, revisemos cómo crear un punto de entrada único y atractivo para tus jugadores.

Vamos a construir un Pantalla de carga personalizada de FiveM Desde cero.

¿Qué es un recurso de pantalla de carga?

Una pantalla de carga personalizada es a menudo la primera interacción que tiene un jugador con su servidor FiveM específico.

Es una oportunidad fantástica para establecer la marca de tu servidor, transmitir información importante y crear una atmósfera detallada desde el principio.

Olvídate de las imágenes genéricas de FiveM; queremos que los jugadores sientan su la identidad del servidor en el momento en que comienzan a conectarse.

Aquí en FiveMX, creemos en empoderar a los propietarios de servidores con las herramientas y el conocimiento para crear configuraciones de rol realmente específicas.

Esta guía completa te guiará a través de cada paso, desde la estructura HTML básica hasta el estilo con CSS, la adición de interactividad con JavaScript y, finalmente, la integración documentada en tu servidor FiveM usando Lua.

Incluso cubriremos cómo ocultar esa animación de puente FiveM predeterminada para una transición más limpia.

Comencemos a hacer que tu servidor diferencie la configuración.

¿Por qué molestarse con una pantalla de carga FiveM personalizada?

Quizás te preguntes si vale la pena el esfuerzo.

¡Absolutamente!

Piense en ello como el vestíbulo o la entrada a su mundo virtual.

Primeras impresiones: Establece el tono y la profesionalidad de su servidor de inmediato.

Herrada: Refuerza el nombre, el logotipo y el tema general de tu servidor.

Visualización de información: Comparte información crucial como reglas, enlaces de Discord, URL de sitios web o actualizaciones del estado del servidor. antes Los jugadores incluso aparecen.

Compromiso: Utilice música, mensajes dinámicos o incluso vídeos para mantener a los jugadores interesados durante el proceso de carga, reduciendo los tiempos de espera percibidos.

Unicidad: Diferencie su servidor de los innumerables otros utilizando pantallas predeterminadas o genéricas.

Una pantalla de carga bien diseñada demuestra que te preocupas por los detalles y la experiencia del jugador.

Prerrequisitos

Antes de comenzar a codificar, asegurémonos de que tienes las herramientas necesarias y los conocimientos básicos:

  1. Editor de texto: Necesitarás un programa para escribir tu código.
    • Visual Studio Code (VS Code): gratuito, potente y muy recomendado, con muchas extensiones útiles.
    • Sublime Text: Otra opción popular y ligera.
    • Notepad++: una opción sólida y gratuita para los usuarios de Windows.
    • Evitar utilizando el Bloc de notas básico o TextEdit, ya que carecen de funciones útiles para la codificación (como el resaltado de sintaxis).
  2. Conocimientos básicos de desarrollo web (útiles, no esenciales):
    • HTML (lenguaje de marcado de hipertexto): Comprende la estructura básica de una página web (etiquetas como <div>, <img>, <p>Proporcionaremos el código, pero conocer los conceptos básicos ayuda.
    • CSS (hojas de estilo en cascada): Sabe cómo aplicar estilos a elementos HTML (colores, tamaños, posiciones). Le guiaremos, pero se valorará la familiaridad.
    • JavaScript (JS): Comprende los conceptos básicos de programación para añadir interactividad. Al principio, mantendremos el código JavaScript relativamente simple.
  3. Acceso al servidor FiveM: Necesita acceder a los archivos de su servidor, específicamente a los resources carpeta, para instalar la pantalla de carga.
  4. Software de edición de imágenes (opcional): Herramientas como Photoshop, GIMP (gratis) o incluso Canva pueden ser útiles para crear o editar logotipos e imágenes de fondo.
  5. Paciencia y voluntad de aprender: ¡La depuración y los ajustes son parte del proceso!

No te preocupes si no eres un experto en desarrollo web.

Explicaremos cada paso claramente y proporcionaremos fragmentos de código que se pueden copiar y pegar.

Cómo funcionan las pantallas de carga de FiveM (NUI)

FiveM utiliza un sistema llamado NUI (Interfaz de usuario nativa) para mostrar páginas web adentro el juego.

Básicamente, tu pantalla de carga personalizada es solo una página web estándar (construida con HTML, CSS y JavaScript) que el sistema NUI de FiveM procesa mientras los recursos del juego se cargan en segundo plano.

Esto significa que podemos aprovechar las tecnologías web estándar para crear experiencias visualmente ricas e interactivas.

El centro los componentes son:

  • index.html: El archivo principal que define la estructura y el contenido de la pantalla de carga.
  • style.css: El archivo que define la apariencia visual (diseño, colores, fuentes, etc.).
  • script.js: El archivo que agrega comportamiento dinámico (como cambiar texto, animaciones, reproducción de música).
  • fxmanifest.lua (o __resource.lua): Un archivo FiveM especial que le dice al servidor que este es un recurso, especifica que es una pantalla de carga y enumera todos los archivos necesarios.

Ahora, comencemos a construir.

Paso 1: Creación de la estructura HTML básica (index.html)

Primero, crea una nueva carpeta para el recurso de la pantalla de carga. Llamémosla my-loading-screen.

Dentro de esta carpeta, crea un archivo llamado index.html.

Este archivo contendrá el esqueleto de nuestra pantalla de carga.

Necesitamos contenedores para diferentes elementos: el fondo, un logotipo, una indicación del progreso de carga y áreas para mensajes de texto.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Server Name - Loading...</title>
 <!-- Link to your CSS file -->
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <!-- Main container for the entire screen -->
 <div class="loading-container">

 <!-- Background Element (handled by CSS) -->
 <div class="background"></div>

 <!-- Content Wrapper -->
 <div class="content">

 <!-- Logo Area -->
 <div class="logo-area">
 <img src="images/logo.png" alt="Server Logo" id="server-logo">
 <!-- You can replace img with text if you prefer -->
 <!-- <h1>My Awesome Server</h1> -->
 </div>

 <!-- Message Area -->
 <div class="message-area">
 <p id="loading-message">Initializing connection...</p>
 <p id="dynamic-message">Welcome! Loading server assets...</p>
 </div>

 <!-- Progress Bar Area -->
 <div class="progress-bar-container">
 <div class="progress-bar">
 <div class="progress-bar-inner" id="progress-bar-inner"></div>
 </div>
 <p id="progress-text">0%</p>
 </div>

 <!-- Music Control (Optional) -->
 <div class="music-control">
 <button id="play-pause-button">Pause Music</button>
 <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.5">
 </div>

 </div> <!-- End Content Wrapper -->

 </div> <!-- End Loading Container -->

 <!-- Link to your JavaScript file (place at the end of body) -->
 <script src="script.js"></script>
</body>
</html>

Explicación:

  • <!DOCTYPE html> & <html>: Texto estándar HTML5.
  • <head>: Contiene metainformación y enlaces a recursos externos.
    • charset="UTF-8":Garantiza la correcta visualización de los caracteres.
    • viewport:Importante para el diseño responsivo (adaptarse a diferentes tamaños de pantalla), aunque menos crítico para las pantallas de carga de juegos de resolución fija.
    • <title>:Establece el texto que puede aparecer en una pestaña del navegador (menos relevante en FiveM NUI, pero es una buena práctica).
    • <link rel="stylesheet" href="style.css">:Conecta nuestro HTML a nuestro archivo CSS para darle estilo.
  • <body>: Contiene el contenido visible de la página.
  • <div class="loading-container">: El contenedor principal para todo. Lo usaremos para el diseño general.
  • <div class="background">: Un div vacío que diseñaremos con CSS para contener nuestra imagen de fondo o video.
  • <div class="content">: Envuelve el contenido real (logotipo, texto, barra de progreso) para ayudar con el centrado y el posicionamiento.
  • <div class="logo-area">: Un contenedor para el logotipo de su servidor.
    • <img src="images/logo.png" ...>:Una etiqueta de imagen. Importante: Necesitarás crear un images carpeta dentro my-loading-screen y coloca tu logo.png Archivo allí. ¡Asegúrate de que el nombre del archivo coincida!
  • <div class="message-area">: Contiene mensajes de texto.
    • Damos identificadores a los párrafos (loading-message, dynamic-message) para que podamos orientarlos fácilmente con JavaScript más adelante.
  • <div class="progress-bar-container">: Contiene los elementos de la barra de progreso.
    • .progress-bar:El contenedor exterior de la barra.
    • .progress-bar-innerLa parte interior que se llenará. Le damos un ID (progress-bar-inner) para el control de JS.
    • <p id="progress-text">:Muestra el texto de porcentaje, también con un ID.
  • <div class="music-control">: (Opcional) Controles básicos para música de fondo. Los ID permiten la interacción con JS.
  • <script src="script.js">: Vincula nuestro HTML a nuestro archivo JavaScript. Lo coloca al final del... <body> garantiza que los elementos HTML existan antes de que el script intente interactuar con ellos.

Guarde este archivo como index.html En tu my-loading-screen carpeta. Crear una images subcarpeta y agregar un marcador de posición logo.png por ahora.

Paso 2: Dar estilo a la pantalla de carga (CSS – style.css)

¡Ahora, hagámoslo lucir bien!

Crea un archivo llamado style.css en el mismo my-loading-screen carpeta.

Este archivo controla la presentación visual.

/* Basic Reset & Body Styling */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box; /* Makes width/height include padding and border */
}

body, html {
 height: 100%;
 width: 100%;
 overflow: hidden; /* Hide scrollbars */
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Example font */
 color: #ffffff; /* Default text color (white) */
}

/* Main Container */
.loading-container {
 position: relative; /* Needed for absolute positioning of children */
 width: 100%;
 height: 100%;
 display: flex; /* Use flexbox for centering content */
 justify-content: center;
 align-items: center;
 text-align: center;
}

/* Background Styling */
.background {
 position: absolute; /* Take up full screen behind content */
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url('images/background.jpg'); /* CHANGE THIS to your image */
 background-size: cover; /* Scale image to cover the container */
 background-position: center center; /* Center the image */
 background-repeat: no-repeat;
 z-index: -1; /* Place it behind other content */
 filter: brightness(0.6); /* Optional: Darken the background slightly */
}

/* --- OR Use a Solid Color Background --- */
/*
.background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #1a1a1a;
 z-index: -1;
}
*/

/* Content Wrapper */
.content {
 z-index: 1; /* Ensure content is above the background */
 padding: 20px;
 background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
 border-radius: 10px;
 max-width: 600px; /* Limit content width */
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Logo Area */
.logo-area {
 margin-bottom: 30px;
}

#server-logo {
 max-width: 200px; /* Adjust max logo width */
 height: auto; /* Maintain aspect ratio */
 display: block; /* Allows margin auto to center */
 margin-left: auto;
 margin-right: auto;
}

/* Message Area */
.message-area {
 margin-bottom: 30px;
}

#loading-message {
 font-size: 1.2em;
 font-weight: bold;
 margin-bottom: 10px;
 color: #cccccc;
}

#dynamic-message {
 font-size: 1em;
 min-height: 40px; /* Prevent layout shifts when message changes */
}

/* Progress Bar Area */
.progress-bar-container {
 width: 80%; /* Width relative to the content container */
 margin: 0 auto; /* Center the container */
 margin-bottom: 20px;
}

.progress-bar {
 width: 100%;
 background-color: #555555; /* Dark grey background */
 border-radius: 5px;
 overflow: hidden; /* Hide overflowing inner bar */
 height: 25px; /* Bar height */
 border: 1px solid #333;
}

.progress-bar-inner {
 height: 100%;
 width: 0%; /* Start at 0% width */
 background-color: #4CAF50; /* Green progress color */
 border-radius: 5px 0 0 5px; /* Keep left radius */
 transition: width 0.5s ease-in-out; /* Smooth transition for width changes */
 text-align: center;
 line-height: 25px; /* Vertically center text if needed inside */
 color: white;
}

#progress-text {
 margin-top: 5px;
 font-size: 0.9em;
}


/* Music Control (Optional) */
.music-control {
 margin-top: 25px;
 display: flex; /* Arrange button and slider side-by-side */
 justify-content: center;
 align-items: center;
 gap: 15px; /* Space between elements */
}

#play-pause-button {
 padding: 8px 15px;
 background-color: #4CAF50;
 color: white;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 0.9em;
 transition: background-color 0.3s ease;
}

#play-pause-button:hover {
 background-color: #45a049;
}

#volume-slider {
 cursor: pointer;
 width: 150px; /* Adjust slider width */
}

/* Add some basic responsiveness if needed, though less critical in NUI */
@media (max-width: 600px) {
 .content {
 max-width: 90%;
 }
 .progress-bar-container {
 width: 90%;
 }
}

Explicación:

  • * { box-sizing: border-box; }:Un reinicio común para hacer que los elementos de tamaño sean más predecibles.
  • body, html: Establece la altura y el ancho base y oculta las posibles barras de desplazamiento. Establece una fuente y un color de texto predeterminados.
  • .loading-container:Usos display: flex para centrar fácilmente el .content div ambos horizontalmente (justify-content) y verticalmente (align-items). position: relative es crucial para posicionar el fondo absoluto.
  • .background:
    • position: absolute: Saca el elemento del flujo normal y lo posiciona en relación con el ancestro posicionado más cercano (.loading-container).
    • top: 0; left: 0; width: 100%; height: 100%;:Hace que cubra todo el recipiente.
    • background-image: url(...): De manera crucial, el cambio 'images/background.jpg' a la ruta real de su imagen de fondo. Asegúrese de que la imagen esté en el images carpeta.
    • background-size: cover:Escala la imagen de forma agradable.
    • z-index: -1:Lo empuja detrás de otros elementos.
    • filter: brightness(0.6)Efecto opcional para oscurecer el fondo y hacer el texto más legible. Ajusta o elimina según sea necesario.
    • Alternativa: Una sección comentada muestra cómo utilizar un color de fondo sólido simple en lugar de una imagen.
  • .content:
    • z-index: 1:Asegura que quede encima del fondo.
    • background-color: rgba(0, 0, 0, 0.5): Un fondo negro semitransparente para el área de contenido en sí, ayudando a que el texto diferencie la configuración sobre fondos complejos. Ajusta el último valor (alfa) de 0 (completamente transparente) a 1 (completamente opaco).
    • border-radius, max-width, box-shadow:Añade un poco de brillo visual.
  • .logo-area, #server-logo:Estiliza el contenedor del logotipo y la imagen del logotipo en sí (estableciendo ancho máximo, centrado).
  • .message-area, #loading-message, #dynamic-message:Estiliza los elementos de texto (tamaño de fuente, color, márgenes). min-height Evita que el diseño salte cuando el contenido del mensaje dinámico cambia de longitud.
  • .progress-bar-container, .progress-bar, .progress-bar-inner:Estiliza la barra de progreso.
    • El contenedor exterior (.progress-bar) establece el color y la forma del fondo.
    • La barra interior (.progress-bar-inner) es lo que crece. Empieza en width: 0%Cambiaremos este ancho usando JavaScript. transition: width 0.5s ease-in-out; Hace que el cambio de ancho sea suave.
  • .music-control, #play-pause-button, #volume-slider:Diseña los controles de música opcionales usando flexbox para el diseño y agregando estilo básico a los botones.
  • @media (max-width: 600px)Un ejemplo sencillo de consulta de medios para mejorar la capacidad de respuesta. Ajusta el ancho del contenido en pantallas más pequeñas (menos crítico para FiveM, pero recomendable).

Guardar esto como style.cssRecuerde crear el images carpeta y agregue su background.jpg (o como lo hayas llamado) y logo.png.

En este punto, técnicamente podrías abrir el index.html ¡Archive directamente en su navegador web (como Chrome o Firefox) para obtener una vista previa de su apariencia estática!

Paso 3: Agregar interactividad y contenido dinámico (JavaScript – script.js)

Ahora vamos a darle algo de vida a nuestra página estática usando JavaScript.

Crea un archivo llamado script.js En tu my-loading-screen carpeta.

Añadiremos funcionalidad para:

  1. Simulación del progreso de carga.
  2. Visualización de mensajes dinámicos/cambiantes.
  3. Agregar música de fondo con controles.
  4. Manejo de eventos NUI de FiveM (la forma correcta de obtener el progreso de carga).
// Wait for the DOM (Document Object Model - the HTML structure) to be fully loaded
document.addEventListener('DOMContentLoaded', () => {

 // --- Get References to HTML Elements ---
 const progressBarInner = document.getElementById('progress-bar-inner');
 const progressText = document.getElementById('progress-text');
 const dynamicMessage = document.getElementById('dynamic-message');
 const loadingMessage = document.getElementById('loading-message'); // To update stages

 // --- Configuration ---
 const messages = [
 "Loading core systems...",
 "Establishing network connection...",
 "Downloading latest server assets...",
 "Syncing player data...",
 "Parsing map details...",
 "Almost there, preparing the world...",
 "Tip: Visit our Discord at discord.gg/yourinvite",
 "Tip: Check the rules on our website yourwebsite.com",
 "Welcome to Our Awesome Server!"
 ];
 let currentMessageIndex = 0;
 const messageChangeInterval = 5000; // Change message every 5 seconds (5000ms)

 // Background Music (Optional)
 const backgroundMusic = new Audio('audio/background_music.ogg'); // IMPORTANT: Use .ogg for FiveM compatibility
 backgroundMusic.volume = 0.5; // Set initial volume (0.0 to 1.0)
 backgroundMusic.loop = true; // Loop the music

 const playPauseButton = document.getElementById('play-pause-button');
 const volumeSlider = document.getElementById('volume-slider');
 let isPlaying = false; // Track music state

 // --- Functions ---

 // Function to update the progress bar and text
 function updateProgress(percentage) {
 percentage = Math.min(100, Math.max(0, percentage)); // Clamp between 0 and 100
 progressBarInner.style.width = `${percentage}%`;
 progressText.textContent = `${Math.round(percentage)}%`;
 }

 // Function to change the dynamic message
 function changeDynamicMessage() {
 dynamicMessage.style.opacity = 0; // Fade out
 setTimeout(() => {
 currentMessageIndex = (currentMessageIndex + 1) % messages.length;
 dynamicMessage.textContent = messages[currentMessageIndex];
 dynamicMessage.style.opacity = 1; // Fade in
 }, 500); // Wait for fade out transition (0.5s)
 }

 // Function to attempt playing music (handles browser autoplay restrictions)
 function playMusic() {
 backgroundMusic.play().then(() => {
 isPlaying = true;
 playPauseButton.textContent = 'Pause Music';
 console.log("Music started playing.");
 }).catch(error => {
 // Autoplay was prevented, common in browsers until user interaction
 console.log("Music autoplay failed. Waiting for user interaction.", error);
 isPlaying = false;
 playPauseButton.textContent = 'Play Music';
 // We might need a click listener on the body or button to initiate playback
 });
 }

 // --- Initial Setup ---

 // Set initial loading message
 loadingMessage.textContent = "Initializing...";
 updateProgress(0); // Start progress at 0%

 // Start changing dynamic messages
 dynamicMessage.textContent = messages[0]; // Show the first message immediately
 setInterval(changeDynamicMessage, messageChangeInterval);

 // Try to play music automatically
 playMusic(); // Attempt background music playback

 // --- Event Listeners ---

 // Music Controls Event Listeners
 playPauseButton.addEventListener('click', () => {
 if (isPlaying) {
 backgroundMusic.pause();
 isPlaying = false;
 playPauseButton.textContent = 'Play Music';
 } else {
 // Important: Re-trigger play function which handles potential initial failures
 playMusic();
 }
 });

 volumeSlider.addEventListener('input', (event) => {
 backgroundMusic.volume = event.target.value;
 });


 // --- FiveM NUI Event Handling ---
 // This is the CORE of interacting with the FiveM loading process

 /*
 FiveM NUI messages are sent via JavaScript events.
 We listen for 'message' events on the window object.
 The event 'data' property contains the information sent from Lua.
 */
 window.addEventListener('message', function(event) {
 const data = event.data;

 // Check for the specific NUI message type used by FiveM for loading progress
 // The 'loadstatus' event provides overall progress text.
 if (data.type === 'loadstatus') {
 if(data.status) {
 loadingMessage.textContent = data.status;
 }
 }
 // The 'progress' event provides detailed component progress (use this for the bar)
 else if (data.eventName === 'progress') {
 // data.loadFraction gives a value between 0.0 and 1.0
 const progressPercentage = data.loadFraction * 100;
 updateProgress(progressPercentage);
 }
 // A custom event we might send from Lua when loading is almost done
 else if (data.type === 'loadingComplete') {
 updateProgress(100);
 loadingMessage.textContent = "Loading Complete! Joining server...";
 // You could add fade-out effects here before the screen disappears
 }
 });


 // --- Fallback/Simulated Progress (If NUI events aren't received or for testing) ---
 // Comment this out or remove it if you rely solely on FiveM NUI events
 /*
 let simulatedProgress = 0;
 const interval = setInterval(() => {
 simulatedProgress += Math.random() * 5; // Increment by a random small amount
 if (simulatedProgress >= 100) {
 simulatedProgress = 100;
 clearInterval(interval); // Stop the simulation when 100% is reached
 loadingMessage.textContent = "Loading Complete! Joining server..."; // Update final message
 }
 updateProgress(simulatedProgress);
 }, 300); // Update every 300ms
 */

 // Add a small fade-in effect for the whole screen on load
 document.body.style.opacity = 0;
 setTimeout(() => {
 document.body.style.transition = 'opacity 1s ease-in-out';
 document.body.style.opacity = 1;
 }, 100); // Start fade-in slightly after load

}); // End DOMContentLoaded

Explicación:

  1. document.addEventListener('DOMContentLoaded', () => { ... });:Esto garantiza que el código JavaScript solo se ejecute después Toda la estructura de la página HTML se ha cargado y está lista para ser manipulada.
  2. Referencias de elementos: Obtenemos referencias a los elementos HTML con los que necesitamos interactuar usando document.getElementById()Por eso es importante tener identificadores únicos en el HTML.
  3. Configuración:
    • messagesUna matriz que contiene las diferentes cadenas de texto que quieres recorrer en el área de mensajes dinámicos. ¡Personalízalas!
    • currentMessageIndex:Realiza un seguimiento de qué mensaje se muestra actualmente.
    • messageChangeInterval:Establece la frecuencia (en milisegundos) con la que cambia el mensaje.
  4. Configuración de música de fondo:
    • new Audio('audio/background_music.ogg'):Crea un objeto de audio HTML. De manera crucial:
      • Crear un audio carpeta dentro my-loading-screen.
      • Coloque allí su archivo de música de fondo.
      • Utilice el .ogg ¡formato! MP3 y otros formatos pueden ser poco fiables o no funcionar en absoluto en FiveM NUI. Puedes encontrar fácilmente convertidores en línea para convertir MP3 a OGG.
    • backgroundMusic.volume:Establece el volumen inicial (0.0 = silencioso, 1.0 = completo).
    • backgroundMusic.loop = true;:Hace que la música se repita.
    • También encontramos referencias al botón de reproducción/pausa y al control deslizante de volumen.
  5. updateProgress(percentage) función: Toma un número (0-100), lo fija para garantizar que esté dentro de los límites y lo actualiza. width estilo del elemento de la barra de progreso interna y cambia el contenido de texto de la visualización del porcentaje.
  6. changeDynamicMessage() función:
    • Usos setInterval en la fase de configuración para llamar a esta función repetidamente.
    • Calcula el índice del siguiente mensaje, repitiendo el proceso usando el operador módulo (%).
    • Actualiza el textContent del dynamicMessage elemento.
    • Prima: Incluye un efecto de entrada y salida gradual simple mediante opacidad CSS y setTimeout Para una transición más suave. Añadir transition: opacity 0.5s ease-in-out; hacia .message-area p selector en su CSS para que esto funcione visualmente.
  7. playMusic() función: Intentos de reproducir la música usando backgroundMusic.play(). El .then() maneja la reproducción exitosa, mientras .catch() Gestiona errores que suelen ocurrir debido a restricciones de reproducción automática del navegador (que requieren la interacción del usuario). Actualiza el texto del botón según corresponda.
  8. Configuración inicial: Establece el texto inicial, restablece el progreso a 0, muestra el primer mensaje dinámico e inicia el temporizador de intervalo para los cambios de mensaje. También llama playMusic() para intentar iniciar el audio.
  9. Oyentes de eventos (controles de música):
    • Escucha los clics en el playPauseButtonSi se está reproduciendo música, la pausa; de lo contrario, la llama. playMusic() nuevamente (importante para manejar casos donde la reproducción automática inicial falló).
    • Escucha por input eventos en el volumeSlider (se dispara continuamente a medida que se mueve el control deslizante) y actualiza el backgroundMusic.volume.
  10. Manejo de eventos de FiveM NUI (window.addEventListener('message', ...)):
    • Esta es la parte más importante para real integración. FiveM envía mensajes a la ventana NUI (su página HTML) utilizando el postMessage API.
    • Escuchamos estos mensajes en el window objeto.
    • event.data contiene la carga útil enviada desde Los scripts Lua de FiveM.
    • Nosotros comprobamos event.data.type o event.data.eventName (diferentes versiones/contextos de FiveM pueden usar estructuras ligeramente diferentes) para ver qué tipo de mensaje es.
    • 'loadstatus': Suele contener texto de estado general (p. ej., "Cargando mapa", "Inicializando scripts"). Actualizamos loadingMessage párrafo.
    • 'progress':Esto normalmente se usa para el progreso de la barra de carga real. data.loadFraction Generalmente proporciona un valor de 0,0 a 1,0, que convertimos a un porcentaje y alimentamos a nuestro updateProgress función.
    • 'loadingComplete':Este no es un evento FiveM estándar, sino un ejemplo de uno costumbre mensaje para ti podría enviar desde un script Lua (que discutiremos más adelante) para señalar el final de la carga, lo que le permite establecer el progreso en 100% y mostrar un mensaje final.
  11. Retroceso/Progreso simulado:
    • La sección comentada proporciona una simulación básica del progreso. Utiliza setInterval para incrementar la barra de progreso en una pequeña cantidad aleatoria periódicamente.
    • Esto es útil para probar visualmente la pantalla de carga en un navegador. sin ejecutando FiveM.
    • Debes ELIMINAR o COMENTAR este código de simulación cuando uses los eventos NUI de FiveM realesDe lo contrario, es posible que veas actualizaciones de progreso conflictivas.
  12. Efecto de fundido de entrada: Agrega un desvanecimiento sutil para todo el cuerpo cuando se carga la página para una apariencia más suave.

Guarde este archivo como script.jsRecuerde crear el audio carpeta y agregue su .ogg archivo de música.

Paso 4: Integración con FiveM (Lua – fxmanifest.lua)

Ahora necesitamos informar al servidor FiveM sobre nuestro nuevo recurso e identificarlo como una pantalla de carga.

Crea un archivo llamado fxmanifest.lua en la raíz de tu my-loading-screen carpeta.

-- Resource Manifest
fx_version 'cerulean' -- Use 'cerulean' or a newer version like 'adamant' or 'bodacious'
game 'gta5'

author 'Your Name or Server Name'
description 'Custom Loading Screen for My Awesome Server'
version '1.0.0'

-- Specify this resource as the loading screen
loadscreen 'index.html'

-- List all files needed by the UI (HTML, CSS, JS, images, audio, fonts, etc.)
files {
 'index.html',
 'style.css',
 'script.js',
 'images/logo.png',
 'images/background.jpg', -- Add all your images here
 'audio/background_music.ogg' -- Add all your audio files here
 -- 'fonts/mycustomfont.woff2' -- Add custom fonts if you use any
}

-- Optional: Client script for advanced control (like hiding default elements)
client_script 'client.lua'

-- Optional: If your loading screen needs to fetch data FROM the server (more advanced)
-- server_script 'server.lua'

-- Optional: Define NUI settings if needed (rarely required for basic loading screens)
-- nui_settings {
-- ['scriptFramePolicy'] = "frame-ancestors 'self' https://cfx.re" -- Example security policy
-- }

Explicación:

  • fx_version 'cerulean'Define la versión del manifiesto. «Cerulean» es una versión base común, pero existen versiones más recientes como «Adamant» o «Bodacious». Utilícela a menos que necesite funciones de versiones más recientes.
  • game 'gta5': Especifica el juego para el cual es este recurso.
  • author, description, versionMetadatos sobre su recurso. Complete estos campos según corresponda.
  • loadscreen 'index.html': Ésta es la línea crucial. Le dice a FiveM que use el archivo HTML especificado (index.html en nuestro caso) como pantalla de carga del juego.
  • files { ... }: ¡Muy importante! Debes enumerar cada archivo individual Que su página HTML necesita cargar, en relación con la carpeta raíz del recurso. Esto incluye:
    • El archivo HTML en sí (index.html)
    • El archivo CSS (style.css)
    • El archivo JavaScript (script.js)
    • Todas las imágenes (por ejemplo, images/logo.png, images/background.jpg)
    • Todos los archivos de audio (por ejemplo, audio/background_music.ogg)
    • Cualquier fuente personalizada que puedas tener vinculada en tu CSS.
    • ¡Si olvidas un archivo aquí, no se cargará en el juego!
  • client_script 'client.lua'Incluimos esto porque crearemos un pequeño script de cliente en el próximo paso para manejar el ocultamiento de los elementos de carga predeterminados de FiveM.
  • server_script 'server.lua':Solo es necesario para escenarios avanzados donde la pantalla de carga debe comunicarse con el servidor (por ejemplo, obtener recuentos dinámicos de jugadores) antes Se carga el entorno principal del juego, lo cual es complejo. No lo usaremos para una configuración básica.
  • nui_settingsPermite configurar políticas de seguridad específicas para el marco NUI. Generalmente no es necesario para pantallas de carga estándar, a menos que se incruste contenido externo o se gestionen interacciones complejas.

Guarde este archivo como fxmanifest.lua.

(Nota: Los servidores más antiguos pueden usar __resource.lua en lugar de fxmanifest.luaLa sintaxis es muy similar, pero fx_version Generalmente se omite o es diferente, y las directivas pueden variar ligeramente. fxmanifest.lua (es el estándar moderno).

Paso 5: Deshabilitar la animación predeterminada del puente FiveM (Lua – client.lua)

De forma predeterminada, FiveM muestra su propio texto de carga y, a veces, una animación de carga de "puente". antes Tu pantalla personalizada toma el control por completo. Podemos ocultarlas para una apariencia más limpia usando un script Lua del lado del cliente.

Desactivar la animación del puente

Crea un archivo llamado client.lua En tu my-loading-screen carpeta.

-- client.lua for the loading screen resource

-- This code runs as soon as the resource starts on the client

-- We wait a brief moment to ensure NUI is likely ready
Citizen.Wait(100)

-- Method 1: Using ShutdownLoadingScreenNui (Recommended for simple hiding)
-- This attempts to immediately hide the default FiveM loading GUI elements.
-- It's often effective, but timing can sometimes be tricky depending on client load speed.
ShutdownLoadingScreenNui()

-- You can also send a message to your NUI page if needed, for example,
-- to signal that Lua is ready or pass initial data.
-- SendNUIMessage({
-- type = "luaReady",
-- message = "Client script has loaded!"
-- })


-- Method 2: More controlled hiding using CreateThread and AddTextEntry
-- This method continuously overrides the default loading text entries.
-- It can be more reliable in ensuring default text doesn't flicker briefly.
-- Uncomment this section and comment out ShutdownLoadingScreenNui() if you prefer this.
--[[
Citizen.CreateThread(function()
 -- Hide the default "Initializing..." text components
 AddTextEntry('FE_THDR_GTAO', ' ') -- Loading Online
 AddTextEntry('PM_NAME_APP', ' ') -- FiveM Application Name (might vary)
 AddTextEntry('PM_INFO_DET', ' ') -- Build Info / Connecting status
 AddTextEntry('LOADING_SPLAYER_L', ' ') -- Loading Story Mode (sometimes appears)
 AddTextEntry('DLC_ITEM_UNLOCK', ' ') -- open messages if any

 -- Keep overriding them periodically while the custom screen is expected to be active
 -- This loop might be excessive; often just setting them once is enough.
 -- Adjust the Wait time or remove the loop if performance is impacted.
 while true do
 Citizen.Wait(500) -- Check/override every 500ms

 -- Check if the loading screen is still active (pseudo-code, needs actual logic)
 -- local isLoading = GetIsLoadingScreenActive() -- This native might not work early enough
 -- if not isLoading then break end -- Exit loop when main game loads (needs better condition)

 -- Re-apply overrides just in case
 AddTextEntry('FE_THDR_GTAO', ' ')
 AddTextEntry('PM_NAME_APP', ' ')
 AddTextEntry('PM_INFO_DET', ' ')
 AddTextEntry('LOADING_SPLAYER_L', ' ')
 AddTextEntry('DLC_ITEM_UNLOCK', ' ')

 -- Optionally, hide the rotating loading circle in the bottom right
 HideHudComponentThisFrame(14) -- HUD_LOADING_SPINNER
 end
end)
--]]

-- You can add more logic here if needed, for example, listening for game events
-- to send specific messages to your NUI loading screen.

-- Example: Send a message when the player spawns (though loading screen is usually gone by then)
-- AddEventHandler('playerSpawned', function()
-- SendNUIMessage({ type = 'playerReady' })
-- end)

print('[MyLoadingScreen] Client script loaded.')

Explicación:

  • Citizen.Wait(100)Un pequeño retraso. A veces, al intentar interactuar con la NUI o elementos del juego. inmediatamente Cuando el script se carga, puede fallar. Esto da tiempo para que todo se inicialice.
  • ShutdownLoadingScreenNui()Esta es una función nativa de FiveM, diseñada específicamente para ocultar los elementos predeterminados de la interfaz de usuario de la pantalla de carga que proporciona el juego o FiveM. Suele ser la forma más sencilla y directa.
  • SendNUIMessage({ ... }):Un ejemplo que muestra cómo puedes enviar datos de Lua a Tu JavaScript. La tabla que pasas se convierte en la event.data objeto en tu window.addEventListener('message', ...) oyente en script.jsPodrías usar esto para activar acciones específicas o pasar información del servidor.
  • Método 2 (comentado):
    • Proporciona un enfoque alternativo utilizando AddTextEntryEsta función le permite anular las cadenas de texto predeterminadas del juego identificadas por sus claves (como FE_THDR_GTAO). Al colocarles un espacio (' '), los ocultas efectivamente.
    • El Citizen.CreateThread crea un hilo separado para esta tarea.
    • El while true bucle (con Citizen.Wait) vuelve a aplicar estas sobrescrituras continuamente. Esto puede ser más confiable contra el juego que intenta restablecer el texto, pero podría ser excesivo. También incluye HideHudComponentThisFrame(14) para ocultar el spinner.
    • Elegir uno método. Usando ShutdownLoadingScreenNui() Generalmente se prefiere por simplicidad a menos que encuentres problemas donde los elementos predeterminados aún parpadean brevemente.
  • print(...):Registra un mensaje en la consola F8 del cliente, útil para confirmar el script cargado.

Guarde este archivo como client.lua.

Paso 6: Instalación y ejecución de la pantalla de carga

Ahora que todas las piezas están creadas, poniéndolas en el servidor.

  1. Subir el recurso:
    • Tomar el todo my-loading-screen carpeta (que ahora contiene index.html, style.css, script.js, fxmanifest.lua, client.lua, y el images y audio subcarpetas con su contenido).
    • Sube esta carpeta completa a tu servidor FiveM resources Directorio. Puedes usar un programa FTP (como FileZilla) o el panel web de tu servidor. La estructura debería ser similar a la siguiente: [server-data]/resources/my-loading-screen/.
  2. Asegurar el recurso en server.cfg:
    • Abra el archivo de configuración principal de su servidor, normalmente llamado server.cfg.
    • Busque la sección donde se inician los recursos (líneas que generalmente comienzan con ensure o start).
    • Agregue una línea para iniciar su recurso de pantalla de carga:
      cfg # Custom Loading Screen ensure my-loading-screen
    • La colocación importa un poco: Asegúrese de que esté en la lista antes recursos que pueden tardar mucho en cargarse si desea que la pantalla aparezca lo antes posible. Sin embargo, los recursos básicos ensure suele ser suficiente. Hacer no Colóquelo dentro de cualquier [category] corchetes si desea que sea un recurso predeterminado.
  3. Reinicie su servidor: Para los cambios en server.cfg y para que el nuevo recurso sea reconocido, deberá reiniciar completamente su servidor FiveM.
  4. Conectar y probar: Inicia FiveM y conéctate a tu servidor. ¡Ahora deberías ver tu pantalla de carga personalizada en lugar de la predeterminada! Prueba la barra de progreso (debería reaccionar a la carga de FiveM), los mensajes cambiantes y los controles de música. Revisa la consola F8 del juego para ver si hay algún error. client.lua o posibles problemas con NUI. Revise la consola del navegador (a menudo accesible mediante F8 -> Herramientas NUI o abriendo el HTML directamente) para detectar errores de JavaScript.

Ideas de personalización avanzadas

Una vez que los conceptos básicos funcionen, puedes explorar funciones más avanzadas:

  • Vídeos de fondo: En lugar de una imagen estática, utilice un HTML <video> etiqueta.
    • Agregar <video autoplay muted loop id="bg-video"><source src="videos/myvideo.mp4" type="video/mp4"></video> A tu index.html.
    • Estilo #bg-video en CSS similar a la .background div (posición absoluta, 100% ancho/alto, object-fit: cover, z-index: -1).
    • Importante: Los videos aumentan significativamente el tamaño de la pantalla de carga. Optimízalos al máximo (resolución, tasa de bits). Usa formatos como .mp4 (Códec H.264). Recuerda agregar el archivo de video a fxmanifest.luaLa reproducción automática podría requerir muted atributo inicialmente debido a las políticas del navegador; es posible que necesite JS para activar el silencio según la interacción del usuario (como hacer clic en el control de volumen).
  • Obtención dinámica de reglas/mensajes del servidor: En lugar de codificar mensajes en JS, utilice fetch En tu script.js para cargar reglas o anuncios desde un .json archivo dentro de su recurso o incluso desde un servidor web/API externo. Esto facilita las actualizaciones.
  • Uso de marcos web: Utiliza frameworks CSS como Tailwind CSS o Bootstrap para un estilo más rápido, o frameworks JavaScript como Vue.js o React para una lógica más compleja de UI (aunque esto añade una complejidad y pasos de construcción significativos).
  • Integraciones API: Obtener datos de API externas (p. ej., mostrar el número de jugadores en línea desde tu servidor de Discord usando un bot de Discord y un punto final de API simple). Esto requiere scripts del lado del servidor (server.lua en su recurso o en un servicio web separado) para manejarlo de forma segura.
  • Animaciones más sofisticadas: Utilice animaciones CSS (@keyframes) o bibliotecas de animación de JavaScript (como GSAP) para transiciones más suaves, efectos de desvanecimiento o logotipos animados.

Solución de problemas comunes

  • La pantalla de carga no aparece:
    • Controlar server.cfg: Es ensure my-loading-screen ¿Está presente y escrito correctamente? ¿Hay algún error en la consola del servidor al iniciarse relacionado con el recurso?
    • Controlar fxmanifest.lua:¿Es el? loadscreen 'index.html' ¿La línea es correcta? ¿Están todo archivos necesarios (HTML, CSS, JS, imágenes, audio) enumerados en el files ¿Bloquear? Revisa cuidadosamente los nombres de archivo y las rutas (en Linux, se distingue entre mayúsculas y minúsculas).
    • Comprobar la estructura de la carpeta: ¿está la my-loading-screen carpeta directamente dentro de la resources ¿carpeta?
  • Estilos CSS no aplicados:
    • Comprobar HTML <link> etiqueta: ¿Es el? href="style.css" ¿correcto?
    • Controlar fxmanifest.lua: Es style.css listado en el files ¿bloquear?
    • Verifique la sintaxis CSS: ¿Hay errores tipográficos o errores en su style.css ¿Archivo? Utilice un validador CSS.
    • Caché del navegador: A veces, la caché NUI de FiveM conserva versiones antiguas. Borra la caché de FiveM (normalmente en %localappdata%FiveMFiveM.appcache En Windows, elimine carpetas como browser, db, nui-storage) y reinicie FiveM.
  • JavaScript no funciona (no hay progreso, no hay mensajes que cambien, no hay música):
    • Comprobar HTML <script> etiqueta: ¿Es el? src="script.js" correcto y colocado en el fin del <body>?
    • Controlar fxmanifest.lua: Es script.js listado en el files ¿bloquear?
    • Verifique la consola del navegador: abra la consola F8 en FiveM, vaya a NUI Devtools (si está disponible) o abra el index.html Directamente en un navegador y revisa la consola de desarrollador (generalmente F12) para detectar errores de JavaScript. Estos errores suelen identificar la línea del problema.
    • Problemas de audio: ¿El archivo de música está en .ogg ¿Formato? ¿Está la ruta en new Audio(...) ¿correcto? es audio/your_music.ogg ¿Aparece en el manifiesto? Recuerda las restricciones de reproducción automática del navegador: la música podría comenzar solo después de hacer clic en el botón de reproducción.
  • La barra de progreso no se actualiza:
    • ¿Estás confiando en los eventos NUI de FiveM (window.addEventListener('message', ...)? Asegúrese de que este código esté activo (no comentado).
    • ¿Los nombres de los eventos son (loadstatus, progress, loadFraction¿Correcto? A veces, estos valores pueden variar ligeramente entre actualizaciones de FiveM o versiones específicas del juego. Agregar console.log(JSON.stringify(event.data)) dentro del receptor de mensajes para ver exactamente qué datos está enviando FiveM.
    • ¿El ID del elemento es (progress-bar-inner) ¿Es correcto tanto en HTML como en JS?
  • Elementos de carga predeterminados de FiveM aún visibles:
    • Controlar client.lua:¿Se está ejecutando el script? (verifique el print mensaje en F8)? Es ShutdownLoadingScreenNui() ¿Te llaman? Si usas AddTextEntry¿Son correctas las claves para tu juego? Intenta aumentar la inicial. Citizen.Wait().

¿Necesitas una solución premium? ¡Descubre FiveMX!

Crear una pantalla de carga desde cero es gratificante, pero también puede llevar mucho tiempo, especialmente si quieres funciones avanzadas y un diseño muy pulido.

Si prefiere una solución profesional lista para usar, aquí en FiveMX lo tenemos cubierto.

Ofrecemos una selección curada de pantallas de carga premium ricas en funciones, diseñadas por desarrolladores experimentados.

Beneficios de las pantallas de carga pagadas de FiveMX:

  • Diseños profesionales: Estética visualmente impactante y moderna.
  • Funciones avanzadas: A menudo incluye videos de fondo, reproductores de música, múltiples secciones configurables, vistas previas de integración de Discord, indicadores de estado del servidor y más.
  • Fácil configuración: Generalmente vienen con archivos de configuración simples para personalizar texto, logotipos, enlaces y funciones sin necesidad de realizar cambios profundos en el código.
  • Confiabilidad y soporte: Probado para compatibilidad y a menudo viene con soporte para desarrolladores si encuentra problemas.
  • Ahorre tiempo y esfuerzo: Obtén un resultado detallado al instante, permitiéndote concentrarte en otros aspectos de tu servidor.

Explora nuestra gama de interfaces y pantallas de carga para encontrar la que mejor se adapte a la identidad de tu servidor:

  • Categoría de pantallas de carga de FiveMX
  • Colección de scripts FiveMX (la sección Interfaces a menudo incluye pantallas de carga)

Considere estas opciones populares disponibles en FiveMX:

  1. Pantalla de carga moderna V1:Una opción elegante y limpia para comenzar.
  2. Pantalla de carga avanzada V6:Repleto de funciones para una personalización máxima.
  3. Pantalla de carga única V13: diferencie la configuración con un diseño distintivo.
  4. Pantalla de carga V16:Otra excelente opción con características modernas.

Invertir en una pantalla de carga premium puede mejorar significativamente la calidad percibida de tu servidor y la experiencia del jugador desde el primer clic.

Conclusión

Creando una Pantalla de carga personalizada de FiveM es una forma poderosa de mejorar la identidad del servidor y brindar una mejor experiencia de usuario.

Hemos recorrido el proceso de configuración de la estructura HTML, su estilo con CSS, la incorporación de un comportamiento dinámico con JavaScript y su integración en FiveM mediante el fxmanifest.lua y un simple client.lua Script para ocultar elementos predeterminados.

Recuerde que la clave es una gestión cuidadosa de los archivos (enumerar todo en el manifiesto), comprender cómo funcionan los eventos NUI para obtener actualizaciones de progreso reales y utilizar estándares web (HTML, CSS, JS).

No tengas miedo de experimentar con diferentes estilos, mensajes y medios.

Realice pruebas exhaustivas en su navegador y en el juego, utilizando las consolas de desarrollador para depurar problemas.

Ya sea que construyas tu propia obra maestra siguiendo esta guía o elijas una opción premium pulida de FiveMX.com, invertir en tu pantalla de carga es invertir en la primera impresión de tu servidor.

¡Feliz codificación y esperamos que esto te ayude a crear un punto de entrada increíble para tus jugadores!

Preguntas frecuentes (FAQ)

P1: ¿Puedo usar vídeos de fondo en lugar de imágenes?

A: ¡Sí! Usa el HTML <video> etiqueta (<video autoplay muted loop id="bg-video"><source src="videos/your_video.mp4" type="video/mp4"></video>). Dale estilo con CSS para cubrir la pantalla (position: absolute, width: 100%, height: 100%, object-fit: cover, z-index: -1) Recuerda mute Para que la reproducción automática funcione de manera confiable, optimice considerablemente el tamaño del archivo de video, use formatos compatibles como MP4 (H.264) e incluya el archivo de video en su lista. fxmanifest.lua.

P2: ¿Cómo puedo hacer que la barra de progreso muestre el actual ¿Progreso de carga de FiveM?

A: La forma más confiable es usar JavaScript. window.addEventListener('message', ...) Para escuchar los mensajes NUI enviados por FiveM. Específicamente, busque un evento como progress que a menudo contiene una loadFraction propiedad (un valor de 0.0 a 1.0). Multiplíquelo por 100 y páselo a su updateProgress Función de JavaScript. Evite confiar únicamente en el progreso simulado (como el setInterval ejemplo) para la versión final.

P3: ¿Dónde exactamente pongo los archivos de la pantalla de carga en mi servidor?

A: Cree una carpeta dedicada para su recurso (por ejemplo, my-loading-screen) dentro del servidor principal de su servidor resources directorio. Todos los archivos (index.html, style.css, script.js, fxmanifest.lua, client.lua, y subcarpetas como images, audio) debe ir dentro de esta carpeta de recursos.

P4: ¿Puedo tener música de fondo? ¿Cómo puedo añadir controles?

A: Sí. Usa el HTML <audio> etiquetar o crear una Audio objeto en JavaScript (new Audio('audio/music.ogg')). Es fundamental utilizar el .ogg formato de audio Para una mejor compatibilidad con FiveM NUI, agregue botones HTML estándar (<button>) y potencialmente una entrada de rango (<input type="range">) para volumen en tu index.html. Utilice detectores de eventos de JavaScript (addEventListener) en estos elementos para controlar el objeto de audio .play(), .pause(), y .volume Propiedades. Recuerde incluir el archivo de audio en su manifiesto.

Q5: ¿Por qué no aparece mi pantalla de carga?

A: Verifique nuevamente estos culpables comunes:
1. ¿Está el recurso asegurado correctamente en server.cfg (ensure resource_folder_name)?
2. ¿Es el? fxmanifest.lua ¿presente en la carpeta de recursos?
3. ¿El manifiesto tiene la loadscreen 'your_html_file.html' ¿línea?
4. Son todo archivos necesarios (HTML, CSS, JS, imágenes, audio, fuentes) enumerados con precisión en files { ... } ¿En el manifiesto? Revisa las rutas y los nombres de archivo (¡distingue entre mayúsculas y minúsculas!).
5. ¿Hay algún error en la consola del servidor o en la consola F8 del cliente relacionado con la falla en la carga del recurso?
6. ¿Reiniciaste el servidor después de agregar el recurso y asegurarlo?

P6: ¿Cómo puedo hacer que la pantalla de carga desaparezca suavemente cuando se inicia el juego?

R: Esto requiere comunicación entre tu script de Lua y la página NUI. FiveM no cuenta con un evento "carga completa, a punto de generar" perfectamente fiable y fácil de detectar. antes La NUI está destruida. Sin embargo, podrías:
1. Envíe un mensaje NUI personalizado (SendNUIMessage({ type = 'loadingAlmostDone' })) de un script de cliente Lua basado en ciertos eventos del juego o temporizadores justo antes del inicio.
2. En tu JavaScript, escucha este mensaje (if (event.data.type === 'loadingAlmostDone')).
3. Cuando lo reciba, active una animación de desvanecimiento CSS en su contenedor principal (.loading-container.fade-out { opacity: 0; transition: opacity 1s ease-out; } y añade el fade-out clase usando JS). Esto proporciona una transición visual, aunque FiveM podría eliminar la NUI abruptamente después.

Pantallas de carga pagadas

No se encontraron resultados

Puedes intentar limpiar cualquier filtro o ir a nuestra página principal de la tienda

Pantallas de carga gratuitas

¡Listo! ¿Tienes alguna pregunta? Deja un comentario.

Mantenga los activos de la pantalla de carga ligeros

  • Comprima las imágenes de fondo y el audio antes de empaquetarlos. Evite un video de reproducción automática grande a menos que sea esencial para el diseño, porque cada jugador conectado debe cargar el activo.
  • Use rutas relativas al recurso y coincida exactamente con el caso de las minúsculas y mayúsculas del nombre del archivo. Verifique que cada archivo referenciado por HTML, CSS y JavaScript esté incluido en el manifiesto de recursos.
  • Establezca dimensiones de imagen explícitas para evitar cambios de diseño y elimine fuentes, scripts y medios no utilizados. No dependa de un activo remoto que pueda retrasar o romper la pantalla cuando su host no esté disponible.
  • Pruebe con una caché de cliente limpia y una conexión limitada. Verifique la consola del cliente en busca de archivos faltantes, luego reconecte después de un reinicio de recursos antes de publicar el cambio.

Compara una pantalla de carga lista para usar

Si prefiere comparar la compilación personalizada anterior con una opción empaquetada, revise la Pantalla de carga Venice. Su página de producto enumera temas estacionales NUI e integración de selección de personajes; verifique el recurso central requerido y el soporte del paquete de activos en staging.

Deja una respuesta