How to lay hex grid over a map?

[michi]

Hi,

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?

 

 

 

[GameMonetize]

You can create a plane with the hex grid texture on it and use plane.renderGroupId = 1. This way it will always be rendered in a top layer

[michi]

Thanks Deltakosh, I'll try that.

 

Do you know how I can do the highlighting of the hexagon the mouse cursor points to?

[GameMonetize]

A decal could work for this...Or another small plane with renderingGroupId = 2

[Wingnut]

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. 

[michi]

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.

[michi]

Here's a screenshot of the result. 

[GameMonetize]

Wooot!! This makes me motivated to play Civ5 again:)