Isometric Grid System that constrains to a polygonal Zone

Phaser 3
1

Hi,

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:
https://codepen.io/jaymeh/pen/MRpoQN

Thank you

2

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: https://codepen.io/jaymeh/pen/vMJKeN

3

This sounds similar to a problem I’ve been trying to solve. I created a custom shape object in Tiled. It fits the contour of the tiles but it’s not a simple rectangle. I want to select all the tiles that are inside the custom shape as an array so I can manipulate those specific tiles. I’ve been struggling to find an easy solution with matterjs. I’ll have to take a look at your solution later to see if it applies to my situation.

Thanks for documenting your process.

4

Glad I could help. Further to this issue although using the Geoms does seem to work. Someone mentioned trying to use the isSensor property within MatterJS. Attached API documentation below:
http://brm.io/matter-js/docs/classes/Body.html

Using matter would seem to suit us better because you seem to have better control over sprite bodies and shapes. I plan to try using PhysicsEditor for these sprites in the future.

I haven’t tried this yet as I am working on other aspects of my game but will update again with my findings over the next month or two.

Thanks