Website - Discord - GitHub

⚠️ WORK IN PROGRESS ⚠️

Hex Engine is a 2D Game Engine for the browser, written in TypeScript. It is designed to feel similar to React.

Hex Engine implements a variant of the popular Entity-Component-System model, adapting it to make Components radically composable. In Hex Engine, every Component is a function, and Components can call special Hook functions to define their behavior in the game engine.

Hex Engine comes out-of-the-box with a powerful development inspector and a modern frontend code compilation pipeline.

Out of the box, Hex Engine has:

2D rendering via HTML5 Canvas
Support for sprite sheets and animations
Helpers for sound playback and synthesization
Physics (via matter.js)
Mouse, Keyboard, and Gamepad input
First-class support for popular indie game development tools Aseprite, Tiled, and BMFont
And much, much, more

Hex Engine is inspired by React, Impact, Unity, and LÖVE.

Here's an example of what code looks like in Hex Engine.

import {
  useDraw,
  useUpdate,
  useNewComponent,
  SystemFont,
  Label,
} from "@hex-engine/2d";

export default function MyComponent() {
  const font = useNewComponent(() => SystemFont({ name: "Arial", size: 12 }));
  const label = useNewComponent(() => Label({ font }));

  let elapsedTime = 0;
  useUpdate((delta) => {
    elapsedTime += delta;

    label.text = `Elapsed time: ${elapsedTime}`;
  });

  useDraw((context) => {
    label.draw(context, { x: 10, y: 10 });
  });
}

Hex Engine was created by yours truly, Lily Skye. I am known throughout the JavaScript Open-Source community as one of the core maintainers of Prettier, and I have also contributed to a myriad of other well-known projects, including Babel and React DevTools.

I built Hex Engine because I felt that the browser game engine space could benefit a lot from technologies and patterns found in the open-source JavaScript frontend and tooling communities.

It is the culmination of years of research, and probably the fifth or sixth game engine I have written for the browser (but the first that I've been proud enough of to share).

All that said, it's far from done- I'm hoping that we can form a community together and make something we can all be proud of.

Interested? Check out Hex Engine's homepage for installation and usage instructions.

Logo Font is Silver by Poppy Works.