https://github.com/suchipi/hex-engine

A modern 2D game engine for the browser.
https://github.com/suchipi/hex-engine

2d-game-engine canvas canvas-game canvas2d game-engine hex-engine javascript react typescript

Last synced: 7 days ago
JSON representation

A modern 2D game engine for the browser.

• Host: GitHub
• URL: https://github.com/suchipi/hex-engine
• Owner: suchipi
• Created: 2019-12-22T03:48:24.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-12-02T06:22:15.000Z (about 2 months ago)
• Last Synced: 2025-01-09T23:35:55.172Z (14 days ago)
• Topics: 2d-game-engine, canvas, canvas-game, canvas2d, game-engine, hex-engine, javascript, react, typescript
• Language: TypeScript
• Homepage:
• Size: 5.65 MB
• Stars: 670
• Watchers: 9
• Forks: 27
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-canvas - hex-engine - engine.dev/docs/examples)] - A modern 2D game engine for the browser.   (Libraries / Game engine)

README

        
![Hex Engine Logo](logo-image.png)

---

[Website](https://hex-engine.dev) - [Discord](https://discord.gg/afFkpC9) - [GitHub](https://github.com/suchipi/hex-engine)

---

⚠️ **WORK IN PROGRESS** ⚠️

Hex Engine is a 2D Game Engine for the browser, written in TypeScript. It is designed to feel similar to [React](https://reactjs.org/).

Hex Engine implements a variant of the popular [Entity-Component-System model](https://en.wikipedia.org/wiki/Entity_component_system), 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](https://brm.io/matter-js/))

- Mouse, Keyboard, and Gamepad input

- First-class support for popular indie game development tools [Aseprite](https://www.aseprite.org/), [Tiled](https://www.mapeditor.org/), and [BMFont](https://www.angelcode.com/products/bmfont/)

- And much, much, more

Hex Engine is inspired by [React](https://reactjs.org/), [Impact](https://impactjs.com/), [Unity](https://unity.com/), and [LÖVE](https://love2d.org/).

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

```ts

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](https://prettier.io/), and I have also contributed to a myriad of other well-known projects, including [Babel](https://babeljs.io/) and [React DevTools](https://github.com/facebook/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](https://hex-engine.dev) for installation and usage instructions.

---

Logo Font is [Silver by Poppy Works](https://poppyworks.itch.io/silver).