@like2d/like
v3.0.0
Published
A web-native game framework inspired by Love2D
Maintainers
44100hzReadme
LÏKE2D
Lightweight web game framework inspired by LÖVE.
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:
Vector2andRectare just number tuples (arrays), but a pure-functional library makes them easy to work with and plays nice withmapandreduce. - 🚲 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-gameUsage 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/actionpressedandactionreleasedcallbacks. - Some things are missing either due to browser limitations or smaller scope.
Links
License
MIT