LÏKE2D

Lightweight web game framework inspired by LÖVE.

During v2.x.x, LIKE's API will change.

What it is

LIKE is a cozy way to make 2d games for browser.

What LIKE does

🔥 Fire-and-forget Assets: Graphics and audio that pretend to be synchronous.
🎯 DWIM graphics: Turns repetitive draw calls into one while removing state bleed for properties like lineCap.
↔️ Two Canvas Modes:
- 🖊️ Audio-resize the canvas; sharp at any resolution.
- 👾 For retro-style developers, pixels stay crisp but smooth via prescaling.
⭕ Easier Geometry: Vector2 and Rect are just number tuples (arrays), but a pure-functional library makes them easy to work with and plays nice with map and reduce.
🚲 Easy Input: Keyboard, Mouse, and Gamepad all are given both event-based and query-based options. Choose what fits your architecture. Most gamepads get auto-mapped perfectly, are easy to remap, and LIKE can load and save user mappings automatically.
👟Consistent APIs: Colors 0-1, not 0-255. Seconds, not milliseconds. Physical gamepad buttons, not "A" or "B".
👉 Actions System: An input layer maps inputs to actions, which fire usable events.
🌎 Global control: Choose how to handle LIKE events, and manage resources with centralized trackers. LIKE is a great foundation for your own engine.
🐦 Light and Elegant: Zero dependencies and less than 5000 lines of code. Size less than 100KiB compressed.

Installation

Most package managers will work.

npm install like2d
# or ...
deno add jsr:@like2d/like
# or...

Quick Start

To try Like2D quickly, use this starter with hot reloading and a basic webpage.

npx degit likeOrg/Like2D/examples/starter my-game

Usage Example

HTML that puts LIKE in fullscreen.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
      html {
        margin: 0;
        height: 100%;
        overflow: hidden;
      }
      body {
        margin: 0;
        height: 100%;
        display: grid;
        place-items: center;
        background: black;
      }
    </style>
  </head>
  <body>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

TypeScript:

import { createLike } from "like2d";

const like = createLike(document.body);

like.load = () => {
  like.canvas.setMode([800, 600]);
  like.input.setAction("jump", ["Space", "BBottom"]);
};

like.update = (dt) => {
  if (like.input.justPressed("jump")) {
    console.log("Jump!");
  }
};

like.draw = () => {
  like.gfx.clear([0.1, 0.1, 0.1, 1]);
  like.gfx.circle("fill", "dodgerblue", [400, 300], 50);
  like.gfx.print("white", "Hello Like2D!", [20, 20]);
};

await like.start();

For Love2D Developers

LIKE's API is not the same as LOVE, but similar in spirit. Notable differences:

Draw your graphics in one call, that's all. No setup or state bleed.
You manage your own instance of like in a big friendly object. This allows us to have multiple games on one page.
We use Vector2 and Rect tuples (like [x, y]) instead of loose coordinates.
Theres an actions system -- input.setAction / actionpressed and actionreleased callbacks.
Some things are missing either due to browser limitations or smaller scope.

Links

License

MIT