# Interaction points on hexagonal grid

Hello all, I’m very new to Babylon and I apologize if I don’t have a working playground.
I am working on a hexagonal grid exactly like the game Settlers of Catan.

Imagine a map like the one in the screenshot below (screenshot of another tutorial), I can’t figure out how to create interaction/snapping points at the intersection of the hexagons and along the edges.
What I am trying to achieve is being able to snap another object at the vertex and along the edges of each hexagon (I marked only two in red, but it applies to the whole map)

I’ve looked around tutorials on the web without much luck.
An idea was to create a mesh in blender with all that information already built in:
I was thinking that I could create rectangular and circular shapes for each point of interaction I want,
then make them invisible, and later handle mouse over events in Babylon

But this can get complicated very quickly, especially in large grids with 30 or more hexagons…
I feel like there must be a better way, as in defining all the interaction points directly in Babylon.

The final result I would like to achieve is similar to what we can see in this Connect6 demo build in three.js
As you can see, you can interact with the grid by placing a stone at each intersection of lines, or seen in another way, at each corner of the squares in the grid.
I would love to do the same on a hexagonal grid with the addition of being able to interact with edges as well.

You can use the algorithm that places the hex tiles to help you placing the points I set up a simple example here, where I just set up a point on the “bottom” of each hexagon, I start by placing the spheres on the position of each hexagon, then translate that by half of the hexagon height in the z axis: Fun With Hex Tiles | Babylon.js Playground (babylonjs.com)

Hello @carolhmj,
thank you for your response!

That helped me getting started:

What I’m doing here essentially is create a sphere for each corner of each hexagon…
But I don’t think this is the most efficient way, as most of the spheres (screenshot) will be duplicated:
for each adjacent hexagon.

You can see this in the inspector

Eventually I will have to make this objects invisible and clickable - here is were the player should put their piece. But that would be a problem with overlapping spheres…

Take a look at the hexagonal grids algorithms pages: Hexagonal Grids (redblobgames.com), you’ll be able to tweak them to place the spheres instead of the hexagons
I think the easiest way to place them would be in “lines” like these:

Could be by columns too, that’s another way

@kagedaf232 adding to @carolhmj 's suggestion, I library I’m using that’s inspired by the Red Blob Games hex grid pages is Honeycomb:

2 Likes

I’ve used Honeycomb before as well. This demo is instancing and colouring hundreds of hexagons::
brianzinn.github.io/react-babylonjs/examples/basic/instanced-mesh-hex/

3 Likes