Welcome to Limn Engine

What is Limn Engine?

Limn Engine is the fourth generation of the TCJSGame project, built by Owolabi Kehinde. Starting as JGame in 2023, it evolved through TCGame and TCJSGame into a complete architectural upgrade.

It stays true to its roots: no build tools, no complex setup. Just a single epic.js file and your creativity.

A powerful, beginner-friendly JavaScript 2D game engine built on HTML5 Canvas — with component-based architecture, physics, particles, tilemap support, and a dual-canvas rendering pipeline.

💡 Without an engine: you'd manually draw pixels, handle keyboard events, manage the game loop, and write collision detection. Limn does all of that for you.

Feature	What Limn gives you
Display	Canvas, game loop, keyboard + mouse + touch input
Component	Rect, image, and text objects with built-in physics
Camera	Follow, smooth follow, zoom, shake, rotation shake
Particles	emit, burst, emitters, and 6 built-in presets
TileMap	Grid-based levels with runtime tile editing
AnimatedSprite	Spritesheet animation with named clips
SoundManager	SFX, music, volume control, mute

Your First Game – Setup

Create an HTML file, include epic.js, and write the code below. You'll see a red square on a canvas in seconds.

<!DOCTYPE html>
<html>
<head><title>My Limn Game</title></head>
<body>
<script src="epic.js"></script>
<script>
const display = new Display();
display.perform(); // dual-canvas pipeline ON
display.start(800, 600);

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

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

✅ start() creates an 800×600 canvas and starts the game loop. The red square appears because display.add(player) tells the engine to draw it every frame.

⚠️ Your Display instance must be assigned to a variable named display — the engine uses this name internally.

Learn the Engine

Limn Engine is structured into four progressive skill levels. Pick yours and start building.

Head to the Tutorial page to choose your level. If you already know TCJSGame v3 you only need to learn the new features.

For a full API reference, see the Reference page.

Level	Who it's for	Link
Level 1	First-time game devs — shapes, keys, collision	Beginner →
Level 2	Comfortable with JS — physics, camera, tilemaps	Intermediate →
Level 3	Building full games — particles, scenes, shakes	Advanced →
Level 4	Engine internals — perform(), deltaTime, pipelines	10x →

Case Study: Space Shooter

Learn how to build a complete arcade space shooter using particles, camera shake, scenes, and deltaTime movement.

This walkthrough covers: linear gradient background, rocket exhaust particles, enemy spawning arrays, collision + explosions, invincibility frames, bullet limits, and game-over logic.

Read the full case study → | Play the live demo →

What's New in v4

Feature	Description
Dual-Canvas Renderer	perform() activates an offscreen buffer for static objects — massive performance gain
Particle System	emit, burst, emitters + 6 presets: explosion, smoke, sparkle, rain, blood, magic
Camera Shake	camera.shake(x,y) and camera.shakeRotation(angle) — both auto-reset
Circle Collision	enableCircleCollision() + crashWithCircle() for round objects
destroy()	Properly removes a Component from the engine's render loop
fixed()	Lock a Component to screen position regardless of camera movement
Tctxt	Rich text with background fill, padding, alignment, baseline
AnimatedSprite	Named animation clips with loop/one-shot control
SoundManager	Named sounds, music, master/sfx/music volume, mute
Scene system	display.scene — only Components in the active scene render
setImage / setColor	Swap a Component between image and rect at runtime
clearMargin	Control how much of the canvas is cleared per frame