Isometric Grid System that constrains to a polygonal Zone



I am currently working on an isometric based game which uses a grid where the grid squares are constrained to be placed within it.

Currently I am trying to use a “zone” to try and draw my grid inside of it. This is so that it is flexible for different background sprites and you can just position and setup a zone on every different level and the grid squares will just be mapped automatically.

The issue I have been having for the past week is trying to use matterjs to determine if the grid points are overlapping the zone. If they aren’t then they just get removed. I am using the bounds and region query inside of matterjs but this doesn’t seem to work as the bounds make a square not a polygon.

I have gone about this with arcade physics too before realising that it won’t calculate collisions and overlaps on custom polygons, only boxes. Just wondering if anyone might know the best way to try and either fix what I have done or suggest an alternative way of going about building this. In my mind the problem seems simple to do but in practice doesn’t seem to be heading that way.

I have attached a codepen below with a basic example of my work:

Thank you



So I was overcomplicating the solution and eventually relied on doing it with phaser geom objects. This allowed me to plot points and constrain items to a grid. The solution is far from perfect and needs to be made less specific but seems to be working correctly.

See this codepen for a hardcoded solution: