Graphics in a Container

Demonstrates how to add a Graphics object to a Container and draw shapes using coordinates relative to the container's position.

Graphics in a Container, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    create ()
    {
        const container = this.add.container(200, 200);

        const graphics = this.add.graphics();

        container.add(graphics);

        graphics.fillStyle(0xffff00, 1);

        //  Remember that the coordinates given here are now relative to those
        //  of the Container, not the screen
        graphics.fillRoundedRect(0, 0, 100, 100, 32);
    }
}

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