Jump to content

How to lay hex grid over a map?


Recommended Posts


I want to create a game with a hex grid map.

The map itself should be created with blender (simple ground with some hills and few trees and houses).


My problem is that I don't know how to lay a hex grid over the map (as seen below).

It would also be nice, if the hexagon under the mouse cursor would be highlighted.


What would be the best way to achieve this?





Link to comment
Share on other sites

Good idea, DK.


Hi Michi, welcome aboard the forum... your scene looks nice!


Just for fun, you might try creating an un-capped 6-sided cylinder (you'll probably need to hack our vertexData.createCylinder to turn-off the caps), do a bunch of createInstance of it, and spread them across the map at proper positions.  Mesh spread.  :)


THEN... having a hex cell become highlighted when onMouseOver... is easier... maybe.  We might need to "transparentize" the caps but still keep them on the hex cylinders... so the actionManager onMouseOver can get good mesh picking. 


I am reasonably new to 3D and BABYLON, but I have made some unique particleSystem "hacks".  Particle systems are great because they place all their "geometry" into a single vertexBuffer... and then use transformCoordinates on each geometry... to position/rotate the subMesh.  I don't know if "subMesh" is the correct word.  Maybe "sub-section" of the vertexBuffer/positionsKind array.


The main thing is... check out our particleSystem.  The reason it runs SO FAST, is because of that single vertexBuffer system.  Each particle for the Babylon particleSystem... uses 4 points... it is a quad.  Each of YOUR particles... will have 12-14 points depending upon if they are capped or not, and depending upon IF the walls of the cylinders have thickness.


Particles "spray", don't they?  But they don't need-to.  Check this out... http://www.html5gamedevs.com/topic/12909-volumetric-fog/#entry74586  (view the demo)


Here, I lightly-hacked the standard BABYLON particleSystem.  (I brought it into the playground editor and started breaking it). I was easily able to place the 29000 particles... exactly where I needed them, without any "spraying".


Anyway, I mention this.... because... you COULD modify the particleSystem... and do the single vertexBuffer dance... and still get great speeds with a non-texture hex grid.  You could even spin grid cells, and change their colors and make them earth quake, all sorts of fun.  It would probably be less than 300 hexagon-shaped particles, and JS could blaze-thru a vertexData.positionKind array in the blink of an eye... and easily make all your hex cells fall from the sky and land with a funny bounce, flash them in random colors, while dancing and spinning, while shrinking and expanding, while... well... you know.  Dazzle!


If JS can fly and rotate our particles with great speed (and it can), then your hex particles can do anything they want... and not worry about performance.


Just a thought.  The BABYLON particle system ROCKS!  BIGTIME!  I love it.  It can be leveraged into obeying all sorts of demented orders.  :)

Link to comment
Share on other sites

  • 2 weeks later...

Thank you for your answers. :)


Now I've set up the hex grid using a 6-sided cylinder and Blender's array modifier.

The cylinder has a multi-material with two materials inside: one for the sides and one for the cap.

In the executeWhenReady function of the scene, I iterate through the cylinders and setup each cylinder's actionManager too set the cap's alpha value to 1.0 when the mouse is over the mesh.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...