Loading Screen FiveM: guia completo e boas práticas para 2026

Antes de ver o seu mapa, o seu HUD ou a sua economia, todo jogador que entra no servidor passa pela mesma tela durante um ou dois minutos: a de carregamento. Um loading screen FiveM bem feito transforma essa espera obrigatória na primeira declaração de intenções do seu projeto; um ruim (ou o logo genérico padrão) grita “servidor montado numa tarde” antes de o jogador pisar no chão. Neste guia vemos como ele funciona tecnicamente, o que um bom precisa ter, quais erros o transformam em peso morto e onde conseguir o seu.

Por que a tela de carregamento importa mais do que parece?

O loading screen é a primeira impressão literal do seu servidor e aparece no momento de maior atenção: o jogador acabou de decidir te testar e não tem mais nada para olhar. Ele serve para transmitir identidade, informar o essencial (regras básicas, Discord, staff) e reduzir a ansiedade da espera mostrando progresso real.

Existe um fator psicológico simples: uma espera com música, informação útil e uma barra de progresso que avança parece bem mais curta do que um logo estático. E num ecossistema em que o jogador novo testa três servidores numa tarde, cada detalhe de acabamento conta para ele ficar no seu.

Como funciona um loading screen do FiveM por dentro?

Um loading screen do FiveM é, na essência, uma página web: HTML, CSS e JavaScript que o cliente baixa e exibe durante o carregamento. Ele é declarado no fxmanifest.lua do recurso com a diretiva loadscreen, e o FiveM envia à página eventos com o progresso real do carregamento.

fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'
loadscreen_manual_shutdown 'yes'

files {
    'html/index.html',
    'html/style.css',
    'html/script.js',
    'html/music.ogg',
    'html/background.jpg'
}

Dois detalhes importam aqui. Primeiro, todos os assets precisam estar listados em files, senão o cliente não baixa e a página aparece quebrada. Segundo, a diretiva loadscreen_manual_shutdown 'yes' faz com que a tela não feche sozinha quando o mapa termina de carregar: o fechamento fica por conta do seu código, com o native ShutdownLoadingScreenNui(), algo que servidores com multicharacter usam para manter a tela até o jogador escolher o personagem.

Dentro do HTML você tem JavaScript normal. Escutando o evento loadProgress você move uma barra de progresso autêntica:

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

É só isso: quem sabe montar um site sabe fazer um loading screen. A diferença entre um amador e um profissional está no design e nos detalhes.

O que um bom loading screen precisa ter?

Um bom loading screen tem música com controle de volume, informações essenciais do servidor, apresentação da equipe, progresso real de carregamento e identidade visual coerente. Itens extras como teclas básicas e dicas de roleplay ajudam, desde que não pesem nem poluam a tela.

• Música com controle de volume: a música ambienta, mas o controle é obrigatório. Nada expulsa mais rápido do que uma faixa em volume máximo sem botão de silêncio, principalmente para quem entra de madrugada com o som alto.
• Informações do servidor: nome, link do Discord e duas ou três regras essenciais. Não cole o regulamento inteiro: ninguém lê vinte parágrafos numa tela de carregamento.
• Apresentação da staff ou do projeto: humaniza o servidor e mostra que existe uma equipe por trás.
• Progresso real de carregamento: a barra ligada ao loadProgress que vimos acima. Barras falsas que enchem e reiniciam geram desconfiança justamente no momento errado.
• Identidade visual coerente: cores, tipografia e tom devem antecipar o que o jogador vai encontrar lá dentro. Se o seu servidor é sério, a tela também precisa ser.

Extras que somam sem complicar: teclas básicas do servidor, rotação de dicas de roleplay e um contador de jogadores online.

Performance: qual o problema do vídeo em 4K?

O erro mais comum é colocar um vídeo de fundo pesado. O loading screen é baixado na conexão, e tudo que pesa soma ao tempo de espera que você queria deixar agradável. Um vídeo 4K de oitenta megas alonga o download inicial, consome memória e pode travar PCs modestos justo quando o cliente está mais ocupado carregando o mapa.

Regras práticas: comprima as imagens, use áudio em formatos leves e, se quiser fundo animado, prefira um vídeo curto em loop em 1080p bem comprimido ou direto uma animação CSS, que pesa quilobytes. Um loading screen completo e bom não deveria passar de algumas dezenas de megas, música incluída. Lembre que muitos dos seus jogadores não têm fibra nem um PC topo de linha: a tela precisa melhorar a espera, não alongá-la.

Personalizar, usar template ou comprar: o que vale mais a pena?

Você tem três caminhos e os três são legítimos, dependendo da sua situação: fazer do zero, partir de um template gratuito ou comprar um premium. A escolha depende de quanto tempo de design você tem e de quanto a identidade visual do projeto pesa.

1. Fazer do zero: controle total e custo zero se você sabe HTML e CSS. É a melhor opção se o seu projeto tem identidade visual forte e alguém na equipe que saiba montar a página.
2. Partir de um template gratuito: há opções open source razoáveis para começar. Aplique os mesmos filtros de segurança de qualquer recurso gratuito: baixe só de fontes legítimas, nunca de sites de leak. No guia de scripts grátis para FiveM explicamos como separar o confiável do perigoso.
3. Comprar um premium: faz sentido quando você quer resultado profissional sem gastar horas de design. Os bons incluem configuração simples (cores, textos e música num arquivo de config), progresso real de carregamento e suporte se algo não funcionar com a build do seu servidor.

Se for comprar, aplique os critérios de sempre: download imediato, atualizações gratuitas, pagamento verificado pelo Tebex e suporte de verdade. E como o loading screen é um recurso standalone que não depende de framework, qualquer um que você comprar sobrevive a migrações de QBCore para ESX ou Qbox sem mexer em nada.

A instalação, aliás, é uma das mais simples que existem: é um recurso comum, iniciado com ensure no server.cfg. Se for o seu primeiro recurso, o guia de como instalar um script no FiveM cobre o processo passo a passo.

Quais erros aparecem sempre em loading screens?

Os erros mais repetidos são música sem botão de silêncio, vídeos enormes, informação desatualizada, barras de progresso falsas e textos com erros de português. Todos se resolvem em uma tarde, e o efeito somado na primeira impressão do jogador é grande.

• Música sem botão de silêncio e sem memorizar o volume escolhido.
• Vídeos gigantes que transformam a primeira conexão num download eterno.
• Informação desatualizada: staff que já saiu, regras que mudaram, eventos de meses atrás.
• Barras de progresso falsas em loop.
• Textos com erros de ortografia na primeira tela que todo mundo vê.

Conclusão: o seu servidor começa antes de o jogador aparecer

O loading screen é um dos recursos mais baratos de melhorar em relação ao que entrega: uma tela cuidada, leve e com progresso real diz ao jogador que o resto do servidor terá o mesmo nível. Dê a ele a mesma atenção que você dá ao HUD ou ao inventário. Se você ainda está montando a base da cidade, veja os scripts para QBCore, os scripts para ESX e os scripts standalone, que funcionam independentemente do framework.