UM Multicharacter – Sistema moderno de seleção de personagens desenvolvido com Vite + Vue3 + Tailwind
Substitua sua interface de seleção de caracteres ultrapassada pelo UM Multicharacter, um sistema de gerenciamento de caracteres com design elegante e velocidade impressionante, construído com tecnologias web modernas. Desenvolvido com Vite, Vue3 e Tailwind CSS, este não é apenas mais um NUI (interface de usuário nula) desajeitado baseado em HTML básico – é um seletor de caracteres responsivo, fluido e repleto de recursos que torna a entrada no seu servidor uma experiência profissional desde o primeiro clique. Compatível com ESX, QBCore, e Q-BOX (caixa de som) Integrado a diversos frameworks, funciona perfeitamente com os principais sistemas de vestuário e inclui recursos avançados como modo foto, sistemas de geração de personagens personalizáveis, efeitos de personagem, emotes integrados e até mesmo um botão de loja embutido. Proporcione aos seus jogadores a primeira impressão premium que eles merecem.
O que está incluído
O UM Multicharacter oferece uma experiência completa de gerenciamento de personagens com sofisticação técnica por trás dos panos. A interface principal utiliza as ferramentas de compilação Vite para tempos de carregamento quase instantâneos, a API de composição do Vue3 para atualizações reativas da interface do usuário e o Tailwind CSS para uma estética moderna e limpa, totalmente personalizável. Você terá um sistema de modo foto com filtros e controles avançados de câmera, opções de surgimento personalizáveis que funcionam com seu seletor de surgimento existente ou surgimento automático na última localização, efeitos de troca de personagens (tanto aleatórios quanto específicos), integração com rpemotes/dpemotes para animações de exibição de personagens, gerenciamento automático de slots que atribui personagens aos slots disponíveis sem configuração manual, uma tela de créditos opcional para destacar os colaboradores da comunidade, botão de integração com a loja para acesso com um clique à sua página de doações, personalização de hora e clima para seleção de personagens atmosféricos e uma interface de usuário inteligente que oculta botões irrelevantes quando não são necessários.
Tecnologias modernas – Por que elas são importantes
A combinação Vite + Vue3 + Tailwind não é apenas um jargão — ela se traduz em melhorias reais de desempenho que seus jogadores sentem imediatamente. O recurso de substituição de módulos em tempo real (HMR) do Vite significa que o desenvolvimento e a personalização são extremamente rápidos, caso você queira ajustar a interface. O sistema reativo do Vue3 garante animações suaves e atualizações instantâneas da interface do usuário, sem transições bruscas. O Tailwind CSS simplifica as alterações de estilo por meio de classes utilitárias, em vez de lidar com CSS personalizado. O resultado? A seleção de personagens carrega em menos de um segundo, as interações da interface do usuário são responsivas e sem atrasos, a personalização não exige conhecimento profundo de front-end e a interface se adapta perfeitamente a diferentes resoluções, de 1080p a monitores ultrawide.
Compare isso com os seletores de caracteres mais antigos, baseados em jQuery ou JavaScript puro com estilos embutidos. Esses sistemas sofrem com tempos de carregamento lentos, pois precisam analisar bibliotecas inchadas, animações instáveis devido à manipulação manual do DOM, personalização difícil que exige arqueologia do CSS e layouts quebrados em resoluções não padrão. O UM Multicharacter elimina essas frustrações com uma base moderna, construída para os padrões de desenvolvimento do FiveM de 2025 em diante.
Modo Foto – Capture o melhor ângulo do seu personagem
O modo foto integrado transforma a seleção de personagens de uma tela funcional em uma vitrine criativa. Os jogadores podem tirar retratos de seus personagens com filtros predefinidos (preto e branco, sépia, vintage, vibrante, cinematográfico) ou explorar as configurações avançadas para ter controle total da câmera. Ajuste o campo de visão para closes dramáticos ou fotos amplas do personagem, modifique a profundidade de campo para desfocar o fundo e focar no personagem, controle a exposição e o contraste para obter a iluminação perfeita e gire a câmera 360 graus para encontrar o ângulo ideal. Essas fotos podem ser salvas e usadas em perfis de personagens, assinaturas em fóruns ou avatares do Discord.
O modo foto também tem utilidade prática. Jogadores que precisam ser identificados por meio de capturas de tela podem usar o modo foto para obter imagens nítidas de seus personagens. Administradores que revisam a aparência de um personagem podem solicitar capturas de tela do modo foto que mostrem detalhes exatos de suas roupas. Comunidades que organizam concursos de personagens ou eventos de moda contam com uma ferramenta integrada para a criação de personagens. Isso transforma a criação de personagens de um processo mecânico em uma atividade expressiva.
Sistema de geração personalizável
O UM Multicharacter se adapta à filosofia de spawn do seu servidor, em vez de impor uma abordagem específica. Escolha entre três modos de spawn: use a integração do seu menu de seleção de spawn existente para controle total, habilite o sistema de spawn padrão incluído para uma configuração rápida ou configure o spawn automático na última localização para que os jogadores retomem exatamente de onde pararam de sair. O sistema respeita as convenções de cada framework – as coordenadas ESX funcionam nativamente, os buckets do QBCore são tratados corretamente e as posições de logout são salvas corretamente em todos os frameworks.
Essa flexibilidade significa que você não precisa sacrificar a funcionalidade de spawn existente para obter um seletor de personagens melhor. Está usando um seletor de spawn personalizado com integração ao sistema de casas? O UM Multicharacter faz isso sem problemas. Prefere um spawn simples no último local para uma implantação rápida de jogadores? Habilite-o na configuração. Quer que os jogadores escolham entre pontos de spawn predefinidos? O sistema padrão cuida disso. Sem fluxo de trabalho forçado, sem quebrar sistemas existentes.
Efeitos de Personagem – Adicione um Toque Cinematográfico
Ative efeitos visuais quando os jogadores trocarem de personagem para adicionar requinte e personalidade. Escolha entre uma seleção aleatória de efeitos que surpreende os jogadores com transições diferentes a cada vez, ou configure efeitos específicos para cada personagem (imagine um efeito de fumaça para um bombeiro ou brilhos para um civil). Os efeitos incluem sistemas de partículas, transições de tela, movimentos de câmera e mudanças atmosféricas que tornam a troca de personagens uma experiência premium, em vez de mecânica.
Os efeitos também servem como indicadores de estado de carregamento. Enquanto o modelo do personagem carrega e as roupas são aplicadas, o efeito mascara o breve período de transição, impedindo que os jogadores vejam modelos em pose de T ou roupas incompletas. É um design tanto estético quanto funcional que melhora a percepção de desempenho, mesmo quando os tempos de carregamento reais permanecem inalterados.
Animações e integração de cenários
Integre rpemotes ou dpemotes perfeitamente para animações de apresentação de personagens durante a seleção. Configure se o sistema usa uma animação específica para todos os personagens (como uma pose ociosa ou confiante) ou se seleciona aleatoriamente uma variedade de animações para adicionar diversidade. Os personagens podem se encostar em paredes, checar seus celulares, se espreguiçar ou realizar outras animações casuais que os tornam mais expressivos enquanto os jogadores decidem qual personagem usar.
Essa integração evita a pose padrão estranha, totalmente imóvel, que a maioria dos seletores de personagens exibe. Seus personagens parecem naturais e vivos, criando melhores primeiras impressões e incentivando os jogadores a passar mais tempo no seletor de personagens, em vez de simplesmente passarem por ele às pressas. Os sistemas de emotes que você já utiliza para interpretação de personagens no jogo são automaticamente estendidos à seleção de personagens.
Gerenciamento automático de slots
Esqueça as dores de cabeça da atribuição manual de slots. O UM Multicharacter atribui automaticamente novos personagens ao primeiro slot disponível assim que são criados pelo seu sistema de criação de personagens. Excluiu um personagem? O slot fica disponível imediatamente para a próxima criação. Sem edição de banco de dados, sem ajustes de configuração, sem confusão para os jogadores sobre qual slot seu personagem ocupa. Simplesmente funciona.
Essa automação elimina os chamados de suporte comuns relacionados a espaços de personagens que não aparecem, personagens atribuídos a espaços errados ou espaços bloqueados após exclusões. O sistema monitora o status dos espaços dinamicamente e lida com toda a lógica de atribuição no servidor, evitando manipulação por parte do cliente ou problemas de dessincronização que afetam sistemas de alocação manual de espaços.
Créditos finais – Reconheça sua comunidade
A tela de créditos opcional permite destacar os colaboradores do servidor, membros da equipe, doadores, desenvolvedores e apoiadores da comunidade em uma exibição profissional e rotativa. Semelhante aos créditos de jogos, ela cria um espaço para agradecer às pessoas que tornam seu servidor possível. Atualize a lista de créditos por meio de um arquivo de configuração simples – sem necessidade de editar a interface do usuário.
Use este recurso para reconhecer os maiores doadores do mês, apresentar sua equipe de desenvolvimento, agradecer aos testadores beta por atualizações específicas, destacar os vencedores de prêmios de RPG ou apresentar artistas da comunidade que criaram conteúdo personalizado. Isso fortalece a identidade da comunidade e faz com que os colaboradores se sintam valorizados com o reconhecimento público sempre que os jogadores carregam seus personagens.
Botão de integração da loja
O botão de loja integrado oferece acesso com um clique à página de doações do seu servidor, à loja Tebex ou ao Patreon. Os jogadores podem navegar pelas opções de compra de itens cosméticos, níveis VIP ou suporte enquanto aguardam para entrar no servidor ou trocam de personagem. Configure o URL do botão no arquivo de configuração — ele funciona com qualquer link da web.
Essa localização estratégica aumenta a visibilidade da loja sem ser intrusiva. Os jogadores têm um tempo livre natural durante a seleção de personagens, tornando esse o momento perfeito para navegar pelas compras opcionais. A implementação é de bom gosto – um botão simples que não interrompe o fluxo de seleção de personagens, mas oferece acesso conveniente para os jogadores interessados.
Personalização de hora e clima
Crie a atmosfera perfeita para a seleção de personagens controlando a hora do dia e as condições climáticas. Configure um horário específico (pôr do sol da tarde para uma iluminação dramática, meio-dia para visibilidade clara dos personagens, noite para uma atmosfera melancólica) ou sincronize com o horário do servidor. Da mesma forma, defina as condições climáticas (céu limpo para exibir as roupas, nublado para um clima cinematográfico, chuva para profundidade atmosférica) ou sincronize com o clima atual do servidor.
Esses controles ambientais permitem que você estabeleça uma identidade visual para o seletor de personagens do seu servidor. Um servidor de RPG realista pode usar iluminação natural do meio-dia com tempo bom. Um servidor sombrio/com atmosfera urbana pode usar a noite com neblina. Um servidor tropical pode usar o pôr do sol com nuvens esparsas. O seletor de personagens se torna uma extensão da identidade estética do seu servidor.
Lógica de interface de usuário inteligente
O UM Multicharacter oculta elementos da interface que não são contextualmente relevantes, criando uma experiência mais limpa. O botão Criar Personagem só aparece quando o jogador tem espaços vazios disponíveis – sem confusão sobre por que a criação de personagens não funciona quando os espaços estão no máximo. O botão Trocar Personagem desaparece quando o jogador tem apenas um personagem – por que oferecer uma escolha se não há nada para escolher? Essa visibilidade inteligente reduz a poluição visual da interface e evita confusão para o jogador.
O sistema também adapta dinamicamente a posição dos botões com base nas opções disponíveis. Um único personagem? Botão "Jogar" grande e em destaque. Vários personagens? Grade de personagens com seleção. Espaços vazios? O botão "Criar Personagem" ganha destaque. A interface se reorganiza para destacar a ação mais relevante para o estado atual do jogador.
Compatibilidade entre estrutura e vestuário
Estruturas:
✅ QBCore – Suporte nativo completo com capacidade de substituição de múltiplos caracteres qb
✅ Q-BOX (caixa de som) – Compatibilidade total com o fork QBCore moderno
✅ ESX – Integração nativa com o esx-core para gerenciamento de caracteres
Sistemas de vestuário:
✅ aparência de illenium – Sistema de vestuário principal recomendado com suporte completo a todas as funcionalidades
✅ fivem-aparência – Versão legada do Illenium para QB/ESX (não AJ-appearance ou padrão)
✅ qb-roupas – Sistema de vestuário nativo do QBCore com integração completa
✅ trocador de pele – Sistema tradicional de aparência de caracteres do ESX
⚠️ Sistemas personalizados – Funciona se o seu sistema usar estruturas de eventos compatíveis ou puder acionar menus de roupas por meio de eventos.
Importante: Os sistemas de vestuário personalizados devem suportar estruturas de eventos semelhantes ou fornecer acesso ao menu de vestuário baseado em gatilhos. Se o seu vestuário personalizado não disparar eventos compatíveis, a integração poderá exigir ajustes de configuração ou código de ponte.
Perfeito para
Servidores que desejam causar uma primeira impressão profissional com um design de interface de usuário moderno.
Comunidades frustradas com seletores de personagens lentos, desatualizados e que parecem desajeitados.
Administradores que valorizam a facilidade de personalização sem conhecimento profundo de desenvolvimento front-end.
Servidores de RPG que desejam recursos para exibir personagens e tirar fotos.
Servidores com sistemas de doação que desejam uma integração harmoniosa com a loja.
Comunidades que reconhecem e recompensam os colaboradores por meio de exibições de créditos
Instalação
Extraia a pasta um-multicharacter para o diretório de recursos do seu servidor.
Configure a seleção do framework em config.lua (qbcore/qbox/esx)
Configure o sistema de roupas em config.lua (illenium-appearance/fivem-appearance/qb-clothing/skinchanger/custom)
Ajuste a preferência do sistema de geração de personagens (use o seletor de geração existente, o sistema padrão ou a última localização).
Personalize os filtros do modo foto, os efeitos de personagem e as animações para combinar com a estética do seu servidor.
Adicione o URL do botão da loja se estiver integrando o acesso à página de doações.
Configure a lista de créditos com os colaboradores da sua comunidade.
Defina as preferências de hora/clima para o ambiente de seleção de personagens.
Adicione `ensure um-multicharacter` ao arquivo `server.cfg`.
Remova ou desative o seletor de caracteres antigo (qb-multicharacter, esx-multicharacter, etc.).
Reinicie o servidor e teste a criação, troca e exclusão de personagens, bem como o modo foto.
Especificações técnicas
Desempenho: O pacote otimizado para Vite carrega em menos de 1 segundo com componentes carregados sob demanda para uma resposta instantânea da interface do usuário.
Estrutura: API de composição do Vue3 com gerenciamento de estado reativo e renderização eficiente.
Estilo: Abordagem do Tailwind CSS focada em utilitários com configuração de tema personalizável.
Ferramenta de compilação: Vite para substituição a quente de módulos durante o desenvolvimento e para otimizações de produção.
Dependências: Seu framework escolhido (ESX/QB/QBOX) e sistema de vestuário compatível
Suporte do navegador: O FiveM utiliza o framework Chromium Embedded Framework moderno – sem problemas com versões antigas do navegador.
O que faz o UM Multicharacter se destacar?
A maioria dos seletores de caracteres são soluções improvisadas — interfaces básicas criadas às pressas para atender à funcionalidade mínima. O UM Multicharacter trata a seleção de caracteres como uma oportunidade crucial para causar uma primeira impressão positiva. A tecnologia moderna não serve apenas para impressionar os desenvolvedores — ela proporciona melhorias de desempenho mensuráveis e facilita a personalização. O modo foto adiciona um toque de criatividade que falta nos seletores utilitários. A lógica inteligente da interface do usuário, que oculta botões irrelevantes, demonstra atenção aos detalhes da experiência do usuário que a maioria dos desenvolvedores ignora.
A matriz de compatibilidade é impressionante – o suporte a três frameworks e quatro sistemas de vestuário principais (além de opções personalizadas) exigiu um planejamento arquitetônico cuidadoso. Muitos seletores de personagens pressupõem o uso de um framework ou sistema de vestuário específico, tornando a migração trabalhosa. O design flexível do UM Multicharacter se adapta à sua infraestrutura existente, em vez de exigir que você a reconstrua.
Potencial de personalização
A base CSS do Tailwind torna a personalização visual acessível até mesmo para quem não é designer. Quer cores diferentes? Ajuste a paleta de cores de configuração do Tailwind. Precisa de estilos de botão diferentes? Modifique as classes utilitárias. Prefere fontes ou espaçamento diferentes? Atualize a configuração do tema. As alterações se propagam automaticamente por toda a interface graças à abordagem que prioriza as classes utilitárias.
Para uma personalização mais profunda, a estrutura de componentes do Vue3 é modular e bem documentada. Troque a interface do modo foto, adicione novos recursos de exibição de personagens, integre seções adicionais à loja ou crie efeitos de transição personalizados. A base de código moderna aceita modificações em vez de resistir a elas como os seletores de código espaguete legados.
Suporte e atualizações
A documentação completa abrange a instalação para todas as combinações de frameworks, configuração do sistema de roupas, integração com o sistema de spawn, uso do modo foto e solução de problemas comuns. Uma comunidade ativa no Discord compartilha exemplos de personalização, configurações estéticas e filtros predefinidos para o modo foto. Atualizações regulares mantêm a compatibilidade com as atualizações do framework e patches do FiveM, além de adicionar recursos solicitados pela comunidade. Você está investindo em um software com manutenção ativa, não em código abandonado.
