Graphics And Shapes

// Draw a filled rectangle and stroked circle with Graphicsconst gfx = this.add.graphics();
gfx.fillStyle(0x00aa00, 1);gfx.fillRect(50, 50, 200, 100);
gfx.lineStyle(3, 0xff0000, 1);gfx.strokeCircle(400, 150, 60);

// Same shapes as standalone Shape game objectsconst rect = this.add.rectangle(150, 100, 200, 100, 0x00aa00);const circle = this.add.circle(400, 150, 60);circle.setStrokeStyle(3, 0xff0000);

const gfx = this.add.graphics();
// Solid fill — call before any fill* methodgfx.fillStyle(0xff0000, 1);          // (color, alpha)
// Line style — call before any stroke* methodgfx.lineStyle(4, 0x00ff00, 1);       // (width, color, alpha)
// Gradient fill (WebGL only) — 4 corner colorsgfx.fillGradientStyle(    0xff0000, 0x00ff00, 0x0000ff, 0xffff00,  // tl, tr, bl, br colors    1, 1, 1, 1                                 // tl, tr, bl, br alphas);gfx.fillRect(0, 0, 300, 200);
// Gradient line style (WebGL only)gfx.lineGradientStyle(2, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);

const gfx = this.add.graphics();
// Rectanglesgfx.fillStyle(0x0000ff);gfx.fillRect(x, y, width, height);gfx.lineStyle(2, 0xffffff);gfx.strokeRect(x, y, width, height);
// Circlesgfx.fillCircle(x, y, radius);gfx.strokeCircle(x, y, radius);
// Ellipsesgfx.fillEllipse(x, y, width, height, smoothness);gfx.strokeEllipse(x, y, width, height, smoothness);   // smoothness defaults to 32
// Trianglesgfx.fillTriangle(x0, y0, x1, y1, x2, y2);gfx.strokeTriangle(x0, y0, x1, y1, x2, y2);
// Points (draws a small square)gfx.fillPoint(x, y, size);                             // size defaults to 1
// Linesgfx.lineBetween(x1, y1, x2, y2);

const gfx = this.add.graphics();
// Uniform radius (default 20)gfx.fillStyle(0x333333);gfx.fillRoundedRect(50, 50, 300, 200, 16);gfx.lineStyle(2, 0xffffff);gfx.strokeRoundedRect(50, 50, 300, 200, 16);
// Per-corner radiusgfx.fillRoundedRect(50, 50, 300, 200, {    tl: 20, tr: 20, bl: 0, br: 0});
// Concave corners (negative values)gfx.fillRoundedRect(50, 50, 300, 200, { tl: -10, tr: -10, bl: -10, br: -10 });

const gfx = this.add.graphics();
// Manual pathgfx.lineStyle(3, 0xffff00);gfx.beginPath();gfx.moveTo(100, 100);gfx.lineTo(200, 50);gfx.lineTo(300, 100);gfx.lineTo(250, 200);gfx.closePath();gfx.strokePath();       // or gfx.stroke() — alias for strokePath
// Fill a pathgfx.fillStyle(0x00aaff);gfx.beginPath();gfx.moveTo(100, 100);gfx.lineTo(200, 50);gfx.lineTo(300, 100);gfx.closePath();gfx.fillPath();         // or gfx.fill() — alias for fillPath
// Arc within a path (angles in radians)gfx.beginPath();gfx.arc(200, 200, 80, 0, Math.PI / 2, false, 0);   // (x, y, radius, startAngle, endAngle, anticlockwise, overshoot)gfx.strokePath();
// Pie slicegfx.slice(200, 200, 80, 0, Math.PI / 3, false);     // auto begins/closes pathgfx.fillPath();
// Stroke/fill from point arraysgfx.strokePoints(points, closeShape, closePath, endIndex);gfx.fillPoints(points, closeShape, closePath, endIndex);

const circle = new Phaser.Geom.Circle(200, 200, 50);const rect = new Phaser.Geom.Rectangle(50, 50, 100, 80);
gfx.fillCircleShape(circle);gfx.strokeCircleShape(circle);gfx.fillRectShape(rect);gfx.strokeRectShape(rect);gfx.fillTriangleShape(triangle);gfx.strokeTriangleShape(triangle);gfx.strokeLineShape(line);gfx.fillEllipseShape(ellipse, smoothness);gfx.strokeEllipseShape(ellipse, smoothness);

const gfx = this.add.graphics();
gfx.save();gfx.translateCanvas(100, 100);gfx.rotateCanvas(0.5);           // radiansgfx.scaleCanvas(2, 2);gfx.fillStyle(0xff0000);gfx.fillRect(0, 0, 50, 50);     // draws at translated/rotated/scaled positiongfx.restore();

const gfx = this.add.graphics();gfx.fillStyle(0xff0000);gfx.fillCircle(32, 32, 32);gfx.generateTexture('redCircle', 64, 64);gfx.destroy();
// Now use as a regular texturethis.add.image(400, 300, 'redCircle');

// Shapes set fill via constructor or setFillStyleconst rect = this.add.rectangle(200, 150, 100, 80, 0xff0000, 1);
// Change fill laterrect.setFillStyle(0x00ff00, 0.8);
// Add stroke (not set by default)rect.setStrokeStyle(3, 0xffffff, 1);  // (lineWidth, color, alpha)
// Remove fill or strokerect.setFillStyle();    // no args = isFilled becomes falserect.setStrokeStyle();  // no args = isStroked becomes false
// Direct property accessrect.fillColor = 0x0000ff;rect.fillAlpha = 0.5;rect.strokeColor = 0xffffff;rect.strokeAlpha = 1;rect.lineWidth = 2;rect.isFilled = true;rect.isStroked = true;rect.closePath = true;   // close stroke path (default true)

const star = this.add.star(400, 300, 5, 32, 64, 0xffff00);
star.setPoints(8);          // change number of pointsstar.setInnerRadius(20);    // change inner radiusstar.setOuterRadius(80);    // change outer radius

const line = this.add.line(400, 300, 0, 0, 200, 100, 0xffffff);
// setLineWidth(startWidth, endWidth) — endWidth is WebGL only (tapering effect)line.setLineWidth(4, 1);   // tapers from 4px to 1px (Canvas uses startWidth only)

const grid = this.add.grid(400, 300, 320, 240, 32, 32, 0x222222);
// Alternating cell color (checkerboard)grid.setAltFillStyle(0x444444, 1);  // no args = disable alternating cells
// Grid uses setStrokeStyle for cell outlines (inherited from Shape)grid.setStrokeStyle(1, 0x666666, 1);
// v4: control outside edge strokegrid.strokeOutside = true;             // stroke the outer bordergrid.strokeOutsideIncomplete = false;  // skip partial cells on right/bottom edges
// Cell padding (default 0.5) — gutter between cells is 2x this valuegrid.cellPadding = 1;

const box = this.add.isobox(200, 200, 48, 32, 0xeeeeee, 0x999999, 0xcccccc);
box.setFaces(true, true, false);  // showTop, showLeft, showRightbox.setProjection(4);             // isometric projection value
const tri = this.add.isotriangle(400, 200, 48, 32, false, 0xeeeeee, 0x999999, 0xcccccc);
tri.setReversed(true);            // flip upside downtri.setFaces(true, true, true);tri.setProjection(4);