Pular para o conteúdo principal

Personalización visual

FR Intro está pensado para que cada servidor tenga su propia identidad sin tener que tocar HTML/CSS — pero también permite ir tan lejos como quieras.

Cambiar los colores​

Edita Config.Theme en config.lua. Los valores se inyectan como variables CSS al cargar la UI, así que afectan a toda la interfaz.

Config.Theme = {
    primary    = '#FFB627',   -- Botones, acentos, hover
    secondary  = '#E63946',   -- Botón Salir, errores
    accent     = '#7CD7E6',   -- Detalles secundarios
    background = '#0a0a0a',
    text       = '#f4f4f5',
    textMuted  = '#a1a1aa',
}
  1. Coloca tu logo en ui/assets/logo.png (recomendado: PNG transparente, 512×512).
  2. Modifica Config.Theme.logoUrl.

Por defecto el logo del menú principal se renderiza como texto con el nombre del servidor (Config.ServerName). Si prefieres una imagen, edita ui/index.html línea <div class="logo">FIVERANK</div> por:

<img src="assets/logo.png" class="logo-img" alt="logo">

Cambiar el fondo del menú principal​

Tres opciones en Config.MainMenu.background:

'parallax' (default)​

Capas radiales animadas, sin assets. Más ligero.

'image'​

Config.MainMenu.background     = 'image'
Config.MainMenu.backgroundFile = 'assets/bg.webp'

Sube tu imagen a ui/assets/bg.webp (recomendado WebP, 1920×1080, < 500 KB).

'video'​

Config.MainMenu.background    = 'video'
Config.MainMenu.backgroundMp4 = 'assets/bg.mp4'

Video corto en loop (recomendado MP4 H.264, sin audio, 5-10 s, < 3 MB).

Cambiar la música​

  1. Coloca tus pistas en ui/assets/music/.
  2. Lístalas en Config.Music.tracks:
Config.Music = {
    enabled = true,
    volume  = 0.4,
    tracks  = {
        'assets/music/intro.ogg',
        'assets/music/menu.ogg',
    },
    shuffle = true,
}

Tip: si tu servidor es serio/realista, una pista ambient suave funciona mejor que algo épico. Para servidores arcade/PVP, sube el volumen y mete algo con energía.

Cambiar la escena de selección de personajes​

Cualquier sitio bonito del mapa sirve. Cambia Config.PreviewScene:

Config.PreviewScene = {
    pedCoords = vector4(X, Y, Z, HEADING),
    camCoords = vector3(X, Y, Z),
    camFov    = 35.0,
    orbitSpeed = 6.0,
    forceHour = 19,
    forceMin  = 30,
    forceWeather = 'EXTRASUNNY',
}

Sitios recomendados​

LugarpedCoords aprox.Vibe
Azotea Vinewood Hills (default)(-1383, 458, 113)Atardecer, vistas a la ciudad
Muelle de Del Perro(-1851, -1216, 13)Mar, golden hour
Helipuerto del Maze Bank(-75, -818, 326)Centro de la ciudad, dramático
Observatorio(-438, 1101, 352)Noche, ciudad iluminada
Mansión de Vinewood(-1163, 366, 81)Lujo, piscina
Hangar LSIA(-1336, -3044, 13)Industrial, aviones
Cima del Mt. Chiliad(450, 5566, 781)Pico, neblina

Para encontrar coords nuevas, usa cualquier menú de admin con función "current coords" o ejecuta /save en una posición concreta.

Cambiar el clima y la hora​

Dentro de PreviewScene:

  • forceHour + forceMin: hora del día durante la selección
  • forceWeather: 'CLEAR', 'EXTRASUNNY', 'CLOUDS', 'OVERCAST', 'RAIN', 'THUNDER', 'SMOG', 'FOGGY', 'NEUTRAL', 'SNOW', 'BLIZZARD'

Pon nil para no tocar.

Cambiar la cinemática de spawn​

Config.Spawn = {
    skyHeight      = 650.0,
    skyOffset      = vector3(120.0, -180.0, 0.0),
    duration       = 7500,
    fadeOutFinalMs = 1200,
}
  • skyHeight más alto = más dramático
  • skyOffset controla desde dónde llega la cámara (puedes hacer que venga del mar, de las montañas, etc.)
  • duration más larga = más cinematográfico, pero también más espera

Tipografía​

La UI usa Inter / Segoe UI por defecto. Para añadir una fuente custom:

  1. Sube el archivo .ttf o .woff2 a ui/fonts/.
  2. En ui/style.css, añade arriba: 
    @font-face {
        font-family: 'TuFuente';
        src: url('fonts/TuFuente.woff2') format('woff2');
    }
  3. Cambia font-family en html,body.

El logo del menú usa Impact / Anton. Para un look más auténtico GTA, descarga la fuente "Pricedown" y aplícala a .brand .logo y .mm-brand .logo.

Siguiente paso​

➡️ Solución de problemas