DEV Community: Kehinde Owolabi

Build Your First Browser Game in 60 Seconds with Limn Engine

Kehinde Owolabi — Mon, 03 Aug 2026 02:52:35 +0000

🎮 Build Your First Browser Game in 60 Seconds with Limn Engine

A Complete Coin Collector Game in Under 100 Lines of JavaScript

🎯 Live Demo

See the final result first: [limn-engine-doc.vercel.app/test8.html](http://limn-engine-doc.vercel.app/test8.html]\(https://limn-engine-doc.vercel.app/test8.html\))

Play the game, move the blue square with arrow keys, collect all 10 gold coins, and win!

📖 Introduction

Most game engines require npm installs, build tools, and hours of setup before you see anything on screen. Limn Engine is different — one script tag, one canvas, and you're ready to build.

In this tutorial, you'll build a complete coin collector game in under 100 lines of code. You'll learn:

How to set up Limn Engine
How to create and move a player
How to generate coins at random positions
How to detect collisions
How to track score and win the game
How to restart with one keypress

The result: A fully playable game that you can share with anyone.

🚀 Step 1: Download Limn Engine

First, you need to get the Limn Engine file.

Go to the Limn Engine website: [limn-engine-doc.vercel.app](https://limn-engine-doc.vercel.app)
Click the download button to get epic.js
Place epic.js in the same folder as your HTML file

Why this matters: Limn Engine is a single file. No npm, no build tools, no complex setup. Just one JavaScript file and you're ready to go.

📁 Step 2: Create Your HTML File

Create a new HTML file and include the Limn Engine script. This is the foundation of your game.


<!doctype html>

<html>

<head>

<script src="epic.js"></script>

</head>

<body>

<script>

// All your game code goes here

</script>

</body>

</html>

Let's break this down so you understand what's happening:

<!doctype html> — This tells the browser to use the latest version of HTML. Think of it as saying "Hey browser, I'm using modern HTML, please render this correctly."
<html> — This is the root element of your page. Everything else goes inside it.
<head> — This section contains information about your page that the browser needs before it starts rendering. Things like the title, character set, and in our case, the script we're about to load.
<script src="epic.js"> — This is where we load the Limn Engine. The src attribute tells the browser to fetch a file called epic.js from the same folder as your HTML file. This gives you access to all the Limn Engine features like Display, Component, Tctxt, and everything else we'll use.
<body> — This is where the visible content of your page goes. The canvas will be created here automatically when we start the display.
<script> — This is where we write our game code. The browser will run this code after it loads epic.js.

What happens if you skip this step: If you don't include epic.js, the browser will throw an error saying Display is not defined because it doesn't know what a Display is.

🎮 Step 3: Create the Display

The Display is your game window. It creates the canvas, manages the game loop, and handles input from the keyboard and mouse.


const display = new Display();

display.perform();

display.start(800, 600);

display.backgroundColor("green");

Let me explain each line so you understand what it's doing:

const display = new Display(); — This creates a new Display object. Think of it as telling the engine "I want a game window." This object will manage everything about your game.
display.perform(); — This turns on performance mode. Without this, your game runs at about 50 frames per second. With it, you get 60 frames per second and a special rendering system that makes your game faster. Always call this before start().
display.start(800, 600); — This actually creates the canvas on your page. The two numbers tell the engine how big you want the game window: 800 pixels wide and 600 pixels tall. After this line, you'll see a blank canvas on your page.
display.backgroundColor("green"); — This sets the background color of your canvas. You can use any color name or hex code here. If you skip this, the background will be transparent (white in most browsers).

A helpful way to think about it: Creating the Display is like setting up a stage. perform() is like turning on the lights, start() is like raising the curtain, and backgroundColor() is like painting the backdrop.

🧩 Step 4: Create the Player

A Component is any game object — player, enemy, coin, wall. Think of it as anything that appears on screen and can move or be interacted with.


const player = new Component(40, 40, "blue", 400, 300, "rect");

display.add(player);

Let me walk you through what each part means:

new Component(40, 40, "blue", 400, 300, "rect") — This creates a new Component. The five pieces of information are:
40, 40 — The width and height of the component in pixels. This creates a 40×40 square.
"blue" — The color of the component. This can be a color name, hex code, or even an image path.
400, 300 — The starting position on the screen. This puts the player at the center of an 800×600 canvas.
"rect" — The type of component. This tells the engine to draw a rectangle. Other options include "image" and "text".
display.add(player); — This tells the engine to add the player to the game world. Without this line, nothing would appear on screen because the engine wouldn't know about your player.

What if you want to change the player's position? You can set player.x and player.y to any number. For example, player.x = 100; moves the player to the left edge.

📝 Step 5: Create the UI (Score and Win Text)

Tctxt is a special text component that gives you more control over how text looks. It can have backgrounds, padding, alignment, and more.


const scoreText = new Tctxt("24px", "Arial", "white", 20, 50);

scoreText.setText("Score: 0 / 10");

display.add(scoreText);

const winText = new Tctxt("48px", "Arial", "gold", 400, 300);

winText.align = "center";

winText.setText("YOU WIN!");

winText.hide();

display.add(winText);

const restartText = new Tctxt("20px", "Arial", "white", 400, 380);

restartText.align = "center";

restartText.setText("Press R to play again");

restartText.hide();

display.add(restartText);

Let me explain each piece:

Score Text:

new Tctxt("24px", "Arial", "white", 20, 50) — Creates text at position (20, 50) from the top-left corner. The font is 24 pixels tall and uses the Arial font in white color.
.setText("Score: 0 / 10") — Sets the actual text content. This is separate from creating the object so you can update it later.
display.add(scoreText) — Adds it to the game world so it appears on screen.

Win Text (hidden at start):

.align = "center" — Centers the text horizontally. This is why the x position is 400 (the center of an 800-pixel screen).
.hide() — Makes the text invisible at the start. This is important because the player hasn't won yet.
.show() — Will be called later when the player wins.

Restart Text:

Similar to the win text, but positioned slightly lower at y=380.
Also hidden at start and will appear when the player wins.

Why use Tctxt instead of a regular Component? Tctxt gives you features like alignment, background color, and padding that normal text components don't have. This makes your UI look much more polished.

🪙 Step 6: Create the Coins

Coins are also Components. We'll create 10 coins at random positions using a loop.


const totalCoins = 10;

let coins = [];

for (let i = 0; i < totalCoins; i++) {

let coin = new Component(30, 30, "gold",

Math.random() * 700 + 50,

Math.random() * 500 + 50, "rect");

display.add(coin);

coins.push(coin);

}

Let me walk through what's happening:

const totalCoins = 10; — This sets how many coins we want. We use a variable so we can change it easily later.
let coins = []; — This creates an empty array to store all the coin objects. We need this so we can check collisions with each coin and remove collected ones.
for (let i = 0; i < totalCoins; i++) — This loop runs 10 times. Each time, it creates one new coin.
Math.random() * 700 + 50 — This creates a random number between 50 and 750. Why 50 and 750? We want the coins to appear away from the edges so they're reachable. The canvas is 800 pixels wide, so 50 and 750 give a nice margin.
Math.random() gives a number between 0 and 1.
Multiply by 700 gives a number between 0 and 700.
Add 50 gives a number between 50 and 750.
Math.random() * 500 + 50 — Same logic for the Y position. The canvas is 600 pixels tall, so this gives numbers between 50 and 550.
display.add(coin) — Adds the coin to the game world.
coins.push(coin) — Stores the coin in our array for later use.

What if you want more coins? Just change totalCoins to any number. The loop will create that many coins.

🎯 Step 7: Game State

We need variables to track the game status.


let score = 0;

let gameActive = true;

What these mean:

score — This starts at 0 and increases by 1 each time you collect a coin. It's what we show on the score text.
gameActive — This is a boolean (true/false). When true, the game updates normally. When false, the game stops. This prevents the player from continuing after winning.

Why do we need gameActive? Without it, the player could keep moving and the score could change even after winning. It gives us control over when the game ends.

🔄 Step 8: The Game Loop

The update() function runs every frame, which is 60 times per second. This is where all the action happens.


function update(deltaTime) {

// Restart with R key

if (display.keys[82]) {

location.reload();

return;

}

if (!gameActive) return;

Let me explain the flow:

function update(deltaTime) — This is where Limn Engine calls your game code every frame. The deltaTime parameter tells you how much time has passed since the last frame (usually about 0.016 seconds at 60fps).
if (display.keys[82]) — The display.keys array stores which keys are currently pressed. 82 is the keycode for the letter 'R'. When you press R, this condition becomes true.
location.reload(); — This reloads the page, which restarts the game. It's a simple way to reset everything.
return; — This exits the update function early. Without this, the game would keep running even as it reloads.
if (!gameActive) return; — If the game is not active (because you've won), this exits the function early. This stops the player from moving or collecting more coins after winning.

What is keycode 82? Every key on the keyboard has a numeric keycode. 82 is 'R', 37-40 are arrow keys, 32 is space. You can find a full list of keycodes online.

⌨️ Step 9: Player Movement

Now we add the controls to move the player with arrow keys.


// Player movement

if (display.keys[37]) player.speedX = -400 * deltaTime;

else if (display.keys[39]) player.speedX = 400 * deltaTime;

else player.speedX = 0;

if (display.keys[38]) player.speedY = -400 * deltaTime;

else if (display.keys[40]) player.speedY = 400 * deltaTime;

else player.speedY = 0;

move.bound(player);

Here's what each part does:

display.keys[37] — Keycode 37 is the left arrow key. If it's pressed, we set the player's horizontal speed to negative (move left).
-400 * deltaTime — This moves the player at 400 pixels per second. Multiplying by deltaTime makes the movement smooth and consistent regardless of frame rate. On a fast computer, deltaTime is smaller, so the player moves less per frame but more often. On a slow computer, deltaTime is larger, so the player moves more per frame but less often. The result is the same speed on both.
move.bound(player); — This keeps the player inside the canvas boundaries. Without this, the player would walk off the screen and disappear. It's like having an invisible wall at the edges.

Keycodes explained:

37 = Left arrow
39 = Right arrow
38 = Up arrow
40 = Down arrow

🪙 Step 10: Coin Collection

This is where we check if the player touches a coin and handle what happens.


// Coin collection

for (let i = 0; i < coins.length; i++) {

if (player.crashWith(coins[i])) {

[display.camera](http://display.camera).shake(3, 3);

coins[i].hide();

coins.splice(i, 1);

score++;

scoreText.setText("Score: " + score + " / " + totalCoins);

break;

}

}

Let me break this down carefully:

for (let i = 0; i < coins.length; i++) — This loops through every coin in our array. We use i to track which coin we're looking at.
if (player.crashWith(coins[i])) — This checks if the player overlaps with the current coin. crashWith() is a built-in collision detection function. It returns true if two components are touching.
display.camera.shake(3, 3); — This makes the screen shake slightly. The two numbers are the intensity on the X and Y axes. A small shake like this gives satisfying feedback to the player.
coins[i].hide(); — This makes the coin invisible. It's still in memory but not drawn on screen.
coins.splice(i, 1); — This removes the coin from the array. splice(i, 1) means "remove 1 item at position i".
score++; — This adds 1 to the score.
scoreText.setText("Score: " + score + " / " + totalCoins); — This updates the score display.
break; — This exits the loop early. Why? Because we've already found and collected a coin, so we don't need to check the rest of the coins this frame.

What happens if you don't use break? The player could collect multiple coins in one frame if they overlap with several at once, which would feel unfair and break the game.

🏆 Step 11: Win Condition

Finally, we check if the player has collected all the coins.


// Win condition

if (score === totalCoins && gameActive) {

gameActive = false;

[winText.show](http://winText.show)();

[restartText.show](http://restartText.show)();

scoreText.hide();

}

}

Here's the logic:

if (score === totalCoins && gameActive) — This checks two things:
The score equals the total number of coins (10)
The game is still active
gameActive = false; — This stops the game. The player won't be able to move or collect more coins.
winText.show(); — This makes the "YOU WIN!" text appear.
restartText.show(); — This makes the "Press R to play again" text appear.
scoreText.hide(); — This hides the score display since you don't need it anymore.

Why do we check gameActive? Without this check, the win condition could trigger multiple times. Once you win, the game is no longer active, so the condition won't run again.

📝 Complete Code

Here's the entire game in one file. You can copy this and run it immediately.


<!doctype html>

<html>

<head>

<script src="epic.js"></script>

</head>

<body>

<script>

let gameActive = true;

const display = new Display();

const player = new Component(40, 40, "blue", 400, 300, "rect");

const scoreText = new Tctxt("24px", "Arial", "white", 20, 50);

const restartText = new Tctxt("20px", "Arial", "white", 400, 380);

display.perform()

display.start(800, 600);

let score = 0;

const totalCoins = 10;

let coins = [];

// Player

display.add(player);

display.backgroundColor("green")

// Score text

scoreText.setText("Score: 0 / " + totalCoins);

display.add(scoreText);

// Win text (hidden at start)

const winText = new Tctxt("48px", "Arial", "gold", 400, 300);

winText.align = "center";

winText.setText("YOU WIN!");

winText.hide();

display.add(winText);

restartText.align = "center";

restartText.setText("Press R to play again");

restartText.hide();

display.add(restartText);

// Create coins

for (let i = 0; i < totalCoins; i++) {

let coin = new Component(30, 30, "gold",

Math.random() * 700 + 50,

Math.random() * 500 + 50, "rect");

display.add(coin);

coins.push(coin);

}

function restart() {

location.reload()

}

function update(deltaTime) {

// Restart with R key

if (display.keys[82]) {

restart();

return;

}

if (!gameActive) return;

// Player movement

if (display.keys[37]) player.speedX = -400 * deltaTime;

else if (display.keys[39]) player.speedX = 400 * deltaTime;

else player.speedX = 0;

if (display.keys[38]) player.speedY = -400 * deltaTime;

else if (display.keys[40]) player.speedY = 400 * deltaTime;

else player.speedY = 0;

move.bound(player);

// Coin collection

for (let i = 0; i < coins.length; i++) {

if (player.crashWith(coins[i])) {

[display.camera](http://display.camera).shake(3, 3);

coins[i].hide();

coins.splice(i, 1);

score++;

scoreText.setText("Score: " + score + " / " + totalCoins);

break;

}

}

// Win condition

if (score === totalCoins && gameActive) {

gameActive = false;

[winText.show](http://winText.show)();

[restartText.show](http://restartText.show)();

scoreText.hide();

}

}

</script>

</body>

</html>

🎯 What You've Learned

| Concept | Why It Matters | How It Works |

|---------|----------------|--------------|

| Limn Engine Setup | No npm, no build tools — just one script tag | Include epic.js and start coding |

| Components | Every game object is a Component | new Component() creates one |

| Player Movement | Arrow keys with deltaTime for consistent speed | display.keys reads input, speedX/speedY moves |

| Collision Detection | crashWith() detects overlaps | Returns true when two components touch |

| Random Placement | Math.random() creates variety | Gives different positions every time |

| UI with Tctxt | Styled text with background and padding | Supports alignment, colors, and show/hide |

| Win Condition | Game state management | gameActive controls the game flow |

| Restart | One keypress to reload | location.reload() resets everything |

🚀 What's Next: Article 2 — "Build a Top-Down Shooter with Particles, AI, and Screen Shake"

Now that you've built your first game, it's time to level up. In the next tutorial, you'll build a complete top-down space shooter that demonstrates more advanced Limn Engine features.

What You'll Build


┌─────────────────────────────────────────────────────────────────┐

│ │

│ Score: 0 Lives: 3 Bullets: 12 │

│ │

│ 👾 (Enemy) │

│ │

│ 🟦 (Player) │

│ ↑ │

│ (WASD to move) │

│ (Space to shoot) │

│ │

│ ✨ (Particle trail behind player) │

│ │

└─────────────────────────────────────────────────────────────────┘

What You'll Learn

| Concept | Why It Matters |

|---------|----------------|

| Particle Systems | Visual effects make games feel alive |

| Enemy AI | Enemies that chase the player |

| Bullet Management | Limiting ammunition for balance |

| Screen Shake | Impact feedback |

| Invincibility Frames | Player protection after being hit |

| Game States | Lives, score, game over |

| Camera Follow | Keeping the player centered |

| UI with Tctxt | Displaying lives and bullets |

Key Functions You'll Use

| Function | Purpose |

|----------|---------|

| display.camera.follow() | Camera follows player |

| move.bound() | Keep player on screen |

| component.crashWith() | Collision detection |

| move.particles.explosion() | Explosion effects |

| move.particles.blood() | Blood effects |

| display.camera.shake() | Screen shake |

| particles.emit() | Custom particle effects |

| component.destroy() | Remove objects |

| display.stop() | End the game |

🎮 Preview the Game

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

Play the game, move with WASD or arrow keys, shoot with Space, and survive as long as possible!

🎮 Controls

WASD or arrow keys — Move the player
Space — Shoot (limited bullets, auto-recharge)
Enemies chase the player
Collect score by destroying enemies
Lose lives when enemies touch you

🔗 Resources

Resource	Link
Live Demo (Article 1)	limn-engine-doc.vercel.app/test8.html
Live Demo (Article 2)	limn-engine-doc.vercel.app/test9.html
Download Limn Engine	limn-engine-doc.vercel.app
Limn Engine Docs	limn-engine-doc.vercel.app
Beginner Guide	limn-engine-doc.vercel.app/beginner.html
Discord Community	discord.gg/ZqnUtTQb8

Draw your game into existence — one line of code at a time. 🎮🚀

🔥 Limn Engine vs Python Arcade — Which One Should You Learn?

Kehinde Owolabi — Fri, 31 Jul 2026 15:22:12 +0000

🔥 Limn Engine vs Python Arcade — Which One Should You Learn?

A Brutally Honest Comparison of Two Beginner-Friendly Game Engines

📖 Introduction

If you're a beginner looking to build 2D games, two names keep coming up: Limn Engine and Python Arcade. Both are designed for beginners. Both are free. Both make game development accessible.

But they are fundamentally different.

One runs in your browser with JavaScript. The other runs on your desktop with Python. One is a single file you drop into an HTML page. The other requires a Python environment and installation.

This comparison is about helping you choose the right engine for your goals — not about which is "better." Because "better" depends entirely on what you want to build and how you want to build it.

🎯 What Each Engine Is

Limn Engine

Limn Engine is a lightweight, zero-configuration 2D game engine for the browser. You drop a single epic.js file into an HTML page, write a few lines of JavaScript, and your game runs in any browser — no npm, no build step, no complex tooling.

The philosophy: "Common outcomes should be functions." Things you do in every game — edge detection, screen shake, particle effects — are built-in as one-line functions.

Python Arcade

Arcade is an easy-to-learn Python library for creating 2D games. It's built on top of pyglet and OpenGL, and it's designed for programmers who want to make games without learning a complex framework.

The philosophy: "Friendly API that caters to both beginners and experts." Arcade provides a clean, modern Python API with full type hints and excellent documentation.

📊 Head-to-Head Comparison

1. Setup & Installation

Aspect	Limn Engine	Python Arcade
Installation	None — just include `epic.js`	`pip install arcade`
Dependencies	Zero — no npm, no build tools	Python, pyglet, OpenGL
First Game Time	~60 seconds	~5 minutes
Environment	Browser (HTML + JS)	Python (desktop)

Verdict: Limn Engine wins here because there's literally no setup — just include a script tag. Arcade requires Python installation, which adds friction for absolute beginners.

2. Language & Learning Curve

Aspect	Limn Engine	Python Arcade
Language	JavaScript	Python
Target Audience	Absolute beginners	Beginners & educators
Learning Curve	Very low	Low-medium
Type Hints	❌ No	✅ Yes

Verdict: Both are beginner-friendly. Limn Engine's API is designed to be intuitive with one-liners for common tasks. Arcade has better type hints and Python's readability.

3. Key Features

Feature	Limn Engine	Python Arcade
Rendering	HTML5 Canvas	OpenGL
Camera Support	✅ Built-in	✅ Built-in
Physics	Basic (gravity, collision)	Simple physics engine
TileMap Support	✅ Built-in	✅ Built-in
Particle System	✅ Six presets	❌ No built-in
Sprite Animation	✅ AnimatedSprite	✅ TextureAnimationSprite
Audio	✅ Built-in	✅ Built-in
Screen Shake	✅ One-line function	❌ No built-in
Visual Editor	❌ No	❌ No

Verdict: Limn Engine has more built-in "polish" features (particles, screen shake) that Arcade lacks. Arcade has more robust physics, but Limn's feature set is better for beginners who want quick visual feedback.

4. Performance

Aspect	Limn Engine	Python Arcade
Rendering Engine	Canvas (CPU)	OpenGL (GPU)
Sprite Scaling/Rotation	Canvas-based	GPU-accelerated
Static Draw Calls	One per frame (dual-canvas)	Depends on implementation
Performance	4 FPS → 60 FPS with `perform()`	60 FPS with thousands of sprites

Verdict: Arcade has an edge for complex scenes (OpenGL acceleration). Limn Engine's dual-canvas system is optimized for static backgrounds, but it's still CPU-bound.

5. Memory Management

Aspect	Limn Engine	Python Arcade
Automatic GC	✅ JavaScript garbage collector	✅ Python garbage collector
Object Pooling	✅ Built-in (custom)	✅ Available
Memory Leak Prevention	`destroy()` method	`remove()` method
Sprite Management	Manual via arrays	SpriteList container
Resource Management	Images loaded once	Automatic resource cleanup

Verdict: Arcade's SpriteList and cleanup() methods make resource management easier. Limn Engine requires manual destroy() calls, which gives you more control but also more responsibility.

6. Platform Support

Platform	Limn Engine	Python Arcade
Web	✅ Native	❌ Not yet
Windows	❌ No	✅ Yes
Mac	❌ No	✅ Yes
Linux	❌ No	✅ Yes
Mobile	❌ No	❌ No
Raspberry Pi	❌ No	❌ No (Pi 4/5 only)

Verdict: This is the biggest difference. Limn Engine is web-native, which is great for instant deployment. Arcade runs on Windows, Mac, and Linux — three platforms instead of one.

7. Community & Documentation

Aspect	Limn Engine	Python Arcade
Documentation	✅ Comprehensive	✅ Excellent
Community	🟡 Growing	🟢 Established
Tutorials	✅ DEV.to series	✅ Real Python, official docs
License	MIT	MIT

Verdict: Both are well-documented. Arcade has a larger, more established community.

📊 Overall Scores

Category	Limn Engine	Python Arcade	Winner
Setup & Installation	10/10	8/10	🟢 Limn Engine
Language & Learning Curve	9/10	8.5/10	🟢 Limn Engine
Key Features	9/10	7.5/10	🟢 Limn Engine
Performance	8/10	9/10	🟢 Python Arcade
Memory Management	8/10	9/10	🟢 Python Arcade
Platform Support	7/10	9/10	🟢 Python Arcade
Community & Documentation	8/10	9/10	🟢 Python Arcade
Overall Average	8.4/10	8.6/10	🟢 Python Arcade (slightly)

🎯 Which One Should You Choose?

Choose Limn Engine If:

If You Want To...	Why
Build browser games	Limn Engine runs natively in the browser
Learn JavaScript	You'll write real JavaScript, not a visual language
Ship games instantly	One HTML file + `epic.js` = deploy to any web host
Avoid setup	No npm, no Python, no build tools
Understand game engines	The code is open and readable
Build quickly	One-liners for common tasks

Choose Python Arcade If:

If You Want To...	Why
Build desktop games	Arcade runs on Windows, Mac, Linux
Learn Python	Python is beginner-friendly and widely used
Work with OpenGL	GPU-accelerated graphics
Create complex games	More robust physics and sprite handling
Use established libraries	Large ecosystem of Python tools
No web deployment	You don't need to ship to the browser

🎯 The One-Line Summary

"Limn Engine is for the web — one file, one script tag, zero setup, instant deployment. Python Arcade is for the desktop — Python, pip, OpenGL, full control."

Draw your game into existence — with the engine that fits your goals. 🎮🚀

🎮 Top 10 2D JavaScript Game Engines for Beginners (Ranked)

Kehinde Owolabi — Mon, 27 Jul 2026 12:34:33 +0000

🎮 Top 10 2D JavaScript Game Engines for Beginners (Ranked)

A Brutally Honest Look at What Works and What Doesn't

📖 Introduction

Let's be real: most "beginner-friendly" game engines are either too simple to build anything useful or too complex to actually learn from. The game development community loves to recommend the same few engines over and over, but they rarely tell you the downsides.

This list is different. We're ranking the top 10 2D JavaScript game engines for beginners — but we're also telling you what's wrong with each one.

No marketing fluff. Just honesty.

🎯 What Makes an Engine "Beginner-Friendly"?

Factor	Why It Matters
Easy setup	No complex build tools or configuration files
Good documentation	Clear explanations and examples
Active community	Help when you get stuck
Forgiving API	Not too many ways to do the same thing
Quick results	See something on screen fast
No hidden costs	Free and open-source

#10 — Pixi.js

Rating: 7/10

Best For: High-performance 2D rendering

What It Is

Pixi.js is a 2D rendering library — not a full game engine. It provides high-speed 2D rendering using WebGL with Canvas fallback. It's used by Disney, Facebook, and Adobe.

Why Is It Below Others?

Pixi.js is at the bottom because it's not a game engine. It's a rendering library. If you want to build a game, you'll need to build everything else yourself — physics, input handling, audio, game loop, scene management. This is overwhelming for beginners. The steep learning curve and the fact that you have to piece together multiple libraries make it the least beginner-friendly option on this list.

What Works

Blazing fast — One of the fastest 2D rendering engines available
Used by big companies — Proven in production at scale
Excellent rendering — WebGL-accelerated with fallback
Great API — Well-designed and easy to use
Strong community — Large user base with many resources

What Doesn't Work

1. Not a Game Engine

Pixi.js is a rendering library, not a game engine. It doesn't include physics, input handling, audio, or a game loop. You'll need to build these systems yourself.

2. Steep Learning Curve

Because you have to build so much yourself, the learning curve is steep. You'll need to understand rendering, game loops, and system design.

3. More Code to Write

Everything takes more code. Want to handle input? You'll need to write your own system. Want physics? You'll need to integrate a physics library.

4. Fragmented Ecosystem

There's no single "right way" to build a game with Pixi.js. You'll need to piece together different libraries and frameworks.

5. Overkill for Simple Games

If you're building a simple game, Pixi.js is overkill. You'll spend more time setting up infrastructure than building your game.

Who Should Use It

✅ Developers who want full control
✅ Developers who already have their own game logic
✅ Developers building performance-critical applications

Who Should Avoid It

❌ Absolute beginners
❌ Developers who want a complete engine
❌ Anyone building a simple game

#9 — PlayCanvas (2D Mode)

Rating: 6.5/10

Best For: Teams building 2D games in the browser with visual editing

What It Is

PlayCanvas is a web-based game engine that, while primarily known for 3D, can also be used for 2D game development through its 2D sprite system. It features a visual editor, real-time collaboration, and WebGL rendering.

Why Is It Below Others?

PlayCanvas is a 3D-first engine. The 2D features feel like an afterthought. The editor is cluttered with 3D-specific options that beginners don't need. The free tier is limited, and the cloud dependence means you can't work offline. For pure 2D game development, there are better, more focused options.

What Works

Visual editor — Browser-based editor with real-time preview
Collaboration — Multiple people can work on the same project simultaneously
No software to install — Everything runs in the browser
Good for 2D — Includes sprites, tilemaps, and 2D physics
Export options — Export to web, mobile, and desktop
Asset management — Built-in asset pipeline

What Doesn't Work

1. 3D-First Design

PlayCanvas is built for 3D first. The 2D features, while functional, feel like an afterthought. The editor is cluttered with 3D-specific options that beginners don't need.

2. Pricing

PlayCanvas has a free tier with limitations. For advanced features or private projects, you'll need to pay. This can be a dealbreaker for beginners.

3. Cloud Dependence

Everything is cloud-based. If you lose internet access or the service goes down, you can't work. This also means your project files are stored on their servers.

4. Limited Free Features

The free tier is limited in terms of storage, private projects, and features. To unlock full capabilities, you'll need to subscribe.

5. Learning Curve

The 3D-first design makes the learning curve steeper than it needs to be for 2D development. You'll spend time filtering out 3D features you don't need.

6. 2D Physics is Basic

The 2D physics support (based on ammo.js) is functional but not as polished as dedicated 2D engines.

Who Should Use It

✅ Beginners interested in both 2D and 3D
✅ Teams working together remotely
✅ Developers who want a cloud-based workflow
✅ Developers who like visual editing

Who Should Avoid It

❌ Developers building pure 2D games
❌ Developers who prefer offline development
❌ Anyone on a tight budget
❌ Beginners who want a focused 2D experience

#8 — MelonJS

Rating: 6.5/10

Best For: Building lightweight games quickly

What It Is

MelonJS is a lightweight, open-source 2D game engine that tries to be simple and fast. It includes a basic set of features: sprite handling, audio, input, and a simple scene system.

Why Is It Below Others?

MelonJS is lightweight, but that comes at a cost. The engine lacks many features that you'd expect from a modern engine. Physics is basic. There's no built-in particle system. Animation support is minimal. The documentation is outdated, and the community is small. For a beginner, this means more time solving problems alone.

What Works

Extremely lightweight — The core engine is small and fast
Simple API — The code is straightforward and easy to understand
No build tools needed — Just include the script and start coding
Good for mobile — Optimized for performance on mobile devices
Clean codebase — The source code is well-organized and readable

What Doesn't Work

1. Limited Features

MelonJS lacks many features that you'd expect from a modern engine. Physics is basic at best. There's no built-in particle system, and animation support is minimal. You'll spend a lot of time building systems that other engines provide out of the box.

2. Small Community

The community is significantly smaller than Phaser or Godot. Finding tutorials, answers, or plugins is challenging. For a beginner, this means more time solving problems alone.

3. Outdated Documentation

The official documentation is sparse and often outdated. Many examples no longer work with the latest version. This can be incredibly frustrating when you're trying to learn.

4. Dated Design

The design philosophy feels stuck in the past. While other engines have evolved, MelonJS has remained mostly static. It works, but it doesn't feel modern.

5. Limited Platform Support

Export options are limited. You're mostly stuck with the web unless you want to build your own export pipeline.

Who Should Use It

✅ Developers who want a lightweight, fast engine
✅ Beginners building simple games
✅ Developers comfortable with minimal features

Who Should Avoid It

❌ Beginners who want a full-featured engine
❌ Developers building complex games
❌ Anyone who needs modern features like particles or advanced physics

#7 — CT.js

Rating: 6/10

Best For: Beginners who want a visual editor but still want to code

What It Is

CT.js is a 2D game engine that tries to be everything: visual editor, code editor, asset manager, and export tool all in one. It's built on Pixi.js for rendering and includes a visual editor that's somewhere between Construct and a code editor.

Why Is It Below Others?

CT.js tries to do too much and does none of it well. The visual editor is useful for placing objects, but anything beyond basic positioning requires writing code. The documentation is limited, and the community is small. The learning curve is confusing because you're mixing visual and code approaches.

What Works

Visual editor — You can see your game objects and levels laid out visually
Built-in tools — Asset manager, sprite editor, sound manager all included
Export options — Export to web, Windows, Mac, and Linux
One download — Everything you need in one package
Beginner-friendly UI — The interface is cleaner than most visual editors

What Doesn't Work

1. The Visual Editor is Half-Baked

The visual editor is useful for placing objects, but anything beyond basic positioning requires writing code. This creates a frustrating split: you're using a visual tool but still need to understand the code. It's the worst of both worlds.

2. Limited Documentation

The documentation covers the basics but falls short for advanced features. When you get stuck, you'll find yourself digging through forum posts and outdated examples.

3. Small Community

CT.js has a fraction of the community that Phaser or Godot has. Finding help, tutorials, or plugins is significantly harder. For a beginner, this means more time stuck and less time building.

4. Performance Issues

Because CT.js tries to do everything, it can be slower and heavier than more focused engines. Larger projects may experience lag.

5. Learning Curve

The visual editor makes it seem easier than it is, but you'll still need to learn JavaScript. The mix of visual and code creates a confusing learning experience.

Who Should Use It

✅ Beginners who want a visual editor but aren't afraid of code
✅ Developers building small to medium 2D games
✅ Beginners who want to export to desktop

Who Should Avoid It

❌ Absolute beginners with no coding experience
❌ Developers building large, complex games
❌ Anyone who just wants to code without a visual editor

#6 — GDevelop

Rating: 7/10

Best For: No-code game development

What It Is

GDevelop is an open-source game engine that allows you to create games without writing code. It features a visual event system and supports both 2D and 3D game development.

Why Is It Below Others?

GDevelop is powerful for no-code development, but you'll hit a ceiling quickly. Complex game logic can be difficult or impossible to implement without code. The performance of games built with GDevelop can also be slower than code-based engines.

What Works

No code required — Build games with visual events
Free and open-source — No licensing fees, no hidden costs
Visual editor — See your game come together in real-time
Export options — Web, mobile, and desktop
Good for educators — Great for teaching game design

What Doesn't Work

1. Limited Flexibility

The visual event system is powerful but limited. Complex game logic can be difficult or impossible to implement without code. You'll hit a ceiling quickly.

2. Performance Issues

Games built with GDevelop can be slower than code-based engines. This becomes noticeable with larger or more complex games.

3. Less Control

You're limited to what the visual editor allows. You can't easily extend the engine or add custom features.

4. Smaller Community

GDevelop's community is growing but still small. Finding help, tutorials, or examples can be challenging.

5. Learning Curve

The visual event system is intuitive but still has a learning curve. Understanding how events work and connect takes time.

Who Should Use It

✅ Absolute beginners with no coding experience
✅ Educators teaching game design
✅ Quick prototyping and game jams

Who Should Avoid It

❌ Developers who want to learn coding
❌ Developers building complex games
❌ Anyone who needs full control

#5 — Construct

Rating: 7.5/10

Best For: Professional no-code game development

What It Is

Construct is a visual game development tool with a drag-and-drop interface and powerful event system. It's one of the most popular no-code engines available.

Why Is It Below Others?

Construct is a powerful no-code tool, but it's not free. The free version is limited, and the full features require a paid license. For beginners, this can be a significant barrier. Additionally, because you're not writing code, you're not learning programming — which is a trade-off.

What Works

Powerful event system — Complex logic without code
Visual editor — Intuitive and well-designed
Great documentation — Well-maintained and comprehensive
Strong community — Large user base with many resources
Professional features — Export to multiple platforms

What Doesn't Work

1. Pricing

Construct is freemium. The free version is limited, and the full features require a paid license. For beginners, this can be a significant barrier.

2. Limited Flexibility

Like GDevelop, you're limited to what the visual editor allows. Complex game logic can be difficult or impossible to implement.

3. Performance Issues

Performance can be an issue for larger or more complex games. The abstraction layer adds overhead.

4. Less Learning Value

Because you're not writing code, you're not learning programming. This is a trade-off: you can build games faster but won't learn JavaScript.

5. Proprietary Format

Your game files are in a proprietary format. If you ever want to switch engines, you'll have to start over.

Who Should Use It

✅ Absolute beginners
✅ Educators and students
✅ Prototyping and game jams
✅ Non-technical game designers

Who Should Avoid It

❌ Developers who want to learn programming
❌ Developers building complex games
❌ Anyone who wants full control

#4 — Kaboom.js

Rating: 8/10

Best For: Game jams and quick prototypes

What It Is

Kaboom.js is a lightweight JavaScript game library with a playful, modern API. It's designed for fast prototyping and game jams.

Why Is It Below Others?

Kaboom.js is intentionally minimal. It lacks many features of a full engine: physics, particles, scene management, and audio are all limited. It doesn't scale well to larger projects. The simple API that makes it great for prototypes becomes limiting for complex games.

What Works

Minimal boilerplate — Get started with 5 lines of code
Playful API — Fun and intuitive to use
No setup required — Just include the CDN script
Good for learning — Clear, readable code
Great for game jams — Fast results

What Doesn't Work

1. Limited Features

Kaboom.js is intentionally minimal. It lacks many features of a full engine: physics, particles, scene management, and audio are all limited.

2. Not for Large Projects

Kaboom.js doesn't scale well to larger projects. The simple API that makes it great for prototypes becomes limiting for complex games.

3. Smaller Community

Kaboom.js has a smaller community than Phaser. Finding help, tutorials, and examples is harder.

4. Less Documentation

The documentation covers the basics but is sparse for advanced features.

5. Opinionated Design

Kaboom.js has a very specific way of doing things. This is great when it matches your style, but frustrating when you want to do something different.

Who Should Use It

✅ Beginners learning core game logic
✅ Game jam participants
✅ Quick prototypes
✅ Developers who like minimal APIs

Who Should Avoid It

❌ Developers building large projects
❌ Anyone who needs a full-featured engine
❌ Developers building commercial games

#3 — Limn Engine

Rating: 9/10

Best For: Absolute beginners who want to understand game engines

What It Is

Limn Engine is a lightweight, zero-configuration 2D game engine built on HTML5 Canvas. It's designed for beginners who want to learn game development without fighting complex build tools.

Why Is It #3?

Limn Engine is the best choice for learning how game engines work. The zero-configuration setup means you can start coding immediately. The intuitive API is predictable and easy to remember. The four progressive skill levels give you a clear learning path. The dual-canvas rendering system is built for performance, even on low-end hardware. And it's completely free with no hidden costs.

The only downsides are the smaller community (compared to Phaser) and the lack of a visual editor. But for a beginner who wants to learn, these are actually features — you learn more by writing code.

What Works

1. Zero Configuration

<script src="epic.js"></script>
<script>
const display = new Display();
display.start(800, 600);
// Start coding!
</script>

No npm. No build tools. No configuration. Just one file. Open it in a browser and start building.

2. Intuitive API

The API is designed to be predictable and easy to remember:

move.bound(player);        // Keeps player on screen
display.camera.shake(5,5); // Screen shake
move.particles.explosion(particles, x, y, 30); // Explosion effect

Every function is designed to do exactly what you expect. You'll spend less time reading documentation and more time building.

3. Clear Learning Path

Limn Engine is structured into four progressive skill levels:

Level	What You Learn
Beginner	Shapes, keys, collision
Intermediate	Physics, camera, tilemaps
Advanced	Particles, scenes, effects
10x Developer	Engine internals, performance

Each level builds on the previous one. You'll always know what to learn next.

4. Complete Examples

Every feature has working examples that you can try immediately. The examples are simple, self-contained, and easy to understand.

5. Built-in Performance

The dual-canvas rendering system (fake canvas + main canvas) is designed for performance, even on low-end hardware.

6. Active Development

Limn Engine is actively maintained and improved. The developer is committed to making it better.

7. No Hidden Costs

Limn Engine is completely free and open-source (MIT license). No paid features, no "pro" versions.

What Doesn't Work

1. No Visual Editor

Everything is code-based. If you want a visual editor, look elsewhere. This is deliberate — Limn Engine is designed for learning through code.

2. Smaller Community

Limn Engine has a smaller community than Phaser. This means fewer tutorials and fewer people to ask for help. However, the documentation is comprehensive.

3. Web Only

Limn Engine is designed for the web. There's no native mobile or desktop export.

4. Limited Physics

The physics system is basic — gravity and collisions. If you need advanced physics, you'll need to build them yourself.

Who Should Use It

✅ Absolute beginners who want to learn game programming
✅ Developers who prefer writing code over using visual tools
✅ Students who want full control over their codebase
✅ Anyone building a simple game or prototype
✅ Developers who want a lightweight, fast engine

Who Should Avoid It

❌ Developers who want a visual editor
❌ Developers building complex commercial games · ❌ Anyone who needs native mobile/desktop export

#2 — Phaser

Rating: 8.5/10

Best For: Building complete 2D games quickly

What It Is

Phaser is one of the most popular JavaScript game frameworks for building 2D games. It includes everything you need: physics, input, animation, sound, and a scene system.

Why Is It #2?

Phaser is the most popular JavaScript game engine for a reason. It's feature-rich, well-documented, and has a massive community. You can build complete 2D games quickly without having to piece together different libraries. The ecosystem is huge — there are thousands of tutorials, examples, and plugins available.

The downsides are the steeper learning curve and the complex scene system. But once you understand it, Phaser is incredibly powerful.

What Works

Feature-rich — Everything you need is included
Large community — Thousands of tutorials and examples
Good documentation — Comprehensive and well-maintained
Well-established — Proven in many production games
Active development — Regular updates and improvements

What Doesn't Work

1. Steep Learning Curve

Phaser has a lot of features, which means there's a lot to learn. The learning curve is steeper than simpler engines.

2. Complex Scenes

The scene system is powerful but complex. Understanding lifecycle methods and scene management takes time.

3. Opinionated Architecture

Phaser has a specific way of doing things. While this is helpful once you understand it, it can be frustrating when you want to do something different.

4. Performance Issues

Performance can be an issue with many objects. While Phaser is fast, it's not as fast as more specialized rendering engines.

5. File Size

Phaser's bundle size is larger than simpler engines. While this is expected, it can be an issue for projects with strict size constraints.

Who Should Use It

✅ Beginners who want a complete engine
✅ Developers building commercial 2D games
✅ Anyone who wants a well-established ecosystem
✅ Teams building larger projects

Who Should Avoid It

❌ Absolute beginners who want the simplest possible start
❌ Developers building high-performance applications
❌ Anyone who wants a minimal API

#1 — Godot (Web Build)

Rating: 9.5/10

Best For: Professional 2D game development

What It Is

Godot is a full-featured, open-source game engine with excellent 2D support. The Web build allows you to export games to HTML5. It's the only engine on this list that's truly professional-grade while still being beginner-friendly.

Why Is It #1?

Godot is the most complete engine on this list. It has everything you need: a powerful visual editor, great 2D support, a beginner-friendly scripting language, and export options for web, mobile, and desktop. It's free and open-source with no licensing fees.

The learning curve is steeper than simpler engines, but once you understand the fundamentals, it becomes intuitive. It's the best choice for beginners who want to build professional games.

What Works

Everything included — A complete, professional-grade engine
Visual editor — Powerful and intuitive
Great 2D support — Built specifically for 2D games
Free and open-source — No licensing fees
Scripting — GDScript is designed for beginners
Strong community — Growing rapidly
Export options — Web, mobile, desktop, and consoles

What Doesn't Work

1. Desktop-First

The editor is a desktop application. You'll need to install it on your computer. The web version is only for exporting, not editing.

2. Steep Initial Learning Curve

Godot has more features than any other engine on this list. The initial learning curve is steeper than simpler engines. However, once you understand the fundamentals, it becomes intuitive.

3. GDScript Syntax

GDScript is beginner-friendly but different from JavaScript. If you plan to use JavaScript in other projects, learning a separate language might be a downside.

4. Performance Can Be an Issue

For highly complex or performance-critical projects, Godot may not be as fast as more specialized engines. However, for most 2D games, it's more than sufficient.

5. Smaller Community Than Unity

Godot's community is growing but still smaller than Unity's. However, there are many tutorials and resources available.

Who Should Use It

✅ Beginners planning to build professional games
✅ Developers who want a complete, full-featured engine
✅ Anyone building 2D games for multiple platforms
✅ Developers who want a free, open-source alternative to Unity

Who Should Avoid It

❌ Absolute beginners who want the simplest possible start
❌ Developers who want to learn JavaScript specifically
❌ Anyone who prefers a code-only approach

📊 Comparison Table

Engine	Rating	Best For	Learning Curve	License	Visual Editor
Godot (Web Build)	9.5/10	Professional 2D games	Low-Medium	MIT	✅ Full
Phaser	8.5/10	Complete 2D games	Medium	MIT	❌ None
Limn Engine	9/10	Learning fundamentals	Very Low	MIT	❌ None
Kaboom.js	8/10	Game jams & prototypes	Very Low	MIT	❌ None
Construct	7.5/10	No-code development	Very Low	Freemium	✅ Full
GDevelop	7/10	No-code development	Very Low	MIT	✅ Full
CT.js	6/10	Visual editor + code	Medium	MIT	✅ Partial
MelonJS	6.5/10	Lightweight 2D games	Low-Medium	MIT	❌ None
PlayCanvas (2D Mode)	6.5/10	Collaborative web-based 2D games	Medium	MIT	✅ Full
Pixi.js	7/10	High-performance rendering	Medium	MIT	❌ None

🎯 The One-Line Summary

"If you want to learn how game engines work, start with Limn Engine. If you want to build complete 2D games fast, choose Phaser. If you want to build professional games, choose Godot."

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

🧩 Understanding Components and Their Children in Limn Engine

Kehinde Owolabi — Sat, 25 Jul 2026 04:55:24 +0000

🧩 Understanding Components and Their Children in Limn Engine

A Complete Guide to Tile, Text, Sprite, AnimatedSprite, and Tctxt

📖 Introduction

The Component class is the foundation of every Limn Engine game. Everything you see on screen — players, enemies, coins, walls, text, sprites — is a Component or a child of Component.

But Component isn't just one thing. It has several specialized children that handle specific tasks:

Child Class	Purpose
Tile	Individual tiles in a tilemap
Tctxt	Styled text with backgrounds
Sprite	Animated sprites from sprite sheets
AnimatedSprite	Multiple animation states
Particle	Individual particles (used internally)

In this guide, we'll cover all of them — what they are, when to use them, and how they work.

🎯 What We'll Cover

What is a Component?
The Tile class — building blocks of levels
The Tctxt class — styled text
The Sprite class — animated characters
The AnimatedSprite class — multiple animations
The Particle class — visual effects
Comparison table
Common mistakes

🧩 Part 1: What Is a Component?

A Component is the most basic building block in Limn Engine. Every visible object in your game is a Component.

The Basics

// A basic Component
const player = new Component(40, 40, "#5b8cff", 400, 300, "rect");
display.add(player);

What this does:

new Component(40, 40, "#5b8cff", 400, 300, "rect") — Creates a 40x40 blue rectangle at position (400, 300).
display.add(player); — Adds it to the game world.

Component Properties

Property	Type	Purpose
`x, y`	number	Position
`width, height`	number	Size
`color`	string	Fill color
`speedX, speedY`	number	Velocity
`angle`	number	Rotation
`physics`	boolean	Enable gravity
`gravity`	number	Gravity strength

Component Methods

Method	Purpose
`move()`	Move based on speedX/speedY
`crashWith()`	Collision detection
`clicked()`	Mouse click detection
`setImage()`	Load an image
`setColor()`	Change color
`destroy()`	Remove from engine

🧩 Part 2: The Tile Class — Building Blocks of Levels

Tile is a specialized Component used in tilemaps. Each tile represents a single cell in your level grid.

How Tiles Work

// Define a tile
const wallTile = new Component(64, 64, "#654321", 0, 0, "rect");

// In a tilemap, tiles are created automatically
display.tile = [
    new Component(64, 64, "#1a3a1a", 0, 0), // 1 = grass
    new Component(64, 64, "#2244aa", 0, 0), // 2 = water
    new Component(64, 64, "#555555", 0, 0), // 3 = stone
];

display.map = [
    [1,1,1,2,2,1,1,3,3,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,2,0,0,0,0,2,0,1],
];
display.tileMap();
display.tileFace.show();

What this does:

display.tile — An array of tile templates.
display.map — A 2D array where each number refers to a tile template.
display.tileMap(); — Creates the tilemap object.
display.tileFace.show(); — Renders all tiles to the fake canvas.

Tile vs Component

Aspect	Component	Tile
Purpose	General game objects	Individual tiles in a tilemap
Creation	Manual	Automatic from a map
Position	Set manually	Calculated from grid position
Use case	Players, enemies, items	Walls, floors, decorations

🧩 Part 3: The Tctxt Class — Styled Text

Tctxt is a specialized Component for displaying styled text with backgrounds and padding.

The Basics

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

What this does:

new Tctxt("24px", "Arial", "white", 20, 50) — Creates text at (20, 50) with 24px Arial white text.
scoreText.setText("Score: 0"); — Sets the text content.
display.add(scoreText); — Adds it to the game.

Full Constructor

const label = new Tctxt(
    "20px",                 // size
    "Arial",                // font family
    "white",                // color
    100, 200,               // x, y
    "center",               // align: "left", "center", "right"
    false,                  // stroke: false = fill, true = outline
    "alphabetic",           // baseline: "top", "middle", "bottom"
    "rgba(0,0,0,0.5)",      // background color (null = none)
    10, 5                   // paddingX, paddingY
);

Tctxt vs Component Text

Aspect	Component (text)	Tctxt
Background	❌ None	✅ Yes
Padding	❌ None	✅ Yes
Alignment	⚠️ Limited	✅ Full
Stroke	❌ None	✅ Yes
Baseline	❌ None	✅ Yes
Ease of use	⚠️ Basic	✅ Advanced

🧩 Part 4: The Sprite Class — Animated Characters

Sprite extends Component to handle animated sprite sheets.

The Basics

const hero = new Sprite("hero.png", 64, 64, 4, 10, 400, 300);
display.add(hero);

What this does:

new Sprite("hero.png", 64, 64, 4, 10, 400, 300) — Creates a sprite at (400, 300) from a sprite sheet with 4 frames, each 64x64, at speed 10.

How a Sprite Works

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Sprite Sheet: "hero.png"                                     │
│   ┌──────────┬──────────┬──────────┬──────────┐               │
│   │ Frame 0  │ Frame 1  │ Frame 2  │ Frame 3  │               │
│   │ 64x64    │ 64x64    │ 64x64    │ 64x64    │               │
│   └──────────┴──────────┴──────────┴──────────┘               │
│                                                                 │
│   Sprite draws each frame in sequence:                         │
│   Frame 0 → Frame 1 → Frame 2 → Frame 3 → Frame 0...          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Sprite Methods

Method	Purpose
`update()`	Advance to the next frame
`draw(ctx, x, y)`	Draw the current frame
`play()`	Start/continue animation
`stop()`	Pause animation
`reset()`	Reset to frame 0

Sprite vs Component

Aspect	Component	Sprite
Display	A single color/image	Multiple frames from a sprite sheet
Animation	❌ None	✅ Yes
Frame control	❌ None	✅ Full control
Use case	Simple objects	Characters, animated objects

🧩 Part 5: The AnimatedSprite Class — Multiple Animations

AnimatedSprite extends Sprite to support multiple animation states.

The Basics

const hero = new AnimatedSprite("hero.png", 64, 64, 400, 300);

// Define animations
hero.addAnimation("idle",   0,  3, 10, true);  // frames 0-3, loops
hero.addAnimation("run",    4, 11,  5, true);  // frames 4-11, loops
hero.addAnimation("jump",  12, 15,  4, false); // frames 12-15, one-shot
hero.addAnimation("attack",16, 19,  3, false); // frames 16-19, one-shot

display.add(hero);

function update() {
    if (isMoving) {
        hero.playAnimation("run");
    } else {
        hero.playAnimation("idle");
    }
    hero.updateAnimation();
}

How Animations Work

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Sprite Sheet with multiple animations:                       │
│                                                                 │
│   ┌──────────┬──────────┬──────────┬──────────┬──────────┐   │
│   │ Idle 0   │ Idle 1   │ Idle 2   │ Idle 3   │ Run 0    │   │
│   ├──────────┼──────────┼──────────┼──────────┼──────────┤   │
│   │ Run 1    │ Run 2    │ Run 3    │ Run 4    │ Run 5    │   │
│   ├──────────┼──────────┼──────────┼──────────┼──────────┤   │
│   │ Run 6    │ Jump 0   │ Jump 1   │ Jump 2   │ Jump 3   │   │
│   ├──────────┼──────────┼──────────┼──────────┼──────────┤   │
│   │ Attack 0 │ Attack 1 │ Attack 2 │ Attack 3 │          │   │
│   └──────────┴──────────┴──────────┴──────────┴──────────┘   │
│                                                                 │
│   Animations:                                                   │
│   - idle: frames 0-3 (loops)                                   │
│   - run: frames 4-10 (loops)                                   │
│   - jump: frames 12-15 (one-shot)                              │
│   - attack: frames 16-19 (one-shot)                            │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

AnimatedSprite Methods

Method	Purpose
`addAnimation(name, start, end, speed, loop)`	Define an animation clip
`playAnimation(name)`	Switch to a different animation
`updateAnimation()`	Advance the frame counter
`faceLeft()`	Flip the sprite horizontally
`faceRight()`	Reset the flip

The `playAnimation` Guard

playAnimation(name) {
    // ⚡ CRITICAL GUARD: Prevents resetting if already playing
    if (this.currentAnim === name) return;

    // Only reset if the animation name changed
    this.currentAnim = name;
    this.currentFrame = anim.start;
    this.frameSpeed = anim.speed;
    this.loop = anim.loop;
}

Sprite vs AnimatedSprite

Aspect	Sprite	AnimatedSprite
Animations	One continuous animation	Multiple named clips
State management	❌ None	✅ Built-in
Switching	❌ Manual	✅ `playAnimation()`
Use case	Simple animations	Characters with multiple states

🧩 Part 6: The Particle Class — Visual Effects

Particle is a specialized Component used in the ParticleSystem.

How Particles Work

// Particles are created by the ParticleSystem
const ps = new ParticleSystem(display);

// Single particle
ps.emit(x, y, { 
    color: "#ff6600", 
    life: 30, 
    gravity: 0.2 
});

// Multiple particles
ps.burst(x, y, 20, { 
    color: "#ff6600", 
    life: 30, 
    randomSpeed: 5 
});

What this does:

ps.emit() — Creates a single particle with custom options.
ps.burst() — Creates multiple particles at once.

Particle Properties

Property	Purpose
`life`	Frames until death
`gravity`	Downward acceleration
`friction`	Speed multiplier per frame
`alpha`	Starting opacity
`alphaFade`	Fade-out rate
`scale`	Starting size
`scaleFade`	Shrink rate

📊 Comparison Table

Class	Parent	Purpose	Use Case
Component	—	Base class for all objects	Players, enemies, items
Tile	Component	Individual tiles in a tilemap	Walls, floors, decorations
Tctxt	Component	Styled text with backgrounds	Score, menus, labels
Sprite	Component	Animated sprites from sprite sheets	Characters, animated objects
AnimatedSprite	Sprite	Multiple animation states	Characters with idle/run/jump
Particle	Component	Visual effects	Explosions, sparkles, blood

⚠️ Common Mistakes

Mistake	Why It's Wrong	How to Fix
Using Component for text	No background or alignment	Use `Tctxt` instead
Using Sprite for static images	Overkill for one frame	Use `Component` with `setImage()`
Not calling `updateAnimation()`	Sprite doesn't animate	Call it every frame
Forgetting the `playAnimation` guard	Animation resets every frame	It's built-in, don't override it

🎯 The One-Line Summary

"Component is the foundation — Tile builds levels, Tctxt displays text, Sprite animates characters, and AnimatedSprite manages multiple states."

Draw your game into existence — one component at a time. 🧩🚀

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
API Reference	limn-engine-doc.vercel.app/reference.html
Beginner Guide	limn-engine-doc.vercel.app/beginner.html

# 🎥 Mastering the Camera System — Part 2: The Fake Camera and When NOT to Sync

Kehinde Owolabi — Thu, 23 Jul 2026 23:43:23 +0000

🎥 Mastering the Camera System — Part 2: The Fake Camera and When NOT to Sync

Everything You Need to Know About the Fake Camera and Why Syncing Can Ruin Your Performance

📖 Introduction

In Part 1, we covered the basics of camera follow, shake, and zoom. But there's another camera in Limn Engine that most developers don't fully understand — the fake camera.

The fake camera is part of Limn Engine's dual-canvas rendering system. It controls the background layer (tilemaps, static decorations, and background images). Understanding when and how to use it is critical for performance.

The most common mistake? Syncing the fake camera with the main camera. In this article, we'll explain why that's a problem and how to fix it.

🎯 What We'll Cover

What is the fake camera?
How the dual-canvas system works
The problem with syncing cameras
When to sync (and when NOT to)
The correct approach: resize, don't sync
Practical examples
Common mistakes and how to avoid them

🎮 What Is the Fake Camera?

The fake camera is attached to the fake canvas — an offscreen buffer that caches static content.

Canvas	Purpose	Camera
Main canvas	Dynamic content (player, enemies, particles)	`display.camera`
Fake canvas	Static content (tilemaps, backgrounds, decorations)	`fake.camera`

The fake camera controls how the static background is rendered. It's part of the dual-canvas pipeline that gives Limn Engine its performance.

🏗️ How the Dual-Canvas System Works

Before we dive into the fake camera, let's understand how the dual-canvas system works.

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   ┌─────────────────────────────────────────────────────────┐   │
│   │                    MAIN CANVAS                          │   │
│   │                                                         │   │
│   │   Dynamic content: player, enemies, particles          │   │
│   │   Camera: display.camera                               │   │
│   │                                                         │   │
│   └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│   ┌─────────────────────────────────────────────────────────┐   │
│   │                    FAKE CANVAS                          │   │
│   │                    (offscreen)                         │   │
│   │                                                         │   │
│   │   Static content: tilemaps, backgrounds, decorations   │   │
│   │   Camera: fake.camera                                  │   │
│   │                                                         │   │
│   └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│   Both cameras are independent!                               │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

What's happening here:

The main canvas is what you see on screen. It contains everything that moves — the player, enemies, bullets, and particles. Its camera is called display.camera.
The fake canvas is hidden. It's an offscreen buffer that contains everything that doesn't move — tilemaps, backgrounds, and static decorations. Its camera is called fake.camera.
The two canvases are rendered separately and combined on screen. The fake canvas is drawn first (as the background), then the main canvas is drawn on top of it.
Each canvas has its own independent camera. The fake camera is completely separate from the main camera.

The important thing to understand: The fake canvas is designed to be drawn once and then reused. Moving it every frame defeats its purpose.

🔴 The Problem: Syncing Cameras

Many developers assume they need to sync the fake camera with the main camera. Let's look at the wrong way first.

❌ The Wrong Way: Syncing Cameras

function update(dt) {
    // Step 1: Make the main camera follow the player
    display.camera.follow(player, true);

    // Step 2: Copy the main camera's position to the fake camera
    fake.camera.x = display.camera.x;   // ❌ This is a mistake!
    fake.camera.y = display.camera.y;   // ❌ This is a mistake!
}

What's happening here:

The main camera follows the player. This is correct.
We copy the main camera's position to the fake camera. This is the mistake.
Now the fake camera moves with the main camera every frame.

Why This Is a Problem

Issue	What Happens	Why It's Bad
Defeats caching	The fake canvas is supposed to be static. Moving it every frame breaks the cache.	The fake canvas was designed to be drawn once and reused. Moving it forces it to be redrawn every frame.
Performance hit	Instead of one draw call for the whole background, the engine has to re-render everything.	The whole point of the fake canvas is to reduce draw calls. Syncing increases them back to normal levels.
Wastes CPU	The fake canvas was designed to be drawn once. Syncing forces it to be redrawn every frame.	This defeats the performance benefits of the dual-canvas system.
No benefit	The fake canvas can be sized to the world, so moving it is unnecessary.	There's a better way that doesn't hurt performance.

What You Should Do Instead

Instead of moving the fake canvas, resize it to match the world size. Let's look at the correct way.

✅ The Correct Approach: Resize, Don't Sync

Step 1: Set the World Size

Here, you're going to define how big your game world is. This tells the engine the boundaries of your world so the camera knows how far it can move.

// Define how big your game world is
display.camera.worldWidth = 2000;
display.camera.worldHeight = 2000;

What this code does:

display.camera.worldWidth = 2000; — Sets the width of your game world to 2000 pixels. The camera will never show anything beyond this width.
display.camera.worldHeight = 2000; — Sets the height of your game world to 2000 pixels. The camera will never show anything beyond this height.

Why it matters: The world size determines how big the fake canvas needs to be. If you have a world that's 2000x2000, the fake canvas needs to be 2000x2000 to hold it all. If you don't set this, the camera defaults to 1000x1000, and anything outside that will be cut off.

When to use this: At the very beginning of your game setup, before you render anything to the fake canvas.

Step 2: Resize the Fake Canvas

Now you're going to make the fake canvas exactly the size of your entire game world. This way, it can hold the whole map without needing to move.

// Resize the fake canvas to match the world
fake.canvas.width = display.camera.worldWidth;   // Now 2000
fake.canvas.height = display.camera.worldHeight; // Now 2000

What this code does:

fake.canvas.width = display.camera.worldWidth; — Sets the fake canvas width to match your world width (2000 pixels).
fake.canvas.height = display.camera.worldHeight; — Sets the fake canvas height to match your world height (2000 pixels).

Why it matters: Because the fake canvas is now the full world size, it contains everything. The main camera just shows a window into it. The fake canvas never needs to move. If you don't do this, the fake canvas will be smaller than your world, and parts of your background will be cut off.

When to use this: Right after setting display.camera.worldWidth/Height, before rendering anything to the fake canvas.

Step 3: Render Static Content Once

Now you're going to draw all your static content — tilemaps, backgrounds, decorations — onto the fake canvas. This happens only once.

// Render the tilemap to the fake canvas
display.tileMap();
display.tileFace.show();

// Add static decorations to the fake canvas
fake.add(tree);
fake.add(decoration);

What this code does:

display.tileMap(); — Creates the tilemap object that will hold your level data.
display.tileFace.show(); — Renders all the tiles onto the fake canvas. This draws your entire level.
fake.add(tree); — Adds a tree decoration to the fake canvas.
fake.add(decoration); — Adds another decoration to the fake canvas.

Why it matters: After this, the fake canvas contains a complete image of the entire static world. It never needs to be redrawn. If you don't do this, your static content will be drawn on the main canvas, which means it will be redrawn every frame — killing performance.

When to use this: After resizing the fake canvas, before the game loop starts.

Step 4: Update Only the Main Camera

In your game loop, you only update the main camera. The fake canvas stays exactly where it is — it contains the entire world.

function update(dt) {
    // Main camera follows the player
    display.camera.follow(player, true);

    // ✅ NO fake.camera sync needed!
    // The fake canvas is already the full world size
}

What this code does:

display.camera.follow(player, true); — Makes the main camera follow the player with smooth interpolation.
No fake camera code is needed here.

Why it works: The main camera is like a window that moves over the fake canvas. The fake canvas itself never moves. If you sync the cameras, you'll defeat the caching and hurt performance.

When to use this: Every frame in your update loop.

📊 Visual Example

Wrong Approach (Syncing)

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Frame 1: Move fake camera                                    │
│   Frame 2: Move fake camera                                    │
│   Frame 3: Move fake camera                                    │
│   ...                                                          │
│                                                                 │
│   Result: Fake canvas redrawn every frame.                   │
│           Caching is defeated.                                 │
│           Performance drops.                                   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Correct Approach (Resizing)

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Frame 1: Fake canvas contains entire world                  │
│   Frame 2: Main camera moves over it                          │
│   Frame 3: Main camera moves over it                          │
│   ...                                                          │
│                                                                 │
│   Result: Fake canvas drawn ONCE.                            │
│           Main camera shows a window into it.                 │
│           Performance is optimal.                              │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

✅ When to Sync (and When NOT To)

Situation	Should You Sync?	Why
Static world	❌ No	Resize the fake canvas once
Tilemap	❌ No	The fake canvas can hold the whole map
Background image	❌ No	One image, one draw call
Decorations	❌ No	They don't move
Scrolling world	❌ No	Resize to world size, let the main camera scroll
Camera shake	❌ No	Shake the main camera only
Parallax layers	⚠️ Sometimes	Only if you're implementing parallax manually
Dynamic backgrounds	⚠️ Sometimes	Only if the background actually changes

🧠 Key Takeaways

Concept	What It Means
Fake canvas	Offscreen buffer for static content
Fake camera	Controls how the fake canvas is rendered
Syncing	Copying `display.camera` to `fake.camera`
The problem	Syncing defeats caching and hurts performance
The solution	Resize the fake canvas to match the world
The rule	Render static content once, move the main camera

⚠️ Common Mistakes

Mistake	Why It's Wrong	How to Fix
Syncing cameras	Defeats caching and hurts performance	Resize the fake canvas instead
Moving the fake canvas	It should be static	Set it once and leave it
Redrawing the fake canvas	Wastes CPU cycles	Use `display.once` correctly
Forgetting to set world size	Fake canvas is too small	Set `display.camera.worldWidth/Height`

🎯 The One-Line Summary

"The fake camera is NOT for syncing — it's for caching. Resize the fake canvas to match your world, and let the main camera do the moving."

Draw your game into existence — with a camera system that performs. 🎥🚀

🔗 Resources

Resource	Link
Part 1: Follow, Shake, Zoom	dev.to/kehinde_owolabi_e2e54567a/mastering-the-camera-system-follow-shake-zoom-i41
Limn Engine Docs	limn-engine-doc.vercel.app
10x Developer Guide	limn-engine-doc.vercel.app/10x.html

🎯 Limn Engine: What It Is, What It Isn't, and Who Helped Build It

Kehinde Owolabi — Tue, 21 Jul 2026 04:50:11 +0000

🎯 Limn Engine: What It Is, What It Isn't, and Who Helped Build It

Setting the Record Straight — With Gratitude for the Journey

📖 Introduction

If you've been following the Limn Engine project, you might have seen it described in different ways. Some say it's a game engine. Others call it a framework for web applications. A few have even suggested it's for data visualization.

Here's the truth: Limn Engine is a 2D game engine built for the browser. It's designed to make game development accessible, fast, and fun. Everything else is just people discovering it and interpreting it through their own lens — and that's okay.

In this article, we're going to clarify what Limn Engine actually is, what it's not, and why it exists. Along the way, we'll also take a moment to recognize someone who has been instrumental in this journey.

🎮 What Limn Engine Actually Is

Limn Engine is a 2D game engine designed to run in any modern browser. It's built on HTML5 Canvas and includes everything you need to build games:

Core Feature	What It Means
Dual-canvas rendering	Professional performance with offscreen caching
Component system	Simple game objects with physics and collision
Camera system	Follow, shake, zoom — full control
Particle system	Visual effects made easy
TileMap support	Level design with grids
Audio system	One-line sound and music
Sprite animations	Bring your characters to life
Scene management	Menus, gameplay, game over — all built in

The mission: Make game development accessible to everyone, from beginners to 10x developers.

❌ What Limn Engine Is NOT

As more people discover the engine, a few misconceptions have naturally emerged. Here's what Limn Engine is not built for:

Misconception	Reality
"It's a web development framework"	No — it's a game engine with a specific focus
"It's for data visualization"	Not a primary use case — you'd be building everything from scratch
"It's a dashboard tool"	No charts, no tables, no data binding
"It's an enterprise solution"	It's for creative projects, not business apps

These are understandable interpretations — people see a powerful tool and imagine all the ways it could be used. But Limn Engine was built with a specific purpose in mind: making games.

🎯 Who It's For

Limn Engine is for anyone who wants to build games. That's it.

User	Why It Works
Game developers	Built for you — 2D games of all types
Creative coders	Art projects, demos, experiments
Students	Learn game development fundamentals
Hobbyists	Build games for fun
Educators	Teach programming through games

📜 The Untold Stories of Limn Engine's History

There are still untold stories of the history of Limn Engine — how it started, the challenges faced, the late nights of debugging, and the small victories that kept it going.

Chapter	What Remains Untold
The beginning	How the first lines of code were written
The 4 FPS crisis	The moment everything almost broke
The dual-canvas breakthrough	How performance was saved
The community that wasn't there yet	Building alone before anyone noticed

These stories will be told eventually. For now, the engine speaks for itself — a tool built with care, ready for anyone to pick up and create with.

🙏 Recognizing Olu Desire — A Key Contributor

Behind every great project, there are people who contribute in ways that aren't always visible. Olu Desire is one of those people.

Contribution	Impact
Co-founder of Evolved Tech	Built the foundation for collaborative growth
Technical insight	Helped shape key features of Limn Engine
Testing and feedback	Pushed the engine to be more robust
Moral support	Kept the project moving forward

Olu Desire and I created Evolved Tech to improve ourselves — to push each other to become better developers, to build tools that matter, and to share what we learn with the community.

This recognition is long overdue. Thank you, Olu, for being a partner in this journey.

🏗️ Evolved Tech's Role

Evolved Tech is a partnership between Olu Desire and myself. It was created with a simple goal:

"To improve ourselves and build tools that matter."

What Evolved Tech Does	Why It Matters
Builds tools	Limn Engine is one of those tools
Shares knowledge	Articles, tutorials, and guides
Supports developers	Helping others build great things
Collaborates	Growing together as developers

We believe in building tools that are accessible, powerful, and fun to use. Limn Engine is the first of many.

🚀 Where Limn Engine Is Going

The engine is still evolving. Some things we're working on:

Feature	Status
Crane.js	Offloading heavy calculations to Web Workers
More examples	Showing what's possible
Better documentation	Making it easier to learn
Community growth	Building a space for developers to share

🎯 The One-Line Summary

"Limn Engine is a 2D game engine for the browser — built with passion, supported by great people, and always evolving."

Draw your game into existence — with clarity, purpose, and the right people by your side. 🚀

🔗 Resources

Resource	Link
Limn Engine Docs	limn-engine-doc.vercel.app
Beginner Guide	limn-engine-doc.vercel.app/beginner.html
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
GitHub	github.com/terracodes004/limn-engine-doc
Discord	discord.gg/ZqnUtTQb8

🚀 30 Limn Engine Functions That Will Level Up Your Game Development

Kehinde Owolabi — Mon, 20 Jul 2026 00:33:52 +0000

🚀 30 Limn Engine Functions That Will Level Up Your Game Development

For Developers Who Already Know the Basics — Here's What You're Missing

📖 Introduction

You've been building games with Limn Engine. You know the basics — display.start(), display.add(), move.bound(). But there's a whole world of powerful functions that can make your games smoother, more polished, and easier to build.

This guide is for developers who are already coding with Limn Engine but haven't discovered the functions that will truly level up their game development.

We've selected 30 functions based on what actually matters in real game development:

Criterion	What It Means
Time Savings	Replaces 10+ lines of code with one function
Performance	Makes your game run faster and smoother
Polish	Adds professional feel with minimal effort
Capability	Unlocks new mechanics you couldn't build before

The 30 Functions

1. `display.perform()` — The 60fps Activator

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Activates the dual-canvas rendering pipeline. Without this, Limn runs at 4 FPS with large worlds. With it, you get 60 FPS.

const display = new Display();
display.perform(); // ⚡ MUST be called before start()
display.start(800, 600);

When You'd Use It: Every game. Without exception.

What You Were Doing Before: Nothing — you couldn't get 60 FPS without it.

2. `component.fixed()` — UI That Stays Put

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Locks a component to the screen position when the camera moves. Your health bar, score, and UI stay visible.

scoreText.fixed(); // Call this every frame

When You'd Use It: Any UI element — health bars, scores, menus.

What You Were Doing Before: Manually calculating ui.x = camera.x + offset every frame.

3. `move.glideTo()` — Professional Movement Without Lerp Code

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Moves a component smoothly to a target position with cubic ease-out. No writing lerp functions.

// Move coin to (500, 300) over 1 second
move.glideTo(coin, 1000, 500, 300);

When You'd Use It: UI animations, enemy patrols, cutscenes, smooth transitions.

What You Were Doing Before: Writing requestAnimationFrame loops and lerp calculations.

4. `move.pointTo()` — Aim Without Trigonometry

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐⭐

What It Does: Rotates a component to face a target. No more Math.atan2().

move.pointTo(turret, mouse.x, mouse.y);

When You'd Use It: Turrets, enemies tracking the player, aiming mechanics.

What You Were Doing Before: Writing Math.atan2(targetY - y, targetX - x) every time.

5. `move.particles.*` — Instant Visual Effects

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Six built-in particle presets with zero configuration.

move.particles.explosion(ps, x, y, 30);
move.particles.sparkle(ps, x, y);
move.particles.blood(ps, x, y, 15);

When You'd Use It: Explosions, coin collection, combat effects, weather.

What You Were Doing Before: Writing particle configuration code for gravity, fade, speed, and color.

6. `component.enableCircleCollision()` — Perfect Round Hitboxes

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Switches from rectangle to circle collision detection.

coin.enableCircleCollision();
if (player.crashWithCircle(coin)) {
    collect();
}

When You'd Use It: Coins, balls, round enemies, power-ups.

What You Were Doing Before: Using rectangle collisions on round objects and getting weird hitboxes.

7. `display.camera.shake()` / `shakeRotation()` — Instant Game Feel

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Creates screen shake with one line. Position shake + rotation shake for dramatic impact.

display.camera.shake(8, 8);
display.camera.shakeRotation(0.08);

When You'd Use It: Explosions, player hits, boss attacks, coin collection.

What You Were Doing Before: Writing timer-based transform resets and manual camera movement.

8. `component.destroy()` — Memory Management You Control

Saves Time: ⭐⭐ | Performance: ⭐⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Permanently removes a component from the engine.

bullet.destroy();
enemy.destroy();

When You'd Use It: Bullets off-screen, defeated enemies, collected items.

What You Were Doing Before: comm.splice() and hoping nothing broke.

9. `move.accelerate()` / `move.decelerate()` — Weighty, Realistic Movement

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Smooth acceleration and deceleration with max speed clamping.

if (display.keys[68]) {
    move.accelerate(player, 0.6, 0, 8, 0);
} else {
    move.decelerate(player, 0.4, 0);
}

When You'd Use It: Vehicles, platformers, smooth character movement.

What You Were Doing Before: Manual speed accumulation with if statements.

10. `display.scene` — Clean Game State Management

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Switches between scenes (menu, gameplay, game over) instantly.

display.scene = 1; // Switch to gameplay

When You'd Use It: Any game with multiple screens.

What You Were Doing Before: Creating and destroying objects manually.

11. `move.circle()` — Orbital Motion Without Trig

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Creates orbiting motion without writing trig.

move.circle(orbiter, 2);

When You'd Use It: Orbiting enemies, planetary systems, rotating patterns.

What You Were Doing Before: Writing Math.cos() and Math.sin() loops.

12. `move.sound.*` — One-Line Audio

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Plays sounds and music with one line.

move.sound.play("coin");
move.sound.playMusic("theme");
move.sound.setMasterVolume(0.8);

When You'd Use It: Any game with audio feedback.

What You Were Doing Before: const s = new Sound(); s.play(); every time.

13. `component.hide()` / `component.show()` — Temporary Invisibility

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Temporarily hides or shows a component.

enemy.hide();   // Disappear
enemy.show();   // Reappear

When You'd Use It: Respawn systems, toggleable UI, temporary effects.

What You Were Doing Before: Destroying and recreating objects.

14. `move.forward()` / `move.backward()` — Directional Movement

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Moves in the direction the component is facing.

move.forward(car, 5);

When You'd Use It: Driving games, top-down shooters.

What You Were Doing Before: speedX = Math.cos(angle) * steps.

15. `move.position()` — Snap to Screen Edges

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Positions a component at screen edges or center.

move.position(healthBar, "top", 20);

When You'd Use It: UI layout, menus, HUD elements.

What You Were Doing Before: Manual centering calculations.

16. `move.boundTo()` — Custom Boundaries

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Clamps a component to custom boundaries.

move.boundTo(player, 50, 750, 50, 550);

When You'd Use It: Arena games, room-based levels.

What You Were Doing Before: Manual edge checking with if statements.

17. `move.hitObject()` — Platform-Style Collision

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Makes a component land on top of another component.

move.hitObject(player, platform);

When You'd Use It: Platformers, landing on platforms.

What You Were Doing Before: Complex collision resolution with if statements.

18. `move.project()` — Projectile Physics

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Launches a projectile with gravity and bounce.

move.project(arrow, 300, 45, 0.5);

When You'd Use It: Arrows, fireballs, grenades.

What You Were Doing Before: Manual velocity and gravity calculations.

19. `display.clearMargin` — Render Optimization

Saves Time: ⭐ | Performance: ⭐⭐⭐ | Polish: ⭐ | Capability: ⭐

What It Does: Controls how much of the canvas is cleared.

display.clearMargin = [800, 600]; // Match canvas size

When You'd Use It: Any game — reduces unnecessary work.

What You Were Doing Before: Nothing — you didn't know this existed.

20. `fake.add()` — Static Content Caching

Saves Time: ⭐⭐ | Performance: ⭐⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Adds static content to the offscreen fake canvas.

fake.add(tree);
fake.add(decoration);

When You'd Use It: Tilemaps, backgrounds, static decorations.

What You Were Doing Before: Redrawing static objects every frame.

21. `display.camera.setZoom()` — Dynamic Perspective

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐

What It Does: Zooms the camera in or out.

display.camera.setZoom(1.5); // Zoom in

When You'd Use It: Cutscenes, boss fights, strategy views.

What You Were Doing Before: Manual canvas scaling.

22. `move.teleport()` — Instant Position

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Instantly moves a component to a position.

move.teleport(player, 400, 300);

When You'd Use It: Respawns, checkpoints, teleportation.

What You Were Doing Before: player.x = 400; player.y = 300;.

23. `move.stamp()` — Clone Components

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Creates a clone of a component.

const clone = move.stamp(enemy);

When You'd Use It: Creating duplicates, spawning effects.

What You Were Doing Before: new Component() and copying properties manually.

24. `new ParticleSystem()` — Custom Particles

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐⭐

What It Does: Creates custom particle effects.

const ps = new ParticleSystem(display);
ps.emit(x, y, { color: "cyan", life: 30 });

When You'd Use It: Effects not covered by presets.

What You Were Doing Before: Nothing — you couldn't easily make particles.

25. `new AnimatedSprite()` — Multiple Animations

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐⭐⭐

What It Does: Manages multiple animation states.

const hero = new AnimatedSprite("hero.png", 64, 64);
hero.addAnimation("run", 0, 3, 8, true);
hero.addAnimation("idle", 4, 5, 10, true);

When You'd Use It: Character animations — idle, run, jump, attack.

What You Were Doing Before: Manual sprite sheet frame management.

26. `display.tileMap()` — Tile-Based Levels

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Creates tile-based levels from a 2D array.

display.map = [
    [1,1,1,1,1],
    [1,0,0,0,1],
    [1,1,1,1,1]
];
display.tileMap();
display.tileFace.show();

When You'd Use It: Platformers, RPGs, top-down games.

What You Were Doing Before: Placing individual rectangles manually.

27. `tilemap.crashWith()` — Tile Collision

Saves Time: ⭐⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐⭐

What It Does: Checks collision with specific tile types.

if (tilemap.crashWith(player, 1)) {
    // Hit a wall!
}

When You'd Use It: Wall detection in tile-based games.

What You Were Doing Before: Manual rectangle collision with every wall.

28. `display.backgroundColor()` / `display.lgradient()` — Professional Backgrounds

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐⭐ | Capability: ⭐

What It Does: Sets canvas background with one line.

display.backgroundColor("#0a0a10");
display.lgradient("top", "royalblue", "darkblue");

When You'd Use It: Any game — quick polish.

What You Were Doing Before: ctx.fillStyle and ctx.fillRect every frame.

29. `display.scale()` — Responsive Design

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐⭐

What It Does: Resizes the canvas at runtime.

display.scale(1024, 768);

When You'd Use It: Window resizing, full-screen transitions.

What You Were Doing Before: Recreating the display.

30. `display.stop()` — Clean Game Over

Saves Time: ⭐⭐ | Performance: ⭐⭐ | Polish: ⭐⭐ | Capability: ⭐

What It Does: Stops the game loop.

display.stop();

When You'd Use It: Game over, debugging, pause menu.

What You Were Doing Before: Nothing — you didn't know you could stop the loop.

📊 Ranking by Impact

Impact	Functions
Top Time Savers	`perform()`, `glideTo()`, `pointTo()`, `particles.`, `accelerate()`, `scene`, `sound.`, `forward()`, `position()`, `hitObject()`, `project()`
Top Performance Boosters	`perform()`, `destroy()`, `clearMargin`, `fake.add()`
Top Polish Adders	`fixed()`, `shake()`, `shakeRotation()`, `particles.`, `sound.`, `setZoom()`

🎯 The One-Line Summary

"These 30 functions replace hundreds of lines of boilerplate and unlock professional-grade game mechanics — start using them today."

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

🎥 Mastering the Camera System — Follow, Shake, Zoom

Kehinde Owolabi — Sat, 18 Jul 2026 12:49:51 +0000

🎥 Mastering the Camera System — Follow, Shake, Zoom

A Complete Guide to Camera Control in Limn Engine

📖 Introduction

The camera is your player's window into the game world. A well-implemented camera system can make your game feel smooth, responsive, and professional. A poorly implemented camera can make even the best game feel clunky and frustrating.

In Limn Engine, the camera system is simple to use but powerful enough for complex games. You can make the camera follow the player, shake for dramatic effect, zoom in and out, and combine all three for cinematic experiences.

In this guide, we'll cover everything you need to know about the camera — from basic follow to advanced shake effects and zoom.

🎯 What We'll Cover

Camera Follow — Keeping the player centered
Smooth Follow — Making the camera feel natural
Camera Shake — Adding impact to explosions and hits
Rotation Shake — A unique twist on camera shake
Camera Zoom — Zooming in and out (correctly)
Combining Effects — Using everything together
Practical Example — A complete game with camera effects

🎮 Part 1: Camera Follow — The Basics

What Is Camera Follow?

Camera follow means the camera moves with the player, keeping them centered on the screen. Without it, the player would walk off the screen and disappear.

Why Is It Important?

Without Camera Follow	With Camera Follow
Player walks off screen	Player stays centered
Can't see where you're going	Always see the player's surroundings
Feels clunky and limited	Feels smooth and professional

The Code

// Make the camera follow the player
display.camera.follow(player);

What It Does

Line	What It Does
`display.camera`	Access the camera object attached to the display
`.follow()`	Tell the camera to follow a target
`player`	The target to follow (any Component)

Important Note

follow() must be called every frame because the player is constantly moving. This is the one camera function that needs to run in your update loop.

function update(dt) {
    // Follow the player every frame
    display.camera.follow(player);
}

When to Use It

Use Case	Why
Platformers	Player moves through large levels
Open-world games	Player explores a large map
Top-down games	Player moves around a big area

🎮 Part 2: Smooth Follow — Making It Feel Natural

What Is Smooth Follow?

Smooth follow is a lerp (linear interpolation) effect. Instead of the camera snapping to the player instantly, it slowly eases toward them, creating a natural, floating feel.

Why Is It Better?

Instant Follow	Smooth Follow
Camera snaps instantly	Camera glides smoothly
Can feel jerky	Feels natural and polished
No motion delay	Slight delay creates anticipation

The Code

// Smooth follow — the 'true' parameter enables lerp
display.camera.follow(player, true);

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Instant Follow:                                               │
│   Camera follows player exactly. No delay.                    │
│                                                                 │
│   Player: [●] → → → → [●]                                    │
│   Camera: [■] → → → → [■]                                    │
│                                                                 │
│   Smooth Follow:                                                │
│   Camera lags slightly behind. Creates a natural feel.         │
│                                                                 │
│   Player: [●] → → → → [●]                                    │
│   Camera: [■] → → → [■] → [■]                               │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

When to Use It

Use Case	Why
Platformers	Creates a natural, floating feel
Exploration games	Gives a sense of scale
Cinematic scenes	Smooth camera moves

🎮 Part 3: Camera Shake — Adding Impact

What Is Camera Shake?

Camera shake is a quick, random movement of the camera that creates a feeling of impact. When an explosion happens or the player gets hit, the camera shakes briefly, making the action feel more powerful.

Why Is It Important?

Without Shake	With Shake
Explosions feel weak	Explosions feel powerful
Hits feel flat	Hits feel impactful
No feedback for actions	Immediate visual feedback

The Code

// Shake the camera — (x intensity, y intensity)
display.camera.shake(8, 8);

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Shake Effect:                                                  │
│                                                                 │
│   Camera moves randomly for a split second:                    │
│                                                                 │
│   ┌──────────────────────────────────────────────────────────┐  │
│   │  Normal:  [■]                                           │  │
│   │  Shake 1: [■■]  (moves right)                          │  │
│   │  Shake 2: [■]   (returns)                              │  │
│   │  Shake 3: [■]    (moves left)                          │  │
│   │  Shake 4: [■]   (returns)                              │  │
│   └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│   The shake effect automatically resets after about 1 frame.    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Different Shake Intensities

Intensity	When to Use
`shake(2, 2)`	Coin collection, light impacts
`shake(5, 5)`	Player hit, enemy death
`shake(8, 8)`	Explosion, heavy impact
`shake(12, 12)`	Boss attacks, big explosions

Important Note

shake() is a one-time call — you don't need to call it every frame. Just call it when the impact happens:

// When player hits an enemy
if (player.crashWith(enemy)) {
    display.camera.shake(8, 8);  // One call, auto-resets
}

🎮 Part 4: Rotation Shake — The Unique Twist

What Is Rotation Shake?

Rotation shake rotates the camera slightly, creating a dramatic screen-twist effect. This is a unique feature that most game engines don't have.

Why Is It Unique?

Position Shake	Rotation Shake
Moves the camera side to side	Rotates the camera around the center
Feels like a bump	Feels like a twist or impact
Good for most impacts	Great for heavy impacts

The Code

// Rotation shake — angle in radians
display.camera.shakeRotation(0.08);

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Rotation Shake:                                               │
│                                                                 │
│   Normal:  ┌──────────┐                                        │
│            │  Game    │                                        │
│            │  World   │                                        │
│            └──────────┘                                        │
│                                                                 │
│   Rotated: ┌──────────┐                                        │
│            │  Game    │  ← Slight twist                       │
│            │  World   │                                        │
│            └──────────┘                                        │
│                                                                 │
│   The rotation effect automatically resets after about 1 frame. │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Different Rotation Intensities

Angle	When to Use
`shakeRotation(0.03)`	Subtle impact
`shakeRotation(0.05)`	Moderate impact
`shakeRotation(0.08)`	Heavy impact
`shakeRotation(0.12)`	Very heavy impact

Important Note

Like shake(), shakeRotation() is a one-time call — you don't need to call it every frame.

🎮 Part 5: Camera Zoom — Changing Perspective

What Is Camera Zoom?

Camera zoom changes the scale of the canvas, making the game world appear larger or smaller. It's like looking through a zoom lens.

Why Is It Useful?

Zoom In	Zoom Out
See things up close	See more of the world
Focus on action	Show the bigger picture
Cinematic effect	Strategic view

The Code

// Zoom in (closer)
display.camera.setZoom(1.5);

// Zoom out (farther)
display.camera.setZoom(0.6);

// Normal zoom
display.camera.setZoom(1);

Important Note — This Is Different from Follow!

setZoom() does NOT need to be called every frame. It's a one-time change that sticks until you change it again.

// ✅ CORRECT: Only call when zoom changes
function handleZoomInput() {
    if (display.keys[90]) {
        display.camera.setZoom(1.5);
        display.keys[90] = false;
    }
    if (display.keys[88]) {
        display.camera.setZoom(0.6);
        display.keys[88] = false;
    }
}

// ❌ WRONG: Calling every frame unnecessarily
function update(dt) {
    display.camera.setZoom(1.5); // DON'T DO THIS!
}

Why This Matters

Approach	Problem
Calling every frame	Wastes CPU cycles, unnecessary
Calling only on change	Efficient, clean

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Zoom 1.0 (Normal):                                            │
│   ┌──────────────────────────────────────────────────────────┐  │
│   │  ┌────────────────────────────────────────────────────┐  │  │
│   │  │  Game World                                      │  │  │
│   │  └────────────────────────────────────────────────────┘  │  │
│   └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│   Zoom 1.5 (Zoom In):                                          │
│   ┌──────────────────────────────────────────────────────────┐  │
│   │  ┌────────────────────────────────────────────────────┐  │  │
│   │  │  Game World (zoomed in)                         │  │  │
│   │  └────────────────────────────────────────────────────┘  │  │
│   └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│   Zoom 0.5 (Zoom Out):                                          │
│   ┌──────────────────────────────────────────────────────────┐  │
│   │  ┌────────────────────────────────────────────────────┐  │  │
│   │  │  Game World (zoomed out)                        │  │  │
│   │  └────────────────────────────────────────────────────┘  │  │
│   └──────────────────────────────────────────────────────────┘  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

🎮 Part 6: Combining Effects

Why Combine?

Combining effects creates a more dramatic and impactful experience. Position shake + rotation shake + zoom creates a cinematic effect that feels professional.

Example: Explosion

// Combined explosion effect — one-time calls
display.camera.shake(10, 10);          // Position shake
display.camera.shakeRotation(0.08);    // Rotation shake
display.camera.setZoom(1.2);           // Zoom in slightly

Example: Boss Attack

// Boss attack effect
display.camera.shake(15, 15);          // Heavy position shake
display.camera.shakeRotation(0.12);    // Heavy rotation shake
display.camera.setZoom(0.8);           // Zoom out slightly

Example: Player Death

// Player death effect — slow motion zoom out
display.camera.shake(5, 5);            // Light shake
display.camera.shakeRotation(0.05);    // Light rotation
display.camera.setZoom(0.6);           // Zoom out

🎮 Part 7: Practical Example — Complete Game

Here's a complete example that demonstrates all camera features:

<!DOCTYPE html>
<html>
<head>
    <title>Camera System Demo</title>
    <script src="epic.js"></script>
</head>
<body>
    <script>
        // ── 1. SETUP ──
        const display = new Display();
        display.perform();
        display.start(800, 600);
        display.backgroundColor("#1a1a2e");

        // ── 2. WORLD SIZE ──
        display.camera.worldWidth = 2000;
        display.camera.worldHeight = 2000;

        // ── 3. CREATE THE PLAYER ──
        const player = new Component(40, 40, "#5b8cff", 100, 100, "rect");
        display.add(player);

        // ── 4. CREATE SOME OBSTACLES ──
        const wall = new Component(200, 20, "#ff6b6b", 400, 300, "rect");
        display.add(wall);

        // ── 5. SCORE UI ──
        const scoreText = new Tctxt("24px", "Arial", "white", 20, 50);
        scoreText.setText("Score: 0");
        display.add(scoreText);

        // ── 6. GAME STATE ──
        let score = 0;
        let zoomLevel = 1;

        // ── 7. GAME LOOP ──
        function update(dt) {
            // ── PLAYER MOVEMENT ──
            let mx = 0, my = 0;
            if (display.keys[37]) mx = -1;
            if (display.keys[39]) mx = 1;
            if (display.keys[38]) my = -1;
            if (display.keys[40]) my = 1;

            if (mx !== 0 && my !== 0) {
                mx *= 0.707;
                my *= 0.707;
            }

            player.x += mx * 300 * dt;
            player.y += my * 300 * dt;

            // ── WORLD BOUNDARIES ──
            player.x = Math.max(0, Math.min(1960, player.x));
            player.y = Math.max(0, Math.min(1960, player.y));

            // ── CAMERA FOLLOW (EVERY FRAME) ──
            display.camera.follow(player, true);

            // ── CHECK COLLISION ──
            if (player.crashWith(wall)) {
                // ── CAMERA EFFECTS (ONE-TIME CALLS) ──
                display.camera.shake(8, 8);
                display.camera.shakeRotation(0.05);

                // Increase score
                score += 10;
                scoreText.setText("Score: " + score);

                // Move the wall to a new position
                wall.x = Math.random() * 1800 + 100;
                wall.y = Math.random() * 1800 + 100;
            }

            // ── ZOOM (ONLY WHEN CHANGED) ──
            if (display.keys[90]) {  // Z key
                zoomLevel = 1.5;
                display.camera.setZoom(zoomLevel);
                display.keys[90] = false;
            }

            if (display.keys[88]) {  // X key
                zoomLevel = 0.6;
                display.camera.setZoom(zoomLevel);
                display.keys[88] = false;
            }

            if (display.keys[67]) {  // C key
                zoomLevel = 1;
                display.camera.setZoom(1);
                display.keys[67] = false;
            }

            // ── UI ──
            scoreText.fixed();
        }

        console.log("🎮 Camera System Demo");
        console.log("🕹️  Arrow keys to move");
        console.log("🔍 Z to zoom in, X to zoom out, C to reset zoom");
        console.log("💥 Walk into the red wall to trigger camera shake!");
    </script>
</body>
</html>

📊 Quick Reference

Feature	When to Call	Code
Follow player	Every frame	`display.camera.follow(player);`
Smooth follow	Every frame	`display.camera.follow(player, true);`
Position shake	Once (on impact)	`display.camera.shake(8, 8);`
Rotation shake	Once (on impact)	`display.camera.shakeRotation(0.08);`
Zoom in	Once (when zoom changes)	`display.camera.setZoom(1.5);`
Zoom out	Once (when zoom changes)	`display.camera.setZoom(0.6);`
Reset zoom	Once (when zoom changes)	`display.camera.setZoom(1);`

💡 Key Takeaways

Function	Called Every Frame?	Why
`follow()`	✅ Yes	Player is constantly moving
`shake()`	❌ No	Only when an impact happens
`shakeRotation()`	❌ No	Only when an impact happens
`setZoom()`	❌ No	Only when zoom changes

🎯 The One-Line Summary

"Follow every frame, shake on impact, zoom only when needed — mastering these three patterns gives you professional camera control."

Draw your game into existence — with a camera system that feels professional. 🎥🚀

Multiplayer Games with Limn Engine and WebSockets

Kehinde Owolabi — Mon, 13 Jul 2026 17:31:58 +0000

Multiplayer Games with Limn Engine and WebSockets

Building Real-Time Multiplayer Games from Scratch

📖 Introduction

Multiplayer gaming is one of the most sought-after features in game development. Players want to compete, cooperate, and connect with others. But building a multiplayer game is notoriously difficult — networking introduces latency, synchronization issues, and a whole new layer of complexity.

In this guide, we'll build a real-time multiplayer game using Limn Engine and WebSockets. We'll cover everything from setting up a WebSocket server to handling player movement, synchronization, and latency compensation.

Note: This is a basic implementation for learning purposes. For production games, you'll need to add authentication, matchmaking, and more robust error handling.

🎯 What We're Building

A simple top-down multiplayer game where:

Players connect to a server
Each player controls a colored square
Players see each other move in real-time
Players can see each other's names

🏗️ Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   ┌─────────────┐     WebSocket      ┌─────────────────────┐   │
│   │   Client 1  │ ◄────────────────► │                     │   │
│   └─────────────┘                     │                     │   │
│                                        │   Node.js Server   │   │
│   ┌─────────────┐     WebSocket      │   (ws library)     │   │
│   │   Client 2  │ ◄────────────────► │                     │   │
│   └─────────────┘                     └─────────────────────┘   │
│                                                                 │
│   ┌─────────────┐                                              │
│   │   Client 3  │ ◄────────────────►                         │
│   └─────────────┘                                              │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

How It Works

Clients connect to the server via WebSocket
Server tracks all connected players and their positions
Each client sends their movement updates to the server
Server broadcasts all player positions to all clients
Each client renders all players on their screen

🖥️ Step 1: The WebSocket Server (Node.js)

Install Dependencies

npm init -y
npm install ws

Server Code (`server.js`)

const WebSocket = require('ws');
const http = require('http');

// ── CONFIGURATION ──
const PORT = 8080;
const WORLD_WIDTH = 2000;
const WORLD_HEIGHT = 2000;

// ── CREATE HTTP SERVER ──
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Multiplayer Server Running</h1>');
});

// ── CREATE WEBSOCKET SERVER ──
const wss = new WebSocket.Server({ server });

// ── GAME STATE ──
const players = {};
let nextId = 1;

// ── HELPER FUNCTIONS ──
function broadcast(data) {
    const message = JSON.stringify(data);
    wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(message);
        }
    });
}

function getPlayerState(id) {
    return {
        id: id,
        x: players[id].x,
        y: players[id].y,
        color: players[id].color,
        name: players[id].name
    };
}

function getAllPlayerStates() {
    const states = {};
    for (let id in players) {
        states[id] = getPlayerState(id);
    }
    return states;
}

// ── WEBHOOKS ──
wss.on('connection', (ws) => {
    console.log('New player connected');

    // Assign player ID
    const playerId = nextId++;

    // Assign random color
    const colors = ['#ff6b6b', '#5b8cff', '#7fffb2', '#ffbb6b', '#ff6bff', '#6bffb2'];
    const color = colors[Math.floor(Math.random() * colors.length)];

    // Create player
    players[playerId] = {
        id: playerId,
        x: Math.random() * 400 + 200,
        y: Math.random() * 400 + 200,
        color: color,
        name: `Player ${playerId}`
    };

    // Send current state to new player
    ws.send(JSON.stringify({
        type: 'init',
        playerId: playerId,
        players: getAllPlayerStates()
    }));

    // Broadcast new player to others
    broadcast({
        type: 'playerJoined',
        player: getPlayerState(playerId)
    });

    // ── HANDLE INCOMING MESSAGES ──
    ws.on('message', (message) => {
        try {
            const data = JSON.parse(message);

            if (data.type === 'move') {
                // Update player position
                players[playerId].x = data.x;
                players[playerId].y = data.y;

                // Broadcast update to all clients
                broadcast({
                    type: 'playerMoved',
                    id: playerId,
                    x: data.x,
                    y: data.y
                });
            }

            if (data.type === 'chat') {
                broadcast({
                    type: 'chat',
                    id: playerId,
                    name: players[playerId].name,
                    message: data.message
                });
            }

            if (data.type === 'nameChange') {
                players[playerId].name = data.name;
                broadcast({
                    type: 'playerNameChanged',
                    id: playerId,
                    name: data.name
                });
            }
        } catch (e) {
            console.error('Error processing message:', e);
        }
    });

    // ── HANDLE DISCONNECT ──
    ws.on('close', () => {
        console.log(`Player ${playerId} disconnected`);
        delete players[playerId];
        broadcast({
            type: 'playerLeft',
            id: playerId
        });
    });
});

// ── START SERVER ──
server.listen(PORT, () => {
    console.log(`🚀 Multiplayer server running on ws://localhost:${PORT}`);
    console.log(`📊 World size: ${WORLD_WIDTH}x${WORLD_HEIGHT}`);
});

🎮 Step 2: The Client (Limn Engine)

Client Code (`multiplayer.html`)

<!DOCTYPE html>
<html>
<head>
    <title>Multiplayer Game - Limn Engine</title>
    <script src="epic.js"></script>
    <style>
        body { margin: 0; background: #0a0a0a; overflow: hidden; }
        #status {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: #7fffb2;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            background: rgba(0,0,0,0.7);
            padding: 8px 16px;
            border-radius: 8px;
            z-index: 1000;
            pointer-events: none;
        }
        #chat {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 400px;
            z-index: 1000;
        }
        #chat-input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(0,0,0,0.8);
            color: white;
            border: 1px solid #333;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            display: none;
        }
        #chat-input:focus {
            border-color: #7fffb2;
        }
        #chat-messages {
            max-height: 150px;
            overflow-y: auto;
            margin-bottom: 8px;
            color: #aaa;
            font-size: 12px;
            font-family: 'Courier New', monospace;
        }
        #chat-messages .system { color: #7fffb2; }
        #chat-messages .player { color: #5b8cff; }
    </style>
</head>
<body>

    <div id="status">🔌 Connecting...</div>

    <div id="chat">
        <div id="chat-messages"></div>
        <input id="chat-input" type="text" placeholder="Press Enter to chat..." />
    </div>

    <script>
        // ── DOM REFS ──
        const statusEl = document.getElementById('status');
        const chatInput = document.getElementById('chat-input');
        const chatMessages = document.getElementById('chat-messages');

        // ── LIMN ENGINE SETUP ──
        const display = new Display();
        display.perform();
        display.start(800, 600);
        display.backgroundColor("#0a0a10");

        // World size
        display.camera.worldWidth = 2000;
        display.camera.worldHeight = 2000;

        // ── GAME STATE ──
        let myId = null;
        let myName = 'Player';
        let remotePlayers = {};
        let localPlayer = null;
        let isConnected = false;

        // ── CREATE LOCAL PLAYER ──
        function createLocalPlayer() {
            localPlayer = new Component(36, 36, "cyan", 400, 300, "rect");
            display.add(localPlayer);
            display.camera.follow(localPlayer, true);
            return localPlayer;
        }

        // ── REMOTE PLAYER MANAGEMENT ──
        function addRemotePlayer(id, x, y, color, name) {
            const player = new Component(36, 36, color, x, y, "rect");
            display.add(player);

            // Store extra data
            player._id = id;
            player._name = name || `Player ${id}`;
            player._targetX = x;
            player._targetY = y;

            remotePlayers[id] = player;
            return player;
        }

        function removeRemotePlayer(id) {
            if (remotePlayers[id]) {
                remotePlayers[id].destroy();
                delete remotePlayers[id];
            }
        }

        function updateRemotePlayer(id, x, y) {
            if (remotePlayers[id]) {
                // Smooth interpolation (lerp) for movement
                remotePlayers[id]._targetX = x;
                remotePlayers[id]._targetY = y;
            }
        }

        // ── WEBHOOKS SETUP ──
        function connectWebSocket() {
            const ws = new WebSocket('ws://localhost:8080');

            ws.onopen = () => {
                isConnected = true;
                statusEl.textContent = '✅ Connected!';
                statusEl.style.color = '#7fffb2';

                // Create local player after receiving initial state
                createLocalPlayer();
            };

            ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    handleMessage(data);
                } catch (e) {
                    console.error('Error parsing message:', e);
                }
            };

            ws.onclose = () => {
                isConnected = false;
                statusEl.textContent = '❌ Disconnected!';
                statusEl.style.color = '#ff6b6b';
                setTimeout(() => {
                    connectWebSocket(); // Auto-reconnect
                }, 3000);
            };

            ws.onerror = (error) => {
                console.error('WebSocket error:', error);
                statusEl.textContent = '⚠️ Connection error';
                statusEl.style.color = '#ffbb6b';
            };

            // ── MESSAGE HANDLER ──
            function handleMessage(data) {
                switch (data.type) {
                    case 'init':
                        // Set player ID
                        myId = data.playerId;
                        statusEl.textContent = `✅ Connected as ${myName}`;

                        // Add remote players
                        for (let id in data.players) {
                            if (parseInt(id) !== myId) {
                                const p = data.players[id];
                                addRemotePlayer(id, p.x, p.y, p.color, p.name);
                            }
                        }
                        break;

                    case 'playerJoined':
                        if (data.player.id !== myId) {
                            const p = data.player;
                            addRemotePlayer(p.id, p.x, p.y, p.color, p.name);
                            addChatMessage(`👋 ${p.name} joined the game`, 'system');
                        }
                        break;

                    case 'playerLeft':
                        if (data.id !== myId) {
                            const name = remotePlayers[data.id]?._name || `Player ${data.id}`;
                            removeRemotePlayer(data.id);
                            addChatMessage(`👋 ${name} left the game`, 'system');
                        }
                        break;

                    case 'playerMoved':
                        if (data.id !== myId) {
                            updateRemotePlayer(data.id, data.x, data.y);
                        }
                        break;

                    case 'playerNameChanged':
                        if (data.id !== myId) {
                            if (remotePlayers[data.id]) {
                                remotePlayers[data.id]._name = data.name;
                            }
                        }
                        break;

                    case 'chat':
                        if (data.id !== myId) {
                            addChatMessage(`${data.name}: ${data.message}`, 'player');
                        }
                        break;
                }
            }

            // ── SEND FUNCTIONS ──
            window.sendMove = function(x, y) {
                if (isConnected && ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify({
                        type: 'move',
                        x: x,
                        y: y
                    }));
                }
            };

            window.sendChat = function(message) {
                if (isConnected && ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify({
                        type: 'chat',
                        message: message
                    }));
                }
            };

            window.sendNameChange = function(name) {
                if (isConnected && ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify({
                        type: 'nameChange',
                        name: name
                    }));
                }
            };

            // ── CHAT UI ──
            function addChatMessage(text, type = 'system') {
                const div = document.createElement('div');
                div.className = type;
                div.textContent = text;
                chatMessages.appendChild(div);
                chatMessages.scrollTop = chatMessages.scrollHeight;

                // Limit messages
                while (chatMessages.children.length > 50) {
                    chatMessages.removeChild(chatMessages.firstChild);
                }
            }

            // ── CHAT INPUT HANDLING ──
            document.addEventListener('keydown', (e) => {
                if (e.key === 't' || e.key === 'T') {
                    chatInput.style.display = 'block';
                    chatInput.focus();
                }
                if (e.key === 'Enter' && chatInput.style.display === 'block') {
                    const msg = chatInput.value.trim();
                    if (msg) {
                        if (msg.startsWith('/name ')) {
                            const newName = msg.substring(6).trim();
                            if (newName) {
                                myName = newName;
                                sendNameChange(newName);
                                addChatMessage(`You changed your name to ${newName}`, 'system');
                            }
                        } else {
                            sendChat(msg);
                            addChatMessage(`${myName}: ${msg}`, 'player');
                        }
                    }
                    chatInput.value = '';
                    chatInput.style.display = 'none';
                }
                if (e.key === 'Escape' && chatInput.style.display === 'block') {
                    chatInput.value = '';
                    chatInput.style.display = 'none';
                }
            });

            // ── PLAYER NAME INPUT ──
            const nameInput = prompt('Enter your name:', `Player ${Math.floor(Math.random() * 1000)}`);
            if (nameInput) {
                myName = nameInput;
                // We'll send the name after connection is established
            }

            // Wait for connection to send name
            const nameCheckInterval = setInterval(() => {
                if (isConnected && ws.readyState === WebSocket.OPEN) {
                    sendNameChange(myName);
                    clearInterval(nameCheckInterval);
                }
            }, 100);

            // ── GAME LOOP ──
            const SPEED = 200;
            let lastSendTime = 0;
            const SEND_INTERVAL = 50; // ms

            function update(dt) {
                if (!isConnected || !localPlayer) return;

                // Player movement (WASD)
                let mx = 0, my = 0;
                if (display.keys[87]) my = -1;
                if (display.keys[83]) my = 1;
                if (display.keys[65]) mx = -1;
                if (display.keys[68]) mx = 1;

                if (mx !== 0 && my !== 0) {
                    mx *= 0.707;
                    my *= 0.707;
                }

                localPlayer.x += mx * SPEED * dt;
                localPlayer.y += my * SPEED * dt;

                // Clamp to world
                localPlayer.x = Math.max(0, Math.min(1950, localPlayer.x));
                localPlayer.y = Math.max(0, Math.min(1950, localPlayer.y));

                // Send position to server (throttled)
                const now = performance.now();
                if (now - lastSendTime > SEND_INTERVAL) {
                    sendMove(localPlayer.x, localPlayer.y);
                    lastSendTime = now;
                }

                // Update remote players (smooth interpolation)
                for (let id in remotePlayers) {
                    const p = remotePlayers[id];
                    // Smoothly interpolate toward target position
                    p.x += (p._targetX - p.x) * 0.15;
                    p.y += (p._targetY - p.y) * 0.15;
                }
            }

            // ── START THE GAME ──
            // The update function is now ready
        }

        // ── INITIALIZE CONNECTION ──
        connectWebSocket();

        // ── OVERRIDE UPDATE ──
        // This is a bit of a hack — we're replacing the global update function
        // that Limn Engine expects. In a real game, you'd structure this better.
        const originalUpdate = window.update || function() {};
        window.update = function(dt) {
            // The actual update logic is inside connectWebSocket
            // but we need to call it from here
            if (typeof updateGame === 'function') {
                updateGame(dt);
            }
        };

        // We'll store the update function from the closure
        // This is a simplified approach — in production, use a proper module system
        let updateGame = function(dt) {};

        // Override the connectWebSocket to expose the update function
        const originalConnect = connectWebSocket;
        connectWebSocket = function() {
            // Call the original but capture the update function
            // This is a hack — in a real game, use proper architecture
            originalConnect();

            // Wait for connection to be established
            const checkInterval = setInterval(() => {
                if (isConnected) {
                    // Expose the update function
                    updateGame = function(dt) {
                        if (!isConnected || !localPlayer) return;

                        // Player movement (WASD)
                        let mx = 0, my = 0;
                        if (display.keys[87]) my = -1;
                        if (display.keys[83]) my = 1;
                        if (display.keys[65]) mx = -1;
                        if (display.keys[68]) mx = 1;

                        if (mx !== 0 && my !== 0) {
                            mx *= 0.707;
                            my *= 0.707;
                        }

                        localPlayer.x += mx * SPEED * dt;
                        localPlayer.y += my * SPEED * dt;

                        // Clamp to world
                        localPlayer.x = Math.max(0, Math.min(1950, localPlayer.x));
                        localPlayer.y = Math.max(0, Math.min(1950, localPlayer.y));

                        // Send position to server (throttled)
                        const now = performance.now();
                        if (now - lastSendTime > SEND_INTERVAL) {
                            sendMove(localPlayer.x, localPlayer.y);
                            lastSendTime = now;
                        }

                        // Update remote players (smooth interpolation)
                        for (let id in remotePlayers) {
                            const p = remotePlayers[id];
                            p.x += (p._targetX - p.x) * 0.15;
                            p.y += (p._targetY - p.y) * 0.15;
                        }
                    };
                    clearInterval(checkInterval);
                }
            }, 100);
        };

        // Actually start the connection
        connectWebSocket();

        console.log('🎮 Multiplayer client ready');
        console.log('📝 Type /name YourName to change name');
        console.log('💬 Press T to chat');
        console.log('🕹️  WASD to move');
    </script>
</body>
</html>

🎯 Step 3: Running the Game

Start the Server

node server.js

You should see:

🚀 Multiplayer server running on ws://localhost:8080
📊 World size: 2000x2000

Open the Client

Open multiplayer.html in your browser
Enter your name when prompted
Open the same file in another browser tab (or on another device)
Watch both players move in real-time!

📊 Key Concepts Explained

1. WebSocket Communication

Message Type	Sent By	Received By	Purpose
`move`	Client	Server	Send player position
`playerMoved`	Server	All Clients	Broadcast position update
`playerJoined`	Server	All Clients	New player joined
`playerLeft`	Server	All Clients	Player disconnected

2. Interpolation (Smooth Movement)

// Smoothly interpolate toward target position
p.x += (p._targetX - p.x) * 0.15;
p.y += (p._targetY - p.y) * 0.15;

This makes remote players move smoothly instead of jumping.

3. Throttled Sending

const SEND_INTERVAL = 50; // ms
if (now - lastSendTime > SEND_INTERVAL) {
    sendMove(localPlayer.x, localPlayer.y);
    lastSendTime = now;
}

Sending every frame (60 times/sec) would overload the server. Sending 20 times/sec (every 50ms) is enough.

🚀 Extending the Game

Add Player Names Above Heads

// In the render loop
for (let id in remotePlayers) {
    const p = remotePlayers[id];
    // Draw name above player
    display.context.fillStyle = "white";
    display.context.font = "12px Arial";
    display.context.textAlign = "center";
    display.context.fillText(p._name, p.x + 18, p.y - 10);
}

Add Shooting

// Client sends shoot message
function shoot() {
    ws.send(JSON.stringify({
        type: 'shoot',
        x: localPlayer.x + 18,
        y: localPlayer.y + 18,
        angle: localPlayer.angle || 0
    }));
}

// Server broadcasts bullet
broadcast({
    type: 'bulletFired',
    id: playerId,
    x: data.x,
    y: data.y,
    angle: data.angle
});

Add Score Tracking

// Server tracks scores
players[playerId].score = 0;

// On hit
players[shooterId].score += 10;
broadcast({
    type: 'scoreUpdate',
    id: shooterId,
    score: players[shooterId].score
});

⚠️ Limitations (Not Yet Tested)

Limitation	Description
No authentication	Anyone can join with any name
No matchmaking	All players join the same world
No room support	Can't create separate game rooms
No latency compensation	Players with high ping will lag
No reconnection handling	If connection drops, progress is lost

🎯 The One-Line Summary

"WebSockets + Limn Engine = real-time multiplayer games with minimal setup."

🔗 Resources

Resource	Link
WebSocket Documentation	developer.mozilla.org/en-US/docs/Web/API/WebSocket
ws Library	github.com/websockets/ws
Limn Engine	limn-engine-doc.vercel.app

Draw your game into existence — and let others play it too. 🚀

Memory Management in JavaScript Games — `destroy()`, `hide()`, and Object Pooling

Kehinde Owolabi — Mon, 13 Jul 2026 16:45:29 +0000

Memory Management in JavaScript Games — destroy(), hide(), and Object Pooling

How to Prevent Memory Leaks and Optimize Performance in Limn Engine

📖 Introduction

Memory management is one of the most overlooked aspects of game development. It's easy to focus on features, graphics, and gameplay — but if your game leaks memory, it will eventually slow down, stutter, and crash.

In JavaScript, memory management is "automatic" thanks to garbage collection. But that doesn't mean you can ignore it. In fact, automatic garbage collection can be a trap — if you don't manage your objects properly, you'll create work for the garbage collector, causing frame drops and stuttering.

Limn Engine provides three tools for memory management:

Tool	Purpose	Use Case
`destroy()`	Permanent removal	Bullets, defeated enemies, collected items
`hide()` / `show()`	Temporary invisibility	Respawnable enemies, UI panels
Object Pooling	Reuse objects	Particles, bullets, frequent spawns

In this guide, we'll cover all three — what they are, when to use them, and why they matter.

🎯 The Problem: What Happens When You Don't Manage Memory?

Scenario 1: The Infinite Bullet

// ❌ WRONG: Bullets never get removed
function shoot() {
    const bullet = new Component(5, 10, "yellow", player.x, player.y, "rect");
    bullet.speedY = -500;
    display.add(bullet);
    bullets.push(bullet);
}

function update(dt) {
    for (let i = 0; i < bullets.length; i++) {
        bullets[i].y += bullets[i].speedY * dt;
        // Bullets keep going forever — even off-screen!
    }
}

The Problem: Every bullet you shoot stays in memory forever. After 10,000 bullets, your game will slow to a crawl.

The Fix: Remove bullets when they leave the screen.

// ✅ CORRECT: Remove off-screen bullets
function update(dt) {
    for (let i = bullets.length - 1; i >= 0; i--) {
        bullets[i].y += bullets[i].speedY * dt;
        if (bullets[i].y < -50) {
            bullets[i].destroy();  // Remove from memory
            bullets.splice(i, 1);   // Remove from array
        }
    }
}

Scenario 2: The Enemy That Won't Die

// ❌ WRONG: Enemies just hide — never destroy
function killEnemy(enemy) {
    enemy.hide();  // Disappears, but still in memory!
}

function update() {
    // 100 enemies hidden, still being processed every frame
    for (let i = 0; i < enemies.length; i++) {
        if (enemies[i].health <= 0) {
            enemies[i].hide();  // Still in comm[] !
        }
    }
}

The Problem: Hidden enemies are still in comm[] and still being processed every frame. They just aren't drawn.

The Fix: Use destroy() for permanent removal, hide() only for temporary invisibility.

// ✅ CORRECT: Destroy dead enemies
function killEnemy(enemy) {
    enemy.destroy();  // Remove from comm[] completely
}

// Use hide() only for temporary invisibility
function respawnEnemy(enemy) {
    enemy.hide();           // Temporary
    setTimeout(() => {
        enemy.show();       // Reappear
    }, 3000);
}

🔧 Tool 1: `destroy()` — Permanent Removal

What It Does: Completely removes a component from the engine's rendering pipeline.

How It Works:

// Inside Component.destroy()
destroy() {
    // Find and remove from comm[] (main display)
    let index = comm.findIndex(c => c.x === this);
    if (index > -1) comm.splice(index, 1);

    // Find and remove from commp[] (fake canvas)
    index = commp.findIndex(c => c.x === this);
    if (index > -1) commp.splice(index, 1);

    // Nullify the update method to prevent accidental calls
    this.update = null;
}

When to Use:

Bullets that leave the screen
Defeated enemies
Collected items
Any object that will never be needed again

Example:

// Remove off-screen bullets
if (bullet.y < -50 || bullet.y > 650 || bullet.x < -50 || bullet.x > 850) {
    bullet.destroy();
}

// Remove defeated enemies
if (enemy.health <= 0) {
    enemy.destroy();
}

// Remove collected coins
if (player.crashWith(coin)) {
    coin.destroy();
}

Why It Matters:

Prevents comm[] from growing indefinitely
Reduces the number of objects processed each frame
Prevents memory leaks

🔧 Tool 2: `hide()` / `show()` — Temporary Invisibility

What They Do: hide() stops a component from being drawn. show() makes it visible again.

How They Work:

// Inside Component.hide()
hide() {
    this.update = null;  // Stop drawing
}

// Inside Component.show()
show() {
    this.update = this.bUpdate;  // Resume drawing
}

When to Use hide():

Enemies that respawn
UI panels that toggle
Objects that temporarily disappear
Anything that will be needed again

Example:

// Enemy respawn system
function respawnEnemy(enemy) {
    // 1. Hide the enemy
    enemy.hide();

    // 2. Wait 3 seconds
    setTimeout(() => {
        // 3. Move to a new position
        enemy.x = Math.random() * 700 + 50;
        enemy.y = Math.random() * 500 + 50;

        // 4. Show the enemy
        enemy.show();
    }, 3000);
}

// UI panel toggle
function toggleMenu() {
    if (menu.visible) {
        menu.hide();
        menu.visible = false;
    } else {
        menu.show();
        menu.visible = true;
    }
}

Why Not Use destroy()?

destroy() removes the object from comm[]
If you destroy an enemy, you have to recreate it from scratch
hide() keeps the object in memory — faster to show again

🔧 Tool 3: Object Pooling — Reuse Objects

What It Is: A design pattern where you pre-create a pool of objects and reuse them instead of creating and destroying them constantly.

Why It Matters:

Approach	Performance	Memory
Create/Destroy	❌ Slow (GC spikes)	❌ Fragmented
Object Pool	✅ Fast (no GC)	✅ Efficient

How It Works:

Create a pool of objects at startup
When you need an object, take one from the pool
When you're done, return it to the pool
Never create or destroy objects during gameplay

Example: Bullet Pool

class BulletPool {
    constructor(size = 50) {
        this.pool = [];
        this.active = [];

        // Pre-create bullets
        for (let i = 0; i < size; i++) {
            const bullet = new Component(5, 10, "yellow", 0, 0, "rect");
            bullet.hide();  // Start invisible
            this.pool.push(bullet);
        }
    }

    // Get a bullet from the pool
    get(x, y, speedX, speedY) {
        let bullet = this.pool.pop();

        // If pool is empty, create a new one (expands the pool)
        if (!bullet) {
            bullet = new Component(5, 10, "yellow", 0, 0, "rect");
        }

        // Configure the bullet
        bullet.x = x;
        bullet.y = y;
        bullet.speedX = speedX;
        bullet.speedY = speedY;
        bullet.show();
        display.add(bullet);

        this.active.push(bullet);
        return bullet;
    }

    // Return a bullet to the pool
    return(bullet) {
        bullet.hide();
        bullet.x = -1000;  // Move off-screen
        bullet.y = -1000;
        this.pool.push(bullet);

        // Remove from active array
        const index = this.active.indexOf(bullet);
        if (index > -1) this.active.splice(index, 1);
    }

    // Update all active bullets
    update(dt) {
        for (let i = this.active.length - 1; i >= 0; i--) {
            const bullet = this.active[i];
            bullet.y += bullet.speedY * dt;
            bullet.x += bullet.speedX * dt;

            // Return to pool when off-screen
            if (bullet.y < -50 || bullet.y > 650 || 
                bullet.x < -50 || bullet.x > 850) {
                this.return(bullet);
            }
        }
    }
}

// Usage
const bulletPool = new BulletPool(30);

function shoot() {
    bulletPool.get(player.x + 20, player.y, 0, -500);
}

function update(dt) {
    bulletPool.update(dt);
}

📊 Comparison: Which Approach to Use?

Scenario	Best Approach	Why
Bullets	Object Pool	High frequency, needs to be fast
Enemies	`destroy()` + recreate	Lower frequency, `destroy()` is fine
Respawnable enemies	`hide()` / `show()`	Reuse the same object
Particles	Object Pool	High frequency, custom system
UI panels	`hide()` / `show()`	Toggle visibility
Collected items	`destroy()`	Never needed again
Tiles	`destroy()`	Permanent changes

💡 Pro Tips for Memory Management

1. Always Iterate Backwards When Splicing

// ✅ CORRECT: Reverse iteration
for (let i = enemies.length - 1; i >= 0; i--) {
    if (enemies[i].health <= 0) {
        enemies[i].destroy();
        enemies.splice(i, 1);
    }
}

// ❌ WRONG: Forward iteration skips elements
for (let i = 0; i < enemies.length; i++) {
    if (enemies[i].health <= 0) {
        enemies.splice(i, 1); // Skips the next enemy!
    }
}

2. Use `destroy()` After Removing from Your Arrays

// 1. Remove from your array
enemies.splice(i, 1);

// 2. Then destroy
enemy.destroy();

3. Pre-Allocate Pools for High-Frequency Objects

// Pre-allocate bullets, particles, and other high-frequency objects
const bulletPool = new BulletPool(100);  // Pre-create 100 bullets
const particlePool = new ParticlePool(500);  // Pre-create 500 particles

4. Profile Your Game

Use the browser's built-in tools:

Chrome DevTools → Performance → Record
Look for garbage collection spikes
If you see regular GC spikes, you need better memory management

🎯 The One-Line Summary

"destroy() for permanent removal, hide() for temporary invisibility, and object pooling for high-frequency objects — use the right tool for the right job."

🔗 Resources

Resource	Link
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
API Reference	limn-engine-doc.vercel.app/reference.html

Draw your game into existence — and clean up after yourself. 🚀

🏃 The Ultimate Guide to Limn Engine's `move` Utility

Kehinde Owolabi — Sat, 11 Jul 2026 17:20:28 +0000

🏃 The Ultimate Guide to Limn Engine's `move` Utility

Everything You Need to Know About Movement, Physics, and Control

📖 Introduction

Movement is the foundation of every game. Whether you're building a platformer, a top-down shooter, or an open-world RPG, how objects move determines how your game feels. Get it right, and your game feels polished and professional. Get it wrong, and your game feels clunky and frustrating.

The Limn Engine's move utility is a collection of 34 functions that handle movement, physics, and control. It's designed to save you from writing the same boilerplate code over and over, and to give you powerful, flexible control over how objects move in your game.

The philosophy: Common outcomes should be functions. Every function in move exists because I was tired of writing the same code repeatedly — tired of edge detection, tired of trigonometry, tired of lerp functions, tired of configuring particles.

In this guide, we'll cover every function in the move utility — what it does, when to use it, and why it's powerful.

📊 Complete Function List

Category	Functions
Movement & Positioning	`teleport()`, `setX()`, `setY()`, `position()`, `stamp()`, `clearStamp()`
Angular & Directional	`forward()`, `backward()`, `turnLeft()`, `turnRight()`, `circle()`, `pointTo()`
Boundaries	`bound()`, `boundTo()`
Smooth Movement	`glideX()`, `glideY()`, `glideTo()`
Physics	`accelerate()`, `decelerate()`, `project()`, `hitObject()`
Particles	`explosion()`, `smoke()`, `sparkle()`, `rain()`, `blood()`, `magic()`
Sound	`play()`, `playMusic()`, `stopMusic()`, `setMasterVolume()`, `mute()`, `unmute()`
Debugging	`dot()`

Total: 34 functions

🎯 Movement & Positioning Functions

These functions handle basic movement and positioning of components.

`move.teleport()`

move.teleport(player, 400, 300);

What It Does: Instantly moves a component to a new position.

Why It's Useful: It's the foundation of respawns, checkpoints, and teleportation mechanics. Simple but essential.

When to Use:

Respawn players at checkpoints
Teleport enemies to random positions
Move objects instantly without animation

Example:

// Respawn player at checkpoint
if (player.health <= 0) {
    move.teleport(player, checkpoint.x, checkpoint.y);
}

// Teleport enemy to random position
move.teleport(enemy, Math.random() * 700 + 50, Math.random() * 500 + 50);

`move.setX()` / `move.setY()`

move.setX(player, 100);
move.setY(player, 200);

What It Does: Sets the X or Y position of a component individually.

Why It's Useful: Sometimes you only need to change one axis.

When to Use:

Adjusting position on one axis only
Keeping one axis fixed while changing the other

The Hard Truth: This is just obj.x = value or obj.y = value. It's a convenience wrapper.

`move.position()`

move.position(healthBar, "top", 20);

What It Does: Snaps UI to screen edges or center with one line.

Why It's Useful: It saves you from doing manual centering calculations. Makes UI layout trivial.

When to Use:

Positioning UI elements (health bars, score displays)
Centering logos or titles
Placing buttons at screen edges

Supported Directions:

"top" — top edge with offset
"bottom" — bottom edge with offset
"left" — left edge with offset
"right" — right edge with offset
"center" — center of screen

Example:

move.position(healthBar, "top", 20);
move.position(scoreText, "top", 50);
move.position(logo, "center");
move.position(menuButton, "bottom", 30);

`move.stamp()` / `move.clearStamp()`

const clone = move.stamp(enemy);
move.clearStamp(clone);

What It Does: stamp() creates a clone of a component at its current position. clearStamp() removes it.

Why It's Useful: Useful for creating duplicates of objects or creating effects.

When to Use:

Particle-like duplication
Creating multiple objects from a template
Spawning effects

🧭 Angular & Directional Functions

These functions handle movement and rotation based on a component's angle.

`move.forward()` / `move.backward()`

move.forward(player, 5);   // Move in facing direction
move.backward(player, 5);  // Move opposite facing direction

What It Does: Moves a component along its current angle direction. Uses Math.cos(angle) and Math.sin(angle) internally.

Why It's Useful: It simplifies movement in a specific direction. Perfect for driving games, top-down shooters, and any game with directional movement.

When to Use:

Driving games
Top-down shooters
Any time you need to move in the direction the component is facing

How It Works Internally:

// Simplified version
function forward(id, steps) {
    id.speedX = steps * Math.cos(id.angle);
    id.speedY = steps * Math.sin(id.angle);
}

Example:

const car = new Component(40, 20, "red", 400, 300, "rect");
car.changeAngle = true;
display.add(car);

function update(dt) {
    if (display.keys[38]) move.forward(car, 3);
    if (display.keys[40]) move.backward(car, 2);
    if (display.keys[37]) move.turnLeft(car, 0.05);
    if (display.keys[39]) move.turnRight(car, 0.05);
}

`move.turnLeft()` / `move.turnRight()`

move.turnLeft(car, 0.05);   // Rotate left
move.turnRight(car, 0.05);  // Rotate right

What It Does: Rotates a component by a given angle. Works with changeAngle = true (the default).

Why It's Useful: It simplifies rotation. Instead of obj.angle += 0.05, you get a readable function.

When to Use:

Driving games
Top-down shooters
Any time you need to rotate a component

`move.circle()`

move.circle(orbiter, 2);  // 2 degrees per frame

What It Does: Creates orbiting motion without trigonometry. It adds to the component's angle each frame, and the component's moveAngle() method converts that angle into movement.

Why It's Useful: It's a unique feature. Most engines require manual trigonometry for orbiting. Limn handles it with one line.

When to Use:

Orbiting enemies
Planetary systems
Circular patterns

How It Works Internally:

// Simplified version
function circle(id, speed) {
    id.physics = true;
    id.changeAngle = true;
    id.angle += speed * Math.PI / 180;
}

// And in the component's moveAngle():
this.x += this.speedX * Math.cos(this.angle);
this.y += this.speedY * Math.sin(this.angle) + this.gravitySpeed;

Example:

const orbiter = new Component(16, 16, "cyan", 400, 300, "rect");
orbiter.angularMovement = true;
orbiter.speedX = 80;
orbiter.speedY = 80;
display.add(orbiter);

function update(dt) {
    move.circle(orbiter, 2);  // Orbits automatically!
}

Note: Requires angularMovement = true and speedX / speedY to be set.

`move.pointTo()`

move.pointTo(turret, mouse.x, mouse.y);

What It Does: Rotates any component to face a target coordinate. Uses Math.atan2() internally and sets the component's angle property.

Why It's Useful: It removes a common barrier — trigonometry. Beginners can now build aiming mechanics without math anxiety.

When to Use:

Turrets
Enemies that track the player
Aiming mechanics
Any time you need an object to face a specific point

How It Works Internally:

// Simplified version
function pointTo(id, targetX, targetY) {
    const deltaX = targetX - id.x;
    const deltaY = targetY - id.y;
    id.angle = Math.atan2(deltaY, deltaX);
}

Example:

function update() {
    // Turret faces the mouse
    move.pointTo(turret, display.x, display.y);

    // Enemy faces the player
    move.pointTo(enemy, player.x, player.y);
}

📐 Boundaries

These functions keep components within defined boundaries.

`move.bound()`

move.bound(player);

What It Does: Keeps any component on screen with one line. It clamps the component's position so it can never go past any of the four canvas edges.

Why It's Useful: It's the most used function in almost every game. Every game needs boundaries. This replaces four if statements in every object, forever.

When to Use: Every game. Every component that moves. Every frame.

Example:

function update(dt) {
    // Move the player
    if (display.keys[39]) player.speedX =  4;
    if (display.keys[37]) player.speedX = -4;
    else if (!display.keys[39]) player.speedX = 0;

    // Keep the player on screen
    move.bound(player);
}

`move.boundTo()`

move.boundTo(player, 50, 750, 100, 500);

What It Does: Custom boundaries for any component. It clamps the component to specific pixel values on each side — or leaves a side open by passing false.

Why It's Useful: It enables arena games, room-based levels, and custom playfields. Sometimes you need boundaries that aren't the canvas edges.

When to Use:

Arena games
Room-based levels
Custom playfields
Any situation where you need different boundaries for different objects

Example:

// Keep player inside an arena
move.boundTo(player, 50, 750, 50, 550);

// Keep enemy in a specific room
move.boundTo(enemy, 200, 600, 200, 400);

// Leave top and bottom open (only clamp horizontally)
move.boundTo(player, 0, 800, false, false);

🌊 Smooth Movement (Glide)

These functions create smooth, easing-based movement.

`move.glideX()` / `move.glideY()` / `move.glideTo()`

move.glideX(coin, 1000, 500);        // Move X only
move.glideY(coin, 1000, 300);        // Move Y only
move.glideTo(coin, 1000, 500, 300);  // Move both

What It Does: Smooth, easing-based movement to a target point. Uses cubic ease-out for natural deceleration — fast at the start, slow at the end.

Why It's Useful: It saves you from writing lerp functions, animation loops, and timing management every time. It makes movement feel polished.

When to Use:

UI animations
Cutscenes
Enemy patrols
Smooth transitions
Any time you need polished movement

How It Works Internally:

// Simplified version of glideX()
function glideX(id, duration, x) {
    const startX = id.x;
    const startTime = performance.now();

    function step(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(1, elapsed / duration);
        const eased = 1 - Math.pow(1 - progress, 3); // Cubic ease-out

        id.x = startX + (x - startX) * eased;

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

Example:

// Move a coin to a random position over 1 second
move.glideTo(coin, 1000, Math.random() * 700, Math.random() * 500);

// Move the player to a cutscene position
move.glideTo(player, 2000, 400, 300);

// Move UI element smoothly
move.glideTo(menu, 500, 400, 300);

⚡ Physics

These functions handle physics-based movement.

`move.accelerate()` / `move.decelerate()`

move.accelerate(player, 0.6, 0, 8, 0);
move.decelerate(player, 0.4, 0);

What It Does: Creates smooth, weighty movement with acceleration curves. accelerate() adds to speed and clamps to a maximum. decelerate() reduces speed toward zero without overshooting.

Why It's Useful: It enables realistic physics and vehicle-like motion. Games with weighty movement feel more polished and professional.

When to Use:

Vehicles
Platformer movement
Realistic motion
Any time you want smooth acceleration

How It Works Internally:

// Simplified version
function accelerate(id, accelX, accelY, maxX, maxY) {
    id.speedX += accelX;
    id.speedY += accelY;

    if (Math.abs(id.speedX) > maxX) {
        id.speedX = id.speedX > 0 ? maxX : -maxX;
    }
    if (Math.abs(id.speedY) > maxY) {
        id.speedY = id.speedY > 0 ? maxY : -maxY;
    }
}

function decelerate(id, decelX, decelY) {
    if (id.speedX > 0) {
        id.speedX -= decelX;
        if (id.speedX < 0) id.speedX = 0;
    } else if (id.speedX < 0) {
        id.speedX += decelX;
        if (id.speedX > 0) id.speedX = 0;
    }
    // Same for Y
}

Example:

function update(dt) {
    if (display.keys[68]) {
        move.accelerate(player, 0.6, 0, 8, 0);  // Accelerate right
    } else if (display.keys[65]) {
        move.accelerate(player, -0.6, 0, 8, 0); // Accelerate left
    } else {
        move.decelerate(player, 0.4, 0);        // Slow down
    }
    move.bound(player);
}

`move.project()`

move.project(bullet, 300, 45, 0.5);
move.project(arrow, 220, 28, 0.4, 420);

What It Does: Launches a component as a projectile with gravity and bounce. Converts angle to velocity components and handles the arc.

Parameters:

id — The component to launch
initialVelocity — Speed in pixels per second
angle — Launch angle in degrees (0° = right, 90° = up)
gravity — Added to vertical speed each frame
ground (optional) — Custom floor Y position

Why It's Useful: It handles all the physics of projectile motion — angle conversion, gravity, arc, and bouncing.

When to Use:

Arrows
Fireballs
Angry-birds style games
Any projectile with gravity

Example:

// Launch a fireball
move.project(fireball, 400, 35, 0.3);

// Launch an arrow with custom ground
move.project(arrow, 250, 30, 0.4, 400);

`move.hitObject()`

move.hitObject(player, floor);

What It Does: Handles platform-style collision with another component. Treats the top edge of otherid as a floor and applies bounce.

Why It's Useful: It's essential for platformers. It makes the component land on top of another component.

When to Use:

Platformer games
Landing on platforms
Ground collision

Example:

const player = new Component(36, 48, "cyan", 100, 0, "rect");
const platform = new Component(200, 20, "#555", 200, 300, "rect");
display.add(player);
display.add(platform);

player.physics = true;
player.gravity = 0.5;
player.bounce = 0.05;

function update() {
    move.hitObject(player, platform);  // Land on platform
    player.hitBottom();                // Also stop at canvas floor
}

✨ Particles

These functions create visual effects with particles.

`move.particles.*`

move.particles.explosion(ps, x, y, 30);
move.particles.sparkle(ps, x, y);
move.particles.blood(ps, x, y, 15);

What It Does: Six built-in particle presets with zero configuration. Each preset is a carefully tuned burst or emission of particles.

Why It's Useful: It saves you hours of particle system configuration. In other engines, setting up an explosion requires tweaking gravity, friction, alpha fade, scale, color, and speed parameters. Limn does it all for you.

The Presets:

Preset	What It Does	When to Use
`explosion(ps, x, y, intensity)`	Orange-red radial burst	Explosions, bombs, death
`smoke(ps, x, y)`	Single upward grey circle	Fire, exhaust, atmosphere
`sparkle(ps, x, y)`	Yellow radial burst	Coins, power-ups, magic
`rain(ps, x, y, intensity)`	Thin blue vertical rects	Weather effects
`blood(ps, x, y, amount)`	Red radial burst with gravity	Combat, hits
`magic(ps, x, y)`	Multicolour rotating rects	Spells, power-ups

Example:

// One line = instant explosion effect
move.particles.explosion(ps, enemy.x, enemy.y, 30);

// One line = coin collection sparkle
move.particles.sparkle(ps, coin.x, coin.y);

// One line = blood splatter
move.particles.blood(ps, player.x, player.y, 10);

🔊 Sound

These functions handle audio playback.

`move.sound.*`

move.sound.play("jump");
move.sound.playMusic("theme");
move.sound.stopMusic();
move.sound.setMasterVolume(0.8);
move.sound.mute();
move.sound.unmute();

What It Does: A thin wrapper around SoundManager that provides one-line audio control.

Why It's Useful: It simplifies audio management. No need to check if SoundManager exists — just call the function.

When to Use:

Playing sound effects
Background music
Volume control
Mute/unmute

Example:

function update() {
    if (display.keys[32]) {
        display.keys[32] = false;
        move.sound.play("shoot");
    }
    if (playerDied) {
        move.sound.stopMusic();
        move.sound.play("explode");
    }
}

🐛 Debugging

`move.dot()`

move.dot(id);

What It Does: Draws a dot at a component's position. Useful for debugging.

Why It's Useful: It helps visualize positions during development.

📊 Quick Reference

What You Want	Code
Keep on screen	`move.bound(player)`
Custom boundaries	`move.boundTo(player, 50, 750, 50, 550)`
Instant move	`move.teleport(player, 400, 300)`
Snap to edge	`move.position(healthBar, "top", 20)`
Smooth movement	`move.glideTo(coin, 1000, 500, 300)`
Realistic physics	`move.accelerate(player, 0.6, 0, 8, 0)`
Face target	`move.pointTo(turret, mouse.x, mouse.y)`
Orbit	`move.circle(orbiter, 2)`
Move forward	`move.forward(car, 3)`
Turn	`move.turnLeft(car, 0.05)`
Explosion	`move.particles.explosion(ps, x, y, 30)`
Sparkle	`move.particles.sparkle(ps, x, y)`
Play sound	`move.sound.play("jump")`
Play music	`move.sound.playMusic("theme")`
Mute	`move.sound.mute()`

💡 The Philosophy Behind `move`

Every function in move exists because I was tired of writing the same code over and over:

move.bound() — tired of edge detection
move.glideTo() — tired of lerp functions
move.pointTo() — tired of trigonometry
move.particles.* — tired of configuring particles

"Common outcomes should be functions." That's the philosophy that created the move utility.

🎯 The One-Line Summary

"The move utility turns complex movement mechanics into one-line commands — saving you hundreds of lines of boilerplate and making your game feel polished."

🔗 Resources

Resource	Link
10x Developer Guide	limn-engine-doc.vercel.app/10x.html
API Reference	limn-engine-doc.vercel.app/reference.html
GitHub Repository	github.com/terracodes004/limn-engine-doc

Draw your game into existence — one powerful function at a time. 🚀

[Boost]

Kehinde Owolabi — Sat, 11 Jul 2026 17:11:37 +0000

Kehinde Owolabi

Jun 17

Limn Engine — Complete API Reference

#webdev #programming #tutorial #javascript

9 min read