DEV Community: Kehinde Owolabi

🖱️ How I Fixed Canvas Click Coordinates in Limn Engine

Kehinde Owolabi — Fri, 18 Sep 2026 21:20:19 +0000

🖱️ How I Fixed Canvas Click Coordinates in Limn Engine

The bug that made buttons unclickable on scaled canvases — and the patch that fixes it.

🎯 Try the Fix

Play the demo with the patch installed:

The Limn Arcade runs every game through this patch. Click any game, tap any button — the coordinates land exactly where they should, even on phones, tablets, and scaled desktop windows.

Grab the patch here:

👉 github.com/terracodes004/limn-engine-doc

📖 Introduction

Every web game eventually hits the same wall. You build a canvas at a fixed resolution — say 800 by 400 — and then you scale it with CSS so it fits on a phone or fills a desktop monitor. The game looks fine. The graphics are crisp. Everything draws where it should.

Then you try to click a button, and nothing happens.

This is a common problem in browser game development. The mouse and touch coordinates that the browser provides are in screen space — relative to the entire page — but your game objects live in canvas space, which has its own internal resolution. When those two coordinate systems don't match, clicks land in the wrong place. On a desktop with a 1:1 canvas, the problem is invisible. On a scaled canvas — which is almost every mobile game — it breaks completely.

The Limn Engine originally handled mouse and touch input without any scaling. That worked for unscaled canvases, but it failed the moment the canvas was stretched or shrunk by CSS. The fix is a small patch to Display.prototype.addEventListeners that converts every mouse and touch position from client coordinates to canvas coordinates using getBoundingClientRect().

In this article, I'll explain exactly what was wrong, walk through the patch that fixes it, and show you how to add the same fix to any Limn Engine project.

🐛 The Bug: Coordinates That Didn't Match

Before we look at the fix, we need to understand what was actually broken. The original addEventListeners method in Limn Engine looked like this:

window.addEventListener('mousedown', (e) => {
    this.x = e.pageX + this.camera.x;
    this.y = e.pageY + this.camera.y;
});

This code reads e.pageX — the position of the mouse relative to the entire page — and adds the camera offset. On a desktop with a 1:1 canvas, this works. But the moment you scale the canvas with CSS — for example, width: 100vw on a phone — pageX and the canvas's internal coordinates diverge.

Here's the problem in plain numbers. Suppose your canvas is 800 pixels wide internally, but CSS stretches it to 1600 pixels on screen. When the user taps the middle of the canvas, the browser reports e.pageX = 800. But the canvas's internal coordinate for that same point is 400. Every click is off by a factor of two.

The fix is to read the mouse position relative to the canvas and then scale it to match the canvas's internal resolution. That's exactly what the getBoundingClientRect() method was designed for.

🛠️ What We're Going to Build

We're going to replace Display.prototype.addEventListeners with a patched version. The patch does three things the original didn't do:

Scales mouse and touch coordinates from client space to canvas space using getBoundingClientRect().
Tracks mouse movement continuously with mousemove and touchmove listeners.
Unifies mouse and touch handling through a single coordinate helper, so game code works the same on desktop and mobile.

Let me walk through the patch step by step.

Step 1: The Outer Wrapper

What we're going to do: Wrap the entire patch in an immediately-invoked function expression (IIFE) so it runs the moment the file loads. Inside, we check that Display exists before doing anything else.

(function () {
  if (typeof Display === 'undefined') {
    console.warn('[limn-click-patch] Display not found. Load patch after epic.js.');
    return;
  }
  // ... patch code ...
})();

What we just did: We created a self-contained block of code that runs immediately. The typeof Display === 'undefined' guard protects against running before epic.js has defined the Display class. If someone loads the files in the wrong order, the patch logs a warning and bails out instead of throwing a ReferenceError.

Step 2: The Coordinate Helper

What we're going to do: Write a helper function that converts any client-space position into canvas-space coordinates. This is the core of the fix.

var toCanvasCoords = function (clientX, clientY) {
  var rect = self.canvas.getBoundingClientRect();
  var scaleX = self.canvas.width / rect.width;
  var scaleY = self.canvas.height / rect.height;
  return {
    x: (clientX - rect.left) * scaleX,
    y: (clientY - rect.top) * scaleY
  };
};

What we just did: We built a function that takes a client-space X and Y and returns the matching canvas-space position.

self.canvas.getBoundingClientRect() — gets the canvas's real position and size on the page, after any CSS scaling has been applied.
self.canvas.width / rect.width — calculates the ratio between the canvas's internal resolution and its rendered size. If the canvas is internally 800 wide but rendered at 400, this is 2.
(clientX - rect.left) * scaleX — subtracts the canvas's left offset from the client X to get the position inside the canvas, then multiplies by the scale factor to convert to internal canvas pixels.

The same math applies to Y. The result is a coordinate pair that exactly matches what the canvas's drawing context sees.

Step 3: The Mouse Down Listener

What we're going to do: Rewrite the mousedown listener to use the coordinate helper, then add the camera offset to convert from canvas space to world space.

window.addEventListener('mousedown', function (e) {
  var p = toCanvasCoords(e.clientX, e.clientY);
  self.x = p.x + self.camera.x;
  self.y = p.y + self.camera.y;
});

What we just did: When the mouse is pressed, we convert the position to canvas coordinates and add the camera offset. This gives us display.x and display.y in world space — the same space where every game object lives. That's what Component.clicked() expects when it checks whether the mouse is inside a rectangle. The camera offset matters because the world can be larger than the canvas — a camera scrolls to show different parts of the world, and clicks need to land on the right object regardless of where the camera is looking.

Step 4: The Mouse Up Listener

What we're going to do: Reset display.x and display.y to false when the mouse is released.

window.addEventListener('mouseup', function () {
  self.x = false;
  self.y = false;
});

What we just did: We made the engine treat display.x as a boolean-ish value: it holds a number while the mouse is pressed, and false when it isn't. This is the convention the rest of Limn Engine already uses — game code checks if (display.x && button.clicked()) to detect clicks. Releasing the mouse sets it back to false so no click is detected on the next frame.

Step 5: The Touch Start Listener

What we're going to do: Apply the same coordinate conversion to touchstart, so a finger tap on a phone behaves exactly like a mouse click.

window.addEventListener('touchstart', function (e) {
  var t = e.touches[0];
  var p = toCanvasCoords(t.clientX, t.clientY);
  self.x = p.x + self.camera.x;
  self.y = p.y + self.camera.y;
});

What we just did: We read the first touch from e.touches[0], convert it to canvas coordinates with the same helper the mouse uses, and add the camera offset. Because the helper is the same, mouse and touch produce identical results for the same physical position on the canvas. That's what makes the game work on both desktop and mobile without any branching logic.

Step 6: The Touch End Listener

What we're going to do: Reset display.x and display.y when the finger is lifted, matching the mouse up behaviour.

window.addEventListener('touchend', function () {
  self.x = false;
  self.y = false;
});

What we just did: We closed the touch loop. Lifting a finger clears the press state, so the next frame sees no click — exactly the same as releasing a mouse button.

Step 7: The Mouse Move Listener

What we're going to do: Add a new mousemove listener that continuously updates the global mouse object. The original engine didn't have this — it only tracked the mouse when a button was pressed.

window.addEventListener('mousemove', function (e) {
  var p = toCanvasCoords(e.clientX, e.clientY);
  if (typeof mouse !== 'undefined') {
    mouse.x = p.x;
    mouse.y = p.y;
  }
});

What we just did: Every time the mouse moves — not just when it's clicked — the global mouse object gets its x and y updated in canvas space. This unlocks hover effects, custom cursors, drag-and-drop, and any other pointer-driven feature that needs to know where the mouse is right now. The typeof mouse !== 'undefined' check makes the patch safe to load even if the rest of the engine hasn't defined the mouse object yet.

Step 8: The Touch Move Listener

What we're going to do: Add the equivalent listener for touch, so mobile devices get continuous position tracking too.

window.addEventListener('touchmove', function (e) {
  var t = e.touches[0];
  var p = toCanvasCoords(t.clientX, t.clientY);
  if (typeof mouse !== 'undefined') {
    mouse.x = p.x;
    mouse.y = p.y;
  }
});

What we just did: We mirrored the mousemove behaviour for touch. A finger dragging across the screen updates mouse.x and mouse.y in canvas space in real time, giving mobile games the same tracking accuracy as desktop.

📝 The Complete Patch

Here's the entire patch in one piece, ready to paste at the bottom of epic.js or load as a separate file after the engine.

(function () {
  if (typeof Display === 'undefined') {
    console.warn('[limn-click-patch] Display not found. Load patch after epic.js.');
    return;
  }

  Display.prototype.addEventListeners = function () {
    var self = this;

    window.addEventListener('keydown', function (e) {
      self.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e) {
      self.keys[e.keyCode] = false;
    });

    var toCanvasCoords = function (clientX, clientY) {
      var rect = self.canvas.getBoundingClientRect();
      var scaleX = self.canvas.width / rect.width;
      var scaleY = self.canvas.height / rect.height;
      return {
        x: (clientX - rect.left) * scaleX,
        y: (clientY - rect.top) * scaleY
      };
    };

    window.addEventListener('mousedown', function (e) {
      var p = toCanvasCoords(e.clientX, e.clientY);
      self.x = p.x + self.camera.x;
      self.y = p.y + self.camera.y;
    });
    window.addEventListener('mouseup', function () {
      self.x = false;
      self.y = false;
    });

    window.addEventListener('touchstart', function (e) {
      var t = e.touches[0];
      var p = toCanvasCoords(t.clientX, t.clientY);
      self.x = p.x + self.camera.x;
      self.y = p.y + self.camera.y;
    });
    window.addEventListener('touchend', function () {
      self.x = false;
      self.y = false;
    });

    window.addEventListener('mousemove', function (e) {
      var p = toCanvasCoords(e.clientX, e.clientY);
      if (typeof mouse !== 'undefined') {
        mouse.x = p.x;
        mouse.y = p.y;
      }
    });
    window.addEventListener('touchmove', function (e) {
      var t = e.touches[0];
      var p = toCanvasCoords(t.clientX, t.clientY);
      if (typeof mouse !== 'undefined') {
        mouse.x = p.x;
        mouse.y = p.y;
      }
    });
  };

  console.log('[limn-click-patch] Installed.');
})();

What we've done: We replaced the entire addEventListeners method on Display.prototype with a version that reads client coordinates, scales them to canvas space with getBoundingClientRect(), adds the camera offset for world space, unifies mouse and touch handling, and tracks pointer movement continuously. Every Display instance created after this patch runs gets the corrected behaviour.

📊 Before and After

Here's what the old and new code look like side by side, using the same event as an example.

Before:

window.addEventListener('mousedown', (e) => {
    this.x = e.pageX + this.camera.x;
    this.y = e.pageY + this.camera.y;
});

After:

window.addEventListener('mousedown', function (e) {
    var p = toCanvasCoords(e.clientX, e.clientY);
    self.x = p.x + self.camera.x;
    self.y = p.y + self.camera.y;
});

What we've done: We changed a single line — e.pageX became toCanvasCoords(e.clientX, e.clientY).x. That substitution makes clicks land exactly where the player intended, on any screen size, at any scale.

🤔 What About the `fake` Canvas?

You might be wondering whether the fake canvas — Limn Engine's offscreen render buffer — also gets the patched addEventListeners. The answer is yes, but it doesn't matter.

The fake canvas is created with fake.canvas.style.display = "none", which means the browser never displays it and therefore never dispatches mouse or touch events to it. The patched listeners attach to the window object, not the canvas, so they'd technically fire on fake too — but fake never receives clicks, and the coordinate conversion always targets self.canvas, which for fake is the hidden offscreen canvas. Since no clicks ever reach it, the whole question is moot.

The patch is correct as-is. fake doesn't need to be handled specially, and the order in which display and fake are created doesn't matter.

⚠️ Limitations

Being honest about what this patch does not do is just as important as describing what it does.

The patch doesn't handle multi-touch. Only touches[0] — the first finger — is read. If two fingers press the canvas at once, only the first is tracked. For most games this is fine, but if you're building a two-player game on a single phone screen, you'll need to extend the patch.

The patch doesn't clean up after itself. If you destroy a Display instance and create a new one, the old listeners remain attached to window. In practice this doesn't matter, because Limn Engine games usually create one Display and keep it for the lifetime of the page. But if you're building a multi-page app, be aware of it.

📊 What You've Learned

Concept	Why It Matters
`getBoundingClientRect()`	Gets the canvas's real position and size on the page, after CSS scaling
Coordinate scaling	Multiplying by `canvas.width / rect.width` converts screen pixels to canvas pixels
Canvas space vs world space	`mouse.x` is in canvas space; `display.x` is in world space (canvas + camera)
Prototype overriding	Replacing `Display.prototype.addEventListeners` patches every instance at once
Client vs page coordinates	`clientX` is viewport-relative; `pageX` is document-relative — clientX is what you want
Touch unification	The same coordinate helper serves both mouse and touch, so game code doesn't branch

🚀 What's Next?

Now that clicks land correctly on every screen, you can build UI that actually works on mobile. Here are some directions to explore.

The first is to extend the patch with multi-touch support, tracking touches[1], touches[2], and beyond for split-screen local multiplayer on a single device. The second is to add a pointerdown / pointermove / pointerup listener path that unifies mouse, touch, and pen input into a single API. The third is to build a proper mouse.justPressed flag that fires for exactly one frame, which makes single-shot buttons reliable without needing to reset keys manually.

If you build any of these, send a pull request. The patch file is small, well-commented, and designed to be extended.

🐛 Report Bugs

If you find a case where clicks still land in the wrong place, report it on GitHub:

👉 github.com/terracodes004/limn-engine-doc/issues

Please include your browser, your device, the scale factor you were using, and a description of where the click landed versus where it should have landed.

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Limn Arcade	limn-engine-doc.vercel.app/arcade
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	github.com/terracodes004/limn-engine-doc/issues
Desire on DEV.to	dev.to/desire_george_434_ai

🎯 The One-Line Summary

"The limn-click patch converts mouse and touch coordinates to canvas space using getBoundingClientRect(), so buttons land where players expect on any screen size." 🖱️🚀

Draw your game into existence — one click at a time. 🎮🚀

🎮 Neon Caverns: A Platformer Built with Limn Engine — Play It Now

Kehinde Owolabi — Fri, 18 Sep 2026 02:07:45 +0000

🎮 Neon Caverns: A Platformer Built with Limn Engine — Play It Now

A neon-lit platformer with 3 levels, a boss fight, and a full scene system — built entirely in the browser with Limn Engine.

🎯 Live Demo

Play Neon Caverns right now:

👉 limn-engine-doc.vercel.app/arcade/game.html?slug=noen-caverns-thc5

The game is live on the Limn Arcade and ready to play. Click the link, and you're in the main menu within seconds. No downloads, no installation, no sign-up required to play.

Source code is underway and will be released soon for anyone who wants to learn how it was built or modify it for their own projects.

📖 Introduction

Neon Caverns is a 2D platformer built with Limn Engine — a lightweight game engine that runs entirely in the browser. You play as a pink square navigating neon-lit caverns, dodging enemies, collecting coins, and fighting a boss at the end of each level.

The game was designed to be easy to pick up but hard to master. Three levels of increasing difficulty, a boss with multiple HP stages, and a full menu system with settings, pause, and level select — all in a single JavaScript file.

Here's what makes it interesting:

3 hand-designed levels — Caverns, Towers, and Boss Arena
Intelligent enemies — they patrol, detect the player, chase, and return home
A boss fight — with health, chase AI, and a hurt-flash effect
Moving platforms — horizontal and vertical, with proper player carrying
Full scene management — Menu, Game, Over, Win, Pause, Settings, Level Select
Persistent settings — volume sliders saved to localStorage
Touch + keyboard support — playable on phones and desktops
Responsive canvas — scales to fit any screen

This article introduces the game, explains how it works, and shows you the key parts of the code — so you can see exactly how a complete Limn Engine platformer is structured.

🎮 How to Play

Action	Keyboard	Touch
Move Left	A or ←	Left button
Move Right	D or →	Right button
Jump	W, ↑, or Space	Jump button
Pause	Esc or P	II button (top right)

Goal: Reach the boss at the end of the level, jump on its head to damage it, and defeat it to win. Collect coins for score. Avoid enemies and spikes.

Enemies: Red squares that patrol and chase you when they see you. Jump on their head to defeat them.

Boss: A larger red square with multiple HP. Stomp it repeatedly to win the level.

Lives: You have 3 hearts. Get hit by an enemy or spike and you lose one. Lose all three and it's game over.

🏗️ How the Game Is Structured

Before we look at any code, let me explain the architecture of the game. Understanding the structure first makes the code much easier to follow.

Neon Caverns uses a scene system. A scene is a distinct screen or state of the game — like a menu, gameplay, or a game-over screen. Only one scene is active at a time, and the game switches between them in response to player actions.

Scene 0: Main Menu
   ↓
Scene 6: Level Select
   ↓
Scene 1: Gameplay
   ↓ (if the player dies)
Scene 2: Game Over
   ↓ (if the player wins)
Scene 3: Win Screen
   ↓ (if the player pauses)
Scene 4: Pause Menu
   ↓ (if the player opens settings)
Scene 5: Settings

Each scene is a number. The display.scene property tracks which scene is currently active, and only components assigned to that scene are drawn and updated. This is a core feature of Limn Engine — it lets you build complex games without destroying and recreating objects on every state change.

🧩 The Core Game Elements

Here's what the game is built from. Each of these is a Limn Engine Component — a game object.

Element	Type	Purpose
Player	`Component`	28×40 pink square, moves with keyboard/touch
Ground & walls	`Component`	Tiles from the level map — solid, collidable
Spikes	`Component`	Tiles with ID 4 — damage on contact
Coins	`Component`	16×16 yellow squares, +10 score each
Hearts	`Tctxt`	HUD hearts in the top-right corner
PatrolEnemy	Custom class	Extends `Component` — patrols, detects, chases
MovingPlatform	Custom class	Extends `Component` — sine-wave movement
BossEnemy	Custom class	Extends `Component` — larger, more HP, chase AI
HUD	`Tctxt`	Score, coins, and boss HP display
Pause button	`Component`	Pinned to screen via `.fixed()`
Menu buttons	`Component` + `Tctxt`	Each scene has its own buttons

The game uses custom classes that extend the base Component class — a technique that lets you give each game object its own behaviour while still using the engine's built-in rendering and collision systems.

🎨 The Neon Aesthetic

The visual style of Neon Caverns is simple but deliberate. Each tile type has its own colour:

Tile ID	Colour	Meaning
1	`#39ff14` (neon green)	Grass — walkable
2	`#7c3aed` (purple)	Stone — walkable
3	`#ffdd00` (yellow)	Gold — walkable
4	`#ff0033` (red)	Spike — hurts the player
5	`#5c4a72` (muted purple)	Brick — walkable

The player is #ff0080 (hot pink), the boss is #8b0000 (dark red), and the background is #0a0a1a (very dark blue). This palette creates the neon-cavern feel — bright, saturated objects against a dark backdrop.

🔍 Understanding the Code

The source code is a single JavaScript file. I'm not going to paste all of it here — that would be overwhelming — but I'll walk through the most important parts so you understand how everything fits together.

1. Setting Up the Display

What this code does: Creates the game engine instance and starts it.

const display = new Display();
display.perform();

What's happening: new Display() creates the engine. It must be named display because the engine references that variable internally. display.perform() switches the render loop to requestAnimationFrame, which gives us smooth 60fps and accurate deltaTime.

2. Configuring the World

What this code does: Sets the game world to be larger than the visible canvas, so the camera has something to scroll through.

const TILE = 64;
const COLS = 30, ROWS = 12;
const WORLD_W = COLS * TILE;  // 1920
const WORLD_H = ROWS * TILE;  // 768

fake.canvas.width  = WORLD_W;
fake.canvas.height = WORLD_H;
display.camera.worldWidth  = WORLD_W;
display.camera.worldHeight = WORLD_H;

What's happening: The world is 30 tiles wide and 12 tiles tall. Each tile is 64 pixels. So the world is 1920×768 pixels — much bigger than the 800×600 canvas. The camera follows the player and scrolls the visible window across this world.

3. Building a Level

What this code does: Each level is a 2D array where each number refers to a tile type. The engine builds the level from this map.

const LEVELS = [
    {
        name: "Caverns",
        map: [
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            // ... more rows ...
            [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        ],
        enemyCount: 7,
        bossHP: 3,
        bossX: 1750,
        bossChaseSpeed: 2.4,
    },
    // ... more levels ...
];

What's happening: Each row is an array of tile IDs. 1 is grass (solid), 2 is stone (solid), 0 is empty space, 3 is gold, 4 is spike, 5 is brick. The engine's TileMap class reads this map and creates the visible tiles.

Each level also has metadata: how many enemies, the boss's HP, where the boss starts, and how fast it chases the player.

4. Creating Custom Enemy Behaviour

What this code does: Defines a PatrolEnemy class that extends Component — enemies patrol, detect the player, chase, and return home.

class PatrolEnemy extends Component {
    constructor(x, y, cfg) {
        super(30, 30, cfg.color || "#ff4500", x, y, "rect");
        // ... setup ...
        this.state = "patrol";
    }

    think(player) {
        const dx = player.x - this.x, dy = player.y - this.y;
        const canSee = Math.abs(dx) < this.detectRangeX && 
                       Math.abs(dy) < this.detectRangeY;
        if (canSee) { this.state = "chase"; }
        // ... rest of the AI ...
    }
}

What's happening: The enemy has three states:

Patrol — walks back and forth between two points
Chase — moves toward the player at a faster speed
Return — walks back to its patrol centre after losing sight of the player

This is a simple but effective AI pattern. The think() method runs every frame and updates the enemy's state based on what it can "see."

5. Handling Collision with Tiles

What this code does: Resolves collisions between the player and any solid tile, snapping the player to the correct side.

function resolveTileCollisions(entity, tiles) {
    entity.onGround = false;
    for (let i = 0; i < tiles.length; i++) {
        const t = tiles[i];
        if (!t.crashWith(entity)) continue;

        const oL = (entity.x + entity.width) - t.x;
        const oR = (t.x + t.width) - entity.x;
        const oT = (entity.y + entity.height) - t.y;
        const oB = (t.y + t.height) - entity.y;

        const minX = Math.min(oL, oR), minY = Math.min(oT, oB);

        if (minX < minY) {
            // Horizontal collision
            if (oL < oR) entity.x = t.x - entity.width;
            else entity.x = t.x + t.width;
        } else {
            // Vertical collision
            if (oT < oB) {
                entity.y = t.y - entity.height;
                entity.gravitySpeed = 0;
                entity.onGround = true;
            }
            // ... handle ceiling ...
        }
    }
}

What's happening: For each tile the entity overlaps, we calculate how much they overlap on each axis. We pick the smallest overlap — that tells us which direction the collision came from — and push the entity out of the tile on that axis.

The entity.onGround = true flag is what allows the player to jump — jumping only works when onGround is true.

6. Managing Scenes

What this code does: Switches between the different game screens.

function goToScene(n) {
    currentScene = n;
    display.scene = n;
    sceneEnterTime = Date.now();
    clearHitAreas();

    if (n === SCENE_GAME) {
        fake.tileFace.show();
        display.once = true;
        display.camera.x = 0;
        display.camera.y = 0;
    }
    // ... handle other scenes ...
}

What's happening: Setting display.scene = n tells the engine to only draw and update components assigned to that scene. Components are assigned to a scene by passing the scene number as a second argument to display.add():

display.add(player, SCENE_GAME);
display.add(menuPlayBtn, SCENE_MENU);

This is what makes the scene system work. The player only exists on scene 1, so it's invisible on the menu.

7. Handling Player Damage

What this code does: Reduces HP, grants invincibility frames, and updates the heart display.

function damagePlayer() {
    if (Date.now() < invincibleUntil) return;
    playerHP--;
    invincibleUntil = Date.now() + 1500;

    for (let i = 0; i < hearts.length; i++) {
        hearts[i].color = i < playerHP ? "#ff3366" : "rgba(255,51,102,0.15)";
    }

    if (playerHP <= 0) {
        gameOver = true;
        goToScene(SCENE_OVER);
    }
}

What's happening: The invincibleUntil timestamp prevents the player from taking damage multiple times in quick succession — a technique called invincibility frames. When the player has HP left, the corresponding heart stays bright red. When they lose HP, the heart fades to a dim colour.

📝 A Note on the Source Code

The full source code is underway and will be released soon. When it's ready, you'll be able to:

See the complete JavaScript file
Run it locally by downloading epic.js from the Limn Engine site
Modify it to add your own levels, enemies, or mechanics
Publish your own version to the Limn Arcade

The code is already live on the arcade — this article is just the introduction. The full release will include:

Line-by-line explanations of every class and function
A guide to adding new levels
A guide to building your own custom enemies
A guide to publishing to the arcade

Follow Kehinde Owolabi on DEV.to to get notified when the source code is released.

🎯 What You've Learned

Concept	Why It Matters
Scene system	Lets you build menus, gameplay, pause, and game-over screens without destroying objects
Custom component classes	Extending `Component` lets you give each game object its own behaviour
TileMap levels	2D arrays are an easy way to design levels
Custom AI states	The patrol → chase → return pattern is a simple, effective AI
AABB collision resolution	Snapping to the smallest overlap prevents sticking and jittering
Invincibility frames	A timestamp prevents rapid repeated damage
Persistent settings	`localStorage` keeps volume settings between sessions
Touch and keyboard	The same game logic handles both input methods

🚀 What's Next?

If you enjoyed Neon Caverns, here's what you can do next:

Play the other arcade games — browse the Limn Arcade and see what others have built
Build your own platformer — use Limn Studio's Platformer template to get started fast
Read the platformer tutorial — a step-by-step guide to building a simpler version from scratch
Watch for the Neon Caverns source code — follow Kehinde on DEV.to for the release

🔗 Resources

Resource	Link
Play Neon Caverns	limn-engine-doc.vercel.app/arcade/game.html?slug=noen-caverns-thc5
Limn Arcade	limn-engine-doc.vercel.app/arcade
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Limn Engine Docs	limn-engine-doc.vercel.app
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	github.com/terracodes004/limn-engine-doc/issues
Kehinde on DEV.to	dev.to/kehinde_owolabi_e2e54567a

🎯 The One-Line Summary

"Neon Caverns is a 3-level platformer with intelligent enemies, a boss fight, and full scene management — playable right now on the Limn Arcade, with source code coming soon." 🎮🚀

Draw your game into existence — one stomp at a time. 🎮🚀

How I Built a Platformer Game with Limn Engine — And the Arcade That Came After

Kehinde Owolabi — Tue, 15 Sep 2026 03:51:52 +0000

🎮 How I Built a Platformer Game with Limn Engine — And the Arcade That Came After

A step-by-step guide to building a complete platformer, plus an introduction to the Limn Arcade where anyone can publish and play games.

🎯 Live Demo

Play the finished game right now:

👉 limn-engine-doc.vercel.app/arcade/game.html?slug=platform-66ek

Arrow keys or WASD to move. Space, W, or the Up arrow to jump. Collect all 5 coins to win.

Build your own version in Limn Studio:

👉 limn-engine-doc.vercel.app/editor

Browse the arcade and see what others have made:

👉 limn-engine-doc.vercel.app/arcade

📖 Introduction

Platformers are one of the best ways to learn game development. They teach you gravity, jumping, collision detection, camera following, and game state — all in one project.

They're also one of the hardest things to get right when you're starting out. Most tutorials either go too fast (throwing hundreds of lines of code at you) or too slow (spending 20 minutes on "what is a variable").

This tutorial is different.

We're going to build a complete, playable platformer using Limn Engine — a lightweight 2D game engine designed for beginners. The player moves left and right, jumps on platforms, collects coins, and wins when all coins are collected.

By the end, you'll have a game you can publish to the Limn Arcade — a community platform where anyone can share and play games made with Limn Engine.

Here's what we'll cover:

Setting up the game world and camera
Creating the player, ground, platforms, and coins
Adding movement and jumping with deltaTime
Detecting collisions with rectangles
Writing the win condition and score display
Adding on-screen buttons for mobile
Publishing to the arcade

🚀 Step 1: Download Limn Engine

Before writing any code, we need the engine.

Go to the Limn Engine documentation website: limn-engine-doc.vercel.app
Click the download button to get epic.js — this is the entire engine in a single file
Place epic.js in the same folder as your HTML file

That's it. No npm install, no build tools, no configuration.

If you don't want to download anything, you can also use Limn Studio — the browser-based editor built by Desire — which includes the engine already. We'll mention that at the end.

🛠️ Step 2: Create the HTML File

Create a new file called platformer.html and add the following structure:

<!DOCTYPE html>
<html>
<head>
  <title>Platformer</title>
  <script src="epic.js"></script>
</head>
<body>
  <script>
    // All the game code will go here
  </script>
</body>
</html>

What we just did: We created a basic HTML page that loads epic.js. The <script> block at the bottom is where all our game code will live. Nothing renders yet because we haven't created a Display.

🎨 Step 3: Set Up the Display and Camera

What we're going to do: Create the game window, enable the high-performance rendering mode, and tell the camera how big the world is.

const display = new Display();
display.perform();
display.start(500, 300);
display.backgroundColor('#00ffff');

display.camera.worldWidth = 800;
display.camera.worldHeight = 600;

What we just did:

new Display() — creates the engine instance. It must be named display because the engine references that variable internally.
display.perform() — switches the render loop to requestAnimationFrame for smooth 60fps and accurate deltaTime. Without this, movement will feel inconsistent.
display.start(500, 300) — creates a 500×300 canvas. This is the viewport — the visible window into the game world.
display.backgroundColor('#00ffff') — sets the canvas background to a light cyan colour.
display.camera.worldWidth = 800 and worldHeight = 600 — tells the camera the game world is 800×600 pixels. The camera can scroll within this space to follow the player, but it will never show anything outside these bounds.

The key thing to understand here is the difference between the canvas (500×300, what you see) and the world (800×600, where everything actually lives). This is what makes platformers feel big even on a small screen.

🧱 Step 4: Create the Player, Ground, and Platforms

What we're going to do: Add every static object in the game — the player, the ground, and three floating platforms.

// Player
const player = new Component(40, 40, '#ff0000', 100, 400, 'rect');
display.add(player);

// Ground
const ground = new Component(800, 60, '#00ff00', 0, 540, 'rect');
display.add(ground);

// Platforms
const platforms = [
  new Component(150, 20, '#00ff00', 200, 460, 'rect'),
  new Component(150, 20, '#00ff00', 450, 380, 'rect'),
  new Component(150, 20, '#00ff00', 650, 300, 'rect')
];
platforms.forEach(function(p) { display.add(p); });

What we just did:

Created a 40×40 red square as the player, at world position (100, 400).
Created a wide 800×60 green rectangle as the ground, at (0, 540). Because the ground spans the entire width of the world, the player can never fall past the sides.
Created three platforms, each 150×20, at different heights and positions. The player will need to jump on these to reach the coins.
Pushed each platform into the platforms array so we can loop through them later during collision checks.

Important: Every component must be added with display.add(). Without it, the component exists in memory but never appears on screen or gets updated.

🪙 Step 5: Add the Coins

What we're going to do: Create 5 coins at specific positions in the world.

const coinPositions = [
  {x: 633, y: 380},
  {x: 594, y: 300},
  {x: 676, y: 220},
  {x: 566, y: 380},
  {x: 445, y: 300}
];

const coins = coinPositions.map(function(c) {
  const coin = new Component(24, 24, '#ffff00', c.x, c.y, 'rect');
  display.add(coin);
  return coin;
});

What we just did:

Created an array of 5 positions, each with an x and y coordinate. These positions are placed strategically so that the player has to jump across platforms to reach them.
Used .map() to loop through the positions and create a new 24×24 yellow coin at each one.
Stored each coin in the coins array so we can later check collision with them, remove them when collected, and detect when the last coin has been picked up.

Why map() instead of a for loop? Because map() returns a new array automatically — so we get both the creation and the array storage in one step. It's a common pattern in JavaScript game development.

📊 Step 6: Add the Score UI

What we're going to do: Create a score display in the top-left corner of the screen.

const score = new Tctxt(
  '20px', 'Arial', 'white',
  20, 40,
  'left', false, 'top',
  'rgba(0,0,0,0.5)', 10, 4
);
score.setText('Score: 0');
display.add(score);

What we just did:

Tctxt is Limn Engine's rich text component. The parameters are, in order: size, font, colour, x, y, alignment, stroke mode, baseline, background, paddingX, paddingY.
We set the position to (20, 40) so the text appears near the top-left corner.
The background is rgba(0,0,0,0.5) — a semi-transparent black so the text stays readable over the cyan canvas.
The padding of 10 horizontal and 4 vertical pixels gives the background some breathing room around the text.
setText('Score: 0') sets the initial text.

We'll update this text later when coins are collected.

🎮 Step 7: Add On-Screen Buttons for Mobile

What we're going to do: Create touch-friendly buttons so the game is playable on phones — not just desktops.

const BTN = 60;
const BTN_Y = 200;

function mkBtn(x, color) {
  return new Component(BTN, BTN, color, x, BTN_Y, 'rect');
}

const btnL = mkBtn(20,  '#1a1a2e');
const btnR = mkBtn(100, '#1a1a2e');
const btnJ = mkBtn(380, '#2563eb');

const lblL = new Tctxt('36px','Arial','white',50,240,'center',false,'middle');
const lblR = new Tctxt('36px','Arial','white',130,240,'center',false,'middle');
const lblJ = new Tctxt('16px','Arial','white',410,240,'center',false,'middle');

lblL.setText('◀');
lblR.setText('▶');
lblJ.setText('JUMP');

display.add(btnL);
display.add(btnR);
display.add(btnJ);
display.add(lblL);
display.add(lblR);
display.add(lblJ);

const btnList = [btnL, btnR, btnJ, lblL, lblR, lblJ];

What we just did:

Created a helper function mkBtn() that returns a new component with the same size and y-position but a different x and colour. This saves us writing the same new Component() call three times.
Created three buttons: left arrow, right arrow, and a blue jump button.
Created three text labels on top of the buttons — "◀", "▶", and "JUMP".
Added all six elements to the display.
Stored everything in a btnList array — but only the buttons (not the labels), because we'll only be testing button hits in the click detection.

Why this matters: Without these, the game would be unplayable on phones. A platformer that works with both keyboard and touch is far more useful than one that only works on desktop.

🏗️ Step 8: Set Up Game State and Helper Functions

What we're going to do: Declare the variables that track the game state, and write a helper function for rectangle collision.

let vy = 0;
let onGround = false;
let points = 0;
let won = false;

function rectHit(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

function inBtn(b, x, y) {
  return x >= b.x && x <= b.x + b.width &&
         y >= b.y && y <= b.y + b.height;
}

What we just did:

vy — vertical velocity. Positive = falling, negative = rising. We'll add gravity to this every frame.
onGround — a boolean that's true when the player is touching the ground or a platform. We need this so the player can only jump when standing on something.
points — the player's score, starting at 0.
won — a boolean that becomes true when all coins are collected, so we can stop the game logic.
rectHit(a, b) — the classic AABB (Axis-Aligned Bounding Box) collision test. It returns true if rectangle a overlaps rectangle b. Four comparisons — one for each edge.
inBtn(b, x, y) — a simpler check: is the point (x, y) inside button b? This is used for touch input.

🎬 Step 9: Write the Game Loop

What we're going to do: Write the update(dt) function that runs every frame — this is where all the game logic lives.

Here's the full function, broken into pieces so you can see what each part does.

9a. Camera and fixed UI

function update(dt) {
  display.camera.follow(player, true);
  btnList.forEach(function(e) { e.fixed(); });
  score.fixed();

  if (won) return;

What we just did:

display.camera.follow(player, true) — the camera smoothly follows the player. The true enables smoothing so the camera lerps toward the player rather than snapping.
btnList.forEach(...) — calls .fixed() on every button every frame. This keeps them locked to the screen even as the camera scrolls.
score.fixed() — same for the score display.
if (won) return; — if the player has won, stop running game logic. The camera and UI still update, but nothing else happens.

Important: .fixed() must be called every frame, not just once. It recalculates the component's position based on the current camera offset.

9b. Touch detection

  const mx = display.x;
  const my = display.y;

  const touchingL = mx !== false && inBtn(btnL, mx, my);
  const touchingR = mx !== false && inBtn(btnR, mx, my);
  const touchingJ = mx !== false && inBtn(btnJ, mx, my);

What we just did:

display.x and display.y hold the current mouse or finger position while pressed, and false when released.
For each button, we check two things: is the pointer pressed (not false), and is the pointer inside the button's rectangle.
The result is a true/false value for each button — we'll use these in the movement code next.

9c. Horizontal movement

  const sp = 280;

  if (display.keys[37] || display.keys[65] || touchingL) player.x -= sp * dt;
  if (display.keys[39] || display.keys[68] || touchingR) player.x += sp * dt;

What we just did:

sp is the player's horizontal speed, in pixels per second.
The player moves left if the left arrow (37) or A (65) is pressed, or if the left button is being touched.
The player moves right if the right arrow (39) or D (68) is pressed, or if the right button is being touched.
Multiplying by dt means movement is frame-rate independent — the player will move at the same real-world speed on a 30fps device and a 144fps device.

9d. Jumping

  const jf = 15;
  const keyJump = display.keys[38] || display.keys[32] || display.keys[87];

  if ((keyJump || touchingJ) && onGround) {
    vy = -jf;
    onGround = false;
  }

What we just did:

jf is the jump force — how much vertical velocity we apply when the player jumps.
The player jumps if the Up arrow (38), Space (32), or W (87) is pressed, or if the jump button is being touched.
The jump only happens if onGround is true. This prevents mid-air jumping.
Setting vy = -jf gives the player upward velocity. It's negative because in canvas coordinates, up is negative and down is positive.
We immediately set onGround = false so the player can't jump again until they land.

9e. Gravity and ground collision

  vy += 40 * dt;
  player.y += vy;
  onGround = false;

  if (rectHit(player, ground)) {
    player.y = ground.y - player.height;
    vy = 0;
    onGround = true;
  }

What we just did:

vy += 40 * dt — apply gravity. Every frame, the player's vertical velocity increases by 40 pixels per second squared, multiplied by dt.
player.y += vy — move the player by their vertical velocity.
onGround = false — reset the ground flag. It will be set back to true if we detect a collision with the ground or a platform below.
If the player's rectangle overlaps the ground rectangle, we snap the player to the top of the ground (ground.y - player.height), zero out the velocity, and set onGround = true.

The snapping is important — without it, the player would sink slightly into the ground each frame, accumulating errors over time.

9f. Platform collision

  for (const p of platforms) {
    if (rectHit(player, p) && player.y + player.height - vy <= p.y + 4) {
      player.y = p.y - player.height;
      vy = 0;
      onGround = true;
    }
  }

What we just did:

Loop through every platform.
Check if the player overlaps the platform.
Also check that the player was above the platform last frame — this is the player.y + player.height - vy <= p.y + 4 part. Without this second check, the player would "stick" to the underside of platforms when jumping up through them.
If both conditions are true, snap the player to the top of the platform, zero out the velocity, and set onGround = true.

This is the trickiest part of platformer physics — making sure the player can jump onto platforms from below but can't pass through them from above.

9g. Horizontal bounds

  if (player.x < 0) player.x = 0;
  if (player.x + player.width > 800) player.x = 800 - player.width;

What we just did: Prevent the player from walking off the left or right edges of the world. These two lines do the same job as move.boundTo(), but written explicitly because we only want to clamp horizontally — vertical movement is handled by gravity.

9h. Coin collection

  for (let i = coins.length - 1; i >= 0; i--) {
    if (rectHit(player, coins[i])) {
      coins[i].destroy();
      coins.splice(i, 1);
      points += 10;
      score.setText('Score: ' + points);
    }
  }

What we just did:

Loop through the coins backwards — from the last one to the first. This is important because we're removing items from the array as we go. If we looped forwards, removing an item would shift all the following items down by one index, causing us to skip the next coin.
If the player overlaps a coin, call coin.destroy() to remove it from the engine, and coins.splice(i, 1) to remove it from the array.
Add 10 points to the score and update the display text.

9i. Win condition

  if (coins.length === 0 && !won) {
    won = true;
    score.setText('You win! Score: ' + points);
  }
}

What we just did: If there are no more coins, and the player hasn't already won, set won = true and update the score display to show the win message. The game loop will return early from now on, so nothing else happens.

✅ Step 10: The Complete Code

Here's the entire game in one file. Copy it into platformer.html and open it in your browser.

<!DOCTYPE html>
<html>
<head>
  <title>Platformer</title>
  <script src="epic.js"></script>
</head>
<body>
  <script>
    // ── SETUP ──
    const display = new Display();
    display.perform();
    display.start(500, 300);
    display.backgroundColor('#00ffff');

    // ── CAMERA ──
    display.camera.worldWidth = 800;
    display.camera.worldHeight = 600;

    // ── PLAYER ──
    const player = new Component(40, 40, '#ff0000', 100, 400, 'rect');
    display.add(player);

    // ── GROUND ──
    const ground = new Component(800, 60, '#00ff00', 0, 540, 'rect');
    display.add(ground);

    // ── PLATFORMS ──
    const platforms = [
      new Component(150, 20, '#00ff00', 200, 460, 'rect'),
      new Component(150, 20, '#00ff00', 450, 380, 'rect'),
      new Component(150, 20, '#00ff00', 650, 300, 'rect')
    ];
    platforms.forEach(function(p) { display.add(p); });

    // ── COINS ──
    const coinPositions = [
      {x: 633, y: 380},
      {x: 594, y: 300},
      {x: 676, y: 220},
      {x: 566, y: 380},
      {x: 445, y: 300}
    ];
    const coins = coinPositions.map(function(c) {
      const coin = new Component(24, 24, '#ffff00', c.x, c.y, 'rect');
      display.add(coin);
      return coin;
    });

    // ── SCORE UI ──
    const score = new Tctxt('20px','Arial','white',20,40,'left',false,'top','rgba(0,0,0,0.5)',10,4);
    score.setText('Score: 0');
    display.add(score);

    // ── ON-SCREEN BUTTONS ──
    const BTN = 60;
    const BTN_Y = 200;

    function mkBtn(x, color) {
      return new Component(BTN, BTN, color, x, BTN_Y, 'rect');
    }

    const btnL = mkBtn(20,  '#1a1a2e');
    const btnR = mkBtn(100, '#1a1a2e');
    const btnJ = mkBtn(380, '#2563eb');

    const lblL = new Tctxt('36px','Arial','white',50,240,'center',false,'middle');
    const lblR = new Tctxt('36px','Arial','white',130,240,'center',false,'middle');
    const lblJ = new Tctxt('16px','Arial','white',410,240,'center',false,'middle');

    lblL.setText('◀');
    lblR.setText('▶');
    lblJ.setText('JUMP');

    display.add(btnL);
    display.add(btnR);
    display.add(btnJ);
    display.add(lblL);
    display.add(lblR);
    display.add(lblJ);

    const btnList = [btnL, btnR, btnJ, lblL, lblR, lblJ];

    // ── HELPERS ──
    function inBtn(b, x, y) {
      return x >= b.x && x <= b.x + b.width &&
             y >= b.y && y <= b.y + b.height;
    }

    function rectHit(a, b) {
      return a.x < b.x + b.width &&
             a.x + a.width > b.x &&
             a.y < b.y + b.height &&
             a.y + a.height > b.y;
    }

    // ── GAME STATE ──
    let vy = 0;
    let onGround = false;
    let points = 0;
    let won = false;

    // ── GAME LOOP ──
    function update(dt) {
      display.camera.follow(player, true);
      btnList.forEach(function(e) { e.fixed(); });
      score.fixed();

      if (won) return;

      const sp = 280;
      const jf = 15;

      // Touch detection
      const mx = display.x;
      const my = display.y;
      const touchingL = mx !== false && inBtn(btnL, mx, my);
      const touchingR = mx !== false && inBtn(btnR, mx, my);
      const touchingJ = mx !== false && inBtn(btnJ, mx, my);

      // Horizontal movement
      if (display.keys[37] || display.keys[65] || touchingL) player.x -= sp * dt;
      if (display.keys[39] || display.keys[68] || touchingR) player.x += sp * dt;

      // Jump
      const keyJump = display.keys[38] || display.keys[32] || display.keys[87];
      if ((keyJump || touchingJ) && onGround) {
        vy = -jf;
        onGround = false;
      }

      // Gravity
      vy += 40 * dt;
      player.y += vy;
      onGround = false;

      // Ground collision
      if (rectHit(player, ground)) {
        player.y = ground.y - player.height;
        vy = 0;
        onGround = true;
      }

      // Platform collision
      for (const p of platforms) {
        if (rectHit(player, p) && player.y + player.height - vy <= p.y + 4) {
          player.y = p.y - player.height;
          vy = 0;
          onGround = true;
        }
      }

      // Horizontal bounds
      if (player.x < 0) player.x = 0;
      if (player.x + player.width > 800) player.x = 800 - player.width;

      // Coin collection
      for (let i = coins.length - 1; i >= 0; i--) {
        if (rectHit(player, coins[i])) {
          coins[i].destroy();
          coins.splice(i, 1);
          points += 10;
          score.setText('Score: ' + points);
        }
      }

      // Win condition
      if (coins.length === 0 && !won) {
        won = true;
        score.setText('You win! Score: ' + points);
      }
    }
  </script>
</body>
</html>

📊 What You've Learned

Concept	Why It Matters
World vs canvas	The canvas is the viewport; the world is bigger and the camera scrolls within it
Delta time (`dt`)	Multiplies movement so speed is the same on every device
Gravity	A velocity that increases every frame and pulls the player down
Jump impulse	Setting `vy` to a negative value for one frame to launch upward
AABB collision	The rectangle overlap test that powers every collision in the game
One-way platforms	The extra `player.y + player.height - vy <= p.y + 4` check allows jumping up through platforms
Reverse loops	Required whenever you remove items from an array during iteration
`.fixed()`	Locks a component to the screen so it doesn't scroll with the camera
Touch + keyboard	The same logic handles both, so the game is playable anywhere

🕹️ Introducing the Limn Arcade

You've just built a complete platformer. Now here's the part that makes it more than a local project: you can publish it to the Limn Arcade.

The arcade is a community platform where anyone can upload, browse, and play games made with Limn Engine. It's built and maintained by Desire — the same developer behind Limn Studio.

What the Arcade Includes

Feature	What It Does
Game Gallery	Browse every published game, with search and filters
Game of the Week	A rotating spotlight on the best new game
Leaderboard	Weekly rankings of top games based on likes and comments
Likes and Comments	Community feedback on every game
Creator Profiles	See every game a developer has made
My Games	Manage your published games from one dashboard
Inbox	Stats, updates, and notifications
Discord Integration	Direct link to the community hub

Why This Matters for Beginners

The arcade lowers every barrier that normally stops people from finishing a game:

No hosting required — you upload, the arcade serves it
No distribution required — the arcade has an audience
No marketing required — the leaderboard gives your game visibility
Instant feedback — comments and likes tell you what's working

That last point is the most important one. In most game dev projects, you finish a game and never find out if anyone played it. On the arcade, you find out the same day.

How to Publish Your Game

Sign in to the arcade at limn-engine-doc.vercel.app/arcade
Click + Make a game
Paste your game code — either the code from this tutorial, or something you built in Limn Studio
Click share.

Your game appears in the arcade immediately, and anyone can play it, like it, and leave a comment.

🛠️ Or Build It in Limn Studio Instead

If you don't want to write all this code by hand, Limn Studio has a Platformer template that gives you a working starting point.

Go to limn-engine-doc.vercel.app/editor
Open the Build tab
Select Platformer from the template dropdown
Customise the game using the form fields
Switch to the Code tab to see (and edit) the generated Limn Engine code
Click Run to test
Publish directly to the arcade

Limn Studio also includes templates for Dress-Up, Runner, Shooter, and Clicker — so once you've got the platformer working, you can branch into other genres without starting from scratch.

🐛 Found a Bug? Report It

If something doesn't work, you can report it on GitHub:

👉 github.com/terracodes004/limn-engine-doc/issues

Please include:

A description of the problem
Steps to reproduce it
What you expected vs. what actually happened
Your browser and device

🚀 What's Next?

Now that you've built a platformer and published it to the arcade, try:

Adding enemies — patrolling obstacles that reset the player on contact
Adding lives — three lives before game over
Adding a timer — complete the level before the clock runs out
Adding moving platforms — platforms that travel left and right
Adding sound — jump, collect, and win sound effects with the Sound class
Building a second level — harder platforms, more coins, new obstacles

Then publish it. The arcade is waiting.

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Limn Arcade	limn-engine-doc.vercel.app/arcade
Complete API Reference	limn-engine-doc.vercel.app/reference.html
Beginner Guide	limn-engine-doc.vercel.app/beginner.html
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	github.com/terracodes004/limn-engine-doc/issues
Desire on DEV.to	dev.to/desire_george_434_ai

🎯 The One-Line Summary

"Build a complete platformer with Limn Engine in about 150 lines — then publish it to the Limn Arcade and let the world play it." 🎮🚀

Draw your game into existence — one platform at a time. 🎮🚀

[Boost]

Kehinde Owolabi — Sun, 13 Sep 2026 00:49:57 +0000

Adenola Adefemi

Sep 12

Excited to Share: I’m a Developer at Limn Engine🚀

#development #webdev #html #css

1 min read

🎮 Top 100 Best 2D JavaScript Game Engines in 2026

Kehinde Owolabi — Fri, 11 Sep 2026 04:11:37 +0000

🎮 Top 100 Best 2D JavaScript Game Engines in 2026

The most comprehensive list of 2D JavaScript game engines — categorized, compared, and explained for beginners and professionals alike.

📖 Introduction

The JavaScript game development ecosystem has exploded in 2026. New engines have emerged, existing ones have evolved, and the line between "framework" and "engine" has blurred more than ever.

But here's the problem: most lists are outdated, incomplete, or just plain wrong. They list engines that haven't been updated in years. They miss the hidden gems. They don't tell you which engines are actually good for beginners.

This list is different.

I built Limn Engine — a lightweight 2D game engine designed for beginners. Through building it and studying the landscape, I've learned what makes an engine work for beginners and what makes it frustrating.

This is the most comprehensive, up-to-date list of 2D JavaScript game engines for 2026.

Here's what you'll find:

100 engines organized into 11 tiers
A comparison table of the top 10 engines
Guidance on choosing the right engine for your needs
2026 trends in JavaScript game development

🎯 Try the Code Yourself

All the engines in this list can be tested in the browser. For Limn Engine specifically, you can write and run code directly in Limn Studio:

👉 limn-engine-doc.vercel.app/editor

🏆 Tier 1: Industry Leaders (Most Popular)

What you're going to learn: The engines that dominate the JavaScript game development landscape. These are the most widely used, best documented, and most supported engines available.

1. Phaser

What it is: Phaser is the most popular HTML5 game framework for building 2D games. It's been around since 2013 and has a massive community.

Why it's #1: Phaser includes everything you need — physics, input, animation, sound, and a scene system. You can build complete 2D games quickly without piecing together different libraries.

Best for: All-around 2D game development

Live Demo: phaser.io

2. PixiJS

What it is: PixiJS is an ultra-fast 2D rendering engine. It's not a full game engine — it's a rendering library. But it's used by Disney, Facebook, and Adobe for high-performance graphics.

Why it's #2: If you need raw rendering speed, nothing beats PixiJS. It uses WebGL with Canvas fallback, delivering blazing-fast performance.

Best for: High-performance 2D rendering

Live Demo: pixijs.com

3. Three.js (2D Capabilities)

What it is: Three.js is primarily a 3D engine, but it has strong 2D capabilities through its orthographic camera and sprite system.

Why it's #3: If you want to mix 2D and 3D elements in one game, Three.js is the best choice. It's used by Google, NASA, and thousands of creative developers.

Best for: 2D/3D hybrid games

Live Demo: threejs.org

4. Babylon.js (2D Capabilities)

What it is: Babylon.js is another 3D engine with 2D support. It's known for its excellent documentation and enterprise-grade features.

Why it's #4: Babylon.js has a powerful scene system, built-in physics, and excellent tooling. It's used by Microsoft and other large companies.

Best for: Complex 2D/3D games

Live Demo: babylonjs.com

5. ImpactJS

What it is: ImpactJS is a commercial-grade HTML5 game engine. It's been used to build games for Disney, Nickelodeon, and other major brands.

Why it's #5: ImpactJS includes a level editor, physics, and a complete toolchain. It's a professional-grade solution.

Best for: Commercial 2D games

Live Demo: impactjs.com

6. MelonJS

What it is: MelonJS is a lightweight, open-source HTML5 game engine. It's designed to be simple and fast.

Why it's #6: MelonJS is perfect for small games that need to load quickly. It includes sprite handling, audio, input, and a simple scene system.

Best for: Lightweight 2D games

Live Demo: melonjs.org

7. PlayCanvas (2D Mode)

What it is: PlayCanvas is a web-based game engine that primarily focuses on 3D but has 2D sprite support.

Why it's #7: PlayCanvas features a visual editor, real-time collaboration, and WebGL rendering. It's ideal for teams working remotely.

Best for: Collaborative web-based 2D games

Live Demo: playcanvas.com

8. Cocos2d-x (JavaScript Version)

What it is: Cocos2d-x is a port of the popular Cocos2d game engine. It's used for mobile games and has a JavaScript version.

Why it's #8: Cocos2d-x is optimized for mobile devices. It's used by game studios worldwide for commercial mobile games.

Best for: Mobile 2D games

Live Demo: cocos2d-x.org

9. CreateJS

What it is: CreateJS is a suite of libraries for rich interactive content. It includes EaselJS (canvas), TweenJS (animation), SoundJS (audio), and PreloadJS (loading).

Why it's #9: CreateJS is modular — you can use just the parts you need. It's used for ads, games, and interactive experiences.

Best for: Interactive content and games

Live Demo: createjs.com

10. Kiwi.js

What it is: Kiwi.js is an open-source HTML5 game engine. It's designed for mobile and desktop games.

Why it's #10: Kiwi.js includes a tilemap system, physics, and a plugin architecture. It's great for 2D games with tile-based levels.

Best for: Tile-based 2D games

Live Demo: kiwijs.org

🎯 Tier 2: Specialized & Framework-Specific

What you're going to learn: Engines built for specific frameworks (React, Vue, Angular). These are best if you're already using one of these frameworks.

React-Based Engines

Engine	What It Is	Best For
React Game Engine	React-specific game development	React developers
Pixi.js React	React wrapper for PixiJS	React + PixiJS
React Konva	React implementation of Konva.js	2D canvas in React
React Three Fiber	React renderer for Three.js	3D in React

Vue-Based Engines

Engine	What It Is	Best For
Vue Konva	Vue.js wrapper for Konva.js	2D canvas in Vue
Pixi.js Vue	Vue integration for PixiJS	Vue + PixiJS
Phaser Vue	Vue component wrapper for Phaser	Vue + Phaser

Angular-Based Engines

Engine	What It Is	Best For
Angular Phaser	Angular wrapper for Phaser	Angular + Phaser
Ngx Pixi	Angular PixiJS integration	Angular + PixiJS

🚀 Tier 3: Lightweight & Performance-Focused

What you're going to learn: Engines that prioritize speed, size, and performance.

11. Howler.js

What it is: Howler.js is an audio library for JavaScript games. It's not a full engine, but it's essential for game audio.

Why it's here: Every game needs sound. Howler.js handles audio in all browsers, including mobile.

Best for: Game audio

Live Demo: howlerjs.com

12. Matter.js

What it is: Matter.js is a 2D physics engine for the web. It handles rigid body physics, collision detection, and constraints.

Why it's here: If your game needs realistic physics (falling, bouncing, stacking), Matter.js is the best choice.

Best for: Physics-heavy games

Live Demo: brm.io/matter-js

13. Planck.js

What it is: Planck.js is a JavaScript port of the Box2D physics engine. It's more accurate than Matter.js.

Why it's here: Planck.js is used for games that need precise physics simulation.

Best for: Accurate physics

Live Demo: piqnt.com/planck.js

14. Box2D.js

What it is: Box2D.js is a JavaScript port of the Box2D physics engine. It's the industry standard for 2D physics.

Why it's here: Box2D.js is battle-tested and used in many commercial games.

Best for: Industry-standard physics

Live Demo: box2d.org

15. P2.js

What it is: P2.js is a 2D physics engine for JavaScript. It's lightweight and fast.

Why it's here: P2.js is great for games that need physics without the overhead of larger engines.

Best for: Lightweight physics

Live Demo: schteppe.github.io/p2.js

16. Stage.js

What it is: Stage.js is a lightweight 2D HTML5 JavaScript library for game development.

Why it's here: Stage.js is tiny — under 100KB — and focused on performance.

Best for: Minimalist 2D games

Live Demo: piqnt.com/stage.js

17. CraftyJS

What it is: CraftyJS is a flexible JavaScript game engine. It's been around since 2010 and has a loyal community.

Why it's here: CraftyJS uses an entity-component system, making it easy to build complex games.

Best for: Component-based games

Live Demo: craftyjs.com

18. Akihabara

What it is: Akihabara is a classic-oriented HTML5 game engine. It's designed for retro-style games.

Why it's here: If you want to build pixel-perfect retro games, Akihabara is the best choice.

Best for: Retro games

Live Demo: kesiev.com/akihabara

19. LimeJS

What it is: LimeJS is an HTML5 game framework for building games. It's designed for mobile and desktop.

Why it's here: LimeJS includes a scene graph, animation system, and touch support.

Best for: Mobile and desktop games

Live Demo: limejs.com

20. Lyria

What it is: Lyria is a framework for game development. It focuses on simplicity and performance.

Why it's here: Lyria is perfect for developers who want full control over their game loop.

Best for: Custom game loops

21. JawsJS

What it is: JawsJS is an HTML5 2D game library. It's lightweight and easy to learn.

Why it's here: JawsJS is great for beginners who want a simple API.

Best for: Beginner-friendly 2D games

Live Demo: jawsjs.com

🎨 Tier 4: Visual Editors & Low-Code Solutions

What you're going to learn: Engines that let you build games visually, with little or no code.

22. Construct 3

What it is: Construct 3 is a visual game development environment. It's one of the most popular no-code engines.

Why it's here: Construct 3 has a powerful event system, visual editor, and export options for web, mobile, and desktop.

Best for: No-code game development

Live Demo: construct.net

23. GDevelop

What it is: GDevelop is an open-source, cross-platform game engine. It supports both 2D and 3D.

Why it's here: GDevelop is free and has a visual event system. It's great for educators and beginners.

Best for: No-code projects

Live Demo: gdevelop.io

24. CT.js

What it is: CT.js is a desktop game editor with visual tools. It's built on PixiJS.

Why it's here: CT.js combines a visual editor with code editing. It's a great middle ground.

Best for: Visual + code development

Live Demo: ctjs.rocks

25. Superpowers

What it is: Superpowers is an HTML5 2D+3D game maker. It's open-source and focused on collaboration.

Why it's here: Superpowers allows multiple developers to work on the same game in real-time.

Best for: Collaborative game development

Live Demo: superpowers-html5.com

26. MicroStudio

What it is: MicroStudio is an online game engine with a visual editor. It supports multiple programming languages.

Why it's here: MicroStudio is browser-based — no installation required.

Best for: Online game development

Live Demo: microstudio.dev

27. RPG Maker (Web Export)

What it is: RPG Maker is a classic RPG creation tool. It has a web export option.

Why it's here: RPG Maker is perfect for building RPGs without writing code.

Best for: RPG creation

Live Demo: rpgmakerweb.com

28. GameMaker Studio 2 (HTML5 Export)

What it is: GameMaker Studio 2 is a professional game development tool. It has an HTML5 export option.

Why it's here: GameMaker is used by indie developers worldwide. It's great for 2D games.

Best for: Professional 2D games

Live Demo: gamemaker.io

29. Godot Engine (HTML5 Export)

What it is: Godot is an advanced open-source engine. It has an HTML5 export option.

Why it's here: Godot is free, powerful, and has excellent 2D support.

Best for: Professional 2D games

Live Demo: godotengine.org

30. Unity (WebGL Export)

What it is: Unity is the industry standard for game development. It has a WebGL export option.

Why it's here: Unity is used by AAA studios and indie developers alike.

Best for: Professional games

Live Demo: unity.com

31. Unreal Engine (HTML5 Export)

What it is: Unreal Engine is a AAA engine. It has an HTML5 export option (limited).

Why it's here: Unreal is the most powerful engine available, but web export is limited.

Best for: High-fidelity games

Live Demo: unrealengine.com

🔧 Tier 5: Frameworks & Toolkits

What you're going to learn: Lightweight frameworks and toolkits for specific needs.

32. Kontra.js

What it is: Kontra.js is a minimal JavaScript game framework.

Why it's here: Kontra.js is tiny — under 20KB — and perfect for game jams.

Best for: Game jams and prototypes

Live Demo: straker.github.io/kontra

33. Ooz.js

What it is: Ooz.js is a lightweight 2D game engine.

Why it's here: Ooz.js is designed for simplicity and performance.

Best for: Simple 2D games

34. Kiwi.js (Mobile-First)

What it is: Kiwi.js is a mobile-first HTML5 game framework.

Why it's here: Kiwi.js is optimized for mobile devices.

Best for: Mobile games

35. Quintus

What it is: Quintus is an HTML5 game framework. It's designed for rapid development.

Why it's here: Quintus has a modular architecture — you can use just the parts you need.

Best for: Rapid development

Live Demo: quintusjs.com

36. Isogenic Game Engine

What it is: Isogenic Game Engine is a real-time multiplayer engine.

Why it's here: If you're building a multiplayer game, Isogenic is the best choice.

Best for: Multiplayer games

Live Demo: isogenicengine.com

37. ClanJS

What it is: ClanJS is an HTML5 game development library.

Why it's here: ClanJS is focused on simplicity and ease of use.

Best for: Simple 2D games

38. GameQuery

What it is: GameQuery is a jQuery plugin for game development.

Why it's here: If you're already using jQuery, GameQuery is a natural fit.

Best for: jQuery developers

Live Demo: gamequery.org

39. jsGameSoup

What it is: jsGameSoup is a simple JavaScript game framework.

Why it's here: jsGameSoup is lightweight and easy to learn.

Best for: Simple games

Live Demo: jsgamesoup.net

40. Akayak

What it is: Akayak is a 2D game engine for browsers.

Why it's here: Akayak is designed for browser-based games.

Best for: Browser games

41. Bramble

What it is: Bramble is a lightweight HTML5 game library.

Why it's here: Bramble is focused on performance and simplicity.

Best for: Lightweight games

🎪 Tier 6: Retro & Pixel Art Focused

What you're going to learn: Engines designed for retro-style games and pixel art.

42. Rot.js

What it is: Rot.js is a Roguelike toolkit for JavaScript.

Why it's here: Rot.js includes everything you need for roguelike games — dungeon generation, field of view, pathfinding.

Best for: Roguelike games

Live Demo: ondras.github.io/rot.js

43. EasyStarJS

What it is: EasyStarJS is a pathfinding library for HTML5 games.

Why it's here: EasyStarJS is the best pathfinding library for JavaScript games.

Best for: Pathfinding

Live Demo: easystarjs.com

44. Tile5

What it is: Tile5 is a tile-based JavaScript mapping library.

Why it's here: Tile5 is great for games with large maps.

Best for: Tile-based maps

Live Demo: tile5.org

45. Rex Rain

What it is: Rex Rain is a collection of Phaser plugins for advanced features.

Why it's here: Rex Rain adds features like board games, UI, and text effects to Phaser.

Best for: Phaser developers

Live Demo: rexrainbow.github.io

46. Phaser Editor 2D

What it is: Phaser Editor 2D is a visual editor for Phaser.

Why it's here: If you're using Phaser, this editor makes development faster.

Best for: Phaser development

Live Demo: phasereditor2d.com

47. Tiled (with JavaScript Exporters)

What it is: Tiled is a map editor with JavaScript support.

Why it's here: Tiled is the best map editor for 2D games.

Best for: Level design

Live Demo: mapeditor.org

48. Pixelbox.js

What it is: Pixelbox.js is an educational game engine for pixel art games.

Why it's here: Pixelbox.js is designed for learning game development.

Best for: Educational games

Live Demo: pixelboxjs.com

49. PICO-8 (Web Export)

What it is: PICO-8 is a fantasy console with web publishing.

Why it's here: PICO-8 is perfect for retro-style games with built-in constraints.

Best for: Retro games

Live Demo: lexaloffle.com/pico-8

50. TIC-80 (Web Export)

What it is: TIC-80 is another fantasy console for web.

Why it's here: TIC-80 is open-source and free.

Best for: Retro games

Live Demo: tic80.com

51. LÖVE (Web Export via love.js)

What it is: LÖVE is a Lua framework with web target support.

Why it's here: LÖVE is great for 2D games, and love.js brings it to the web.

Best for: Lua developers

Live Demo: love2d.org

📱 Tier 7: Mobile-Optimized Engines

What you're going to learn: Engines optimized for mobile devices.

52. CocoonJS (now Ludei)

What it is: CocoonJS is a mobile web game accelerator.

Why it's here: CocoonJS optimizes web games for mobile performance.

Best for: Mobile web games

53. Ejecta

What it is: Ejecta is a fast JavaScript drawing library for iOS.

Why it's here: Ejecta is optimized for iOS performance.

Best for: iOS games

54. AppGameKit (JavaScript Support)

What it is: AppGameKit is a multi-platform game development tool.

Why it's here: AppGameKit supports JavaScript and exports to multiple platforms.

Best for: Multi-platform games

55. Monogatari

What it is: Monogatari is a narrative game engine for visual novels.

Why it's here: Monogatari is perfect for visual novels and narrative games.

Best for: Visual novels

Live Demo: monogatari.io

56. Ren'Py (Web Export)

What it is: Ren'Py is a visual novel engine with web export.

Why it's here: Ren'Py is the most popular visual novel engine.

Best for: Visual novels

Live Demo: renpy.org

57. Twine (Web Export)

What it is: Twine is an interactive fiction web publishing tool.

Why it's here: Twine is perfect for text-based games.

Best for: Interactive fiction

Live Demo: twinery.org

58. Adventure Game Studio (Web Export)

What it is: Adventure Game Studio is a point-and-click adventure engine.

Why it's here: AGS is perfect for classic adventure games.

Best for: Point-and-click adventures

Live Demo: adventuregamestudio.co.uk

🧩 Tier 8: Physics-Focused Engines

What you're going to learn: Engines with strong physics capabilities.

59. Cannon.js (2D Mode)

What it is: Cannon.js is a lightweight 3D physics engine with 2D support.

Why it's here: Cannon.js is great for games that need simple physics.

Best for: 2D physics

Live Demo: cannonjs.org

60. Ammo.js

What it is: Ammo.js is a direct port of the Bullet physics engine.

Why it's here: Ammo.js is the most powerful physics engine for JavaScript.

Best for: Complex physics

Live Demo: github.com/kripken/ammo.js

61. PhysicsJS

What it is: PhysicsJS is a modular physics engine for JavaScript.

Why it's here: PhysicsJS is easy to use and extend.

Best for: Modular physics

Live Demo: wellcaffeinated.net/PhysicsJS

62. Verlet-js

What it is: Verlet-js is a Verlet integration physics engine.

Why it's here: Verlet-js is great for cloth, rope, and particle simulations.

Best for: Soft body physics

Live Demo: subprotocol.com/verlet-js

63. p5.js

What it is: p5.js is a creative coding library with physics capabilities.

Why it's here: p5.js is great for artists and beginners.

Best for: Creative coding

Live Demo: p5js.org

64. Processing.js

What it is: Processing.js is a port of the Processing visualization language.

Why it's here: Processing.js is great for data visualization and art.

Best for: Visualization

Live Demo: processingjs.org

65. Paper.js

What it is: Paper.js is a vector graphics scripting library with physics.

Why it's here: Paper.js is great for vector-based games.

Best for: Vector graphics

Live Demo: paperjs.org

66. Two.js

What it is: Two.js is a 2D drawing API with animation support.

Why it's here: Two.js is great for simple 2D graphics.

Best for: 2D drawing

Live Demo: two.js.org

🎓 Tier 9: Educational & Beginner-Friendly

What you're going to learn: Engines designed for learning and education.

67. TCJSGame (Limn Engine)

What it is: TCJSGame was the original name for Limn Engine — a lightweight 2D game engine designed for beginners.

Why it's here: Limn Engine is the simplest way to learn game development. You can build a working game in under 100 lines of code.

Best for: Beginners and education

Live Demo: limn-engine-doc.vercel.app

Note: TCJSGame has evolved into Limn Engine. Check it out at limn-engine-doc.vercel.app.

68. Code.org Game Lab

What it is: Code.org Game Lab is an educational game development environment.

Why it's here: Game Lab is designed for classrooms and beginners.

Best for: Education

Live Demo: code.org/gamelab

69. Scratch (JavaScript Export)

What it is: Scratch is a block-based programming environment with JavaScript export.

Why it's here: Scratch is the best way to introduce kids to programming.

Best for: Young learners

Live Demo: scratch.mit.edu

70. Blockly Games

What it is: Blockly Games is a series of educational games that teach programming.

Why it's here: Blockly Games is great for learning programming concepts.

Best for: Education

Live Demo: blockly.games

71. Alice (Web Version)

What it is: Alice is a 3D programming environment with web export.

Why it's here: Alice is great for teaching programming through storytelling.

Best for: Education

Live Demo: alice.org

72. Greenfoot (Web Export)

What it is: Greenfoot is an educational Java environment with web target.

Why it's here: Greenfoot is great for teaching Java through games.

Best for: Education

Live Demo: greenfoot.org

73. CodeCombat

What it is: CodeCombat is a game-based computer science program.

Why it's here: CodeCombat teaches programming through gameplay.

Best for: Education

Live Demo: codecombat.com

🌐 Tier 10: Web Framework Integrations

What you're going to learn: Engines built for specific web frameworks.

74. Svelte Game Engine

What it is: Game development with Svelte.

Best for: Svelte developers

75. Ember.js Game Engine

What it is: Ember integration for games.

Best for: Ember developers

76. Backbone Game Engine

What it is: Backbone.js for game development.

Best for: Backbone developers

77. Angular Game Engine

What it is: Angular-based game framework.

Best for: Angular developers

78. Vue Game Engine

What it is: Vue-specific game development.

Best for: Vue developers

79. Meteor Game Engine

What it is: Real-time games with Meteor.

Best for: Meteor developers

80. Next.js Game Engine

What it is: React framework for games.

Best for: Next.js developers

81. Nuxt.js Game Engine

What it is: Vue framework for games.

Best for: Nuxt.js developers

🔮 Tier 11: Emerging & Experimental

What you're going to learn: Engines pushing the boundaries of what's possible.

82. WebGPU-based Engines

What it is: Next-generation graphics APIs using WebGPU.

Why it's here: WebGPU is the future of web graphics — faster, more powerful, more efficient.

Best for: High-performance graphics

83. WebAssembly Game Engines

What it is: High-performance compiled engines using WebAssembly.

Why it's here: WebAssembly brings near-native performance to the web.

Best for: Performance-critical games

84. WebXR Game Engines

What it is: Virtual and augmented reality engines using WebXR.

Why it's here: WebXR brings VR and AR to the browser.

Best for: VR/AR experiences

85. Blockchain Game Engines

What it is: Web3 and NFT game platforms.

Why it's here: Blockchain gaming is an emerging market.

Best for: Web3 games

86. WebRTC Game Engines

What it is: Real-time multiplayer focused engines using WebRTC.

Why it's here: WebRTC enables peer-to-peer multiplayer.

Best for: Multiplayer games

87. Procedural Generation Engines

What it is: Content generation frameworks.

Why it's here: Procedural generation creates infinite content.

Best for: Roguelikes and infinite games

88. AI-Assisted Game Engines

What it is: Machine learning integration for games.

Why it's here: AI can generate content, balance difficulty, and create intelligent enemies.

Best for: AI-powered games

89. No-Code Game Engines

What it is: Visual programming focused engines.

Why it's here: No-code is making game development accessible to everyone.

Best for: Non-programmers

90. Cross-Platform Compilers

What it is: Write once, deploy everywhere toolkits.

Why it's here: Cross-platform development saves time and effort.

Best for: Multi-platform games

91. Custom Engine Frameworks

What it is: Build-your-own engine toolkits.

Why it's here: Some developers want full control over their engine.

Best for: Advanced developers

92. LittleJS

What it is: LittleJS is a fast, small, and feature-complete 2D game engine.

Why it's here: LittleJS is fully open-source with over 4k stars on GitHub.

Best for: Fast, small games

Live Demo: github.com/KilledByAPixel/LittleJS

93. Kaplay

What it is: Kaplay is a JavaScript game library with a playful, modern API.

Why it's here: Kaplay is great for game jams and quick prototypes.

Best for: Game jams

Live Demo: kaplayjs.com

94. Excalibur.js

What it is: Excalibur.js is a TypeScript-first 2D game engine.

Why it's here: Excalibur.js has excellent TypeScript support.

Best for: TypeScript developers

Live Demo: excaliburjs.com

95. Hexi

What it is: Hexi is a game engine built on PixiJS.

Why it's here: Hexi adds game-specific features to PixiJS.

Best for: PixiJS developers

Live Demo: github.com/kittykatattack/hexi

96. Hex Engine

What it is: Hex Engine is a modern 2D game engine.

Why it's here: Hex Engine focuses on developer experience.

Best for: Modern 2D games

Live Demo: hex-engine.dev

97. KAPLAY

What it is: KAPLAY is a fork of Kaboom.js with a focus on simplicity.

Why it's here: KAPLAY is great for beginners.

Best for: Beginners

Live Demo: kaplayjs.com

98. GDevelop (Community Edition)

What it is: GDevelop is an open-source no-code engine.

Why it's here: GDevelop is free and powerful.

Best for: No-code development

Live Demo: gdevelop.io

99. Construct 3 (Free Tier)

What it is: Construct 3 has a free tier for small projects.

Why it's here: Construct 3 is the best visual engine.

Best for: Visual development

Live Demo: construct.net

100. Custom Engine (Build Your Own)

What it is: Building your own engine from scratch.

Why it's here: Sometimes the best engine is the one you build yourself.

Best for: Learning and full control

Live Demo: limn-engine-doc.vercel.app (for inspiration)

📊 Comparison Table: Top 10 Engines

Engine	Learning Curve	Performance	Community	Best For
Phaser	Moderate	Excellent	Massive	All-around 2D games
PixiJS	Moderate	Outstanding	Large	High-performance rendering
Three.js	Steep	Excellent	Huge	2D/3D hybrid games
Babylon.js	Steep	Excellent	Large	Complex 2D/3D games
Limn Engine	Easy	Good	Growing	Beginners & education
Construct 3	Easy	Good	Large	Visual development
GDevelop	Easy	Good	Large	No-code projects
Matter.js	Moderate	Excellent	Large	Physics-heavy games
Cocos2d-x	Moderate	Excellent	Large	Mobile games
PlayCanvas	Moderate	Excellent	Large	WebGL games

🎯 How to Choose the Right Engine

What you're going to learn: How to pick the right engine for your specific needs.

For Beginners

What you're going to do: Choose an engine that's easy to learn and has good documentation.

What you should pick:

Limn Engine — Simplest learning curve, zero configuration
Construct 3 — Visual programming, no code required
GDevelop — No-code friendly, open-source
Phaser — Most tutorials available, large community

What you just did: You identified the best engines for beginners based on ease of use, documentation, and community support.

For Performance

What you're going to do: Choose an engine that prioritizes speed and efficiency.

What you should pick:

PixiJS — Best rendering performance
PlayCanvas — WebGL optimization
Three.js — Advanced graphics capabilities

What you just did: You identified the best engines for high-performance games.

For Mobile

What you're going to do: Choose an engine optimized for mobile devices.

What you should pick:

Cocos2d-x — Mobile-optimized
Phaser — Excellent mobile support
CocoonJS — Native wrapper

What you just did: You identified the best engines for mobile game development.

For Physics

What you're going to do: Choose an engine with strong physics capabilities.

What you should pick:

Matter.js — Best overall physics
Planck.js — Most accurate physics
Box2D.js — Industry standard port

What you just did: You identified the best engines for physics-heavy games.

For Education

What you're going to do: Choose an engine designed for learning.

What you should pick:

Limn Engine — Designed for learning
Code.org — Classroom-focused
Scratch — Young learners

What you just did: You identified the best engines for educational purposes.

📈 Trends in 2026

What you're going to learn: The trends shaping JavaScript game development in 2026.

Trend	What It Means
WebAssembly Integration	More engines adding WASM support for near-native performance
WebGPU Adoption	Next-generation graphics in browsers
Cross-Platform Development	Single codebase for web and native
Visual Editors	Low-code solutions gaining popularity
Multiplayer Focus	Better real-time networking capabilities
Procedural Content	AI-assisted game content generation
Accessibility	Better support for diverse players
Web3 Integration	Blockchain and NFT capabilities
AI-Assisted Development	Machine learning for content generation and testing

📊 What You've Learned

Concept	Why It Matters
Engine Tiers	Different engines for different needs
Comparison Table	Easy comparison of top 10 engines
Choosing an Engine	Guidance for beginners, performance, mobile, physics, education
2026 Trends	What's coming next in JavaScript game development

🚀 What's Next?

Now that you've seen the landscape, here's what you can do:

Try Limn Engine — Build your first game with the simplest engine available
Explore Phaser — If you want the most popular engine
Learn PixiJS — If you need raw rendering performance
Build Your Own — If you want full control

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Complete API Reference	limn-engine-doc.vercel.app/reference.html
Beginner Guide	limn-engine-doc.vercel.app/beginner.html
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	GitHub Issues

🎯 The One-Line Summary

"100 engines, 11 tiers, 1 goal — helping you find the right 2D JavaScript game engine for your project in 2026." 🎮🚀

Draw your game into existence — one engine at a time. 🎮🚀

Try it out yourself: https://limn-engine-doc.vercel.app/index.html

Kehinde Owolabi — Tue, 08 Sep 2026 00:09:46 +0000

Evolved-Tech

Sep 7

Limn Engine Just Got Smarter — Here's What We Added (And Why It Matters)

#productivity #javascript #opensource #programming

7 min read

limn-engine-doc.vercel.app

🗺️ The Complete Limn Engine Learning Roadmap: From Zero to Game Developer

Kehinde Owolabi — Mon, 07 Sep 2026 02:32:30 +0000

🗺️ The Complete Limn Engine Learning Roadmap: From Zero to Game Developer

A step-by-step guide to learning JavaScript game development with Limn Engine — no experience required.

📖 Introduction

So you want to build games. That's awesome.

But where do you start? If you're like most beginners, you've probably opened a game engine tutorial and felt completely lost. The code doesn't make sense. The concepts are overwhelming. You don't even know what a "game loop" is, let alone how to write one.

This roadmap is for you.

I built Limn Engine — a lightweight 2D game engine designed specifically for beginners. And I've learned that the biggest barrier to learning game development isn't the engine itself. It's understanding the computer language behind it.

So this roadmap starts from the very beginning — with JavaScript basics. No assumptions. No skipping steps. Just a clear path from "I don't know anything" to "I built a game."

Here's what you'll learn:

Phase 0: JavaScript fundamentals (variables, functions, loops, objects)
Phase 1: Setting up Limn Engine
Phase 2: Creating game objects that move and collide
Phase 3: Building 4 complete games of increasing complexity
Phase 4: Performance optimization and engine internals

🎯 Prerequisites

Before we start, here's what you need:

A computer (any computer — Chromebook, Windows, Mac, Linux)
A web browser (Chrome, Firefox, Edge, or Safari)
A code editor (VS Code, Notepad++, or even Notepad)
Curiosity and patience

That's it. No prior programming experience required.

📊 The Complete Roadmap

Phase 0: JavaScript Basics (2-4 weeks)
    ↓
Phase 1: Limn Engine Setup (1 day)
    ↓
Phase 2: Creating Game Objects (1-2 weeks)
    ↓
Phase 3: Building Complete Games (2-4 weeks)
    ↓
Phase 4: Going Further (ongoing)

🟢 Phase 0: Learning JavaScript (The Language)

Goal: Understand JavaScript fundamentals before touching any game engine.

Before you can build games, you need to understand the language games are written in. This is the most important phase — get this right, and everything else becomes easier.

Step 0.1: Variables

What you're going to learn: Storing and using data in your game.

A variable is a container for data. Think of it like a labeled box — you put something inside, give it a name, and later you can look inside to see what's there. In a game, you use variables to track everything — the player's position, their health, the score, the number of enemies, and more.

let playerHealth = 100;
let playerScore = 0;
let playerName = "Hero";

What you just did: You created three variables:

playerHealth = 100 — Stores the number 100. This could be the player's starting health.
playerScore = 0 — Stores the number 0. This is the starting score.
playerName = "Hero" — Stores the text "Hero". This is the player's name.

The let keyword tells JavaScript "I'm creating a new variable." The name you choose describes what the variable stores. The = sign assigns a value to the variable.

Step 0.2: Data Types — Numbers

What you're going to learn: Storing numeric values.

Numbers are exactly what they sound like — numeric values. They can be whole numbers (integers) or decimal numbers (floats). You use numbers for anything that involves counting or measuring in your game.

let playerHealth = 100;
let playerSpeed = 5.5;
let enemyCount = 10;
let gravity = 9.8;

What you just did: You created four number variables:

playerHealth = 100 — A whole number. This could be the player's maximum health.
playerSpeed = 5.5 — A decimal number. This could be how fast the player moves.
enemyCount = 10 — A whole number. This could be the number of enemies in the level.
gravity = 9.8 — A decimal number. This could be the gravity pulling the player down.

How numbers are used in games:

Health: playerHealth = 100 means the player has 100 health points
Position: player.x = 200 means the player is 200 pixels from the left
Speed: player.speed = 5 means the player moves 5 pixels per frame
Score: score = 150 means the player has 150 points
Time: timer = 60 means there are 60 seconds remaining

Step 0.3: Data Types — Strings

What you're going to learn: Storing text.

A string is a sequence of characters — text. You use strings for anything that involves words: player names, messages, labels, and more. Strings are always written inside quotes.

let playerName = "Hero";
let gameMessage = "Welcome!";
let gameTitle = "My First Game";
let enemyName = "Goblin";

What you just did: You created four string variables:

playerName = "Hero" — Stores the text "Hero". This could be the player's name.
gameMessage = "Welcome!" — Stores the text "Welcome!". This could be displayed when the game starts.
gameTitle = "My First Game" — Stores the text "My First Game". This could be the title of the game.
enemyName = "Goblin" — Stores the text "Goblin". This could be the name of an enemy.

How strings are used in games:

Player names: "Hero", "Player 1", "Kehinde"
UI labels: "Score:", "Health:", "Lives:"
Game messages: "Game Over", "You Win!", "Level Complete"
Enemy names: "Goblin", "Dragon", "Skeleton"
Item names: "Health Potion", "Sword", "Shield"

Step 0.4: Data Types — Booleans

What you're going to learn: Storing true or false values.

A boolean is a value that is either true or false. You use booleans for anything that has two states: on/off, yes/no, active/inactive, alive/dead.

let isGameOver = false;
let isPlayerAlive = true;
let isPaused = false;
let isJumping = false;
let hasKey = false;

What you just did: You created five boolean variables:

isGameOver = false — The game is not over yet.
isPlayerAlive = true — The player is alive.
isPaused = false — The game is not paused.
isJumping = false — The player is not jumping.
hasKey = false — The player does not have the key.

How booleans are used in games:

Game state: isGameOver — is the game over?
Player state: isPlayerAlive — is the player alive?
Game mechanics: isJumping — is the player in the air?
Inventory: hasKey — does the player have the key?
Settings: isSoundOn — is sound enabled?

Step 0.5: Data Types — Arrays

What you're going to learn: Storing lists of data.

An array is a list of values. You use arrays when you have multiple items of the same type — a list of enemies, a list of high scores, a list of bullet positions. Arrays are written inside square brackets [], with each item separated by a comma.

let highScores = [100, 200, 300, 400, 500];
let enemyPositions = [50, 100, 150, 200];
let enemyNames = ["Goblin", "Skeleton", "Dragon"];
let inventory = ["Sword", "Shield", "Potion"];

What you just did: You created four array variables:

highScores = [100, 200, 300, 400, 500] — A list of five numbers. These could be the top five scores.
enemyPositions = [50, 100, 150, 200] — A list of four numbers. These could be enemy starting positions.
enemyNames = ["Goblin", "Skeleton", "Dragon"] — A list of three strings. These could be enemy types.
inventory = ["Sword", "Shield", "Potion"] — A list of three strings. These could be items the player has.

How arrays are used in games:

High scores: [100, 200, 300] — the top scores
Enemy list: [enemy1, enemy2, enemy3] — all enemies in the level
Bullet list: [bullet1, bullet2, bullet3] — all bullets on screen
Inventory: ["Sword", "Shield", "Potion"] — items the player has
Levels: [1, 2, 3, 4, 5] — available levels

Step 0.6: Data Types — Objects

What you're going to learn: Grouping related data together.

An object is a collection of related data. Instead of having separate variables for the player's x position, y position, health, speed, and name, you group them all together in one object. Objects are written inside curly braces {}, with each piece of data being a "property" that has a name and a value.

let player = {
    x: 100,
    y: 200,
    health: 100,
    speed: 5,
    name: "Hero"
};

let enemy = {
    x: 300,
    y: 150,
    health: 50,
    speed: 2,
    name: "Goblin"
};

let coin = {
    x: 400,
    y: 300,
    value: 10,
    isCollected: false
};

What you just did: You created three object variables:

player = { x: 100, y: 200, health: 100, speed: 5, name: "Hero" } — A player object with:
- x: 100 — The player's x position is 100
- y: 200 — The player's y position is 200
- health: 100 — The player's health is 100
- speed: 5 — The player's speed is 5
- name: "Hero" — The player's name is "Hero"
enemy = { x: 300, y: 150, health: 50, speed: 2, name: "Goblin" } — An enemy object with similar properties.
coin = { x: 400, y: 300, value: 10, isCollected: false } — A coin object with position, value, and collection state.

How objects are used in games:

Player: Everything about the player in one object
Enemies: Each enemy is an object with position, health, speed, and type
Items: Each item is an object with position, type, and value
Levels: Each level is an object with a map, enemies, and items

Step 0.7: Functions

What you're going to learn: Reusable blocks of code.

Functions are like recipes — they tell the computer how to do something, and you can use them over and over again. You define a function once and then call it whenever you need that behavior.

function add(a, b) {
    return a + b;
}

let result = add(5, 10);

What you just did: You created a function called add that:

Takes two parameters: a and b
Returns the sum of a and b
When you call add(5, 10), it returns 15

function updatePlayer() {
    player.health -= 10;
    console.log("Player health: " + player.health);
}

What you just did: You created a function called updatePlayer that:

Decreases the player's health by 10
Prints the new health to the console

How functions are used in games:

The game loop: function update(dt) { ... } runs 60 times per second
Player actions: function jump() { ... } makes the player jump
Collision handling: function handleCollision(player, enemy) { ... } handles what happens when they touch
Spawning enemies: function spawnEnemy() { ... } creates a new enemy

Step 0.8: Conditionals

What you're going to learn: Making decisions in code.

Conditionals let your game make decisions based on the current state. They check a condition and run different code depending on whether the condition is true or false.

let playerHealth = 50;

if (playerHealth <= 0) {
    console.log("Game Over!");
    isGameOver = true;
} else if (playerHealth < 20) {
    console.log("Warning: Low health!");
} else {
    console.log("Player is healthy.");
}

What you just did: You created a conditional statement that:

Checks if playerHealth is less than or equal to 0 — if so, game over
If not, checks if playerHealth is less than 20 — if so, show a warning
If neither, the player is healthy

if (player.crashWith(enemy)) {
    player.health -= 10;
}

What you just did: You created a conditional that:

Checks if the player collides with an enemy
If so, decreases the player's health by 10

How conditionals are used in games:

Win/lose conditions: if (score >= 100) { youWin(); }
Collision responses: if (player.crashWith(coin)) { collectCoin(); }
Player state: if (isJumping) { applyGravity(); }
Game state: if (isGameOver) { showGameOverScreen(); }

Step 0.9: Loops

What you're going to learn: Repeating code multiple times.

Loops let you repeat code without writing it over and over. They're essential for handling multiple game objects like enemies, bullets, and coins.

for (let i = 0; i < 10; i++) {
    console.log("Enemy number: " + i);
}

What you just did: You created a for loop that:

Starts with i = 0
Runs as long as i < 10
Increases i by 1 each time (i++)
Prints "Enemy number: 0" through "Enemy number: 9"

let enemiesRemaining = 5;
while (enemiesRemaining > 0) {
    console.log("Enemies left: " + enemiesRemaining);
    enemiesRemaining--;
}

What you just did: You created a while loop that:

Runs as long as enemiesRemaining > 0
Prints the number of enemies left
Decreases enemiesRemaining by 1 each time

How loops are used in games:

Updating all enemies: for (let enemy of enemies) { enemy.update(); }
Checking all bullets: for (let bullet of bullets) { bullet.move(); }
Handling all coins: for (let coin of coins) { checkCollision(player, coin); }

🟢 Phase 1: Limn Engine Setup

Goal: Get Limn Engine up and running.

Step 1.1: Download Limn Engine

What you're going to do: Download the Limn Engine library.

Go to the Limn Engine documentation website: limn-engine-doc.vercel.app
Click the download button to get epic.js — this is the entire engine in a single file.
Place epic.js in the same folder as your HTML file.

That's it. No npm install. No build tools. No configuration. Just one file.

Step 1.2: Create Your First Game

What you're going to do: Write your first Limn Engine game — a simple rectangle that moves with arrow keys.

<!DOCTYPE html>
<html>
<head>
    <title>My First Limn Engine Game</title>
    <script src="epic.js"></script>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #1a1a2e; }
        canvas { border: 3px solid #e94560; border-radius: 12px; }
    </style>
</head>
<body>
    <script>
        const display = new Display();
        display.perform();
        display.start(800, 600);
        display.backgroundColor("#0a0a0a");

        const player = new Component(50, 50, "blue", 400, 300, "rect");
        display.add(player);

        function update(dt) {
            if (display.keys[39]) player.x += 200 * dt;
            if (display.keys[37]) player.x -= 200 * dt;
            if (display.keys[38]) player.y -= 200 * dt;
            if (display.keys[40]) player.y += 200 * dt;
            move.bound(player);
        }
    </script>
</body>
</html>

What you just did: You created a complete game:

const display = new Display(); — Creates a new game window. This is the foundation of every Limn Engine game.
display.perform(); — Enables the dual-canvas pipeline for 60fps performance. Without this, your game runs at ~50fps.
display.start(800, 600); — Creates the canvas at 800x600 pixels.
display.backgroundColor("#0a0a0a"); — Sets the background to dark.
const player = new Component(50, 50, "blue", 400, 300, "rect"); — Creates a 50x50 blue rectangle at position (400, 300).
display.add(player); — Crucial! Without this, the player exists but never appears.
function update(dt) { ... } — The game loop runs 60 times per second. dt is delta time.
if (display.keys[39]) player.x += 200 * dt; — Right arrow moves the player right.
move.bound(player); — Keeps the player on screen.

🟡 Phase 2: Creating Game Objects

Step 2.1: Components

What you're going to do: Create your first game objects.

const player = new Component(50, 50, "blue", 400, 300, "rect");
display.add(player);

const enemy = new Component(40, 40, "red", 100, 100, "rect");
display.add(enemy);

const coin = new Component(20, 20, "yellow", 200, 200, "rect");
display.add(coin);

What you just did: You created three game objects:

player — 50x50 blue rectangle at position (400, 300)
enemy — 40x40 red rectangle at position (100, 100)
coin — 20x20 yellow rectangle at position (200, 200)

Step 2.2: Movement

What you're going to do: Make the player move with arrow keys.

function update(dt) {
    player.x += player.speedX * dt;
    player.y += player.speedY * dt;

    if (display.keys[37]) player.speedX = -200 * dt;
    if (display.keys[39]) player.speedX = 200 * dt;
    if (display.keys[38]) player.speedY = -200 * dt;
    if (display.keys[40]) player.speedY = 200 * dt;

    move.bound(player);
}

What you just did: You made the player move:

player.x += player.speedX * dt; — Moves the player horizontally based on speed and delta time.
player.y += player.speedY * dt; — Moves the player vertically based on speed and delta time.
if (display.keys[37]) player.speedX = -200 * dt; — Left arrow sets speed to -200 pixels per second.
if (display.keys[39]) player.speedX = 200 * dt; — Right arrow sets speed to 200 pixels per second.
move.bound(player); — Keeps the player on screen.

Step 2.3: Collision

What you're going to do: Detect when the player touches a coin and collect it.

function update(dt) {
    if (player.crashWith(coin)) {
        score++;
        coin.destroy();
        scoreText.setText("Score: " + score);
    }
}

What you just did: You added collision detection:

if (player.crashWith(coin)) — Checks if the player touches the coin.
score++; — Increases the score by 1.
coin.destroy(); — Removes the coin from the game.
scoreText.setText("Score: " + score); — Updates the score display.

Step 2.4: UI and Text

What you're going to do: Add a score display.

const scoreText = new Tctxt("24px", "Arial", "white", 20, 20);
scoreText.setText("Score: 0");
display.add(scoreText);

function update(dt) {
    scoreText.setText("Score: " + score);
    scoreText.fixed();
}

What you just did: You added UI text:

new Tctxt("24px", "Arial", "white", 20, 20); — Creates text at position (20, 20) with size 24px and white color.
scoreText.setText("Score: 0"); — Sets the initial text.
display.add(scoreText); — Adds the text to the display.
scoreText.setText("Score: " + score); — Updates the text with the current score.
scoreText.fixed(); — Keeps the text fixed on the screen.

🟠 Phase 3: Building Complete Games

🟢 Game 1: Coin Collector

What you're going to build: A player that moves around collecting coins. When all coins are collected, you win!

What you'll learn:

Game state (playing, won)
Collecting and removing objects
Score tracking
Win condition
Restarting the game

Live Demo: limn-engine-doc.vercel.app/test8.html

🟡 Game 2: Top-Down Shooter

What you're going to build: A tank that shoots at enemies. Enemies chase the player and shoot back. Survive as long as possible!

What you'll learn:

Particles (explosions)
Enemy AI (chasing)
Shooting (bullets)
Screen shake (impact feedback)
Game over (lives system)

Live Demo: limn-engine-doc.vercel.app/test9.html

🟠 Game 3: Platformer

What you're going to build: A character that runs and jumps on platforms. Navigate a level and reach the goal!

What you'll learn:

Gravity (falling down)
Jumping (going up)
Ground collision (landing)
TileMaps (building levels)
Camera follow (scrolling)

Live Demo: limn-engine-doc.vercel.app/test13.html

🔴 Game 4: Dungeon Crawler

What you're going to build: A character exploring a dungeon with multiple layers, enemies, and interactive elements.

What you'll learn:

Multi-layer maps
Runtime tile editing
Event system
Health bars
Camera effects (zoom, shake)

Live Demo: limn-engine-doc.vercel.app/test11.html

🔴 Phase 4: Going Further

Step 4.1: Performance

What you're going to learn: Making your games run faster on low-end devices.

Key concepts:

Dual-renderer — Caches static content for 60fps
Object pooling — Reusing objects instead of creating new ones
Memory management — Proper cleanup with destroy()

The difference: Without optimization, a game with 1000 objects might run at 4fps. With the dual-renderer, it runs at 60fps — a 15x improvement!

Step 4.2: Advanced Features

What you're going to learn: Adding polish and advanced features to your games.

Key concepts:

Audio — Playing sounds with Sound and SoundManager
Sprites — Animated images with Sprite and AnimatedSprite
Fullscreen — display.fullScreen() and display.exitScreen()
Gradients — Styled backgrounds with display.lgradient() and display.rgradient()

Step 4.3: Understanding the Engine

What you're going to learn: How Limn Engine works under the hood.

Key concepts:

Rendering pipeline — How the engine draws objects
Camera system — How follow, shake, and zoom work
Delta time — How frame-rate independence works
Fake canvas — The offscreen cache

Step 4.4: Extending the Engine

What you're going to learn: Adding new features to Limn Engine.

Key concepts:

Custom components — Building your own game objects
Custom methods — Adding new features to the move object
Custom effects — Creating new visual effects

📊 Quick Reference: Complete Roadmap

Phase	Level	Time Estimate	Outcome
0	JavaScript Basics	2-4 weeks	Understand variables, functions, loops, objects, arrays
1	Limn Engine Setup	1 day	Display on screen, understanding the engine
2	Creating Game Objects	1-2 weeks	Move objects, detect collisions, display UI
3	Building Complete Games	2-4 weeks	Build 4 complete games of increasing complexity
4	Going Further	Ongoing	Optimize, understand internals, extend the engine

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Complete API Reference	limn-engine-doc.vercel.app/reference.html
Beginner Guide	limn-engine-doc.vercel.app/beginner.html
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	GitHub Issues

🎯 The One-Line Summary

"Start with JavaScript basics → HTML + CSS → Limn Engine setup → Components → Movement → Collision → UI → 4 complete games → Performance → Engine internals." 🎮🚀

Draw your game into existence — one step at a time. 🎮🚀

🎨 Beyond Games: 5 Surprising Ways to Use Limn Engine

Kehinde Owolabi — Thu, 03 Sep 2026 04:16:22 +0000

🎨 Beyond Games: 5 Surprising Ways to Use Limn Engine

From data visualization to interactive art — Limn Engine isn't just for games.

📖 Introduction

When most people hear "game engine," they think of games. And that makes sense — the name says it all. But here's the thing: game engines are really just interactive canvas engines with some extra features bolted on.

Limn Engine is no exception. Under the hood, it's a powerful 2D rendering system with:

A smooth 60fps animation loop
Camera controls (follow, shake, zoom)
Input handling (keyboard, mouse, touch)
Component-based object management
Particle systems for visual effects

These features aren't just for games. They're for anything that needs real-time, interactive graphics in the browser.

So let's explore five surprising ways you can use Limn Engine — without making a single game.

🎯 Try the Code Yourself

All the code examples in this article can be tested directly in Limn Studio:

👉 limn-engine-doc.vercel.app/editor

Just copy and paste the code into the editor, click Run, and see it come to life. No downloads, no setup, no hassle.

🎨 1. Interactive Data Visualization

What It Is

Data visualization is the graphical representation of information and data. By using visual elements like charts, graphs, and maps, data visualization tools provide an accessible way to see and understand trends, outliers, and patterns in data.

Traditionally, web developers use libraries like D3.js or Chart.js to create charts and graphs. These libraries are powerful, but they can be rigid — custom animations, real-time updates, and interactive elements are often difficult to implement.

What We're Going to Build

We're going to build a live-updating bar chart that responds to random data changes. Each bar will smoothly animate to new heights, creating a dynamic visualization that feels alive.

Here's what it will look like:

Six colorful bars arranged in a row
Each bar randomly changes height every few seconds
The bars animate smoothly from one height to another
Each bar displays its current value as a number

Why This Matters

Real-time data visualization is everywhere:

Stock market dashboards that update every second
Sensor data displays in factories and smart homes
Live sports statistics
Social media analytics

With Limn Engine, you can create custom visualizations that update at 60fps with smooth animations — something that's difficult to achieve with traditional charting libraries.

The Code

const display = new Display();
display.perform();
display.start(800, 400);
display.backgroundColor("#0a0a0a");

const bars = [];
const colors = ["#ff6b6b", "#ffd93d", "#6bcb77", "#4d96ff", "#ff6bb5", "#ff9f43"];

// ── CREATE BARS ──
for (let i = 0; i < 6; i++) {
    const bar = new Component(80, 100, colors[i % colors.length], 60 + i * 120, 200, "rect");
    display.add(bar);
    bars.push({
        component: bar,
        targetHeight: 100 + Math.random() * 250,
        currentHeight: 100
    });
}

// ── UPDATE LOOP ──
function update(dt) {
    bars.forEach((bar, index) => {
        // Randomly change target height
        if (Math.random() < 0.01) {
            bar.targetHeight = 50 + Math.random() * 300;
        }

        // Smoothly animate toward target
        bar.currentHeight += (bar.targetHeight - bar.currentHeight) * 0.05;
        bar.component.height = bar.currentHeight;
        bar.component.y = 300 - bar.currentHeight;

        // Add labels
        const label = new Tctxt("14px", "Arial", "white", bar.component.x + 40, 320);
        label.setText(Math.floor(bar.currentHeight));
        // Note: In a full implementation, you'd manage labels to prevent duplicates
    });
}

What's Happening Line by Line

Line 1-4: We create the Display, enable the dual-canvas pipeline for 60fps performance, and start the canvas at 800x400 pixels. The dual-canvas pipeline uses an offscreen canvas to cache static content, which improves performance — especially important for visualizations that update frequently. The background is set to dark (#0a0a0a) so the bars stand out.

Line 6-7: We create an array to store our bars and a set of six colors. Each color is a bright, distinct hex code so the bars are easy to distinguish.

Line 10-15: We loop six times to create six bars. Each bar is a Component — the basic building block of Limn Engine. The parameters are: width (80), height (100), color, x position (spaced 120 pixels apart), and y position (starting at 200). The display.add(bar) line is crucial — without it, the bar exists in memory but never appears on screen.

Line 16: We store each bar in the bars array with a random target height (between 100 and 350) and a current height (starting at 100). The target height is where the bar wants to be, and the current height is where it actually is.

Line 22-35: In the update function — which runs 60 times per second — we do the following for each bar:

Line 24: Randomly change the target height (1% chance per frame). This creates the dynamic, changing behavior.
Line 28: Smoothly animate the current height toward the target using a "lerp" (linear interpolation) calculation: current += (target - current) * 0.05. The 0.05 value controls the speed of animation — smaller numbers mean slower, smoother animation.
Line 29-30: Update the bar's height and y position so it grows upward from the bottom. The y position is set to 300 - barHeight because the bars are drawn from the top-left corner, and we want them to sit on the bottom.
Line 33-35: Create a text label showing the current value. In a full implementation, you'd manage these labels to prevent duplicates.

What You Just Built

You built a live-updating bar chart where each bar smoothly animates toward random target heights. The bars change color, the values update in real-time, and it runs at a smooth 60fps.

This is perfect for:

Live dashboards
Stock market visualizations
Sensor data displays
Performance monitoring tools

🎭 2. Interactive Art Installations

What It Is

Interactive art installations are artworks that respond to their audience — usually through sensors, cameras, or computer vision. In the digital realm, this often takes the form of generative art: visuals that are created algorithmically and respond to user input in real-time.

What We're Going to Build

We're going to build a particle-based art piece that responds to mouse movement. When you move your mouse, a colorful trail of particles follows, creating a stunning visual effect.

Here's what it will look like:

A dark canvas with colorful particles
Particles follow the mouse position
Each particle has a random color from a vibrant palette
Particles float and fade out over time

Why This Matters

Generative art is becoming increasingly popular in galleries, installations, and digital experiences:

Museum exhibits that respond to visitors
Music festivals with interactive projections
Digital art galleries
Creative coding projects

The Code

const display = new Display();
display.perform();
display.start(800, 600);
display.backgroundColor("#0a0a0a");

const ps = new ParticleSystem(display);
const colors = ["#ff006e", "#8338ec", "#3a86ff", "#ffbe0b", "#fb5607"];

// ── CREATE EMITTER THAT FOLLOWS MOUSE ──
const emitter = ps.createEmitter(400, 300, {
    rate: 200,
    life: 60,
    speedX: 0,
    speedY: -50,
    randomSpeed: 100,
    width: 4,
    height: 4,
    alphaFade: 0.02,
    colors: colors,
    randomColor: true,
    gravity: 0,
    type: "circle"
});

// ── UPDATE LOOP ──
function update(dt) {
    // Follow mouse
    if (display.x && display.y) {
        emitter.setPosition(display.x, display.y);
    }

    ps.update();
}

What's Happening Line by Line

Line 1-4: Standard Display setup — create, perform, start, set background. The dual-canvas pipeline is ideal for particle effects because it caches static content, allowing the main canvas to focus on rendering the dynamic particles.

Line 6: We create a ParticleSystem — this is the core of our art installation. It manages all particles and emitters, handling creation, updating, and cleanup automatically.

Line 7: We define five vibrant colors: pink (#ff006e), purple (#8338ec), blue (#3a86ff), yellow (#ffbe0b), and orange (#fb5607). These colors are inspired by vaporwave and cyberpunk aesthetics.

Line 10-22: We create an emitter — a source that continuously produces particles. The options mean:

rate: 200 — 200 particles per second. This creates a dense, continuous trail.
life: 60 — each particle lives for 60 frames (1 second at 60fps). This is long enough to create a visible trail but short enough that particles don't linger.
speedY: -50 — particles initially move upward by default, creating a fountain-like effect.
randomSpeed: 100 — random variation in speed, making the particles spread out.
width: 4, height: 4 — particle size. Small particles create a more delicate, sparkly effect.
alphaFade: 0.02 — particles fade out gradually, creating a smooth disappearing trail.
randomColor: true — each particle gets a random color from the colors array, creating a rainbow effect.
gravity: 0 — no gravity, so particles float in the direction they were emitted.
type: "circle" — particles are drawn as circles, which looks more organic than squares.

Line 25-28: In the update loop, we check if the mouse is active (display.x and display.y are set). If so, we move the emitter to the mouse position. This makes the particles follow the mouse.

Line 30: We call ps.update() to update all particles — moving them, fading them, and removing dead ones. This is called every frame to keep the system running.

What You Just Built

You created a particle system that follows the mouse, creating a beautiful trail of colorful particles. This is the foundation of countless interactive art installations.

This is perfect for:

Gallery installations
Music visualizations
Interactive projections
Creative coding projects

🗺️ 3. Interactive Maps and Floor Plans

What It Is

Interactive maps and floor plans allow users to explore physical spaces digitally. They combine visual representation with interactivity — users can click on rooms, zoom in and out, and pan around the space.

What We're Going to Build

We're going to build a zoomable, draggable floor plan with clickable rooms. Each room will be a different color, display a room number, and respond to hover and click events.

Here's what it will look like:

A large world (2000x2000 pixels) with 8 randomly placed rooms
Rooms are colored rectangles with room numbers
Hovering over a room highlights it in white
Clicking a room triggers a camera shake
Arrow keys pan the camera
Z and X keys zoom in and out

Why This Matters

Interactive maps are used everywhere:

Real estate websites with property floor plans
Museums and galleries with interactive maps
Event venues with seating charts
Office layout tools for space management

The Code

const display = new Display();
display.perform();
display.start(800, 600);
display.backgroundColor("#1a1a2e");

// ── WORLD SETUP ──
display.camera.worldWidth = 2000;
display.camera.worldHeight = 2000;
display.camera.x = 0;
display.camera.y = 0;

// ── CREATE ROOMS ──
const rooms = [];
const roomColors = ["#e94560", "#0f3460", "#16213e", "#533483", "#ffd93d"];

for (let i = 0; i < 8; i++) {
    const x = 100 + Math.random() * 1800;
    const y = 100 + Math.random() * 1800;
    const w = 100 + Math.random() * 200;
    const h = 100 + Math.random() * 200;
    const room = new Component(w, h, roomColors[i % roomColors.length], x, y, "rect");
    room.roomId = i;
    room.originalColor = roomColors[i % roomColors.length];
    room.isHovered = false;

    // ── CUSTOM DRAWING WITH LABEL ──
    room.update = function(ctx) {
        // Shadow for depth
        ctx.shadowColor = "rgba(0,0,0,0.3)";
        ctx.shadowBlur = 10;

        // Main rectangle
        ctx.fillStyle = this.isHovered ? "#ffffff" : this.originalColor;
        ctx.fillRect(this.x, this.y, this.width, this.height);

        // Border
        ctx.shadowBlur = 0;
        ctx.strokeStyle = "rgba(255,255,255,0.3)";
        ctx.lineWidth = 2;
        ctx.strokeRect(this.x, this.y, this.width, this.height);

        // Room number
        ctx.fillStyle = this.isHovered ? "#000" : "#fff";
        ctx.font = "20px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Room " + (this.roomId + 1), this.x + this.width/2, this.y + this.height/2);
    };

    display.add(room);
    rooms.push(room);
}

// ── CLICK DETECTION ──
let selectedRoom = null;

// ── UPDATE LOOP ──
function update(dt) {
    // Hover detection
    rooms.forEach(room => {
        room.isHovered = false;
        if (display.x && display.y) {
            const worldX = display.x + display.camera.x;
            const worldY = display.y + display.camera.y;
            if (worldX > room.x && worldX < room.x + room.width &&
                worldY > room.y && worldY < room.y + room.height) {
                room.isHovered = true;
            }
        }
    });

    // Click detection (simplified)
    if (display.x && display.y) {
        rooms.forEach(room => {
            if (room.isHovered) {
                selectedRoom = room;
                display.camera.shake(3, 3);
            }
        });
    }

    // Camera controls
    if (display.keys[37]) display.camera.x -= 5;
    if (display.keys[39]) display.camera.x += 5;
    if (display.keys[38]) display.camera.y -= 5;
    if (display.keys[40]) display.camera.y += 5;

    // Zoom with Z and X
    if (display.keys[90]) {
        display.camera.setZoom(1.2);
    }
    if (display.keys[88]) {
        display.camera.setZoom(0.8);
    }

    // HUD
    const hud = new Tctxt("14px", "Arial", "white", 20, 20);
    hud.setText("Arrow keys to pan | Z to zoom in | X to zoom out");
    // Note: In a full implementation, you'd manage HUD text properly
}

What's Happening Line by Line

Line 1-4: Standard Display setup.

Line 7-9: We set the camera's world size to 2000x2000 pixels — this is the size of our map. The world size tells the camera the boundaries of the map. We also set the camera's starting position to (0,0), which shows the top-left corner of the map.

Line 12: We create an array to store all rooms and a set of five room colors. The colors are a mix of vibrant and darker shades to create visual variety.

Line 15-20: We loop eight times to create eight rooms. Each room gets a random position and size within the 2000x2000 world. The position is generated using 100 + Math.random() * 1800, which ensures rooms don't appear right at the edges.

Line 21-23: We add custom properties to each room — roomId (0-7) for identification, originalColor to store the room's base color, and isHovered (initially false) to track whether the mouse is over the room.

Line 26-47: We override the update method of each room to draw it with custom styling:

Line 28-29: Adds a shadow for depth, making the rooms look like they're floating above the background.
Line 32-33: Draws the main rectangle — white if hovered, otherwise its original color. The hover effect creates immediate visual feedback.
Line 36-40: Adds a subtle border with semi-transparent white. The border gives rooms a defined edge.
Line 43-47: Draws the room number ("Room 1", "Room 2", etc.) centered in the room. The text color changes from white to black when hovered for better contrast.

Line 55-67: In the update loop, we check each room for hover:

First, we set isHovered to false for all rooms.
Then, if the mouse is active (display.x and display.y are set), we convert the mouse position from screen space to world space by adding the camera offset (display.x + display.camera.x). This is crucial — without this, the mouse position would be in screen space (relative to the screen), while the rooms are in world space (relative to the map). The camera offset adjusts for any panning or zooming.
We then check if the world-space mouse position is inside the room's rectangle using four simple comparisons.
If so, we set isHovered to true.

Line 70-77: Click detection — if the mouse is clicked and a room is hovered, we select that room and trigger a camera shake for feedback. The camera shake is display.camera.shake(3, 3) which displaces the camera by 3 pixels in each direction and then returns it to normal.

Line 80-87: Camera controls — arrow keys pan the camera by 5 pixels per frame. This creates smooth, responsive panning.

Line 90-97: Zoom controls — Z zooms in by setting the zoom to 1.2x, X zooms out by setting the zoom to 0.8x. The zoom is applied to the camera's context, scaling everything drawn.

What You Just Built

You built an interactive floor plan with zoom, pan, hover effects, and clickable rooms. The camera system handles all the complex math — you just focus on the content.

This is perfect for:

Real estate websites
Museum floor plans
Event venue maps
Office layout tools

📊 4. Real-Time Dashboards

What It Is

Real-time dashboards display live data in a visual format. They're used in system monitoring, business intelligence, IoT, and many other fields. The key requirement is that they update continuously without interrupting the user experience.

What We're Going to Build

We're going to build a live dashboard with four animated gauges. Each gauge will display a percentage value that smoothly animates to random targets.

Here's what it will look like:

Four circular gauges arranged in a row
Each gauge has a colored arc that fills from bottom to top
The percentage value is displayed in the center
Each gauge has a label (CPU, Memory, Disk, Network)
Values change randomly and animate smoothly

Why This Matters

Real-time dashboards are everywhere:

System monitoring (CPU, memory, disk usage)
Business intelligence (sales, revenue, conversions)
IoT dashboards (temperature, humidity, pressure)
Sports score displays

The Code

const display = new Display();
display.perform();
display.start(800, 600);
display.backgroundColor("#0a0a0a");

// ── CREATE GAUGES ──
const gauges = [];
const gaugeColors = ["#ff6b6b", "#ffd93d", "#6bcb77", "#4d96ff"];

for (let i = 0; i < 4; i++) {
    const x = 100 + i * 180;
    const y = 150;
    const gauge = {
        x: x,
        y: y,
        width: 120,
        height: 120,
        color: gaugeColors[i % gaugeColors.length],
        value: 0.5 + Math.random() * 0.4,
        targetValue: 0.5 + Math.random() * 0.4,
        label: ["CPU", "Memory", "Disk", "Network"][i]
    };

    // ── CUSTOM GAUGE DRAWING ──
    gauge.draw = function(ctx) {
        const cx = this.x + this.width/2;
        const cy = this.y + this.height/2;
        const radius = 50;
        const startAngle = Math.PI * 0.75;
        const endAngle = Math.PI * 2.25;
        const valueAngle = startAngle + (endAngle - startAngle) * this.value;

        // Background arc
        ctx.beginPath();
        ctx.arc(cx, cy, radius, startAngle, endAngle);
        ctx.strokeStyle = "#333";
        ctx.lineWidth = 12;
        ctx.stroke();

        // Value arc
        ctx.beginPath();
        ctx.arc(cx, cy, radius, startAngle, valueAngle);
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 12;
        ctx.lineCap = "round";
        ctx.stroke();

        // Value text
        ctx.fillStyle = "#fff";
        ctx.font = "32px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(Math.floor(this.value * 100) + "%", cx, cy - 10);

        // Label
        ctx.fillStyle = "#888";
        ctx.font = "14px Arial";
        ctx.fillText(this.label, cx, cy + 40);
    };

    gauges.push(gauge);
}

// ── UPDATE LOOP ──
function update(dt) {
    // Randomly update targets
    gauges.forEach(gauge => {
        if (Math.random() < 0.02) {
            gauge.targetValue = 0.2 + Math.random() * 0.6;
        }
        // Smooth animation toward target
        gauge.value += (gauge.targetValue - gauge.value) * 0.05;
    });

    // ── RENDER ──
    const ctx = display.context;
    gauges.forEach(gauge => {
        gauge.draw(ctx);
    });
}

What's Happening Line by Line

Line 1-4: Standard Display setup. The dark background (#0a0a0a) creates contrast for the brightly colored gauges.

Line 7-8: We create arrays for gauges and colors. The colors are distinct and vibrant: red (#ff6b6b), yellow (#ffd93d), green (#6bcb77), and blue (#4d96ff).

Line 11-19: We create four gauges, each positioned in a row. Each gauge has:

Position (x, y) — spaced 180 pixels apart
Size (width, height) — 120x120 pixels
A color from the gaugeColors array
A current value (random 50-90%)
A target value (random 50-90%)
A label ("CPU", "Memory", "Disk", "Network")

Line 22-61: We define a draw method for each gauge:

Line 23-27: Calculate the center, radius, and angles for the gauge. The startAngle and endAngle are set to 0.75π and 2.25π, creating a 270-degree arc starting from the bottom-left and going clockwise to the bottom-right. This gives a speedometer-like appearance.
Line 30-36: Draw a dark gray background arc. This represents the "empty" part of the gauge.
Line 39-46: Draw the colored value arc — from the start angle to the value angle. The lineCap: "round" makes the ends of the arc rounded, giving a polished look.
Line 49-55: Draw the percentage value as text in the center. The Math.floor(this.value * 100) converts the decimal value (0.0-1.0) to a percentage (0-100).
Line 58-61: Draw the label below the gauge in a muted gray color.

Line 68-73: In the update loop, we randomly change the target value (2% chance per frame). Then we smoothly animate the current value toward the target using a "lerp" calculation: current += (target - current) * 0.05. The 0.05 value controls the animation speed — smaller numbers mean slower, smoother animation.

Line 76-79: We render all gauges by iterating through the gauges array and calling their draw method.

What You Just Built

You built a real-time dashboard with four animated gauges. Each gauge smoothly animates to random values, creating a live-updating display.

This is perfect for:

System monitoring tools
IoT dashboards
Business intelligence dashboards
Sports score displays

✍️ 5. Interactive Storytelling / Digital Comics

What It Is

Interactive storytelling combines narrative with interactivity. Digital comics, interactive fiction, and animated storybooks allow readers to engage with the story in ways that traditional media cannot.

What We're Going to Build

We're going to build a page-by-page interactive comic with animated panels. Each page has panels with text, and readers navigate through the story.

Here's what it will look like:

Three pages with different panel layouts
Each panel has a colored background and text
Arrow keys navigate between pages
A camera shake animates page transitions

Why This Matters

Interactive storytelling is growing rapidly:

Digital comics with animated panels
Educational content with interactive elements
Interactive fiction and visual novels
Presentation tools for storytelling

The Code

const display = new Display();
display.perform();
display.start(800, 600);
display.backgroundColor("#1a1a2e");

// ── PAGE MANAGER ──
let currentPage = 0;
const totalPages = 3;

const pages = [
    {
        background: "#16213e",
        panels: [
            { x: 50, y: 50, w: 300, h: 200, color: "#e94560", text: "The journey begins..." },
            { x: 450, y: 50, w: 300, h: 200, color: "#0f3460", text: "A hero rises..." }
        ]
    },
    {
        background: "#0a0a0a",
        panels: [
            { x: 100, y: 100, w: 600, h: 200, color: "#533483", text: "A challenge appears..." },
            { x: 100, y: 350, w: 600, h: 150, color: "#e94560", text: "Will they succeed?" }
        ]
    },
    {
        background: "#16213e",
        panels: [
            { x: 150, y: 150, w: 500, h: 300, color: "#ffd93d", text: "The End... or is it?" }
        ]
    }
];

// ── PANEL COMPONENT ──
function createPanel(panelData, pageIndex) {
    const panel = new Component(panelData.w, panelData.h, panelData.color, panelData.x, panelData.y, "rect");
    panel.text = panelData.text;
    panel.isVisible = (pageIndex === 0);
    panel.pageIndex = pageIndex;

    panel.update = function(ctx) {
        if (!this.isVisible) return;

        // Panel background with shadow
        ctx.shadowColor = "rgba(0,0,0,0.5)";
        ctx.shadowBlur = 20;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.shadowBlur = 0;

        // Border
        ctx.strokeStyle = "rgba(255,255,255,0.2)";
        ctx.lineWidth = 2;
        ctx.strokeRect(this.x, this.y, this.width, this.height);

        // Text
        ctx.fillStyle = "#fff";
        ctx.font = "20px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(this.text, this.x + this.width/2, this.y + this.height/2);

        // Page indicator
        ctx.fillStyle = "rgba(255,255,255,0.3)";
        ctx.font = "14px Arial";
        ctx.fillText("Page " + (this.pageIndex + 1), this.x + this.width/2, this.y + this.height + 30);
    };

    display.add(panel);
    return panel;
}

// ── CREATE ALL PANELS ──
const allPanels = [];
pages.forEach((page, index) => {
    page.panels.forEach(panelData => {
        const panel = createPanel(panelData, index);
        allPanels.push(panel);
    });
});

// ── PAGE CONTROL ──
function showPage(pageIndex) {
    currentPage = pageIndex;
    allPanels.forEach(panel => {
        panel.isVisible = (panel.pageIndex === pageIndex);
    });
    // Animate transition
    display.camera.shake(2, 2);
}

// ── UPDATE LOOP ──
function update(dt) {
    // Page navigation
    if (display.keys[39] || display.keys[68]) { // Right arrow or D
        if (currentPage < totalPages - 1) {
            showPage(currentPage + 1);
            display.keys[39] = false; // Prevent rapid firing
            display.keys[68] = false;
        }
    }
    if (display.keys[37] || display.keys[65]) { // Left arrow or A
        if (currentPage > 0) {
            showPage(currentPage - 1);
            display.keys[37] = false;
            display.keys[65] = false;
        }
    }

    // ── HUD ──
    const ctx = display.context;
    ctx.fillStyle = "rgba(255,255,255,0.5)";
    ctx.font = "14px Arial";
    ctx.textAlign = "center";
    ctx.fillText("← → to navigate", 400, 580);
}

What's Happening Line by Line

Line 1-4: Standard Display setup. The dark blue background (#1a1a2e) gives the comic a moody, cinematic feel.

Line 7-8: We set up a page manager — currentPage starts at 0, and there are 3 pages total.

Line 10-32: We define three pages, each with panels. Each panel has a position (x, y), size (w, h), color, and text. The first page has two smaller panels, the second page has two larger panels, and the third page has one large panel — creating visual variety.

Line 35-63: We create a createPanel function that turns a panel definition into a Limn Engine Component:

Line 36: Creates the Component with the panel's size, color, and position. The parameters are: width, height, color, x position, y position, and type ("rect" for rectangle).
Line 37-39: Adds custom properties — text, visibility (only page 0 is visible at start), and page index.
Line 41-60: Overrides the update method to draw the panel with:
- A shadow (Lines 43-44): Adds depth and makes the panel look like it's floating.
- The panel background (Line 45-46): Fills the panel with its color.
- A subtle border (Line 49-51): Adds definition to the panel edges.
- The panel text centered (Line 54-58): Draws the story text in white.
- A page indicator at the bottom (Line 61-63): Shows which page the panel belongs to.

Line 66-72: We create all panels by looping through the pages and calling createPanel. This creates 5 panels total (2 + 2 + 1).

Line 75-83: We define a showPage function that:

Sets the current page
Updates the visibility of all panels (only panels on the current page are visible)
Triggers a camera shake for transition feedback. The shake is display.camera.shake(2, 2) which creates a subtle, satisfying transition effect.

Line 86-103: In the update loop:

Line 87-95: Right arrow or D key advances to the next page (if not on the last page).
Line 96-103: Left arrow or A key goes back to the previous page (if not on the first page).
We set display.keys[39] = false and similar to prevent rapid firing — this ensures the user can't skip multiple pages in one keypress.

Line 106-110: Draws navigation instructions at the bottom of the screen in semi-transparent white.

What You Just Built

You built an interactive comic with animated panels and page navigation. Each panel is a component that can be animated, clicked, or triggered independently.

This is perfect for:

Interactive storytelling
Educational content
Digital comics
Presentation tools

📊 Comparison: Traditional Web vs. Limn Engine

Task	Traditional Web	Limn Engine
Data Visualization	D3.js, Chart.js (rigid)	Full control, custom animations
Interactive Art	Canvas API (low-level)	Particle system, camera effects
Floor Plans	SVG, CSS (static)	Zoom, pan, click detection
Dashboards	React, charts (complex)	60fps, smooth animations
Digital Comics	HTML/CSS (static)	Animated panels, interactions

🔧 When to Use Limn Engine vs. Other Tools

Use Case	Limn Engine	Traditional Tool
Simple static charts	Overkill	Chart.js, D3.js
Complex real-time dashboards	✅ Perfect	React + libraries
Interactive art	✅ Perfect	P5.js, Three.js
Floor plans with zoom/pan	✅ Perfect	SVG + JavaScript
Digital comics with animations	✅ Perfect	HTML + CSS + JS
Game development	✅ Perfect	—

🚀 Try It Yourself

All the code examples in this article can be tested directly in Limn Studio:

👉 limn-engine-doc.vercel.app/editor

Just copy and paste the code into the editor, click Run, and see it come to life. No downloads, no setup, no hassle.

📊 What You've Learned

Concept	Why It Matters
Camera System	Zoom, pan, and follow for maps and large visualizations
Particle System	Stunning visual effects for art and dashboards
60fps Loop	Smooth real-time updates for data and animations
Component System	Reusable visual elements for any purpose
Input Handling	Keyboard, mouse, and touch for interactivity
Custom Drawing	Full control over how objects are rendered

🚀 What's Next?

Now that you've seen the possibilities, try building:

A live Twitter sentiment visualizer
A interactive museum map
A music visualizer
A custom dashboard for your own data

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Particle System Docs	limn-engine-doc.vercel.app/particles
Camera System Docs	limn-engine-doc.vercel.app/camera
GitHub Repository	github.com/terracodes004/limn-engine-doc
Report Bugs	GitHub Issues

🎯 The One-Line Summary

"Limn Engine isn't just for games — it's a powerful 2D canvas engine for data visualization, interactive art, maps, dashboards, and digital storytelling." 🎨🚀

Draw your world into existence — one frame at a time. 🎨🚀

🎮 Build Your First Game with Limn Studio — The Online Editor

Kehinde Owolabi — Tue, 01 Sep 2026 00:28:30 +0000

🎮 Build Your First Game with Limn Studio — The Online Editor

Write, run, and test Limn Engine games directly in your browser — no setup required.

🎯 Live Demo

Try the editor right now: limn-engine-doc.vercel.app/editor

The editor comes pre-loaded with a working example — a player that moves around a tilemap. Click Run to see it in action!

🙏 Special Thanks

The Limn Studio editor was developed by Desire — check out their work on DEV.to. Their contribution made it possible to write and test Limn Engine code directly in the browser.

⚠️ Note: Limn Studio Is Still in Development

Before we dive in, a quick heads-up: Limn Studio is still under active development. It's already functional and you can build and test games in it, but you might encounter rough edges, missing features, or occasional bugs. If something doesn't work as expected, don't worry — it's being improved continuously.

With that said, let's build something!

📖 Introduction

Limn Studio is the online code editor for Limn Engine. It's designed to let you write, run, and test games directly in your browser — no downloads, no setup, no hassle.

Here's what we'll build in this tutorial:

A simple red square that moves left and right
Keyboard controls using the arrow keys
A fully working game in just a few lines of code

All in about 10 lines of code.

🚀 Step 1: Open Limn Studio

Go to: limn-engine-doc.vercel.app/editor

You'll see a code editor with some pre-loaded code. This is a working example — you can click Run to test it right now.

📝 Step 2: Write Your First Code

Delete all the pre-loaded code and replace it with this:

const display = new Display();
display.perform(); // dual-canvas pipeline ON
display.start(800, 600);
const player = new Component(50, 50, "red", 400, 300, "rect");          
display.add(player);

function update(dt) {
    // Game logic goes here — dt = deltaTime
    if (display.keys[39]) player.speedX =  4;
    if (display.keys[37]) player.speedX = -4;
    else player.speedX = 0;
}

🔍 Step 3: Understanding the Code

Let me walk you through each line so you understand what's happening.

1. Create the Display

What you're going to do: Create the foundation of your game — the Display object. This is the first and most important line of code in any Limn Engine game.

const display = new Display();

What this does: This creates a new game window. Think of it as telling the engine "I want a game." Without this line, nothing else works — it's the foundation of every Limn Engine game. The new Display() creates an instance of the Display class, which manages the canvas, rendering, and game loop. The display variable is what you'll use to control everything else.

2. Enable the Dual-Canvas Pipeline

What you're going to do: Activate the high-performance rendering mode. This switches the engine from a basic 50fps loop to a smooth 60fps loop.

display.perform(); // dual-canvas pipeline ON

What this does: This is crucial. It switches the engine from using setInterval (which runs at ~50fps) to requestAnimationFrame (which runs at a smooth 60fps). Without this, your game will feel stuttery. Think of it as upgrading from a bumpy dirt road to a smooth highway. The dual-canvas pipeline also caches static content for better performance.

3. Start the Display

What you're going to do: Create the actual canvas on your page with a specific size.

display.start(800, 600);

What this does: This creates the canvas with a size of 800x600 pixels. The two numbers are width and height — you can change them to make the game bigger or smaller. If you want a full-screen game, you can use display.start(window.innerWidth, window.innerHeight).

4. Create the Player

What you're going to do: Create a game object — a red square that will represent the player.

const player = new Component(50, 50, "red", 400, 300, "rect");

What this does: This creates a component — a game object. The five parameters are: width, height, color, x position, and y position. So this creates a 50x50 red square at position (400, 300). The "rect" at the end means it's drawn as a rectangle. Components are the building blocks of every Limn Engine game — players, enemies, coins, walls, and more are all Components.

5. Add the Player to the Display

What you're going to do: Make the player visible by adding it to the display's render list.

display.add(player);

What this does: This is crucial! Without this, the player exists in memory but never appears on screen. Think of it like creating a character in a game but never spawning them into the world — they exist in the code but have no presence in the game. The display.add() method adds the component to the engine's render list, which means it will be drawn every frame. This is one of the most common mistakes beginners make — forgetting to add their components.

6. The Game Loop

What you're going to do: Write the update function that runs every frame and handles player movement.

function update(dt) {
    // Game logic goes here — dt = deltaTime
    if (display.keys[39]) player.speedX =  4;
    if (display.keys[37]) player.speedX = -4;
    else player.speedX = 0;
}

What this does: The update function runs every frame — 60 times per second. Here's what's happening:

dt (delta time) is the time between frames — it ensures movement is frame-rate independent
display.keys[39] — 39 is the keycode for the Right Arrow key
display.keys[37] — 37 is the keycode for the Left Arrow key
If the right arrow is pressed, the player moves right at speed 4
If the left arrow is pressed, the player moves left at speed -4
If neither is pressed, the player stops

The display.keys object tracks all key states — it's updated automatically by the engine.

🎮 Step 4: Run the Game

Click the Run button in Limn Studio. You should see:

A dark canvas with a red square in the center
The red square moves left and right when you press the arrow keys

🔧 Step 5: Customize the Game

Try making these changes to see how the engine responds. Each change teaches you something new about Limn Engine.

🔴 Change the Player Color

What you're going to do: Change the player's color from red to blue. The color is the third parameter in the Component constructor.

const player = new Component(50, 50, "blue", 400, 300, "rect");

What you just did: You changed the "red" to "blue". This tells the engine to draw the player as a blue square instead of a red one. You can use any CSS color name ("red", "blue", "green", "yellow", etc.) or hex codes ("#ff0000", "#00ff00", "#0000ff", etc.). This is useful for customizing the look of your game objects.

📏 Change the Player Size

What you're going to do: Make the player bigger by changing its width and height from 50 to 80. The first two parameters in the Component constructor control size.

const player = new Component(80, 80, "red", 400, 300, "rect");

What you just did: You changed the first two numbers from 50, 50 to 80, 80. This tells the engine to draw the player as an 80x80 square instead of a 50x50 one. The player is now 60% larger. This is useful for making objects more visible or easier to hit.

🏃 Change the Player Speed

What you're going to do: Make the player move faster by increasing the speed value from 4 to 8. The speed is the number you assign to player.speedX.

if (display.keys[39]) player.speedX = 8;
if (display.keys[37]) player.speedX = -8;

What you just did: You changed the speed from 4 to 8. The player now moves twice as fast. Speed in Limn Engine is measured in pixels per frame (when not using dt). Larger numbers = faster movement. This is useful for adjusting the feel of your game — faster for action games, slower for puzzle games.

🎯 Add Up and Down Movement

What you're going to do: Add support for the Up and Down arrow keys so the player can move in all four directions. You'll need to add player.speedY and check for keys 38 (Up) and 40 (Down).

function update(dt) {
    player.speedX = 0;
    player.speedY = 0;
    if (display.keys[39]) player.speedX = 4;
    if (display.keys[37]) player.speedX = -4;
    if (display.keys[38]) player.speedY = -4;
    if (display.keys[40]) player.speedY = 4;
}

What you just did: You added two new conditions — one for the Up arrow (key 38) and one for the Down arrow (key 40). You also added player.speedY to control vertical movement. Now the player moves in all four directions: Up, Down, Left, and Right. This is useful for creating more complex games where the player needs full control.

🎮 Full Four-Way Movement with Diagonal Normalization

What you're going to do: Add proper diagonal movement normalization so the player doesn't move faster when going diagonally. This is a common physics fix in game development.

function update(dt) {
    let mx = 0, my = 0;
    if (display.keys[39] || display.keys[68]) mx = 1;
    if (display.keys[37] || display.keys[65]) mx = -1;
    if (display.keys[40] || display.keys[83]) my = 1;
    if (display.keys[38] || display.keys[87]) my = -1;

    // Normalize diagonal movement
    if (mx !== 0 && my !== 0) {
        mx *= 0.707;
        my *= 0.707;
    }

    const speed = 200;
    player.speedX = mx * speed * dt;
    player.speedY = my * speed * dt;
}

What you just did: You added WASD support (keys 68, 65, 83, 87) alongside the arrow keys. More importantly, you added diagonal normalization — when both mx and my are non-zero, you multiply them by 0.707 (which is 1/√2). This prevents the player from moving faster when moving diagonally. Without this, diagonal movement would be about 1.4 times faster than horizontal or vertical movement. This is a fundamental principle of game physics and one of the most common "beginner traps."

📊 What You've Learned

Concept	Why It Matters
Display	The foundation of every Limn Engine game — creates the canvas and runs the game loop
Component	Every visible game object — player, enemies, coins, walls
display.add()	Without this, your component exists but never appears
update(dt)	The game loop — runs every frame, `dt` ensures frame-rate independence
display.keys	Keyboard input — check if a key is pressed using its keycode
deltaTime (dt)	Ensures movement is frame-rate independent — the game runs at the same speed on all devices
Diagonal Normalization	Prevents faster diagonal movement — multiply by `0.707` when moving diagonally

🔑 Keycodes Reference

Key	Keycode
Left Arrow	37
Up Arrow	38
Right Arrow	39
Down Arrow	40
A	65
W	87
D	68
S	83
Space	32
Enter	13

🚀 What's Next?

Now that you've built your first game in Limn Studio, try these next steps:

Add enemies that chase the player
Add coins to collect
Add a scoring system
Add a game-over screen
Build the complete space shooter game from the tutorial

🔗 Resources

Resource	Link
Limn Studio (Editor)	limn-engine-doc.vercel.app/editor
Limn Engine Docs	limn-engine-doc.vercel.app
Space Shooter Tutorial	DEV.to Tutorial
Ball Game Tutorial	DEV.to Tutorial
Level 1 Beginner Guide	DEV.to Tutorial
Limn Engine GitHub	github.com/terracodes004/limn-engine-doc
Report Bugs	GitHub Issues

🎯 The One-Line Summary

"Limn Studio lets you write and run Limn Engine games in your browser — no setup required. Developed by Desire, it's still in development but already works!" 🎮🚀

Draw your game into existence — one line of code at a time. 🎮🚀

🎯 How I Fixed the Click Bug That No AI Noticed

Kehinde Owolabi — Wed, 26 Aug 2026 15:02:27 +0000

🎯 How I Fixed the Click Bug That No AI Noticed

The story of a subtle camera bug that hid in plain sight — and how I caught it.

📖 Introduction

Every game engine has bugs. Some are obvious — objects don't render, physics breaks, sounds don't play. Others are subtle — they only appear under specific conditions, and they're easy to miss.

This is the story of one of those subtle bugs.

I spent months building Limn Engine. I tested it on a Chromebook, a Toshiba laptop with 4GB of RAM, an HP laptop (behind my sister's back), and a Tecno Pop 4 with 1GB of RAM. The engine worked beautifully — 60 FPS on low-end hardware, smooth movement, responsive controls.

But there was a problem.

Click events didn't work when the camera moved.

I noticed it while testing a game with a scrolling map. Clicking on objects worked fine when the camera was at (0,0). But as soon as the camera followed the player, clicks stopped working. Objects that were clearly on screen weren't registering clicks.

I had already run the entire Limn Engine codebase through five major AI models — DeepSeek, ChatGPT, Claude, Gemini, and Grok — for evaluation and analysis. They all reviewed the code, provided feedback, and helped me optimize the engine.

None of them noticed the click bug.

They all looked at the clicked() method and said it looked correct. They didn't consider that the mouse position was in screen space while the component positions were in world space.

So I fixed it myself.

🤖 The AI Evaluation

Before I found the bug, I had already submitted Limn Engine for evaluation to the five major AI models:

AI Model	What They Evaluated	What They Missed
DeepSeek	Full codebase, API design, performance	The camera offset in click events
ChatGPT	Architecture, features, documentation	Screen space vs. world space mismatch
Claude	Code quality, optimization suggestions	The missing `+ camera.x` in event listeners
Gemini	Overall engine rating, strengths/weaknesses	Click detection with camera movement
Grok	Performance analysis, edge cases	The space mismatch in `clicked()`

All five models gave Limn Engine ratings between 88/100 and 94/100. They praised the dual-renderer system, the intuitive API, the comprehensive documentation, and the delta time fix.

But none of them caught the click bug.

🐛 The Problem: Screen Space vs. World Space

What's the Difference?

Space	What It Means	Example
Screen Space	Position relative to the visible screen	(100, 100) = 100 pixels from the top-left of the screen
World Space	Position relative to the entire game world	(100, 100) = 100 pixels from the top-left of the world

When the camera is at (0,0), screen space and world space are the same. But when the camera moves — say, to (100, 100) — the relationship changes.

Before the Fix (Broken)

window.addEventListener('mousedown', (e) => {
    this.x = e.pageX;   // ← Screen space
    this.y = e.pageY;   // ← Screen space
});

// In clicked():
clicked() {
    const centerX = this.x + this.width / 2;
    const centerY = this.y + this.height / 2;
    // Uses display.x and display.y — both in screen space
    const rotatedX = (display.x - centerX) * Math.cos(-this.angle) - (display.y - centerY) * Math.sin(-this.angle) + centerX;
    // ...
}

The mouse position (display.x and display.y) was in screen space, but the component's position (this.x and this.y) was in world space. When the camera moved, these two spaces drifted apart, and clicks stopped working.

🔍 Why No AI Noticed

I asked five AI models to evaluate the code. Here's what they all missed:

AI Model	What They Said	What They Missed
DeepSeek	"The click detection looks correct."	The camera offset
ChatGPT	"The rotation math is good."	The space mismatch
Claude	"The `clicked()` method handles rotation well."	Screen vs. world
Gemini	"The component collision system is solid."	The missing `+ camera.x`
Grok	"The event handling is clean."	The offset in mouse events

None of them asked: "Wait, is display.x in screen space or world space?"

They assumed the code was correct because it looked like standard click detection. But standard click detection in most engines handles this automatically. In Limn Engine, it didn't.

🔧 The Fix: Adding the Camera Offset

The fix was simple once I understood the problem.

After the Fix (Working)

window.addEventListener('mousedown', (e) => {
    this.x = e.pageX + this.camera.x;   // ← World space
    this.y = e.pageY + this.camera.y;   // ← World space
});

window.addEventListener('touchstart', (e) => {
    this.x = e.touches[0].pageX + this.camera.x;   // ← World space
    this.y = e.touches[0].pageY + this.camera.y;   // ← World space
});

Two lines of code. That's all it took.

By adding the camera offset (+ this.camera.x and + this.camera.y), I converted the mouse position from screen space to world space right at the event listener level. Now display.x and display.y are always in world space, and clicked() works correctly no matter where the camera is.

📊 Before and After

Scenario	Before Fix	After Fix
Camera at (0,0)	Click works ✅	Click works ✅
Camera at (100, 100)	Click fails ❌	Click works ✅
Camera at (500, 300)	Click fails ❌	Click works ✅
Camera following player	Click fails ❌	Click works ✅

💡 What I Learned

AI is not infallible. Five major AI models missed this bug because they don't "think" about context — they just analyze code.
Testing beats theory. AI can analyze code structure, but only you can test the actual behavior.
Context matters. The same code can be correct in one context and wrong in another. Understanding the difference between screen space and world space is essential for game development.
Test with camera movement. Many bugs only appear when the camera moves. Always test your games with scrolling and camera following.
The simplest fix is often the best. Two lines of code fixed a bug that confused five AI models.
Trust yourself. I noticed the bug because I tested my game thoroughly. Don't rely on AI to catch everything — test your code.

🔗 The Fix in Action

The fixed code is live in the Limn Engine repository:

👉 Limn Engine Source Code (epic.js)

🐛 Found a Bug? Report It Here!

If you encounter any issues with Limn Engine, please report them on GitHub:

👉 https://github.com/terracodes004/limn-engine-doc/issues

🎯 What You've Learned

Concept	Why It Matters
Screen Space vs. World Space	Mouse events are in screen space; game objects are in world space
Camera Offset	Add `camera.x` and `camera.y` to convert mouse position to world space
AI Limitations	Even five AI models can miss bugs that require contextual understanding
Test with Camera Movement	Bugs often appear only when the camera moves
Trust Your Testing	If something feels wrong, it probably is — test thoroughly

🚀 What's Next?

Now that you understand screen space vs. world space, you can apply this knowledge to other areas of game development:

Collision detection with moving cameras
UI elements that stay fixed on screen
Drag and drop systems
Object picking in 3D

🎯 The One-Line Summary

"I fixed a click bug by adding the camera offset to mouse events — two lines of code that five AI models (DeepSeek, ChatGPT, Claude, Gemini, and Grok) all missed." 🎮🚀

Draw your game into existence — one frame at a time. 🎮🚀

🚀 From FlipaClip to SitePoint: The Full Story of Kehinde Owolabi

Kehinde Owolabi — Mon, 24 Aug 2026 03:43:40 +0000

🚀 From FlipaClip to SitePoint: The Full Story of Kehinde Owolabi

How a Nigerian teenager built a professional game engine with borrowed laptops, offline W3Schools, and pure determination.

🎮 Play the Game

Try Limn Engine Live — Space Shooter Demo

See what 4 years of determination built. This space shooter runs at 60 FPS on a Tecno Pop 4 with 1GB RAM.

📖 Introduction

Every developer has an origin story. Some start with a fancy computer and a computer science degree. Others start with a flipbook app and a sister who trusted them with her phone.

My name is Kehinde Owolabi. I'm 18 years old (born December 4, 2007), and I live in Lagos, Nigeria. I'm currently in PC103 at BYU Pathway, and I'm a member of The Church of Jesus Christ of Latter-day Saints.

I built a 94/100 professional game engine called Limn Engine. It runs at 60 FPS on a Toshiba with 4GB RAM. It was published on SitePoint and ranked #3 among 2D JavaScript game engines.

Nobody knew it was developed on a Chromebook, a borrowed Thinkpad (behind my sister's back), and a Toshiba that "hung like hell." That was the secret I kept for months.

But that's only one part of this story.

This is the full story of how I went from a button phone to a 94/100 game engine, from FlipaClip to SitePoint, from a boy who failed physics to a developer who built something that runs on a Tecno Pop 4.

The one-line summary: "I'm Kehinde Owolabi, an 18-year-old developer from Lagos, Nigeria who went from FlipaClip to building a 94/100 game engine on borrowed laptops — and got published on SitePoint." 🎮🚀

🎨 The Beginning: FlipaClip and the Spark of Creativity

Before I was a developer, I was an animator.

I used FlipaClip — a simple animation app on mobile — to create flipbook-style animations. I loved bringing characters to life, frame by frame. I would spend hours drawing, tweaking, and watching my creations move.

That creative spark stayed with me. I wanted to create interactive experiences. I wanted to build games. But I didn't know how.

At that time, I didn't even know what programming was. I just knew I wanted to make things.

What this taught me: Animation taught me the value of frame-by-frame iteration — a skill that later helped me debug game loops and rendering pipelines.

📚 The First Encounter with Code

When I was in SS1 (Senior Secondary 1), I opened my computer textbook and found something unexpected: a BASIC tutorial.

I read it cover to cover. I was fascinated by the idea that you could type words and make a computer do things. It felt like magic — but it was real. It was something I could learn.

But there was a problem: I didn't have a phone or a laptop.

I couldn't practice. I couldn't test the code. I could only read and imagine what it would be like to actually run the programs. I wrote down code snippets in my notebook, hoping that someday I would have a device to try them on.

What this taught me: You don't need a computer to start learning. I wrote code on paper before I ever typed it.

📱 The Turning Point: A Sister's Phone and a Love for Python

Then came physics class.

I was failing physics — not because I didn't understand it, but because I was absent from class. When I returned, I had fallen behind. My sister noticed and gave me her phone so I could read and research.

Instead of just studying physics, I started researching programming.

I discovered Python. I read about it. I watched videos about it. And I fell in love.

Python was simple. It was readable. It made sense in a way that physics didn't at the time. I knew I had to learn it. I spent hours reading tutorials, watching YouTube videos, and absorbing everything I could.

That's when I realized: I was genuinely interested in coding. It wasn't just a distraction from physics — it was something I wanted to pursue.

I still love physics, by the way. I only failed because I was absent. Once I caught up, I understood it just fine. But coding had already captured my heart.

What this taught me: Sometimes your biggest failure becomes your biggest opportunity. Physics led me to coding.

📲 The Button Phone Era

Before my sister got the laptop, I used my mom's Itel button phone.

Data was available sometimes. I would Google codes and write them down on paper — because I couldn't save files on a button phone.

When my sister's friend came around, I would borrow their phone and go to Webmaker to practice.

I learned to code without a laptop. That's not a flex — that's survival. I did whatever it took to keep learning.

What this taught me: Resourcefulness is more important than resources.

🌐 The JavaScript Journey

In 2023, I was asked to build a website for a competition in Public Art Africa. I built it on Replit using HTML, CSS, and JavaScript.

That's when I learned JavaScript. Not because I planned to — but because I had to. The competition required a website, and JavaScript was the language of the web.

After the competition, I wanted to build games. I knew about Pygame, but JavaScript worked in the browser — no installation needed, no complex setup. I could just open a tab and start coding.

That was the hook. JavaScript gave me the freedom to create without barriers.

What this taught me: Sometimes the best way to learn is to be thrown into the deep end. I learned JavaScript because I had to ship a project.

🖥️ The Laptop Heist Era

I didn't have a laptop of my own. Not for a long time.

Sister's Toshiba (4GB RAM — "Hangs Like Hell")

My sister got a Toshiba laptop with 4GB of RAM. It hung like hell. But I coded on it anyway. It didn't matter that it was slow — it was a laptop, and I could use it to build things.

The problem? She wouldn't give it to me willingly. I had to code behind her back. If anything happened to the laptop, she would blame me.

Every time I heard her footsteps, I would quickly close the lid. I coded in secret, in fear, in stolen moments. But I coded.

The charger spoiled. We didn't buy a new one for two months. But I didn't stop coding. I found other ways — borrowing phones, writing code on paper, waiting for opportunities.

What this taught me: Fear of being caught couldn't stop me. If you really want to build something, you'll find a way.

Brother's HP (He Let Me)

My brother David got a laptop later. He let me code on it. No guilt. No hiding. Just permission.

That HP saw TCJSGame V3. The breakthrough. The Tile Class. The flow state. For the first time, I could code without looking over my shoulder.

David's support meant everything. He believed in me when I didn't have much to show.

What this taught me: Permission and support are powerful. One person believing in you can change everything.

💻 The Thinkpad Era (Behind My Sister's Back Again)

After the Toshiba spoiled, I had to use my sister's Thinkpad — again behind her back.

That Thinkpad saw V2 of the engine.

I renamed it to TCgame, then TCJSgame.

Copilot helped clean up the code and organize everything into classes. It was the first time the engine looked like a real project.

What this taught me: Even when you're building in secret, you can still build something real.

📚 The Church WiFi

My chapel is the Agege Stake Center, and Abule Egba Ward. There's WiFi there.

So when I was in church, I would download:

YouTube videos
Offline W3Schools
PDFs

I learned Python, Java, JS, HTML, CSS, PHP, Scratch — everything I could. I was hungry for knowledge, and I took it wherever I could find it.

What this taught me: Education is available if you're willing to look for it. Even church WiFi can be a classroom.

🛠️ The Birth of JGame

I wanted to build games. I started with Pygame but didn't understand it.

So I decided to build my own engine by copying codes and learning how they worked.

That became JGame — the first version of what would eventually become Limn Engine.

JGame existed on the Toshiba laptop. I finished it but never published it.

Then the Toshiba spoiled.

What this taught me: Your first version doesn't need to be perfect. It just needs to exist.

🤖 The AI Analysis Era

I began analyzing TCJSgame with DeepSeek and ChatGPT.

I knew something was missing. So I added:

Scene management
TileMap
hide() and show()
Gradients
Fullscreen support

I developed all of this without AI — I just used AI to analyze what was wrong. I wanted to learn how to build things myself.

What this taught me: AI is a tool for analysis, not a replacement for understanding. I built the features myself; AI just helped me see what was missing.

🔥 The Dual-Renderer Breakthrough

Limn Engine V3 had low ratings because of performance.

I developed extensions:

Sonic.js (performance)
Tctxt (text rendering)

Then I developed the dual-renderer system.

The idea came from tile caching — but the first version had a bug: it rerendered every frame despite caching.

I fixed it. The dual-renderer was born.

The engine went from 4 FPS to 60 FPS on a Toshiba with 4GB RAM. That's a 15x improvement.

What this taught me: Sometimes the problem isn't that something is slow — it's that you're doing it too many times. Cache everything you can.

🔍 The Delta Time Bug

The original code used 1 / fps calculated every second. The problem? The FPS counter resets every second, so at the start of each second, the FPS would start at 0 and build up to 60. This made the game spike at the beginning of every second.

I tested the fix on my sister's HP laptop without her knowing. The Pygame-style method — calculating the time difference between frames — worked perfectly and eliminated the spikes.

What this taught me: The simplest bugs can have the biggest impact. Delta time is critical for consistent performance.

📱 The Tecno Pop 4 Test

Tecno Pop 4 is my mom's phone. 1GB RAM. Weak processor.

I tested the engine on it.

At first, it was laggy. The FPS was low. But after fixing the delta time bug and optimizing the renderer, it started working smoothly.

If it works on a Tecno Pop 4, it works on anything.

That moment when I saw my game running smoothly on that phone — I was proud. Like, "Ha, I actually did this."

What this taught me: Test on the worst hardware you can find. If it works there, it'll work everywhere.

🏷️ The Rebrand: TCJSgame → Limn Engine

TCJSgame was a working name. Technical. Hard to spell. No meaning.

Limn (verb) — to draw, paint, or portray.

Perfect. The engine helps you draw games into existence.

The name change was also practical: TCJSgame was given because all other names (TCgame, TC Games) were already taken. So I chose Limn Engine — a name with meaning, a name that reflects what the engine does.

What this taught me: A name matters. It should tell a story about what you've built.

🔗 The SitePoint Journey

In 2026, I published an article on SitePoint called "Top 10 2D JavaScript Game Engines for Beginners."

Limn Engine was ranked #3 with a 9/10 rating.

What this taught me: Recognition comes when you keep building. I didn't set out to get published — I just kept making things.

📊 The Rating

Limn Engine received a 94/100 rating.

Category	Score
Performance	95
Ease of Use	94
Feature Set	92
Documentation	92
API Design	88
Beginner Friendliness	94
Cross-Platform	85
Overall	94/100

What this taught me: Ratings are nice, but they're not the goal. The goal is to build something people can use.

🎯 The One-Line Summary

"I'm Kehinde Owolabi, an 18-year-old developer from Lagos, Nigeria who went from FlipaClip to building a 94/100 game engine on borrowed laptops — and got published on SitePoint." 🎮🚀

🔗 Follow Me

Platform	Link
DEV.to	Follow Kehinde Owolabi on DEV.to
GitHub	github.com/terracodes004/limn-engine-doc
Discord	Join the community
Live Demo	limn-engine-doc.vercel.app/test9.html

🐛 Report Bugs

Found a bug? Report it here:

github.com/terracodes004/limn-engine-doc/issues

📝 What's Next

Upcoming articles:

"How Limn Engine's Dual-Renderer Works" — The 4 FPS → 60 FPS story
"Building a Dungeon Crawler with Limn Engine" — Complete game tutorial
"Limn Engine vs Phaser: Which One Should You Choose?" — Honest comparison

🎯 What You've Learned

Concept	How It Applies
Resourcefulness	You can learn without a laptop
Persistence	Keep building, even in secret
Caching	Render once, paste forever
Delta time	Consistent performance across devices
Testing	Test on the worst hardware

🚀 Final Thoughts

I built a game engine on borrowed laptops, behind my sister's back, with offline W3Schools and church WiFi.

If I can do it, so can you.

The resources you have are enough. The time you have is enough. The knowledge you have is enough.

Just keep building.

Draw your game into existence — one frame at a time. 🎮🚀

🐛 How I Fixed the Delta Time Bug in Limn Engine (And How You Can Too)

Kehinde Owolabi — Fri, 21 Aug 2026 03:15:51 +0000

🐛 How I Fixed the Delta Time Bug in Limn Engine (And How You Can Too)

A story about frame rates, Chromebooks, and the one bug that broke everything

📖 Introduction

Let me tell you about a bug that haunted Limn Engine for months.

Limn Engine was developed on a Chromebook — but nobody knows that. It was tested on a Toshiba laptop with 4GB of RAM, and everything worked perfectly. Enemies moved at the right speed. The player controlled smoothly. The game ran at a crisp 60 frames per second.

But when I tested the same game on a Tecno Pop 4 (a low-end Android phone with 1GB of RAM and a weak processor), something strange happened.

The enemies moved at completely different speeds.

Sometimes they were too fast. Sometimes they were too slow. Sometimes they started fast and then slowed down for no reason.

The game was broken — and the problem was hiding in plain sight: delta time.

🎯 What Is Delta Time (And Why Should You Care?)

Delta time (often written as dt) is the amount of time that has passed since the last frame. It's measured in seconds.

Frame Rate	Delta Time
60 FPS	~0.0167 seconds
30 FPS	~0.0333 seconds
15 FPS	~0.0667 seconds

Here's the rule: If you multiply your movement speed by delta time, your game runs at the same speed on all devices.

// ✅ CORRECT: Frame-rate independent
player.x += 200 * dt;  // Moves 200 pixels per second

// ❌ WRONG: Frame-rate dependent
player.x += 4;  // Moves 4 pixels per frame (speed varies by FPS)

Without delta time, your game will run at different speeds on different devices. A fast computer (144 FPS) will feel like the game is in fast-forward, while a slow device (15 FPS) will feel like slow-motion.

🐛 The Bug: How I Broke Delta Time

Limn Engine already had delta time — but it was calculated using 1 / fps every second. Here's what the original code looked like:

setInterval(() => {
    display.deltaTime = 1 / display.fps;
    refresh = true;
}, 1000);

This worked... sort of. But there was a huge problem:

The FPS counter resets every second. At the start of each second, the FPS starts at 0 and builds up to 60. So for the first fraction of a second, 1 / fps was huge — sometimes 0.5 or even 1.0. This made components move incredibly fast at the beginning of each second, then suddenly slow down to normal speed.

It was like the game was having a seizure every second.

🔧 The Fix: Two Different Approaches

I tested two different fixes:

Approach 1: The `1 / fps` Method (Original)

setInterval(() => {
    display.deltaTime = 1 / display.fps;
}, 1000);

Problem: FPS builds from 0 to 60, causing dt to spike.

Approach 2: The Pygame Method (What I Ultimately Used)

function ani(time) {
    display.deltaTime = display.timeFromAllFrames - display.timeFromPreviousFrames;
    display.timeFromPreviousFrames = time;

    // Convert to seconds
    update(dt = display.deltaTime / 1000);
}

🧪 The Test: HP Laptop (Behind My Sister's Back)

I tested both approaches on my sister's HP laptop when she wasn't looking (don't worry, she still doesn't know). Here's what I found:

Method	Result
`1 / fps`	Worked, but had spikes at the start of each second
Pygame-style (difference between frames)	Worked perfectly, smooth movement

The Pygame-style method gave similar results but was more reliable. It didn't spike at the beginning of each second because it calculates the actual time between frames, not an average over a second.

📊 The Results: Before and After

Device	Before Fix	After Fix
Chromebook (dev machine)	Jagged movement	Perfect speed
Toshiba Laptop (4GB RAM)	Game too fast at start	Perfect speed
HP Laptop (tested behind sister's back)	Spikes every second	Perfect speed
Tecno Pop 4 (1GB RAM)	Game too slow	Perfect speed
Desktop (144 FPS)	Unplayable	Perfect speed

The same game now runs at the same speed on every device.

🔗 The Code

You can see the final working code here:

👉 Limn Engine Source Code (epic.js)

Look for the ani() function to see the delta time fix in action.

📝 The Documentation

For more information about Limn Engine, check out the complete documentation:

👉 Limn Engine Documentation on DEV.to

🐛 Found a Bug? Report It Here!

If you encounter any issues with Limn Engine, please report them on GitHub:

👉 https://github.com/terracodes004/limn-engine-doc/issues

📋 How to Report a Bug (Helpful Template)

When you open an issue, please include:

A clear description of the bug.
Steps to reproduce it.
What you expected to happen vs. what actually happened.
Screenshots or error logs (if applicable).
Which version of Limn Engine you're using.

Here's a template you can use:

**Bug Description:**
[Describe the problem clearly]

**Steps to Reproduce:**
1. Do this...
2. Then do this...
3. Observe the bug...

**Expected Behavior:**
[What should have happened]

**Actual Behavior:**
[What actually happened]

**Screenshots/Logs:**
[Attach if available]

**Limn Engine Version:**
[v0.x.x]

**Device/OS:**
[e.g., Tecno Pop 4, Android 10]

💡 What I Learned

1 / fps is not the best way to calculate delta time. It works, but it's unreliable at the start of each second.
The Pygame method is better. Calculating the difference between frames is more accurate and doesn't spike.
Test on low-end devices. If it works on a Tecno Pop 4, it'll work on almost anything.
Test on different laptops. I tested on a Chromebook, Toshiba, and HP — and they all showed different issues.
The dual-renderer saved me. Even with the delta time bug, the game was running at 60 FPS on the Toshiba laptop. If I had been using a simpler engine, the performance would have been terrible too.
Develop on a Chromebook. Nobody knows Limn Engine was developed on a Chromebook — and now you know my secret.

🎯 The One-Line Summary

"I fixed a delta time bug that made my game spike every second — and you can too." 🎮🚀

Draw your game into existence — one frame at a time. 🎮🚀

DEV Community: Kehinde Owolabi

🖱️ How I Fixed Canvas Click Coordinates in Limn Engine

🖱️ How I Fixed Canvas Click Coordinates in Limn Engine

🎯 Try the Fix

📖 Introduction

🐛 The Bug: Coordinates That Didn't Match

🛠️ What We're Going to Build

Step 1: The Outer Wrapper

Step 2: The Coordinate Helper

Step 3: The Mouse Down Listener

Step 4: The Mouse Up Listener

Step 5: The Touch Start Listener

Step 6: The Touch End Listener

Step 7: The Mouse Move Listener

Step 8: The Touch Move Listener

📝 The Complete Patch

📊 Before and After

🤔 What About the fake Canvas?

⚠️ Limitations

📊 What You've Learned

🚀 What's Next?

🐛 Report Bugs

🔗 Resources

🎯 The One-Line Summary

🎮 Neon Caverns: A Platformer Built with Limn Engine — Play It Now

🎮 Neon Caverns: A Platformer Built with Limn Engine — Play It Now

🎯 Live Demo

📖 Introduction

🎮 How to Play

🏗️ How the Game Is Structured

🧩 The Core Game Elements

🎨 The Neon Aesthetic

🔍 Understanding the Code

1. Setting Up the Display

2. Configuring the World

3. Building a Level

4. Creating Custom Enemy Behaviour

5. Handling Collision with Tiles

6. Managing Scenes

7. Handling Player Damage

📝 A Note on the Source Code

🎯 What You've Learned

🚀 What's Next?

🔗 Resources

🎯 The One-Line Summary

How I Built a Platformer Game with Limn Engine — And the Arcade That Came After

🎮 How I Built a Platformer Game with Limn Engine — And the Arcade That Came After

🎯 Live Demo

📖 Introduction

🚀 Step 1: Download Limn Engine

🛠️ Step 2: Create the HTML File

🎨 Step 3: Set Up the Display and Camera

🧱 Step 4: Create the Player, Ground, and Platforms

🪙 Step 5: Add the Coins

📊 Step 6: Add the Score UI

🎮 Step 7: Add On-Screen Buttons for Mobile

🏗️ Step 8: Set Up Game State and Helper Functions

🎬 Step 9: Write the Game Loop

9a. Camera and fixed UI

9b. Touch detection

9c. Horizontal movement

9d. Jumping

9e. Gravity and ground collision

9f. Platform collision

9g. Horizontal bounds

9h. Coin collection

9i. Win condition

✅ Step 10: The Complete Code

📊 What You've Learned

🕹️ Introducing the Limn Arcade

What the Arcade Includes

Why This Matters for Beginners

How to Publish Your Game

🛠️ Or Build It in Limn Studio Instead

🐛 Found a Bug? Report It

🚀 What's Next?

🔗 Resources

🎯 The One-Line Summary

[Boost]

Excited to Share: I’m a Developer at Limn Engine🚀

🤔 What About the `fake` Canvas?