I need a hexagon grid allowing each cell to be interactive. To allow for this grid to be altered, moved, or rotated and still be able to interact with it.

Screenshot of hexagon grid in Phaser 3
Hexagon grid with click handlers for each cell.

I had an idea for a Phaser game, another one which I’ll probably never finish but have some fun starting it.

I need a hexagon grid allowing each cell to be interactive. My search led me to Draw a hexagonal grid in C#. The click handling I thought would be better in Phaser 3 using a polygon object and placing those within a container.

Hex Grid Scene

Live demo Phaser 3 interactive hexagon grid

I placed the hexagons in a container as the container can be move, rotated, resized.

I am still looking over the math on the placement of the hexagon polygons as the spacing is still not as perfect as I’d like but close enough for now.

My Phaser 3 Examples project is using Phaser 3.21.0 while 3.23 is the current version. I will get that version in and tested to make sure nothing has broken with the latest versions.

Github Phaser-3-documented-examples

Leave a comment

Your email address will not be published. Required fields are marked *