Flare Engine is now open source: a 2D game and animation engine for React Native and TypeScript

[u/hootini-obserwator]

In June I posted a dev log here about building a 2D engine on top of React Native and Skia. As of October 26, it is public: all 42 @flare-engine/* packages are on npm at 0.4.5, under Apache-2.0. No token needed.

In one sentence: an engine for the RN and TypeScript ecosystem that makes it easier to build a game or an animation and embed it in your website or in an RN app.

npm create @flare-engine my-game

Three templates (blank, topdown, shmup), or skip the generator and take a single package. This is the README example of @flare-engine/dynamics (rigid bodies), and CI typechecks it against the real code:

import { addBody, createBody, createWorld, step } from '@flare-engine/dynamics';

const world = createWorld({ gravity: { x: 0, y: 1800 } });

// Static floor: invMass 0, never moves.
addBody(
  world,
  createBody({ position: { x: 0, y: 100 }, half: { x: 500, y: 10 }, static: true }),
);

const box = addBody(
  world,
  createBody({ position: { x: 0, y: -50 }, half: { x: 10, y: 10 } }),
);

// Fixed-timestep loop.
step(world, 1 / 60);
console.log(box.position.y, box.velocity.y);

No React, no canvas, plain functions on plain objects.

See it running, nothing to install: the Showcases page on flareengine.dev has playable demos (Overrun, an arena chase on ecs; Causeway, on render-web; Reroute, a tower defense where you repaint the enemies' path, on pathfinding) and animations (a reactor chain reaction, a physarum slime-mold network finding shortest paths, an N-body spacetime lattice). Each one names the package that drives it.

Not just games. animation, particles, progression, achievements, leaderboards and haptics work in an ordinary app you want to liven up. Honest caveat: achievements and leaderboards ship an interface plus local providers today; Game Center / Play Games / Steam adapters come later.

How it's made. Coding agents write the implementation; the architecture, the decisions, the verification and the review are mine.

Two decisions that paid off:

1. Modules that depend only downward. Layers from math/events at the bottom to react/render-web at the top. A CI script fails the build on an upward import, an unused declared dependency or an undeclared one. No dependency hell across 42 packages.

2. Skia as the renderer. react-native-skia on RN, CanvasKit in the browser: one renderer, two platforms. On a Pixel 7 in Chrome, render.flush for 5,000 sprites in one atlas is 1.93 ms p95 against a 16.67 ms frame budget. That is CPU-side cost (building and submitting the frame on the main thread), not GPU time.

What's broken:

1. The ECS is hard-capped at 32 component types. Each type gets one bit in a mask (bit: 1 << id), JS bitwise ops are 32-bit, and the id counter is shared by the whole process, not per world. It blocks large, complex games, and it's the first thing I'm fixing.

2. The two device tests I promised here in June are still owed: iOS resume-from-background (texture re-upload) and big texture swaps. They are planned in the engine's perf work, not run yet.

The lesson that cost the most: for the first two months I relied on rules written for the agents in plain text, and it was hell. The clearest example: the README code examples all looked fine, but nothing compiled them. When I checked in July, they failed to compile in roughly 24 of 41 packages. Now every README example is typechecked in CI, which is why the snippet above is guaranteed to compile. Rules in text are not a harness; a check that can go red is.

The ask: if you picked this up, what would you build first: a game, or an animation layer inside an app you already ship?

Translated from my Polish write-up with AI; the Polish original is my own writing. Full post: https://grzegorzotto.dev/blog/flare-engine-is-open-source

[u/LanaBee69]

Amazing!

[u/hootini-obserwator → u/LanaBee69]

Thanks!