ignifx

Open-source game engine

Make games in TypeScript.

ignifx gives you the tools to build 2D and 3D games for the browser and desktop. Start with a playable template and make it your own.

WebGPU: checking…

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

A detailed metal spaceship crossing the frame nose-down, seen from slightly below and in front: a warm key light picks out its worn hull plating, a rim light behind it burns the wing edges, its engines glow, and behind it a faint pool of light falls away to black at the corners.
Open standalone

` devtools

Rendered live with ignifx. Drag to explore the ship.

Open this example

Why ignifx

  • Work in TypeScript

    Build scenes and write gameplay in your code editor. Typed components and scripts help you find mistakes as you work.

  • Start with the essentials

    Physics, controls, audio, menus and animation are ready to use. Add the extensions your game needs.

  • Take your game further

    Run your game in a WebGPU browser or package it for desktop with Electron. Test gameplay in Node without opening a window.

Start from a playable game

Choose a starting point for your game. Each template includes menus, settings, saves and controls for keyboard, gamepad and touch.

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

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

  • Keyboard
  • Gamepad
  • Touch
  • Mouse
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

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

  • Keyboard
  • Gamepad
  • Touch
  • Mouse
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

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

  • Keyboard
  • Gamepad
  • Touch
  • Mouse
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

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

  • Keyboard
  • Gamepad
  • Touch
  • Mouse
Play

Your game starts with code

This complete example creates a camera, a light, a floor and a spinning cube. Scenes and gameplay use the same TypeScript workflow.

  • Declare editable fields. Set values such as speed in your script and adjust them in the inspector.
  • Choose when your code runs. Use fixedUpdate for physics and update for changes each frame.
  • Add features as you need them. Register input, physics or audio when you create your app.
main.ts
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 });  }}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]);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 });await app.start();
A complete scene in TypeScript

Tools for the whole game

From the first moving character to menus and sound, build on features that work together.

  • Light your worlds

    Give 3D scenes realistic materials, reflections, shadows and a finishing touch of bloom.

    View example
  • Build in 2D

    Bring sprites and tilemaps to life with animation, layered backgrounds and pixel-perfect cameras.

    View example
  • Put physics to work

    Add collisions, moving bodies and character controllers with Havok for 3D and Rapier for 2D.

    View example
  • Let players choose their controls

    Support keyboard, mouse, gamepad and touch, with controls players can rebind.

    View example
  • Shape the sound

    Play music and positional sound effects. Give players separate volume controls for each.

    View example
  • Make room for menus

    Build menus, health displays and dialogs with HTML, plus touch controls and translations.

    View example

Made by Astrum Forge Studios

We’re an independent game studio building ignifx for our own games and for developers who like working in code. The engine is open source under Apache-2.0.

astrumforge.com

Start building

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

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

Read the guide

Requires a browser with WebGPU. Desktop builds use Electron.