hipsterpercaso / hextiles-prototype Goto Github PK

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

Alternative Screenshot: (detached-hextiles branch) checkout the detached-hextiles branch 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

• 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

• 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! :)

• 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.