Kehinde Owolabi

Posted on Sep 18

🚀 Boosting TCJSgame Performance with requestAnimationFrame and Delta Time

🚀 Boosting TCJSgame Performance with a Simple Extension

Do you use TCJSgame v1, v2, or v3 to build 2D games in JavaScript?

By default, TCJSgame uses setInterval to run the game loop, which works… but it's not the fastest.

In this tutorial, we'll use the TCJSgame Performance Extension – a small add-on that makes your games run smoother, faster, and more consistent.

🎯 What You'll Learn

The problem with setInterval in game loops.
Why requestAnimationFrame (rAF) is better.
What delta-time (dt) is and how it fixes movement speed.
How to add tilemap caching and off-screen culling.
How to install and use the performance extension in your TCJSgame projects.

⚡ 1. The Problem

By default, TCJSgame runs like this:

this.interval = setInterval(() => this.updat(), 20);

This means:

The game tries to run every 20ms (~50 FPS).
If your computer is slow, frames drop.
If your monitor is 120Hz, the game looks less smooth.
It keeps running even when the tab is hidden, wasting CPU.

⚡ 2. The Fix: requestAnimationFrame

Instead of setInterval, modern games use:

requestAnimationFrame(loop);

Matches your screen refresh rate (60Hz, 120Hz, etc).
Pauses when the tab is hidden.
Smoother animation.

That's what our extension does automatically. ✅

⚡ 3. Delta Time (dt)

Without delta time, your speeds are pixels per frame.

At 60 FPS, 5px/frame = 300px/second.
At 120 FPS, the same code runs twice as fast. ❌

With delta time:

function update(dt) {
  player.x += 200 * dt; // move 200 pixels per second
}

No matter the FPS, the player always moves the same distance per second. 🎯

⚡ 4. Extra Optimizations

The extension also gives you:

Tilemap caching → draw once, reuse.
Off-screen culling → skip invisible objects.
Pause / Resume → control the game loop manually.

🛠 5. Installation

Just include the file after TCJSgame in your HTML:

<script src="tcjsgame-v3.js"></script>
<script src="https://tcjsgame.vercel.app/mat/tcjsgame-perf.js"></script>

That's it! The extension automatically patches TCJSgame.

📝 6. Example Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TCJSgame + Perf Extension</title>
</head>
<body>
  <script src="tcjsgame-v3.js"></script>
  <script src="https://tcjsgame.vercel.app/mat/tcjsgame-perf.js"></script>
  <script>
    const display = new Display();

    // Enable performance features
    enableTCJSPerf(display, {
      useDelta: true,   // use delta time
      cacheTiles: true, // cache tilemaps
      cullMargin: 32    // skip offscreen objects
    });

    display.start(800, 450);

    // add a component
    let player = new Component(50, 50, "red", 100, 100, "rect");
    display.add(player);

    // smooth movement with delta time
    function update(dt) {
      if (display.keys[39]) player.x += 200 * dt; // move right
      if (display.keys[37]) player.x -= 200 * dt; // move left
    }
  </script>
</body>
</html>

⚙️ 7. Options

When calling enableTCJSPerf(display, options):

Option	Default	What it does
`useDelta`	`false`	Adds `dt` (time since last frame) to `update()` for consistent speed.
`cacheTiles`	`false`	Caches tilemaps on an offscreen canvas.
`cullMargin`	`0`	Skips drawing objects outside viewport; margin adds padding.

📊 8. Results

Feature	Original TCJSgame	With Extension
Game loop timing	Fixed 20ms	Synced with screen refresh
Background tab behavior	Keeps running	Auto-pauses
Movement speed	Pixels per frame	Pixels per second (with dt)
Tilemap performance	Redrawn each frame	Cached & reused
Off-screen rendering	Always drawn	Culling supported

✅ 9. Compatibility

Works with v1, v2, and v3.
Old code still works without changes.
If you want, you can use the new dt for smoother movement.

🧑‍💻 10. Next Steps

Try the extension in your current game.
Compare the FPS with and without it.
Share your results with the TCJSgame community!

🎉 Conclusion

With just one extra file, your TCJSgame projects become smoother, faster, and more efficient.
Now you can focus on building your game while the extension handles performance!

DEV Community