suchipi / Hex Engine

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 Scott. 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.