Shapes - samme/phaser3-faq GitHub Wiki

The Shape game objects are Arc, Curve, Ellipse, Grid, Isobox, Line, Polygon, Rectangle, Star, and Triangle. (These are different to the Geom shape classes, which aren't game objects at all.)

Shapes have a default origin of (0.5, 0.5). For some shapes (Line, Polygon, Triangle) it can be hard to figure out where the center is.

Shapes have natural dimensions (width and height) so they're easy to use with input and physics. They can be scaled like sprites, where

(width, height) * (scaleX, scaleY) == (displayWidth, displayHeight)

For some shapes you can use setSize() or setTo() to resize their geometry data:

rectangle.setSize(width, height);

triangle.setTo(x1, y1, x2, y2, x3, y3);

For shapes without those methods you may be able to hack it:

// Modify the geometry
shape.data /* … */

shape.updateDisplayOrigin();
shape.updateData();

Most shapes have a fill style and stroke style that can be changed at any time. There are no default styles, so if you don't set any you won't see anything.

// OOPS no fillStyle
this.add.circle(0, 0, 10);

// Filled
this.add.circle(0, 0, 10, red);

// Unfilled, stroked
this.add.circle(0, 0, 10).setStrokeStyle(5, orange);

Shapes can't be tinted and have a single alpha value.