GitHubnpm

Make games in TypeScript.

ignifx is an open-source engine for 2D and 3D games in WebGPU browsers and on the desktop. Your game is TypeScript. Read a whole one below while it runs.

npx @ignifx/cli@latest my-game
Get startedBrowse the examples

main.tsa complete game, top to bottom

  1. Load the engine

    –

    Import what the game uses and declare a script. speed is a typed field you can save and adjust in the inspector.

    import {  Camera,  Light,  MeshAsset,  MeshRenderer,  Script,  createApp,  createMaterialAsset,  f32,  pbrMaterialDefinition,} from "@ignifx/core";import type { ScriptCallbacks } from "@ignifx/core";class Spinner extends Script.define({ speed: f32(90) }) implements ScriptCallbacks {  static typeId = "demo/Spinner"; // `speed` is a serialized field, degrees per second  update(dt: number): void {    this.transform.rotate({ x: 0, y: this.speed * dt, z: 0 });  }}

  2. Create the app

    –

    Add features as you need them. Register input, physics or audio when you create your app.

    const canvas = document.querySelector("canvas");if (!(canvas instanceof HTMLCanvasElement)) {  throw new Error("ignifx needs a <canvas> element on the page.");}// Shadows are a Babylon Lite opt-in, declared before the scene is registered (IGX-0704).const app = await createApp({ canvas, settings: { rendering: { features: { shadows: true } } } });app.registerComponents([Spinner]);

  3. Build the world

    –

    Entities with components: a camera, a light, a ground and a cube.

    const eye = app.world.createEntity("Main Camera");eye.transform.localPosition.set(0, 2.5, -4.5);eye.transform.lookAt({ x: 0, y: 0.6, z: 0 });eye.addComponent(Camera, { fov: 55, far: 100 });const sun = app.world.createEntity("Sun");sun.transform.localPosition.set(3, 6, -2);sun.transform.lookAt({ x: 0, y: 0, z: 0 });const light = sun.addComponent(Light, { type: "directional", intensity: 3 });light.shadows.enabled = true;const ground = app.world.createEntity("Ground");ground.addComponent(MeshRenderer, {  mesh: MeshAsset.ground(app, { width: 20, height: 20 }),  castShadows: false,});const ember = createMaterialAsset(  app,  pbrMaterialDefinition({ name: "ember", baseColor: { r: 0.93, g: 0.42, b: 0.16, a: 1 }, roughness: 0.35 }),  [],);const cube = app.world.createEntity("Cube");cube.transform.localPosition.set(0, 0.65, 0);cube.addComponent(MeshRenderer, { mesh: MeshAsset.box(app, { size: 1.3 }), materials: [ember] });cube.addComponent(Spinner, { speed: 120 });

  4. Start the loop

    –

    Choose when your code runs. Use fixedUpdate for physics and update for changes each frame.

    await app.start();

Off airLivePaused

Hello cube

Open this example
An orange cube casting a soft shadow on a dark grey floor, lit from the upper left, seen from slightly above.
Open standalone

` devtools

0.00s

Boot time, measured in this browser.

Ready after
–
Engine CPU
–
Draw calls
–

Start from a playable game

Four templates, each with menus, settings, saves and controls for keyboard, gamepad and touch. Play one here, then create your own copy.

A top-down pixel-art courtyard with stone paths and grass, a character in the centre and lit shrines, with a heads-up display along the top.

2D top-down

  • Keyboard
  • Gamepad
  • Touch
  • Mouse

Explore a pixel-art courtyard, light shrines and save your progress.

--template 2d-topdown

Play
A pixel-art dusk landscape: a hill and a treeline behind a grass-topped dirt tilemap, a wooden plank and a brick platform with gold coins hanging above them, the character standing on the left, and a chip in the top corner that reads No coins.

2D side-scroller

  • Keyboard
  • Gamepad
  • Touch
  • Mouse

Run, jump and collect coins across a scrolling pixel-art level.

--template 2d-sidescroller

Play
A grey tiled courtyard ringed by dark panelled walls under a pale sky: the rigged character stands in the middle among scattered wooden crates, three beacon posts sit around the floor, and a chip in the top corner reads the player's speed and the companion's distance.

3D third-person

  • Keyboard
  • Gamepad
  • Touch
  • Mouse

Explore with an animated character, a following camera and an AI companion.

--template 3d-third-person

Play
A first-person view across a grey tiled room ringed by dark panelled walls: blue-grey crates and three pedestals stand ahead, a small crosshair sits at the centre of the frame, the view model and its teal prop fill the bottom corner, and a chip in the top corner reads that no pedestals are lit and nothing is in reach.

3D first-person

  • Keyboard
  • Gamepad
  • Touch
  • Mouse

Explore in first person, push crates and interact with objects.

--template 3d-first-person

Play

Tools for the whole game

From the first moving character to menus and sound. Each extension is one line when you create your app, and each row opens an example running it.

All features

All 42 examples

Built to work with your coding agent.

ignifx ships an Agent Skill: the engine's guide, concepts, API reference and recipes, written for coding agents. The docs harness compiles the code in it, so what your agent reads matches the engine you install.

The skill also comes inside the ignifx package, under node_modules/ignifx/skills/. Any agent can start from /llms.txt.

Add the skill to your agent
npx skills add astrum-forge/ignifx
  • GuideSetup, concepts and the rules the engine keeps
  • RecipesOne task each, with code the harness compiles
  • API referenceEvery package, generated from the source
  • GotchasKnown traps, each with its fix and error code

Start building.

The default is the top-down template; pass --template 3d-third-person for another. Add --desktop for an Electron build.

Read the guideGitHub

Requires a browser with WebGPU. Desktop builds use Electron. Check browser support

shell
npx @ignifx/cli@latest my-gamecd my-game && npm install && npm run dev

Made by Astrum Forge Studios, an independent studio that builds its own games with ignifx. Open source under Apache-2.0.