/honeycomb

Create hex grids easily, in node or the browser.

Primary LanguageTypeScriptMIT LicenseMIT

⬡ Honeycomb NPM version Minified size Gitter

A hexagon grid library made in JavaScriptTypeScript, heavily inspired by Red Blob Games' blog posts and code samples.

Honeycomb works in modern browsers and Node (>=16). It's recommended to use Honeycomb with TypeScript, but not required.

ko-fi

Installation

NPM:

npm i honeycomb-grid

Yarn:

yarn add honeycomb-grid

Or download the distribution from jsdelivr or unpkg.com.

Basic example

Create a rectangular grid of 10 by 10 hexes and log each hex:

import { defineHex, Grid, rectangle } from 'honeycomb-grid'

// 1. Create a hex class:
const Tile = defineHex({ dimensions: 30 })

// 2. Create a grid by passing the class and a "traverser" for a rectangular-shaped grid:
const grid = new Grid(Tile, rectangle({ width: 10, height: 10 }))

// 3. Iterate over the grid to log each hex:
grid.forEach(console.log)

Documentation

Documentation is available at abbekeultjes.nl/honeycomb. API docs can be found at abbekeultjes.nl/honeycomb/api/.

Backlog

These are ideas that may require further investigation 🕵️. Don't hesitate to open an issue or start a discussion.

  • Directions should also be given in degrees (in steps of 30°)?
  • Add functionality related to edges and/or corners. Use https://www.redblobgames.com/grids/parts/#hexagons.
  • Add path finding (e.g. A*) functionality. Currently available as an example, see /examples/a-star-path-finding/.
  • Clarify the "Line of sight" example (and rename to "Field of view"). Maybe add animations and some enemies as well?
  • Add examples for (procedural) map generation (from a seed).