like2d

v2.13.2

Published

a month ago

DEPRECATED: Use @like2d/like instead. A web-native game framework inspired by Love2D

0High
0Medium
0Low

44100hz

game framework 2d love2d canvas web typescript

NOTICE

This package is deprecated. Use the new one.

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.