(JavaScript) FPS Script

Cortea · April 28, 2024

Hello, I thought It would be a good idea if I shared the FPS script that I'm using on my RageMP Server. Everything is going to be client-side only.

First of all, we'll need to import our fps.js file into our index.js file, like so:

require("CEF/fps/fps.js");

Client-Side Logic:

let fpsBrowser = null;
let frameCount = 0;
let lastTickTime = Date.now();

// This function should be called every time the game renders a frame.
function onFrameRendered() {
  frameCount++;
}

// This function calculates the FPS and should be called at a regular interval.
function calculateFPS() {
  const currentTickTime = Date.now();
  const timePassed = currentTickTime - lastTickTime;
  const fps = (frameCount / timePassed) * 1000;

  // Send FPS to CEF browser
  if (fpsBrowser) {
    fpsBrowser.execute(`updateFPS(${Math.round(fps)});`);
  }

  // Reset the counter and timestamp after calculating FPS
  frameCount = 0;
  lastTickTime = currentTickTime;
}

// Setup the FPS browser and start calculating FPS
mp.events.add("render", onFrameRendered);
setInterval(calculateFPS, 1000); // Update the FPS every second

// Function to create and show the FPS browser
function showFPSBrowser() {
  if (fpsBrowser == null) {
    fpsBrowser = mp.browsers.new("package://CEF/fps/fps.html");
  }
}

// Function to close and destroy the FPS browser
function closeFPSBrowser() {
  if (fpsBrowser !== null) {
    fpsBrowser.destroy();
    fpsBrowser = null;
  }
}

// Keybind to toggle FPS display
mp.keys.bind(0x78, false, () => {
  // F9 key
  if (fpsBrowser == null) {
    showFPSBrowser();
  } else {
    closeFPSBrowser();
  }
});

CEF Browser Logic:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>FPS Display</title>
    <style>
      #fpsCounter {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        color: #ffffff;
        font-family: Arial, sans-serif;
        font-size: 12px;
        line-height: 14px;
        font-weight: bold;
        padding: 5px 10px;
        user-select: none;
        background-color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="fpsCounter">FPS: 0</div>
    <script>
      // This function will be called from the client-side script
      function updateFPS(fps) {
        document.getElementById("fpsCounter").textContent = `FPS: ${fps}`;
      }
    </script>
  </body>
</html>

Sign In

(JavaScript) FPS Script

Recommended Posts

Cortea

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Forums