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?
- Simple API for attaching objects to the grid through
Board.js - A pathfinding* with or without weighted nodes, and a
walkableflag - Make maps with the editor (autosaves to localstorage, and save/load as
.jsonfiles) - 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 withvon-grid.js, etc
- Improved editor
- Improved API
- Abstract grid
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);
}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.
