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.