CR-Loading Screen Configuration

The CR Loading Screen configuration customizes the loading screen for your FiveM server, creating an engaging and branded experience for players. This guide details the config.js file, located in the root directory, and explains each setting to help you tailor the UI, media, and information cards effectively.

---

Basic Configuration

Core settings for the loading screen’s appearance and behavior.

Setting	Type	Description
gameTitle	String	The game or server title displayed in the UI (e.g., "Code Render").
video.format	String	Video format for the background (e.g., webm, mp4).
audio.defaultVolume	Number (0–100)	Initial audio volume level.
audio.defaultMuted	Boolean	If true, audio starts muted.
image	String	Path to the logo or branding image (e.g., web/circle-coderender.png).
ui.primaryColor	String (Hex)	Primary UI color (e.g., #7EB2FF).
ui.secondaryColor	String (Hex)	Secondary UI color (e.g., #B4A5FF).
ui.tertiaryColor	String (Hex)	Tertiary UI color (e.g., #6E8EFF).
ui.quaternaryColor	String (Hex)	Fourth UI color (e.g., #9B8EFF).
ui.showControls	Boolean	If true, displays video playback controls.
loading.showProgressBar	Boolean	If true, shows the loading progress bar.
loading.showInfoCardsByDefault	Boolean	If true, displays info cards by default.

Tip: Use vibrant, complementary colors for ui settings to enhance visual appeal while maintaining readability.

---

Card Configuration

The cardInfo array defines customizable cards to display server information, rules, or links. Each card can be one of three types: Basic, List, or Button.

Card Structure

cardInfo: [
  {
    icon: "String", // Path to SVG icon (e.g., "web/icons/namaste.svg")
    title: "String", // Card title
    description: "String", // Description for basic cards
    listItems: ["String[]"], // Array of items for list-style cards
    footer: "String", // Optional footer text
    Buttons: [
      {
        label: "String", // Button text
        href: "String", // URL (e.g., "https://discord.com/...")
        icon: "String" // Path to button icon
      }
    ]
  }
]

Card Types

1. Basic Card (Single Description)

   {
     icon: "web/icons/namaste.svg",
     title: "Welcome",
     description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
   }

   Displays a simple message with an icon and title.

2. List Card (Bullet Points)

   {
     icon: "web/icons/rules.svg",
     title: "Server Rules",
     listItems: [
       "• No RDM / VDM",
       "• Respect all players & staff",
       "• No cheating or exploiting",
       "• Use common sense"
     ],
     footer: "Type /rules in-game for more."
   }

   Shows a bulleted list, ideal for rules or jobs.

3. Button Card (Links)

   {
     icon: "web/icons/social.svg",
     title: "Join the Community",
     Buttons: [
       {
         label: "Join our Discord",
         href: "https://discord.com/...",
         icon: "web/icons/discord.svg"
       },
       {
         label: "Follow on Twitter",
         href: "https://x.com/...",
         icon: "web/icons/twitter.svg"
       }
     ]
   }

   Provides clickable buttons for external links.

Note: Store SVG icons in the web/icons/ directory and reference them with relative paths.

---

Complete Example Configuration

A full config.js example showcasing all options:

config = {
  gameTitle: "Code Render",
  video: {
    format: "webm"
  },
  audio: {
    defaultVolume: 30,
    defaultMuted: true
  },
  image: "web/circle-coderender.png",
  ui: {
    primaryColor: "#7EB2FF",
    secondaryColor: "#B4A5FF",
    tertiaryColor: "#6E8EFF",
    quaternaryColor: "#9B8EFF",
    showControls: true
  },
  loading: {
    showProgressBar: true,
    showInfoCardsByDefault: false
  },
  cardInfo: [
    {
      icon: "web/icons/namaste.svg",
      title: "Welcome",
      description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
    },
    {
      icon: "web/icons/rules.svg",
      title: "Server Rules",
      listItems: [
        "• No RDM / VDM",
        "• Respect all players & staff",
        "• No cheating or exploiting",
        "• Use common sense"
      ],
      footer: "Type /rules in-game for more."
    },
    {
      icon: "web/icons/badge.svg",
      title: "Available Jobs",
      listItems: [
        "👮‍♂️ Police Department",
        "🚑 Emergency Medical Services",
        "🚕 Taxi Service",
        "🔧 Mechanic Workshop",
        "🏦 Bank Employee",
        "🍽️ Restaurant Staff",
        "🏪 Shop Owner",
        "🚛 Delivery Driver"
      ],
      footer: "Apply for whitelisted jobs on our Discord!"
    },
    {
      icon: "web/icons/social.svg",
      title: "Join the Community",
      Buttons: [
        {
          label: "Join our Discord",
          href: "https://discord.com/...",
          icon: "web/icons/discord.svg"
        },
        {
          label: "Follow on Twitter",
          href: "https://x.com/...",
          icon: "web/icons/twitter.svg"
        }
      ]
    },
    {
      icon: "web/icons/info.svg",
      title: "Tips for New Players",
      listItems: [
        "• Use /help to learn commands",
        "• Press 'M' for menu",
        "• Need help? Ask staff or open a ticket on Discord"
      ]
    }
  ]
};

---

Configuration Tips

• Icons: Use high-quality SVG icons for crisp visuals. Place them in web/icons/ and test paths before deployment.

• Colors: Choose a cohesive color palette for ui settings. Use tools like Coolors to generate hex codes.

• Content: Keep card descriptions and list items concise (under 100 characters each) for better readability.

• Buttons: Always include https:// in href URLs to ensure links work correctly.

• Video Formats: Prefer webm for faster loading and broader browser compatibility.

• Emojis: Add emojis to listItems (e.g., 👮‍♂️) for visual flair, but use sparingly to avoid clutter.

Warning: Test video and audio settings on multiple devices to ensure compatibility and performance.

---

Notes

• Branding: Use gameTitle and image to reinforce your server’s identity.

• User Experience: Set audio.defaultMuted to true to avoid startling players with unexpected sound.

• Performance: Optimize video file sizes (under 10MB) to reduce loading times.

• Testing: Preview the loading screen in a staging environment to catch UI issues before going live.

• Updates: Regularly update cardInfo with new rules, jobs, or links to keep players informed.

Support: For issues or further guidance, contact at discord.