Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vonWolfehaus/von-grid
Hexagonal & square tile grid system with three.js
https://github.com/vonWolfehaus/von-grid
2d 3d game-library grid-system hex-grid hexagon javascript threejs tile-engine tilemap
Last synced: about 1 month ago
JSON representation
Hexagonal & square tile grid system with three.js
- Host: GitHub
- URL: https://github.com/vonWolfehaus/von-grid
- Owner: vonWolfehaus
- License: mit
- Archived: true
- Created: 2015-02-12T03:05:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-06-15T06:56:23.000Z (about 3 years ago)
- Last Synced: 2024-06-17T09:34:05.722Z (3 months ago)
- Topics: 2d, 3d, game-library, grid-system, hex-grid, hexagon, javascript, threejs, tile-engine, tilemap
- Language: JavaScript
- Homepage:
- Size: 3.15 MB
- Stars: 382
- Watchers: 27
- Forks: 73
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - vonWolfehaus/von-grid - Hexagonal & square tile grid system with three.js (javascript)
README
# NOTE: This repo is no longer maintained
Feel free to fork and do whatever. There is a dev branch that has an incomplete rewrite, but everything here is so old that even I don't get what I was thinking. Enjoy!
# 3D hex tile system
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](http://www.redblobgames.com/grids/hexagons/), 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](http://vonwolfehaus.github.io/von-grid/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
```javascript
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](http://vonwolfehaus.github.io/von-grid/editor/)
