Physical body in the shape of an ellipse

Phaser 3
1

Hello, I just started to learn Phaser. I am interested in how to make a physical body in the form of an ellipse. I need it to check for a collision. I am trying to repeat FTL (Faster Than Light). Ships have an elliptical shield.
Now I create a shield like an ellipse and make it a graphic.
Like this:

createShield() {
this.ellipse = new Phaser.Geom.Ellipse(this.ship.width / 2, this.ship.height / 2, this.ship.width + 200, this.ship.height + 150);
this.shield = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 } });
this.shield.strokeEllipseShape(this.ellipse, 64);
}

image
image1903×749 365 KB

I understand that I should use MATTERJS physics, but I do not understand how to make an ellipse body.

Repository with code (but it’s easy to get confused)
thank you

2

I was able to create an elliptical body like this:

//(x, y, width, hieght)
const ellipse = this.add.ellipse(this.ship.width / 2, this.ship.height / 2, this.ship.width + 200, this.ship.height + 150);

const point = ellipse.pathData.join(' ')

this.shield = this.matter.add.fromVertices(this.ship.width / 2, this.ship.height / 2, point, { isStatic: true })

and another option:

const ellipse = this.add.ellipse(this.ship.width / 2, this.ship.height / 2, this.ship.width + 200, this.ship.height + 150);
ellipse.setStrokeStyle(2, 0x1a65ac);
const points = ellipse.pathData.join(’ ')
this.shield = this.matter.add.gameObject(ellipse, {
shape: { type: ‘fromVerts’, verts: points, flagInternal: true }})

the truth is I can’t get to collide with other bodies.
maybe someone will tell you how to achieve this (now other bodies go right through whatever I do)
2 Likes
3

I had the same problem just now. Going off your final answer, I was able to get collisions to work by removing the last point (the last x/y pair) from the list of vertices. The last point is identical to the first point, and Matter apparently doesn’t like this.

The change in this code is the slice(0, -2):

const ellipse = this.add.ellipse(
  this.ship.width / 2, this.ship.height / 2, this.ship.width + 200, this.ship.height + 150
);
ellipse.setStrokeStyle(2, 0x1a65ac);
const points = ellipse.pathData.slice(0, -2).join(' ');
this.shield = this.matter.add.gameObject(ellipse, {
  shape: { type: 'fromVerts', verts: points, flagInternal: true }
});

P.S. On an unrelated note, I can’t figure out what flagInternal does.