Open source · MIT licensed

Give your game some gravity

Planck.js is a 2D physics engine for JavaScript: rigid bodies, joints and collisions for games in the browser.

Planck.js · testbedBridge

Planck.js · 2D physics engine

A world in a few lines

Make a world, add bodies, step it. Shapes, joints, contacts and ray casts run in browsers and Node.js, with TypeScript types built in.

ExamplesDocs 5.3k on GitHubnpm install planck
hello-world.js
import { World, Edge, Box } from "planck";

const world = new World({ gravity: { x: 0, y: -10 } });

const ground = world.createBody({ angle: 0.1 * Math.PI });
ground.createFixture(new Edge({ x: -50, y: 0 }, { x: 50, y: 0 }));

const box = world.createDynamicBody({ position: { x: 0, y: 14 } });
box.createFixture(new Box(1, 1), { density: 1, friction: 0.3 });

// metres, kilograms, seconds
for (let i = 0; i < 150; i++) world.step(1 / 60);
resultt = 2.50 s
0.0 s0.8 s1.3 s1.7 s2.5 s

  • Based on Box2D

    Built on Box2D's algorithms, proven in industry and used in many commercially successful games.

  • Idiomatic JavaScript/TypeScript API

    Plain objects, options and events, with TypeScript types built in.

  • Readable and debuggable JavaScript/TypeScript

    The source reads like ordinary code, so you can step through it in your browser's debugger.

  • Optimized for web and mobile platforms

    Tuned for browsers on desktops and phones, and runs in Node.js too.

Polymatic · game framework

Games made of small, swappable parts

Middlewares share one context and talk through events. No renderer or physics inside: bring the libraries your game needs. The API is small enough for people and AI to read whole.

5-minute guidenpm install polymatic
runningbounces: 0
MainFrameLoopPhysicsBounceCounterRendererPhysics emits "bounce", BounceCounter counts it
main.js
class Main extends Middleware {
  constructor() {
    super();
    this.use(new FrameLoop());
    this.use(new Physics());
    this.use(new BounceCounter());
    this.use(new Renderer());
  }
}

class BounceCounter extends Middleware {
  constructor() {
    super();
    this.on("bounce", () => {
      this.context.bounces += 1;
    });
  }
}

Runtime.activate(new Main(), context);

  • Middleware

    One part of the game: input, rules, drawing or network. Compose them with use().

  • Context

    One shared object holds the state and the entities.

  • Events

    emit() reaches every middleware, in tree order.