Interface NUI para FiveM
Cada detalhe,uma identidade.
Painel de personagem com 3D para servidores FiveM.
Painel de visual do personagem com 3D, para servidores de roleplay.
- Next.js
- React
- Three.js
- Lua
Interface NUI para FiveMCada detalhe,uma identidade.
Painel de personagem com 3D para servidores FiveM.
- Next.js
- React
- Three.js
- Lua
Painel de visual do personagem com 3D, para servidores de roleplay.
- Next.js
- React
- Three.js
- Lua
Abrindo o arquivo
Antes do 3D, 16 bytes dizem o tamanho.
Cada peça de roupa chega num arquivo compactado. Os primeiros 16 bytes dizem se ele é do formato certo e quanto cada parte vai ocupar depois de aberta. Mexa nas páginas e veja os bytes e os tamanhos mudarem juntos.
Os 16 bytes do começo
System
Graphics
Depois de abrir
512 × 8542,5 KB1.024 × 218218 KBTotal descompactado260,5 KB
A conta é a do programa (PageSystem.ts): cada flag guarda contagens de páginas em grupos de bits (×1, ×2, ×4, ×8, ×16, ×32, ×64…) e, nos 4 bits de baixo, o tamanho base (512 bytes dobrado n vezes). O system guarda as estruturas; o graphics, vértices e texturas. Os valores aqui são de exemplo.
Seu visual, categoria por categoria.
Roupas e acessórios organizados em um painel dedicado.
17 slots · 7 categoriasO painel não guarda coordenadas: ele lê o nome de cada arquivo de peça e sabe sozinho onde ela entra. Escolha um arquivo, ou escreva um nome, e veja o nome se partir e a gaveta certa se abrir.
Exemplos
O trecho depois do ^, partido
- Slot
- uppr
- Número da peça
- 002
- Variante
- u · universal
- Categoria · tipo
- Camisa · Camisa
- No FiveM
- componente 3
Camisa
Calça
Calçado
Cabelo
Chapéu
Óculos
Acessório
As regras são as do programa (categorias.ts): tira a extensão, pega o que vem depois do ^ e parte nos _; começando com p, é prop. São 17 slots em 7 categorias, e cada slot tem o seu número no FiveM. A posição não mora aqui: o esqueleto do modelo encaixa a peça sozinho.
Interface autoral. Engenharia por trás.
Motor 3D e leitura de modelos em TypeScript.
Three.js · React · FiveMNo servidor, o painel se encaixa sozinho no sistema que já estiver rodando. Ligue e desligue os recursos, troque o modo e inicie: a corrente testa em ordem e para no primeiro que encontrar.
Recursos ligados no servidor
O que o servidor decide
- vRPvrp
- QBoxqbx_core
- QBCoreqb-core
- ESXes_extended
- Standalonelicense
As telas de verdade
As regras são as do programa (bridge.lua): espera 1 segundo, lê a convar; em auto testa vrp, qbx_core, qb-core e es_extended, nessa ordem, e para no primeiro ligado; sem nenhum, standalone. Nome inválido na convar ou framework que não responde também caem em standalone, com erro no log.
As tecnologias
Do que é feito, peça por peça
Uma interface que roda dentro do servidor de jogo: um site Next.js exportado como tela do FiveM, um visualizador 3D em Three.js com leitores de modelo escritos à mão em TypeScript, e uma ponte em Lua que conversa com o servidor. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
9tecnologias, em 3 camadas
Tela
3D
Servidor
Criação de jogos RobloxRoblox Creator Studio