like2d 2.8.0 → 2.10.0

package/README.md

@@ -1,6 +1,6 @@
 # LÏKE2D
 
-<svg width="300mm" height="105mm" version="1.1" viewBox="0 0 300 105" xmlns="http://www.w3.org/2000/svg">
+<svg version="1.1" viewBox="0 0 300 105" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="11.23" width="280" height="83.544" fill="#e48080" stroke="#000" stroke-linejoin="round" stroke-width="2"/>
  <g fill="none" stroke="#000" stroke-linejoin="round">
   <rect x="97.484" y="11.23" width="52.516" height="46.237"/>
@@ -31,60 +31,70 @@
  </g>
 </svg>
 
-A web-native 2D game framework inspired by [LÖVE](https://love2d.org/), built for simplicity and the modern web.
+Lightweight web game framework inspired by [LÖVE](https://love2d.org/).
 
-## What it is
-
-LIKE is a **curated toolkit** around browser APIs.
-
-It does less, because it **does the right thing**. And when that's not the right thing for you, we hand you the wrench.
+## <div style="color:red">During v2.x.x, LIKE's API will change.</div>
 
-- **Stateless Graphics:** Forget to reset native Canvas state (like LineCap) between calls and things break mysteriously. We make drawing explicit: what you see is what you set.
-
-- **Fire-and-forget Assets:** Async asset loading directly on realtime web games is annoying. We let you pretend it's instant and synchronous.
-
-- **Physical Joypad:** Our gamepad module auto-maps to physical buttons like "bottom" and "top". Because A isn't always in the same spot.
+## What it is
 
-- **Actions System:** Of course you can use device input callbacks just like love2d -- but you can also map inputs to actions and get callbacks on that.
+LIKE is a cozy way to make 2d games for browser.
 
-- **Scaling Modes:** Pixel art games need pixel-perfect scaling. So we do that: integer nearest -> linear. Or not; turn off pixelart mode to have a canvas that stays at native resolution.
+## What LIKE does
 
-- **Sane Architecture:** Everything is built around a centralized event handler for browser-native events. We won't reinvent the wheel.
+- **🔥 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 -- focused entirely on what matters.
 
 ## Installation
 
+Most package managers will work.
+
 ```bash
 npm install like2d
-# or
-pnpm add like2d
+# or ...
+deno add jsr:@like2d/like
+# or...
 ```
 
 ## Quick Start
 
-[Like2D Starter Template](https://github.com/44100hertz/Like2D-starter)
+To try Like2D quickly, use this starter with
+hot reloading and a basic webpage.
+
+```bash
+npx degit 44100hertz/Like2D/examples/starter my-game
+```
 
 ## Usage Example
 
 ```typescript
-import { createLike } from 'like2d';
+import { createLike } from "like2d";
 
 const like = createLike(document.body);
 
 like.load = () => {
-  like.setMode({ pixelResolution: [800, 600] });
-  like.input.map('jump', ['Space', 'ButtonBottom']);
+  like.setMode([800, 600]);
+  like.input.setAction("jump", ["Space", "BBottom"]);
 };
 
 like.update = (dt) => {
-  if (like.input.justPressed('jump')) {
-    console.log('Jump!');
+  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]);
+  like.gfx.circle("fill", "dodgerblue", [400, 300], 50);
+  like.gfx.print("white", "Hello Like2D!", [20, 20]);
 };
 
 await like.start();
@@ -93,27 +103,20 @@ await like.start();
 ## For Love2D Developers
 
 LIKE's API is not the same as LOVE, but similar in spirit. Notable differences:
- - Graphics have less state, there is no setColor getColor etc.
- - Our APIs are, in general, a bit different. You'll have to learn some.
- - You manage your own state; like is not global, but you can share it around for similar results. This allows multiple LIKE instances per webpage.
- - We use Vector2 and Rect tuples (as in `[number, number]`) instead of loose coordinates.
- - Theres an actions system -- `input.map` / `actionpressed` and `actionreleased` callbacks.
- - Some things are missing either due to browser limitations or smaller scope.
+
+- 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.
 
 ## Feedback welcome
 
-Before you report a bug:
- 1. Make sure you're on the latest release.
- 2. If the issue exists already, just comment on that one.
- 3. See if it happens in other web browsers.
+[LIKE is on GitHub.](https://github.com/44100hertz/Like2D)
 
-Before you request a feature:
- 1. ask: Would it make sense as a core feature, or should it be an external library?
- 2. See if the feature exists already.
- 3. Think about the demand for it overall. Make your case why game developers want it.
- 4. Consider just making a PR yourself, or sending a prompt/spec that an AI can hack on.
+[Check out the docs for our long-term vision.](https://github.com/44100hertz/Like2D/tree/master/docs)
 
-[Then, put your feedback on GitHub.](https://github.com/44100hertz/Like2D/issues)
+[Feature requests welcome. PRs discouraged for now.](https://github.com/44100hertz/Like2D/issues/)
 
 ## License
 

package/dist/__benchmarks__/vector2.bench.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=vector2.bench.d.ts.map

package/dist/__benchmarks__/vector2.bench.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector2.bench.d.ts","sourceRoot":"","sources":["../../src/__benchmarks__/vector2.bench.ts"],"names":[],"mappings":""}

package/dist/__benchmarks__/vector2.bench.js

@@ -0,0 +1,74 @@
+import { bench, describe } from 'vitest';
+import { Vec2 } from '../math/vector2';
+const VEC2_COUNT = 10000;
+function makeVec2s(count) {
+    const vec2s = [];
+    for (let i = 0; i < count; i++) {
+        vec2s.push([Math.random() * 1000, Math.random() * 1000]);
+    }
+    return vec2s;
+}
+describe('Vector2', () => {
+    const a = makeVec2s(VEC2_COUNT);
+    const b = makeVec2s(VEC2_COUNT);
+    describe('binary operations', () => {
+        bench('add', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const result = Vec2.add(a[i], b[i]);
+                sum += result[0];
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+        bench('sub', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const result = Vec2.sub(a[i], b[i]);
+                sum += result[0];
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+        bench('mul', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const result = Vec2.mul(a[i], b[i]);
+                sum += result[0];
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+        bench('div', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const result = Vec2.div(a[i], b[i]);
+                sum += result[0];
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+        bench('dot', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const result = Vec2.dot(a[i], b[i]);
+                sum += result;
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+        bench('chained ops (add, sub, mul, div, dot)', () => {
+            let sum = 0;
+            for (let i = 0; i < VEC2_COUNT; i++) {
+                const r1 = Vec2.add(a[i], b[i]);
+                const r2 = Vec2.sub(r1, a[i]);
+                const r3 = Vec2.mul(r2, 2);
+                const r4 = Vec2.div(r3, b[i]);
+                const result = Vec2.dot(r4, a[i]);
+                sum += result;
+            }
+            if (sum === -1)
+                console.log(sum);
+        });
+    });
+});

package/dist/{core → audio}/audio.d.ts

@@ -5,28 +5,29 @@
  *
  * ## Track and give global control to all audio objects
  * Start, stop, or set global volume for every currently playing sound.
- *
  */
-export type SourceOptions = {
+/** Pass this into like.audio.newSource as config. */
+export type AudioSourceOptions = {
     volume?: number;
 };
 /**
- * Handle to a loaded audio resource.
+ * Handle to a loaded audio resource, which pretends to be synchronous.
  * Use `play()`, `stop()`, `pause()`, `resume()` for playback control.
  * Access the underlying HTMLAudioElement via `source.audio` for looping,
  * pitch, etc. Note: Use `source.setVolume()` instead of setting
  * `source.audio.volume` directly to ensure global volume scaling works correctly.
  */
-export declare class Source {
+export declare class AudioSource {
     readonly path: string;
     /** Underlying HTMLAudioElement. Modify directly for looping, pitch, etc. Use methods for playback control. Avoid setting volume directly. */
     readonly audio: HTMLAudioElement;
-    readonly options: Required<SourceOptions>;
+    /** Avoid setting these directly. */
+    readonly options: Required<AudioSourceOptions>;
     /** Resolves when the audio is loaded and ready to play. */
     readonly ready: Promise<void>;
     private loadState;
     private audioRef;
-    constructor(path: string, audioRef: Audio, options?: SourceOptions);
+    constructor(path: string, audioRef: Audio, options?: AudioSourceOptions);
     isReady(): boolean;
     play(): void;
     stop(): void;
@@ -42,20 +43,31 @@ export declare class Source {
     getVolume(): number;
     getDuration(): number;
 }
+/**
+ * The audio subsystem.
+ *
+ * Manages a handful of AudioSource objects, for things like global volume,
+ * global play/pause, etc..
+ *
+ * To make a new source, use `like.audio.newSource`.
+ */
 export declare class Audio {
     private sources;
     private globalVolume;
-    newSource(path: string, options?: SourceOptions): Source;
+    /**
+     * Get a {@link AudioSource}
+     */
+    newSource(path: string, options?: AudioSourceOptions): AudioSource;
     /** Get all audio sources -- note that sources are tracked
       * using weak references, and storing this list can cause
       * a memory leak.
       */
-    private getAllSources;
+    getAllSources(): AudioSource[];
     stopAll(): void;
     pauseAll(): void;
     resumeAll(): void;
     setVolume(volume: number): void;
     getVolume(): number;
-    clone(source: Source): Source;
+    clone(source: AudioSource): AudioSource;
 }
 //# sourceMappingURL=audio.d.ts.map

package/dist/audio/audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../../src/audio/audio.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,qDAAqD;AACrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAA;AAMD;;;;;;GAMG;AACH,qBAAa,WAAW;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,6IAA6I;IAC7I,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,oCAAoC;IACpC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAC/C,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,CAAC,SAAS,CAAoE;IACrF,OAAO,CAAC,QAAQ,CAAQ;gBAEZ,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAE,kBAAuB;IAmC3E,OAAO,IAAI,OAAO;IAIlB,IAAI,IAAI,IAAI;IAUZ,IAAI,IAAI,IAAI;IAUZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAYd,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ5B,IAAI,IAAI,MAAM;IAKd,SAAS,IAAI,OAAO;IAKpB,QAAQ,IAAI,OAAO;IAKnB,SAAS,IAAI,OAAO;IAKpB,+FAA+F;IAC/F,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK/B,SAAS,IAAI,MAAM;IAInB,WAAW,IAAI,MAAM;CAItB;AAED;;;;;;;GAOG;AACH,qBAAa,KAAK;IAChB,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,YAAY,CAAK;IAEzB;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,WAAW;IAMlE;;;QAGI;IACJ,aAAa,IAAI,WAAW,EAAE;IAS9B,OAAO,IAAI,IAAI;IAIf,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAIjB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAO/B,SAAS,IAAI,MAAM;IAInB,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW;CAGxC"}

package/dist/{core → audio}/audio.js

@@ -5,16 +5,15 @@
  *
  * ## Track and give global control to all audio objects
  * Start, stop, or set global volume for every currently playing sound.
- *
  */
 /**
- * Handle to a loaded audio resource.
+ * Handle to a loaded audio resource, which pretends to be synchronous.
  * Use `play()`, `stop()`, `pause()`, `resume()` for playback control.
  * Access the underlying HTMLAudioElement via `source.audio` for looping,
  * pitch, etc. Note: Use `source.setVolume()` instead of setting
  * `source.audio.volume` directly to ensure global volume scaling works correctly.
  */
-export class Source {
+export class AudioSource {
     constructor(path, audioRef, options = {}) {
         Object.defineProperty(this, "path", {
             enumerable: true,
@@ -29,6 +28,7 @@ export class Source {
             writable: true,
             value: void 0
         });
+        /** Avoid setting these directly. */
         Object.defineProperty(this, "options", {
             enumerable: true,
             configurable: true,
@@ -169,6 +169,14 @@ export class Source {
         return 0;
     }
 }
+/**
+ * The audio subsystem.
+ *
+ * Manages a handful of AudioSource objects, for things like global volume,
+ * global play/pause, etc..
+ *
+ * To make a new source, use `like.audio.newSource`.
+ */
 export class Audio {
     constructor() {
         Object.defineProperty(this, "sources", {
@@ -184,8 +192,11 @@ export class Audio {
             value: 1
         });
     }
+    /**
+     * Get a {@link AudioSource}
+     */
     newSource(path, options) {
-        const source = new Source(path, this, options);
+        const source = new AudioSource(path, this, options);
         this.sources.push(new WeakRef(source));
         return source;
     }

package/dist/audio/index.d.ts

@@ -0,0 +1,2 @@
+export type { AudioSource, Audio, AudioSourceOptions } from "./audio";
+//# sourceMappingURL=index.d.ts.map

package/dist/audio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/audio/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA"}

package/dist/engine.d.ts

@@ -1,25 +1,40 @@
-import type { Like2DEvent } from './core/events';
-import type { PartialCanvasMode } from './core/canvas-config';
-import type { Like } from './core/like';
+/**
+ * @module engine
+ * @description Core game engine - lifecycle management and event dispatch.
+ */
+import type { EventType, EventMap, Dispatcher } from './events';
+import type { Like } from './like';
+export type EngineDispatcher = Dispatcher<EventType>;
+export type EngineProps<T extends keyof EventMap> = {
+    canvas: HTMLCanvasElement;
+    abort: AbortSignal;
+    dispatch: Dispatcher<T>;
+};
+/**
+ * @private
+ * Core game engine managing the event loop and subsystems.
+ */
 export declare class Engine {
+    private container;
+    /** The canvas on which we bind all events. Not always the same canvas
+     * that we render to. */
     private canvas;
     private isRunning;
     private lastTime;
-    private container;
-    private canvasManager;
-    private handleEvent;
-    private currentScene;
-    private gfxState;
-    private windowFocusHandler;
-    private windowBlurHandler;
-    private canvasFocusHandler;
-    private canvasBlurHandler;
-    private fullscreenChangeHandler;
+    private abort;
+    /**
+     * The Like interface providing access to all engine subsystems.
+     */
     readonly like: Like;
     constructor(container: HTMLElement);
     private dispatch;
-    setMode(mode: PartialCanvasMode): void;
-    start(handleEvent: (event: Like2DEvent) => void): Promise<void>;
+    /**
+     * Start the game loop.
+     */
+    start(): Promise<void>;
+    /**
+     * Clean up all resources and stop the engine.
+     */
     dispose(): void;
 }
 //# sourceMappingURL=engine.d.ts.map

package/dist/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxC,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAA+C;IAClE,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,QAAQ,CAA8B;IAG9C,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,iBAAiB,CAA6B;IACtD,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,iBAAiB,CAA6B;IACtD,OAAO,CAAC,uBAAuB,CAA6B;IAE5D,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;gBAER,SAAS,EAAE,WAAW;IAqFlC,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,IAAI,EAAE,iBAAiB,GAAG,IAAI;IAUhC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IA+BrE,OAAO,IAAI,IAAI;CAiBhB"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAa,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAInC,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;AACrD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,QAAQ,IAAI;IAClD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CACzB,CAAA;AAED;;;GAGG;AACH,qBAAa,MAAM;IAaL,OAAO,CAAC,SAAS;IAZ7B;4BACwB;IACxB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,KAAK,CAAyB;IAEtC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;gBAEA,SAAS,EAAE,WAAW;IAuD1C,OAAO,CAAC,QAAQ;IAShB;;OAEG;IACG,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IA4B5B;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB"}