MRI Qbox BrasilMRI Qbox

MRI Qloadscreen

Tela de carregamento da MRI Qbox. Mostra um vídeo de fundo com música, a logo, os textos da cidade, o botão do Discord, a staff e a barra de progresso com a etapa do carregamento do jogo. Tudo é editado dentro do jogo, no painel do mri_Qadmin, com prévia ao vivo.


Sumário

  1. Dependências
  2. Instalação
  3. Permissões (ACE)
  4. Painel admin
  5. Arquivos locais
  6. Formato do data/config.json
  7. Teclas
  8. Barra de progresso
  9. Tema e cores
  10. Atualizando de uma versão com config.lua
  11. Estrutura de arquivos
  12. Desenvolvimento

Dependências

RecursoObrigatórioObservação
ox_libSimCallbacks do painel e log do servidor
mri_QadminNãoHospeda o painel. Sem ele, a tela usa o que já está salvo

Instalação

  1. Copie a pasta mri_Qloadscreen para resources/.
  2. No server.cfg, garanta ensure ox_lib antes do resource e então ensure mri_Qloadscreen.
  3. Desative qualquer outro resource que declare loadscreen: o FiveM usa só uma tela de carregamento.

O fxmanifest.lua usa loadscreen_manual_shutdown 'yes': a tela fecha quando o jogo chama ShutdownLoadingScreenNui (o qbx_core ou o mri_Qmultichar fazem isso).

Permissões (ACE)

Pode abrir e salvar o painel quem tiver qualquer uma destas:

ACEUso
mri_Qloadscreen.adminPermissão específica do painel
commandAdmin geral (god)

Painel admin

No mri_Qadmin, abra Tela de carregamento. À esquerda ficam os campos; à direita, a prévia da tela com o rascunho atual (sem som). Salvar grava em data/config.json, Descartar volta ao que está salvo e Padrão carrega a configuração de fábrica (só grava ao salvar).

As mudanças valem a partir da próxima conexão: quem já está na tela não recebe a alteração.

SeçãoCampos
Textos e DiscordTítulo (aceita quebra de linha), subtítulo, texto de carregamento, nome do botão e convite do Discord. Convite vazio esconde o botão
VisualLogo (arquivo ou link, vazio esconde) e largura, volume inicial, escurecer o vídeo, mostrar atalhos
Vídeos e músicasLista de faixas tocadas em sequência, com ordem ajustável. Cada faixa tem vídeo, a opção de usar o som do vídeo ou uma música separada, nome e artista
StaffLiga o card da staff ao lado do Discord, que troca de pessoa a cada 5 s. Lista vazia mostra os membros da org mri-Qbox-Brasil no GitHub

Arquivos locais

Vídeo, música, logo e foto aceitam um link (https://...) ou o nome de um arquivo na pasta correspondente do resource:

TipoPastaFormatos
Logoconfig/logo/png, jpg, webp
Vídeoconfig/video/mp4, webm
Músicaconfig/audio/mp3, ogg
Foto da staffconfig/staffs/png, jpg, jpeg

Vídeo local pesado aumenta o download de quem entra pela primeira vez. Para vídeos grandes, prefira um link.

Formato do data/config.json

Criado pelo servidor na primeira subida e reescrito a cada save do painel. Campo que falta ou vem inválido volta ao padrão.

CampoTipoDescrição
texts.titlestringTítulo grande
texts.subtitlestringTexto abaixo do título
texts.loadingstringTexto acima da barra
texts.discordstringNome do botão do Discord
discordUrlstringConvite do Discord. Vazio esconde o botão
logo.filestringArquivo em config/logo/ ou link
logo.widthnumberLargura em px (40 a 600)
overlayboolGradiente escuro atrás dos textos
showHintsboolAtalhos de teclado na tela
volumenumberVolume inicial (0 a 1)
staff.enabledboolMostra o card da staff
staff.members[]{ image, name }Até 50. Vazio = membros da org no GitHub
tracks[]{ video, useVideoAudio, audio, title, artist }Até 20 faixas

Teclas

TeclaAção
OEsconde ou mostra a interface (fica o vídeo e a barra)
PPausa ou toca
↑ ↓Volume
← →Faixa anterior ou próxima

Barra de progresso

A porcentagem vem do loadProgress do FiveM e só anda pra frente. Ao lado do texto de carregamento aparece a etapa atual: iniciando o jogo, preparando o mapa, carregando o mapa, carregando o mundo e entrando na sessão.

O spinner de "carregando" que o GTA desenha no canto inferior direito fica desligado: o server.lua liga a convar sv_showBusySpinnerOnLoadingScreen como false ao subir.

Tema e cores

A tela segue o tema da suíte (@mriqbox/ui-kit), lido no momento da conexão e enviado à NUI pelo deferrals.handover:

  • Cor de destaque: convar mri:color.
  • Cor de fundo: convar mri:backgroundColor (vazio = #09090B).
  • Tema, opacidade, fonte, radius e overrides de cor: /uiconfig do ox_lib, lido de ox_lib/mri/data/config.json.

Atualizando de uma versão com config.lua

Se o resource sobe sem data/config.json e existe um config/config.lua antigo, o servidor importa os textos, a logo, o Discord, a staff e as faixas dele uma única vez e grava o json. O console mostra config/config.lua imported into data/config.json. Depois disso o config.lua não é mais lido e pode ser apagado.

O data/config.json não vem no repositório: atualizar o resource não apaga a configuração.

Estrutura de arquivos

mri_Qloadscreen/
├── fxmanifest.lua
├── server.lua          # config em data/config.json, handover, save do painel, plugin do Qadmin
├── client.lua          # callbacks NUI do painel
├── data/config.json    # gerado pelo servidor (fora do git)
├── config/             # logo, video, audio, staffs
├── html/               # build da interface (tela e painel)
└── web/                # código da interface (React + Vite)
    └── src/
        ├── App.jsx                 # entrada da tela: progresso e etapa
        ├── loadscreen/             # a tela, usada também na prévia do painel
        ├── admin/                  # painel do mri_Qadmin
        └── lib/                    # tema, assets, staff, bridge do plugin

Desenvolvimento

cd web
pnpm install
pnpm dev     # tela em /, painel em /admin.html, com dados de exemplo
pnpm lint
pnpm build   # saída em ../html

No navegador, a tela simula o progresso e o painel salva só em memória. A NUI do FiveM é Chrome 103: o build mira chrome103.

On this page

Usamos cookies para anúncios e métricas. Veja a política de privacidade.