Como criar uma tela de carregamento personalizada no FiveM - Tutoriais e guias (2025)

Certo, vamos começar a criar um ponto de entrada único e envolvente para seus jogadores.

Nós vamos construir um Tela de carregamento personalizada do FiveM do zero.

O que é um recurso de tela de carregamento?

Uma tela de carregamento personalizada geralmente é a primeira interação de um jogador com seu servidor FiveM específico.

É uma oportunidade fantástica para estabelecer a marca do seu servidor, transmitir informações importantes e criar uma atmosfera envolvente desde o início.

Esqueça os visuais genéricos do FiveM; queremos que os jogadores sintam seu identidade do servidor no momento em que eles começam a se conectar.

Aqui na FiveMX, acreditamos em capacitar proprietários de servidores com ferramentas e conhecimento para criar experiências verdadeiramente únicas.

Este guia abrangente o guiará por cada etapa, desde a estrutura HTML básica até a estilização com CSS, adicionando interatividade com JavaScript e, finalmente, integrando-o perfeitamente ao seu servidor FiveM usando Lua.

Abordaremos até como ocultar a animação padrão da ponte FiveM para uma transição mais limpa.

Não importa se você é iniciante em programação ou tem alguma experiência em desenvolvimento web: vamos explicar tudo de forma clara.

Vamos começar a fazer com que seu servidor se destaque.

Por que se preocupar com uma tela de carregamento personalizada do FiveM?

Você deve estar se perguntando se vale a pena o esforço.

Absolutamente!

Pense nisso como o saguão ou a entrada para o seu mundo virtual.

Primeiras impressões: Ele define o tom e o profissionalismo do seu servidor imediatamente.

Marca: Reforce o nome, o logotipo e o tema geral do seu servidor.

Exibição de informações: Compartilhe informações cruciais como regras, links do Discord, URLs de sites ou atualizações de status do servidor antes Os jogadores até aparecem.

Noivado: Use música, mensagens dinâmicas ou até mesmo vídeos para manter os jogadores envolvidos durante o processo de carregamento, reduzindo os tempos de espera percebidos.

Singularidade: Diferencie seu servidor dos inúmeros outros usando telas padrão ou genéricas.

Uma tela de carregamento bem projetada mostra que você se importa com os detalhes e com a experiência do jogador.

Pré-requisitos

Antes de começar a codificar, vamos garantir que você tenha as ferramentas necessárias e o conhecimento básico:

1. Editor de texto: Você precisará de um programa para escrever seu código.
   • Visual Studio Code (VS Code): gratuito, poderoso e altamente recomendado, com muitas extensões úteis.
   • Sublime Text: Outra opção popular e leve.
   • Notepad++: Uma escolha gratuita sólida para usuários do Windows.
   • Evitar usando o Bloco de Notas básico ou o TextEdit, pois não possuem recursos úteis para codificação (como destaque de sintaxe).
2. Conhecimento básico de desenvolvimento web (útil, mas não essencial):
   • HTML (Linguagem de Marcação de Hipertexto): Compreende a estrutura básica de uma página da web (tags como <div>, <img>, <p>). Forneceremos o código, mas conhecer o básico ajuda.
   • CSS (Folhas de Estilo em Cascata): Sabe estilizar elementos HTML (cores, tamanhos, posições). Novamente, nós o guiaremos, mas familiaridade é um diferencial.
   • JavaScript (JS): Compreende conceitos básicos de programação para adicionar interatividade. Manteremos o JS relativamente simples inicialmente.
3. Acesso ao servidor FiveM: Você precisa acessar os arquivos do seu servidor, especificamente o recursos pasta, para instalar a tela de carregamento.
4. Software de edição de imagem (opcional): Ferramentas como Photoshop, GIMP (grátis) ou até mesmo Canva podem ser úteis para criar ou editar logotipos e imagens de fundo.
5. Paciência e vontade de aprender: Depuração e ajustes fazem parte do processo!

Não se preocupe se você não for um especialista em desenvolvimento web.

Explicaremos cada etapa claramente e forneceremos trechos de código que podem ser copiados e colados.

Compreendendo como funcionam as telas de carregamento do FiveM (NUI)

A FiveM utiliza um sistema chamado NUI (IU nativa) para exibir páginas da web dentro o jogo.

Basicamente, sua tela de carregamento personalizada é apenas uma página da web padrão (criada com HTML, CSS e JavaScript) que o sistema NUI do FiveM renderiza enquanto os recursos do jogo estão sendo carregados em segundo plano.

Isso significa que podemos aproveitar tecnologias web padrão para criar experiências interativas e visualmente ricas.

Os componentes principais são:

• índice.html: O arquivo principal que define a estrutura e o conteúdo da sua tela de carregamento.
• estilo.css: O arquivo que define a aparência visual (layout, cores, fontes, etc.).
• script.js: O arquivo que adiciona comportamento dinâmico (como alteração de texto, animações, reprodução de música).
• fxmanifest.lua (ou __recurso.lua): Um arquivo FiveM especial que informa ao servidor que este é um recurso, especifica que é uma tela de carregamento e lista todos os arquivos necessários.

Agora, vamos começar a construir.

Etapa 1: Criando a estrutura HTML básica (índice.html)

Primeiro, crie uma nova pasta para o seu recurso de tela de carregamento. Vamos chamá-la minha-tela-de-carregamento.

Dentro desta pasta, crie um arquivo chamado índice.html.

Este arquivo conterá o esqueleto da nossa tela de carregamento.

Precisamos de contêineres para diferentes elementos: o plano de fundo, um logotipo, indicação de progresso de carregamento e áreas para mensagens de texto.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nome do servidor - Carregando...</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="imagens/logo.png" alt="Logotipo do servidor" 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">Inicializando conexão...</p> <p id="dynamic-message">Bem-vindo! Carregando recursos do servidor...</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">Pausar música</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>

Explicação:

• & <html>: Modelo HTML5 padrão.
• : Contém meta-informações e links para recursos externos.
  • conjunto de caracteres="UTF-8": Garante a exibição correta dos caracteres.
  • janela de visualização: Importante para design responsivo (adaptação a diferentes tamanhos de tela), embora menos crítico para telas de carregamento de jogos com resolução fixa.
  • : Define o texto que pode aparecer em uma aba do navegador (menos relevante no FiveM NUI, mas é uma boa prática).
  • : Conecta nosso HTML ao nosso arquivo CSS para estilização.
• <body>: Contém o conteúdo visível da página.
• <div class="loading-container">: O wrapper principal para tudo. Usaremos isso para o layout geral.
• <div class="background">: Um div vazio que estilizaremos com CSS para armazenar nossa imagem de fundo ou vídeo.
• <div class="content">: Envolve o conteúdo real (logotipo, texto, barra de progresso) para ajudar na centralização e no posicionamento.
• <div class="logo-area">: Um contêiner para o logotipo do seu servidor.
  • <img src="imagens/logo.png" ...>: Uma tag de imagem. Importante: Você precisará criar um imagens pasta dentro minha-tela-de-carregamento e coloque seu logo.png arquivo lá. Certifique-se de que o nome do arquivo corresponda!
• <div class="message-area">: Contém mensagens de texto.
  • Damos IDs aos parágrafos (carregando-mensagem, mensagem dinâmica) para que possamos facilmente direcioná-los com JavaScript mais tarde.
• <div class="progress-bar-container">: Contém os elementos da barra de progresso.
  • .barra de progresso: O recipiente externo da barra.
  • .barra-de-progresso-interna: A parte interna que será preenchida. Damos a ela um ID (barra de progresso interna) para controle JS.
  • <p id="progress-text">: Exibe o texto percentual, também com um ID.
• <div class="music-control">: (Opcional) Controles básicos para música de fundo. IDs permitem interação com JS.
• : Vincula nosso HTML ao nosso arquivo JavaScript. Colocando-o no final do <body> garante que os elementos HTML existam antes que o script tente interagir com eles.

Salvar este arquivo como índice.html em seu minha-tela-de-carregamento pasta. Crie uma imagens subpasta e adicione um espaço reservado logo.png por agora.

Etapa 2: Estilizando a tela de carregamento (CSS – estilo.css)

Agora, vamos fazer com que fique bonito!

Crie um arquivo chamado estilo.css no mesmo minha-tela-de-carregamento pasta.

Este arquivo controla a apresentação visual.

/* Redefinição básica e estilo do corpo */ * { margin: 0; padding: 0; box-sizing: border-box; /* Faz com que largura/altura incluam preenchimento e borda */ } body, html { height: 100%; width: 100%; overflow: hidden; /* Ocultar barras de rolagem */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte de exemplo */ color: #ffffff; /* Cor de texto padrão (branco) */ } /* Contêiner principal */ .loading-container { position: relative; /* Necessário para posicionamento absoluto de filhos */ width: 100%; height: 100%; display: flex; /* Usar flexbox para centralizar conteúdo */ justify-content: center; align-items: center; text-align: center; } /* Estilo de fundo */ .background { position: absolute; /* Ocupa tela inteira atrás do conteúdo */ top: 0; left: 0; width: 100%; height: 100%; background-image: url('images/background.jpg'); /* ALTERE ISTO para sua imagem */ background-size: cover; /* Dimensione a imagem para cobrir o contêiner */ background-position: center center; /* Centralize a imagem */ background-repeat: no-repeat; z-index: -1; /* Coloque-a atrás de outro conteúdo */ filter: brightness(0.6); /* Opcional: Escureça um pouco o fundo */ } /* --- OU use um fundo de cor sólida --- */ /* .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1a1a1a; z-index: -1; } */ /* Wrapper de conteúdo */ .content { z-index: 1; /* Garante que o conteúdo esteja acima do fundo */ padding: 20px; background-color: rgba(0, 0, 0, 0.5); /* Fundo preto semitransparente */ border-radius: 10px; max-width: 600px; /* Limita a largura do conteúdo */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } /* Área do logotipo */ .logo-area { margin-bottom: 30px; } #server-logo { max-width: 200px; /* Ajusta a largura máxima do logotipo */ height: auto; /* Mantém a proporção da tela */ display: block; /* Permite que a margem automática seja centralizada */ margin-left: auto; margin-right: auto; } /* Área de mensagem */ .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; /* Evitar mudanças de layout quando a mensagem muda */ } /* Área da barra de progresso */ .progress-bar-container { width: 80%; /* Largura relativa ao contêiner de conteúdo */ margin: 0 auto; /* Centralizar o contêiner */ margin-bottom: 20px; } .progress-bar { width: 100%; background-color: #555555; /* Fundo cinza escuro */ border-radius: 5px; overflow: hidden; /* Ocultar barra interna excedente */ height: 25px; /* Altura da barra */ border: 1px solid #333; } .progress-bar-inner { height: 100%; width: 0%; /* Começar na largura 0% */ background-color: #4CAF50; /* Cor de progresso verde */ border-radius: 5px 0 0 5px; /* Manter raio esquerdo */ transition: width 0.5s ease-in-out; /* Transição suave para alterações de largura */ text-align: center; line-height: 25px; /* Centralizar texto verticalmente, se necessário, dentro */ color: white; } #progress-text { margin-top: 5px; font-size: 0.9em; } /* Controle de música (opcional) */ .music-control { margin-top: 25px; display: flex; /* Organizar botão e controle deslizante lado a lado */ justify-content: center; align-items: center; gap: 15px; /* Espaço entre elementos */ } #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; /* Ajustar largura do controle deslizante */ } /* Adicionar alguma capacidade de resposta básica se necessário, embora menos crítica no NUI */ @media (max-width: 600px) { .content { max-width: 90%; } .progress-bar-container { width: 90%; } }

Explicação:

• * { tamanho da caixa: caixa de borda; }: Uma redefinição comum para tornar os elementos de dimensionamento mais previsíveis.
• corpo, html: Define a altura/largura da base e oculta possíveis barras de rolagem. Define uma fonte e cor de texto padrão.
• .carregando-contêiner: Usos exibição: flexível para centralizar facilmente o .contente div horizontalmente (justificar-conteúdo) e verticalmente (alinhar-itens). posição: relativa é crucial para posicionar o fundo absoluto.
• .fundo:
  • posição: absoluta: Retira o elemento do fluxo normal e o posiciona em relação ao ancestral posicionado mais próximo (.carregando-contêiner).
  • superior: 0; esquerda: 0; largura: 100%; altura: 100%;: Faz com que cubra todo o recipiente.
  • imagem de fundo: url(...): Fundamentalmente, a mudança 'imagens/fundo.jpg' para o caminho real da sua imagem de fundo. Certifique-se de que a imagem esteja no imagens pasta.
  • tamanho do fundo: capa: Dimensiona a imagem de forma agradável.
  • índice z: -1: Empurra-o para trás de outros elementos.
  • filtro: brilho(0,6): Um efeito opcional para escurecer o fundo, tornando o texto mais legível. Ajuste ou remova conforme necessário.
  • Alternativa: Uma seção comentada mostra como usar uma cor de fundo sólida simples em vez de uma imagem.
• .contente:
  • índice z: 1: Garante que ele fique sobre o fundo.
  • cor de fundo: rgba(0, 0, 0, 0.5): Um fundo preto semitransparente para a própria área de conteúdo, ajudando o texto a se destacar em fundos complexos. Ajuste o último valor (alfa) de 0 (totalmente transparente) a 1 (totalmente opaco).
  • raio da borda, largura máxima, caixa-sombra: Adicione um pouco de polimento visual.
• .área do logotipo, Logotipo do servidor #: Estiliza o contêiner do logotipo e a própria imagem do logotipo (definindo largura máxima e centralização).
• .área de mensagem, #carregando mensagem, # mensagem dinâmica: Estiliza os elementos de texto (tamanho da fonte, cor, margens). altura mínima evita que o layout salte quando o conteúdo da mensagem dinâmica muda de comprimento.
• .contêiner de barra de progresso, .barra de progresso, .barra-de-progresso-interna: Estiliza a barra de progresso.
  • O recipiente externo (.barra de progresso) define a cor e a forma do plano de fundo.
  • A barra interna (.barra-de-progresso-interna) é o que cresce. Começa em largura: 0%. Alteraremos essa largura usando JavaScript. transição: largura 0,5s entrada-saída; torna a mudança de largura suave.
• .controle de música, # botão de reprodução-pausa, #controle deslizante de volume: Estiliza os controles de música opcionais usando flexbox para layout e adicionando estilo básico aos botões.
• @media (largura máxima: 600px): Um exemplo simples de consulta de mídia para responsividade. Ela ajusta a largura do conteúdo em telas menores (menos crítico para FiveM, mas uma boa prática).

Salvar isto como estilo.css. Lembre-se de criar o imagens pasta e adicione seu fundo.jpg (ou qualquer nome que você tenha dado a ele) e logo.png.

Neste ponto, você poderia tecnicamente abrir o índice.html arquivo diretamente no seu navegador (como Chrome ou Firefox) para visualizar sua aparência estática!

Etapa 3: Adicionar interatividade e conteúdo dinâmico (JavaScript – script.js)

Agora vamos dar vida à nossa página estática usando JavaScript.

Crie um arquivo chamado script.js em seu minha-tela-de-carregamento pasta.

Adicionaremos funcionalidades para:

1. Simulando o progresso do carregamento.
2. Exibindo mensagens dinâmicas/mutáveis.
3. Adicionando música de fundo com controles.
4. Lidando com eventos FiveM NUI (a maneira correta de obter progresso de carregamento).

// Aguarde o carregamento completo do DOM (Document Object Model - a estrutura HTML) document.addEventListener('DOMContentLoaded', () => { // --- Obter referências aos elementos HTML --- 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'); // Para atualizar os estágios // --- Configuração --- const messages = [ "Carregando sistemas principais...", "Estabelecendo conexão de rede...", "Baixando os últimos ativos do servidor...", "Sincronizando dados do jogador...", "Analisando detalhes do mapa...", "Quase lá, preparando o mundo...", "Dica: visite nosso Discord em discord.gg/yourinvite", "Dica: verifique o regras em nosso site yourwebsite.com", "Bem-vindo ao nosso incrível servidor!" ]; let currentMessageIndex = 0; const messageChangeInterval = 5000; // Alterar mensagem a cada 5 segundos (5000ms) // Música de fundo (opcional) const backgroundMusic = new Audio('audio/background_music.ogg'); // IMPORTANTE: Use .ogg para compatibilidade com FiveM backgroundMusic.volume = 0.5; // Definir volume inicial (0.0 a 1.0) backgroundMusic.loop = true; // Repetir a música const playPauseButton = document.getElementById('play-pause-button'); const volumeSlider = document.getElementById('volume-slider'); let isPlaying = false; // Acompanhar o estado da música // --- Funções --- // Função para atualizar a barra de progresso e o texto function updateProgress(percentage) { percentage = Math.min(100, Math.max(0, percentage)); // Fixar entre 0 e 100 progressBarInner.style.width = `${percentage}%`; progressText.textContent = `${Math.round(percentage)}%`; } // Função para alterar a mensagem dinâmica function changeDynamicMessage() { dynamicMessage.style.opacity = 0; // Desvanecer setTimeout(() => { currentMessageIndex = (currentMessageIndex + 1) % messages.length; dynamicMessage.textContent = messages[currentMessageIndex]; dynamicMessage.style.opacity = 1; // Desvanecer }, 500); // Aguardar a transição de desvanecimento (0,5 s) } // Função para tentar reproduzir música (lida com as restrições de reprodução automática do navegador) function playMusic() { backgroundMusic.play().then(() => { isPlaying = true; playPauseButton.textContent = 'Pausar música'; console.log("A música começou a tocar."); }).catch(error => { // A reprodução automática foi impedida, comum em navegadores até a interação do usuário console.log("Falha na reprodução automática da música. Aguardando interação do usuário.", error); isPlaying = false; playPauseButton.textContent = 'Reproduzir música'; // Podemos precisar de um ouvinte de clique no corpo ou botão para iniciar a reprodução }); } // --- Configuração inicial --- // Definir mensagem de carregamento inicial loadingMessage.textContent = "Inicializando..."; updateProgress(0); // Iniciar progresso em 0% // Começar a alterar mensagens dinâmicas dynamicMessage.textContent = messages[0]; // Mostrar a primeira mensagem imediatamente setInterval(changeDynamicMessage, messageChangeInterval); // Tentar reproduzir a música automaticamente playMusic(); // Tentar reproduzir a música de fundo // --- Ouvintes de eventos --- // Controles de música Ouvintes de eventos playPauseButton.addEventListener('click', () => { if (isPlaying) { backgroundMusic.pause(); isPlaying = false; playPauseButton.textContent = 'Play Music'; } else { // Importante: Reative a função de reprodução que lida com possíveis falhas iniciais playMusic(); } }); volumeSlider.addEventListener('input', (event) => { backgroundMusic.volume = event.target.value; }); // --- Tratamento de eventos FiveM NUI --- // Este é o NÚCLEO da interação com o processo de carregamento FiveM /* As mensagens FiveM NUI são enviadas por meio de eventos JavaScript. Ouvimos eventos 'message' no objeto window. A propriedade 'data' do evento contém as informações enviadas de Lua. */ window.addEventListener('message', function(event) { const data = event.data; // Verificar para o tipo de mensagem NUI específico usado pelo FiveM para carregar o progresso // O evento 'loadstatus' fornece o texto geral do progresso. if (data.type === 'loadstatus') { if(data.status) { loadingMessage.textContent = data.status; } } // O evento 'progress' fornece o progresso detalhado do componente (use isso para a barra) else if (data.eventName === 'progress') { // data.loadFraction fornece um valor entre 0,0 e 1,0 const progressPercentage = data.loadFraction * 100; updateProgress(progressPercentage); } // Um evento personalizado que podemos enviar do Lua quando o carregamento estiver quase concluído else if (data.type === 'loadingComplete') { updateProgress(100); loadingMessage.textContent = "Carregamento concluído! Entrando no servidor..."; // Você pode adicionar efeitos de fade-out aqui antes que a tela desapareça } }); // --- Fallback/Progresso simulado (se eventos NUI não foram recebidos ou para teste) --- // Comente ou remova se você depender somente de eventos FiveM NUI /* let simulatedProgress = 0; const interval = setInterval(() => { simulatedProgress += Math.random() * 5; // Incrementa em uma pequena quantidade aleatória if (simulatedProgress >= 100) { simulatedProgress = 100; clearInterval(interval); // Interrompe a simulação quando 100% é atingido loadingMessage.textContent = "Carregamento concluído! Entrando no servidor..."; // Atualiza a mensagem final } updateProgress(simulatedProgress); }, 300); // Atualiza a cada 300 ms */ // Adiciona um pequeno efeito de fade-in para a tela inteira ao carregar document.body.style.opacity = 0; setTimeout(() => { document.body.style.transition = 'opacity 1s ease-in-out'; document.body.style.opacity = 1; }, 100); // Iniciar fade-in um pouco após o carregamento }); // Fim do DOMContentLoaded

Explicação:

1. documento.addEventListener('DOMContentLoaded', () => { ... });: Isso garante que o código JavaScript seja executado apenas depois toda a estrutura da página HTML foi carregada e está pronta para ser manipulada.
2. Referências de elementos: Obtemos referências aos elementos HTML com os quais precisamos interagir usando documento.getElementById(). É por isso que ter IDs exclusivos no HTML é importante.
3. Configuração:
   • mensagens: Uma matriz contendo as diferentes sequências de texto que você deseja percorrer na área de mensagens dinâmicas. Personalize-as!
   • Índice de Mensagem atual: Mantém o controle de qual mensagem está sendo exibida no momento.
   • IntervaloDeAlteraçãoDeMensagem: Define com que frequência (em milissegundos) a mensagem muda.
4. Configuração de música de fundo:
   • novo Áudio('audio/background_music.ogg'): Cria um objeto de áudio HTML. Crucialmente:
     • Criar um áudio pasta dentro minha-tela-de-carregamento.
     • Coloque seu arquivo de música de fundo lá.
     • Use o .ogg formatar! MP3 e outros formatos podem não ser confiáveis ou até mesmo não funcionar no FiveM NUI. Você pode encontrar facilmente conversores online para converter MP3 para OGG.
   • backgroundMusic.volume: Define o volume inicial (0,0 = silencioso, 1,0 = máximo).
   • backgroundMusic.loop = verdadeiro;: Faz a música se repetir.
   • Também temos referências ao botão de reprodução/pausa e ao controle deslizante de volume.
5. updateProgress(porcentagem) função: Pega um número (0-100), fixa-o para garantir que esteja dentro dos limites e atualiza o largura estilo do elemento da barra de progresso interna e altera o conteúdo do texto da exibição de porcentagem.
6. alterarMensagemDinâmica() função:
   • Usos intervalo de configuração na fase de configuração para chamar esta função repetidamente.
   • Ele calcula o índice da próxima mensagem, envolvendo-a usando o operador de módulo (%).
   • Atualiza o Conteúdo de texto do mensagem dinâmica elemento.
   • Bônus: Inclui um efeito simples de fade-out/fade-in usando opacidade CSS e definir tempo limite para uma transição mais suave. Adicionar transição: opacidade 0,5s entrada/saída; para o .área de mensagem p seletor no seu CSS para que isso funcione visualmente.
7. tocarMúsica() função: Tenta tocar a música usando backgroundMusic.play(). O .então() lida com a reprodução bem-sucedida, enquanto .pegar() Lida com erros, que frequentemente ocorrem devido a restrições de reprodução automática do navegador (que exigem interação do usuário primeiro). Ele atualiza o texto do botão de acordo.
8. Configuração inicial: Define o texto inicial, zera o progresso, exibe a primeira mensagem dinâmica e inicia o temporizador de intervalo para alterações de mensagens. Também chama tocarMúsica() para tentar iniciar o áudio.
9. Ouvintes de eventos (controles de música):
   • Escuta cliques no Botão de reprodução e pausa. Se a música estiver tocando, ele a pausa; caso contrário, ele chama tocarMúsica() novamente (importante para lidar com casos em que a reprodução automática inicial falhou).
   • Escuta por entrada eventos no controle deslizante de volume (dispara continuamente conforme o controle deslizante se move) e atualiza o backgroundMusic.volume.
10. Manipulação de eventos FiveM NUI (window.addEventListener('mensagem', ...)):
    • Esta é a parte mais importante para real integração. O FiveM envia mensagens para a janela NUI (sua página HTML) usando o postar mensagem API.
    • Nós ouvimos essas mensagens no janela objeto.
    • dados do evento contém a carga útil enviada dos scripts Lua do FiveM.
    • Nós verificamos evento.dados.tipo ou event.data.eventName (diferentes versões/contextos do FiveM podem usar estruturas ligeiramente diferentes) para ver que tipo de mensagem é.
    • 'status de carga': Geralmente contém texto de status geral (por exemplo, “Carregando mapa”, “Inicializando scripts”). Atualizamos o carregandoMensagem parágrafo.
    • 'progresso': Isso normalmente é usado para o progresso real da barra de carregamento. dados.loadFraction geralmente fornece um valor de 0,0 a 1,0, que convertemos em uma porcentagem e inserimos em nosso atualizaçãoProgresso função.
    • 'carregamento concluído':Este não é um evento FiveM padrão, mas um exemplo de um personalizado mensagem para você poderia enviar de um script Lua (que discutiremos mais tarde) para sinalizar o fim do carregamento, permitindo que você defina o progresso para 100% e mostre uma mensagem final.
11. Fallback/Progresso Simulado:
    • A seção comentada fornece uma simulação básica de progresso. Ele usa intervalo de configuração para incrementar a barra de progresso em uma pequena quantidade aleatória periodicamente.
    • Isso é útil para testar sua tela de carregamento visualmente em um navegador sem executando FiveM.
    • Você deve REMOVER ou COMENTAR este código de simulação ao usar os eventos FiveM NUI reais, caso contrário, você poderá ver atualizações de progresso conflitantes.
12. Efeito de fade-in: Adiciona um fade-in sutil em todo o corpo quando a página é carregada para uma aparência mais suave.

Salvar este arquivo como script.js. Lembre-se de criar o áudio pasta e adicione seu .ogg arquivo de música.

Etapa 4: Integração com FiveM (Lua – fxmanifest.lua)

Agora precisamos informar ao servidor FiveM sobre nosso novo recurso e identificá-lo como uma tela de carregamento.

Crie um arquivo chamado fxmanifest.lua na raiz do seu minha-tela-de-carregamento pasta.

-- Manifesto de recurso fx_version 'cerulean' -- Use 'cerulean' ou uma versão mais recente, como 'adamant' ou 'bodacious' jogo 'gta5' autor 'Seu nome ou nome do servidor' descrição 'Tela de carregamento personalizada para meu servidor incrível' versão '1.0.0' -- Especifique este recurso como a tela de carregamento loadscreen 'index.html' -- Lista todos os arquivos necessários para a interface do usuário (HTML, CSS, JS, imagens, áudio, fontes, etc.) arquivos { 'index.html', 'style.css', 'script.js', 'images/logo.png', 'images/background.jpg', -- Adicione todas as suas imagens aqui 'audio/background_music.ogg' -- Adicione todos os seus arquivos de áudio aqui -- 'fonts/mycustomfont.woff2' -- Adicione fontes personalizadas, se usar alguma } -- Opcional: script do cliente para controle avançado (como ocultar elementos padrão) client_script 'client.lua' -- Opcional: se sua tela de carregamento precisar buscar dados DE o servidor (mais avançado) -- server_script 'server.lua' -- Opcional: Defina as configurações de NUI, se necessário (raramente necessário para telas de carregamento básicas) -- nui_settings { -- ['scriptFramePolicy'] = "frame-ancestors 'self' https://cfx.re" -- Exemplo de política de segurança -- }

Explicação:

• fx_version 'cerúleo': Define a versão do manifesto. "cerulean" é uma linha de base comum, mas existem versões mais recentes, como "adamant" ou "bodacious". Use "cerulean", a menos que precise de recursos de versões mais recentes.
• jogo 'gta5': Especifica o jogo para o qual este recurso se destina.
• autor, descrição, versão: Metadados sobre o seu recurso. Preencha-os adequadamente.
• tela de carregamento 'index.html': Esta é a linha crucial. Ele informa ao FiveM para usar o arquivo HTML especificado (índice.html no nosso caso) como tela de carregamento do jogo.
• arquivos { ... }: Muito importante! Você deve listar cada arquivo que sua página HTML precisa carregar, em relação à pasta raiz do recurso. Isso inclui:
  • O próprio arquivo HTML (índice.html)
  • O arquivo CSS (estilo.css)
  • O arquivo JavaScript (script.js)
  • Todas as imagens (por exemplo, imagens/logo.png, imagens/fundo.jpg)
  • Todos os arquivos de áudio (por exemplo, áudio/música_de_fundo.ogg)
  • Quaisquer fontes personalizadas que você possa ter vinculado no seu CSS.
  • Se você esquecer um arquivo aqui, ele não será carregado no jogo!
• client_script 'cliente.lua': Incluímos isso porque criaremos um pequeno script de cliente na próxima etapa para lidar com a ocultação dos elementos de carregamento padrão do FiveM.
• server_script 'servidor.lua':Necessário apenas para cenários avançados onde sua tela de carregamento precisa se comunicar com o servidor (por exemplo, buscando contagens dinâmicas de jogadores antes o ambiente principal do jogo carrega, o que é complexo). Não usaremos isso para uma configuração básica.
• configurações nui: Permite definir políticas de segurança específicas para o quadro NUI. Geralmente não é necessário para telas de carregamento padrão, a menos que você esteja incorporando conteúdo externo ou lidando com interações complexas.

Salvar este arquivo como fxmanifest.lua.

(Nota: Servidores mais antigos podem usar __recurso.lua em vez de fxmanifest.lua. A sintaxe é muito semelhante, mas versão_fx geralmente é omitido ou diferente, e as diretivas podem variar ligeiramente. fxmanifest.lua é o padrão moderno).

Etapa 5: Desativando a animação padrão da ponte FiveM (Lua – cliente.lua)

Por padrão, o FiveM mostra seu próprio texto de carregamento e, às vezes, uma animação de carregamento de “ponte” antes Sua tela personalizada assume o controle total. Podemos ocultá-la para uma aparência mais limpa usando um script Lua do lado do cliente.

Crie um arquivo chamado cliente.lua em seu minha-tela-de-carregamento pasta.

-- client.lua para o recurso de tela de carregamento -- Este código é executado assim que o recurso inicia no cliente -- Aguardamos um breve momento para garantir que o NUI esteja provavelmente pronto Citizen.Wait(100) -- Método 1: Usando ShutdownLoadingScreenNui (Recomendado para ocultação simples) -- Isso tenta ocultar imediatamente os elementos da GUI de carregamento padrão do FiveM. -- Geralmente é eficaz, mas o tempo pode ser complicado dependendo da velocidade de carregamento do cliente. ShutdownLoadingScreenNui() -- Você também pode enviar uma mensagem para sua página NUI, se necessário, por exemplo, -- para sinalizar que o Lua está pronto ou passar os dados iniciais. -- SendNUIMessage({ -- type = "luaReady", -- message = "O script do cliente foi carregado!" -- }) -- Método 2: Ocultação mais controlada usando CreateThread e AddTextEntry -- Este método substitui continuamente as entradas de texto de carregamento padrão. -- Pode ser mais confiável para garantir que o texto padrão não pisque brevemente. -- Descomente esta seção e comente ShutdownLoadingScreenNui() se preferir. --[[ Citizen.CreateThread(function() -- Oculta os componentes de texto padrão "Inicializando..." AddTextEntry('FE_THDR_GTAO', ' ') -- Carregando on-line AddTextEntry('PM_NAME_APP', ' ') -- Nome do aplicativo FiveM (pode variar) AddTextEntry('PM_INFO_DET', ' ') -- Informações de compilação / Status de conexão AddTextEntry('LOADING_SPLAYER_L', ' ') -- Carregando o modo Story (às vezes aparece) AddTextEntry('DLC_ITEM_UNLOCK', ' ') -- Desbloqueia mensagens, se houver -- Continue substituindo-as periodicamente enquanto a tela personalizada estiver ativa -- Este loop pode ser excessivo; muitas vezes, apenas defini-las uma vez é suficiente. -- Ajuste o tempo de espera ou remova o loop se o desempenho for afetado. while true do Citizen.Wait(500) -- Verifica/substitui a cada 500 ms -- Verifica se a tela de carregamento ainda está ativa (pseudocódigo, precisa de código real lógica) -- local isLoading = GetIsLoadingScreenActive() -- Este nativo pode não funcionar cedo o suficiente -- se não isLoading então break end -- Sai do loop quando o jogo principal carrega (precisa de uma condição melhor) -- Reaplica substituições para qualquer eventualidade AddTextEntry('FE_THDR_GTAO', ' ') AddTextEntry('PM_NAME_APP', ' ') AddTextEntry('PM_INFO_DET', ' ') AddTextEntry('LOADING_SPLAYER_L', ' ') AddTextEntry('DLC_ITEM_UNLOCK', ' ') -- Opcionalmente, oculta o círculo de carregamento giratório no canto inferior direito HideHudComponentThisFrame(14) -- HUD_LOADING_SPINNER end end) --]] -- Você pode adicionar mais lógica aqui se necessário, por exemplo, ouvindo eventos do jogo -- para enviar mensagens específicas para sua tela de carregamento NUI. -- Exemplo: Enviar uma mensagem quando o jogador aparecer (embora a tela de carregamento geralmente já tenha desaparecido nesse momento) -- AddEventHandler('playerSpawned', function() -- SendNUIMessage({ type = 'playerReady' }) -- end) print('[MyLoadingScreen] Script do cliente carregado.')

Explicação:

• Cidadão.Espere(100): Um pequeno atraso. Às vezes, tento interagir com a NUI ou elementos do jogo. imediatamente quando o script carrega, pode falhar. Isso dá tempo para as coisas inicializarem.
• ShutdownLoadingScreenNui(): Esta é uma função nativa do FiveM, projetada especificamente para ocultar os elementos da interface do usuário da tela de carregamento padrão fornecidos pelo jogo/FiveM. Geralmente é a maneira mais simples e direta.
• EnviarMensagemNUIM({ ... }): Um exemplo mostrando como você pode enviar dados de Lua para seu JavaScript. A tabela que você passa se torna a dados do evento objeto em seu window.addEventListener('mensagem', ...) ouvinte em script.js. Você pode usar isso para acionar ações específicas ou passar informações do servidor.
• Método 2 (Comentado):
  • Fornece uma abordagem alternativa usando AdicionarEntradaDeTexto. Esta função permite que você substitua as sequências de texto do jogo padrão identificadas por suas chaves (como FE_THDR_GTAO). Ao defini-los em um espaço (' '), você efetivamente os oculta.
  • O Cidadão.CriarTópico cria um thread separado para esta tarefa.
  • O enquanto verdadeiro laço (com Cidadão.Espere) reaplica continuamente essas substituições. Isso pode ser mais robusto contra o jogo tentando redefinir o texto, mas pode ser um exagero. Também inclui HideHudComponentThisFrame(14) para esconder o spinner.
  • Escolher um método. Usando ShutdownLoadingScreenNui() é geralmente preferido pela simplicidade, a menos que você encontre problemas em que elementos padrão ainda piscam brevemente.
• imprimir(...): Registra uma mensagem no console F8 do cliente, útil para confirmar o script carregado.

Salvar este arquivo como cliente.lua.

Etapa 6: Instalando e executando a tela de carregamento

Agora que todas as peças foram criadas, vamos colocá-las no servidor.

1. Carregar o recurso:
   • Pegue o todo minha-tela-de-carregamento pasta (que agora contém índice.html, estilo.css, script.js, fxmanifest.lua, cliente.lua, e o imagens e áudio subpastas com seu conteúdo).
   • Carregue esta pasta completa no seu servidor FiveM recursos diretório. Você pode usar um software FTP (como o FileZilla) ou o painel web do seu servidor. A estrutura deve ser semelhante a: [dados-do-servidor]/recursos/minha-tela-de-carregamento/.
2. Garantir o Recurso em servidor.cfg:
   • Abra o arquivo de configuração principal do seu servidor, geralmente chamado servidor.cfg.
   • Encontre a seção onde os recursos são iniciados (linhas geralmente começando com garantir ou começar).
   • Adicione uma linha para iniciar seu recurso de tela de carregamento:
     Tela de carregamento personalizada cfg # garante minha tela de carregamento
   • O posicionamento importa um pouco: Certifique-se de que está listado antes recursos que podem demorar para carregar se você quiser que a tela apareça o mais cedo possível. No entanto, garantir geralmente é suficiente. Faça não coloque-o dentro de qualquer [categoria] colchetes se você quiser que ele seja um recurso padrão.
3. Reinicie seu servidor: Para as mudanças em servidor.cfg e para que o novo recurso seja reconhecido, você deve reiniciar completamente o servidor FiveM.
4. Conectar e testar: Inicie o FiveM e conecte-se ao seu servidor. Agora você deverá ver sua tela de carregamento personalizada em vez da tela padrão! Teste a barra de progresso (ela deve reagir ao carregamento real do FiveM), as mensagens que mudam e os controles de música. Verifique o console F8 no jogo para ver se há algum erro do seu cliente.lua ou potenciais problemas de NUI. Verifique o console do navegador (geralmente acessível via F8 -> Ferramentas NUI ou abrindo o HTML diretamente) para erros de JavaScript.

Ideias avançadas de personalização

Depois de ter o básico funcionando, você pode explorar recursos mais avançados:

• Vídeos de fundo: Em vez de uma imagem estática, use um HTML marcação.
  • Adicionar para o seu índice.html.
  • Estilo #bg-vídeo em CSS semelhante ao .fundo div (posição absoluta, 100% largura/altura, ajuste de objeto: capa, índice z: -1).
  • Importante: Os vídeos aumentam significativamente o tamanho da tela de carregamento. Otimize-os bastante (resolução, taxa de bits). Use formatos como .mp4 (codec H.264). Lembre-se de adicionar o arquivo de vídeo a fxmanifest.lua. A reprodução automática pode exigir silenciado atributo inicialmente devido às políticas do navegador; você pode precisar de JS para ativar o som com base na interação do usuário (como clicar no controle de volume).
• Buscando regras/mensagens do servidor dinamicamente: Em vez de codificar mensagens em JS, use buscar em seu script.js para carregar regras ou anúncios de um .json arquivo dentro do seu recurso ou até mesmo de um servidor web/API externo. Isso facilita as atualizações.
• Usando Web Frameworks: Empregue estruturas CSS como Tailwind CSS ou Bootstrap para um estilo mais rápido, ou estruturas JavaScript como Vue.js ou React para uma lógica de UI mais complexa (embora isso adicione complexidade e etapas de construção significativas).
• Integrações de API: Obtenha dados de APIs externas (por exemplo, mostre a contagem de jogadores online do seu servidor do Discord usando um bot do Discord e um endpoint de API simples). Isso requer scripts do lado do servidor (servidor.lua no seu recurso ou em um serviço web separado) para manipular com segurança.
• Animações mais sofisticadas: Use animações CSS (@quadros-chave) ou bibliotecas de animação JavaScript (como GSAP) para transições mais suaves, efeitos de desbotamento ou logotipos animados.

Solução de problemas comuns

• A tela de carregamento não aparece:
  • Verificar servidor.cfg: É garantir minha tela de carregamento presente e escrito corretamente? Há algum erro no console do servidor na inicialização relacionado ao recurso?
  • Verificar fxmanifest.lua:É o tela de carregamento 'index.html' linha correta? São todos arquivos necessários (HTML, CSS, JS, imagens, áudio) listados no arquivos bloco? Verifique os nomes dos arquivos e caminhos com cuidado (no Linux, diferencia maiúsculas de minúsculas!).
  • Verifique a estrutura da pasta: é a minha-tela-de-carregamento pasta diretamente dentro do recursos pasta?
• Estilos CSS não aplicados:
  • Verifique o HTML tag: É o href="estilo.css" correto?
  • Verificar fxmanifest.lua: É estilo.css listado no arquivos bloquear?
  • Verifique a sintaxe CSS: há erros de digitação ou erros em seu estilo.css arquivo? Use um validador CSS.
  • Cache do navegador: Às vezes, o cache NUI do FiveM retém versões antigas. Limpe o cache do FiveM (geralmente em %localappdata%\FiveM\FiveM.app\cache no Windows, exclua pastas como navegador, banco de dados, armazenamento nui) e reinicie o FiveM.
• JavaScript não funciona (sem progresso, sem mensagens mudando, sem música):
  • Verifique o HTML tag: É o src="script.js" correto e colocado no fim do <body>?
  • Verificar fxmanifest.lua: É script.js listado no arquivos bloquear?
  • Verifique o console do navegador: Abra o console F8 no FiveM, vá para NUI Devtools (se disponível) ou abra o índice.html diretamente em um navegador e verifique o console do desenvolvedor (geralmente F12) em busca de erros de JavaScript. Esses erros geralmente identificam a linha exata do problema.
  • Problemas de áudio: o arquivo de música está em .ogg formato? O caminho está em novo Áudio(...) correto? É áudio/sua_música.ogg listado no manifesto? Lembre-se das restrições de reprodução automática do navegador – a música pode começar somente após clicar no botão de reprodução.
• Barra de progresso não atualiza:
  • Você está confiando nos eventos FiveM NUI (window.addEventListener('mensagem', ...)? Certifique-se de que este código esteja ativo (não comentado).
  • Os nomes dos eventos são (status de carga, progresso, fração de carga) correto? Às vezes, isso pode variar um pouco entre as atualizações do FiveM ou compilações específicas do jogo. Adicionar console.log(JSON.stringify(evento.dados)) dentro do ouvinte da mensagem para ver exatamente quais dados o FiveM está enviando.
  • O ID do elemento é (barra de progresso interna) correto tanto em HTML quanto em JS?
• Elementos de carregamento padrão do FiveM ainda visíveis:
  • Verificar cliente.lua: O script está em execução (verifique se há imprimir mensagem em F8)? É ShutdownLoadingScreenNui() sendo chamado? Se estiver usando AdicionarEntradaDeTexto, as chaves estão corretas para a construção do seu jogo? Tente aumentar a inicial Cidadão.Esperar().

Precisa de uma solução premium? Confira o FiveMX!

Criar uma tela de carregamento do zero é gratificante, mas também pode levar tempo, principalmente se você quiser recursos avançados e um design bem elaborado.

Se você prefere uma solução profissional e pronta para uso, nós temos o que você precisa aqui na FiveMX.

Oferecemos uma seleção criteriosa de telas de carregamento premium e ricas em recursos, projetadas por desenvolvedores experientes.

Benefícios das telas de carregamento pagas do FiveMX:

• Projetos profissionais: Visualmente deslumbrante e estética moderna.
• Recursos avançados: Geralmente inclui vídeos de fundo, tocadores de música, diversas seções configuráveis, prévias de integração do Discord, indicadores de status do servidor e muito mais.
• Configuração fácil: Geralmente vêm com arquivos de configuração simples para personalizar texto, logotipos, links e recursos sem precisar de alterações profundas no código.
• Confiabilidade e suporte: Testado para compatibilidade e geralmente conta com suporte do desenvolvedor caso você encontre problemas.
• Economize tempo e esforço: Obtenha um resultado de alta qualidade instantaneamente, permitindo que você se concentre em outros aspectos do seu servidor.

Explore nossa variedade de interfaces e telas de carregamento para encontrar a opção perfeita para a identidade do seu servidor:

• Categoria de telas de carregamento FiveMX
• Coleção de scripts FiveMX (a seção Interfaces geralmente inclui telas de carregamento)

Considere estas opções populares disponíveis no FiveMX:

1. Tela de carregamento moderna V1: Uma opção elegante e limpa para você começar.
2. Tela de carregamento avançada V6: Repleto de recursos para máxima personalização.
3. Tela de carregamento exclusiva V13: Destaque-se com um design diferenciado.
4. Tela de carregamento V16: Outra excelente escolha com recursos modernos.

Investir em uma tela de carregamento premium pode elevar significativamente a qualidade percebida do seu servidor e a experiência do jogador desde o primeiro clique.

Conclusão

Criando um Tela de carregamento personalizada do FiveM é uma maneira poderosa de aprimorar a identidade do seu servidor e proporcionar uma melhor experiência ao usuário.

Percorremos a configuração da estrutura HTML, estilizando-a com CSS, adicionando comportamento dinâmico com JavaScript e integrando-a ao FiveM usando o fxmanifest.lua e um simples cliente.lua script para ocultar elementos padrões.

Lembre-se de que o segredo é o gerenciamento cuidadoso de arquivos (listar tudo no manifesto), entender como os eventos NUI funcionam para atualizações de progresso reais e usar padrões da web (HTML, CSS, JS).

Não tenha medo de experimentar diferentes estilos, mensagens e mídias.

Teste cuidadosamente no seu navegador e no jogo, usando os consoles do desenvolvedor para depurar problemas.

Quer você construa sua própria obra-prima seguindo este guia ou escolha uma opção premium refinada FiveMX.cominvestir na sua tela de carregamento é investir na primeira impressão do seu servidor.

Boa codificação e esperamos que isso ajude você a criar um ponto de entrada incrível para seus jogadores!

Perguntas Frequentes (FAQ)

P1: Posso usar vídeos de fundo em vez de imagens?

R: Sim! Use o HTML marcação (). Estilize com CSS para cobrir a tela (posição: absoluta, largura: 100%, altura: 100%, ajuste de objeto: capa, índice z: -1). Lembre-se de mudo para que a reprodução automática funcione de forma confiável, otimize bastante o tamanho do arquivo de vídeo, use formatos compatíveis como MP4 (H.264) e liste o arquivo de vídeo em seu fxmanifest.lua.

Q2: Como faço para que a barra de progresso mostre o real Progresso do carregamento do FiveM?

R: A maneira mais confiável é usar o JavaScript window.addEventListener('mensagem', ...) para ouvir mensagens NUI enviadas pelo FiveM. Especificamente, procure um evento como progresso que muitas vezes contém um fração de carga propriedade (um valor de 0,0 a 1,0). Multiplique isso por 100 e passe para seu atualizaçãoProgresso Função JavaScript. Evite depender apenas do progresso simulado (como o intervalo de configuração exemplo) para a versão final.

Q3: Onde exatamente coloco os arquivos da tela de carregamento no meu servidor?

A: Crie uma pasta dedicada para seu recurso (por exemplo, minha-tela-de-carregamento) dentro do servidor principal recursos diretório. Todos os arquivos (índice.html, estilo.css, script.js, fxmanifest.lua, cliente.lua, e subpastas como imagens, áudio) deve ir dentro desta pasta de recursos.

P4: Posso ter música de fundo? Como adiciono controles?

R: Sim. Use o HTML marcar ou criar uma Áudio objeto em JavaScript (novo Áudio('audio/music.ogg')). Fundamentalmente, use o .ogg formato de áudio para melhor compatibilidade no FiveM NUI. Adicione botões HTML padrão () e potencialmente uma entrada de intervalo () para volume em seu índice.html. Use ouvintes de eventos JavaScript (addEventListener) nesses elementos para controlar o objeto de áudio .jogar(), .pausa(), e .volume Propriedades. Lembre-se de listar o arquivo de áudio no seu manifesto.

P5: Por que minha tela de carregamento não aparece?

R: Verifique novamente estes culpados comuns:
1. O recurso está assegurado corretamente em servidor.cfg (garantir nome_da_pasta_de_recurso)?
2. É o fxmanifest.lua presente na pasta de recursos?
3. O manifesto possui a tela de carregamento 'seu_arquivo_html.html' linha?
4. São todos arquivos necessários (HTML, CSS, JS, imagens, áudio, fontes) listados com precisão em arquivos { ... } no manifesto? Verifique caminhos e nomes de arquivos (diferencia maiúsculas de minúsculas!).
5. Há algum erro no console do servidor ou no console F8 do cliente relacionado à falha no carregamento do recurso?
6. Você reiniciou o servidor depois de adicionar o recurso e garantir isso?

P6: Como posso fazer com que a tela de carregamento desapareça suavemente quando o jogo começa?

R: Isso requer comunicação entre o seu script Lua e a página NUI. O FiveM não possui um evento perfeitamente confiável de "carregamento totalmente concluído, prestes a gerar" que seja fácil de capturar. antes A NUI está destruída. No entanto, você pode:
1. Envie uma mensagem NUI personalizada (EnviarMensagemNUIM({ type = 'carregandoQuaseConcluído' })) de um script cliente Lua baseado em certos eventos do jogo ou temporizadores pouco antes do spawn.
2. No seu JavaScript, ouça esta mensagem (se (evento.dados.tipo === 'carregamentoQuaseConcluído')).
3. Quando recebido, acione uma animação de fade-out CSS no seu contêiner principal (.loading-container.fade-out { opacidade: 0; transição: opacidade 1s ease-out; } e adicione o desaparecimento gradual classe usando JS). Isso proporciona uma transição visual, embora o NUI ainda possa ser removido abruptamente pelo FiveM posteriormente.

Telas de carregamento pagas

Telas de carregamento gratuitas

Pronto! Alguma dúvida? Deixe um comentário.