How to get the polygon of a shape at an angle?

Phaser 3
1

Hi, if I have a Shape, how can I get its corresponding polygon?

Background: the game I’m writing has a room with obstacles, viewed top-down. Each obstacle is a Player.GameObjects.Shape (rectangle, ellipse, etc.) at some angle. I want to use the VisibilityPolygon library so as the player is moving through the room, they can’t see behind the obstacles.

To do this, I need to get the polygons of all my Shapes—in the correct locations and angles.

I’m able to get the correct location but when an angle is applied to the Shape, the polygon isn’t in the right place.

Here’s a CodePen to illustrate: https://codepen.io/bmorearty/pen/rNdYEKB

Here is the logic I’m trying to use to get the polygon of a Player.GameObjects.Shape:

  getPolygon(shape) {
    // Remove last point because it's same as first.
    const path = shape.pathData.slice(0, -2);

    // I also tried getLocalTransformMatrix:
    const matrix = shape.getWorldTransformMatrix();
    const points = new Array(path.length / 2);
    for (let i = 0; i < path.length; i += 2) {
      // I also tried: shape.getLocalPoint(path[i], path[i + 1]);
      const point = { x: path[i], y: path[i + 1] };

      matrix.transformPoint(point.x, point.y, point);
      points[i / 2] = point;
    }
    return points;
  }
2

The local geometry is in shape.geom.points.

Maybe try TransformXY().

3

For anyone coming here later and wanting to know the solution, I figured it out. After transforming each point, the resulting polygon is in the right place for an origin of 0,0. But the original rectangle’s origin was not 0,0. So when you change the angle of the polygon it rotates around 0,0 but changing the angle of the original rectangle rotates around its origin.

Solution: subtract the original rectangle’s origin from every point in the new polygon, and create the new polygon at the same origin as the original rectangle instead of at 0,0.

In the following function, the only changes are these two new lines:

      point.x -= shape.x;
      point.y -= shape.y;

Here’s the whole function:

  getPolygon(shape) {
    // Remove last point because it's same as first.
    const path = shape.pathData.slice(0, -2);
    console.log(shape);

    // I also tried getLocalTransformMatrix:
    const matrix = shape.getWorldTransformMatrix();
    const points = new Array(path.length / 2);
    for (let i = 0; i < path.length; i += 2) {
      // I also tried: shape.getLocalPoint(path[i], path[i + 1]);
      const point = { x: path[i], y: path[i + 1] };

      matrix.transformPoint(point.x, point.y, point);
      point.x -= shape.x;
      point.y -= shape.y;
      points[i / 2] = point;
    }
    return points;
  }

Here’s a new CodePen that illustrates it: