Pacman Arc

Demonstrates how to use the Graphics.slice method to draw a partial circle, creating a filled Pacman-style shape.

800 × 600

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        graphics.fillStyle(0xffff00, 1);

        graphics.slice(400, 300, 200, Phaser.Math.DegToRad(340), Phaser.Math.DegToRad(20), true);

        graphics.fillPath();
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Graphics40 examples

Phaser Logo ShiftDemonstrates complex Graphics transformations, color cycling, and manual vector drawing to create an animated, multi-layered logo effect.

Primitive Graphics ShapesDemonstrates how to draw basic shapes using the Graphics object, including rectangles, circles, and ellipses with custom fill and line styles.

Pseudo-3D Graphics LogoDemonstrates a pseudo-3D stacking effect by rendering multiple layers of a vector-drawn logo using Graphics transformations, coordinate offsets, and HSV color cycling.

Rendering Thousands of Circles with GraphicsDemonstrates how to efficiently draw and animate 2,000 individual circles using a single Graphics object within the update loop.