JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
editor
examples
lib
src
.eslintrc
.gitattributes
.gitignore
LICENSE
README.md
editor.png
gulpfile.js
hex-grid-basic.jpg
hex-grid.jpg
package.json

README.md

3D hex tile system

screenshot

I never found a good (and free!) library for creating perfect hexagons and arranging them in a grid. But I did find Amit's wonderful explanation, and finally had the time to throw something together.

You can use the Board class with different graph types (hex and square), or you can make your own if you implement the interface.

Please use this to make awesome hex-based web games. Or port the code and make awesome hex games there. Just make awesome hex games, ok?

Features

  • Simple API for attaching objects to the grid through Board.js
  • A pathfinding* with or without weighted nodes, and a walkable flag
  • Make maps with the editor (autosaves to localstorage, and save/load as .json files)
  • Varied height
  • Sparse maps
  • Mouse interaction with the grid's cells (over, out, down, up, click, wheel)
  • Programmatic geometry, allow you to precisely adjust every aspect of the hexagon
  • Square grid that can be used interchangeably
  • Include only the hex grid by downloading dist/hex-grid.js, or all grid types with von-grid.js, etc

Roadmap

  • Improved editor
  • Improved API
  • Abstract grid

Usage

Basic board

screenshot

var scene = new vg.Scene({ // I made a very handy util for creating three.js scenes quickly
	cameraPosition: {x:0, y:150, z:150}
}, true); // 'true' or a config object adds orbit controls

var grid = new vg.HexGrid();

grid.generate({
	size: 4
});

var board = new vg.Board(grid);

board.generateTilemap();

scene.add(board.group);
scene.focusOn(board.group);

update();

function update() {
	scene.render();
	requestAnimationFrame(update);
}

Examples

For the simple examples you can drop them into Chrome, but for ones that require images or models, you'll have to run gulp serve-examples. A browser tab will be opened to the examples directory for you.

Editor

Try it out

screenshot