node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป


hextiles-prototype (0.0.4-dev)

Screenshot: (Master branch) trying a new terrain layout design with connected hexagonal cells and ramps


Alternative Screenshot: (detached-hextiles branch) checkout the detached-hextiles for the original implementation


You will need to pre-install the three.js library (r60 or better) and symlink it into the public folder so that the demo can find the files that it needs (see index.html).

  • this is a single-player demo
  • developer preview: it's a place for me to play with new ideas

Use WASD or cursor keys to move around

Collisions are not implemented.. you can run on the water

  • Best performance on Chrome (solid 60FPS)
  • Firefox peformance is poor (only ~20FPS)
  • Safari is un-tested
  • May or may not work on iPads (i haven't tried it)
  • Probably won't work on other mobile devices (requires a WebGL renderer)
  • just use Chrome/Chromium

Getting started..

  • get node.js
  • npm install hextiles-prototype
  • cd hextiles-prototype
  • type npm install to download dependency modules, you only need to do this once
  • type npm start to start the server running
  • visit http://localhost:8000 in your browser to start the demo

What is good about this demo..

  • the tile generation code uses simplex-noise, and a single blur pass, which is fast and produces varied and tileable heightmaps
  • the tile data is streamed as a buffer onto the client
  • javascript everywhere (the code is not too hard to understand)
  • three.js is a great 3D scene rendering library
  • all hextile geometries are VBO (Vertex Buffer Objects), they run directly on the GPU
  • the lighting looks great (its Phong shaded, but without the specular highlights)
  • camera follows the player (also camera position is smoothed as player turns)
  • the 4 major compass points assist/force the player into alignment when they are within 5 degrees either side of N, S, W or E. (it came to me at the end of a 20-hour hacking session, only took a few minutes to implement & i didn't plan it at all, just coded it, ran a test and it worked really well)
  • and finally, this may inspire others to create something fun.. come on! :)

What could be improved..

  • the terrain could be "smoothed out" or made more interesting by adding vertex-shader and fragment-shader code. (the hexagonal grid is really just the skeletal component of the landscape, it can be enhanced and look much more realistic with some development)
  • code could be a lot cleaner, ~550 LoC in the client.js file (this could probably be reduced to <300 LoC with some re-factoring)
  • sound/audio, there isn't any!

MIT License included where applicable.