Graphics Arc Chomp Animation

Create an animated chomping effect by dynamically updating the angles of a Graphics slice using a Tween counter.

Graphics Arc Chomp Animation, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        this.tweens.addCounter({
            from: 0,
            to: 30,
            duration: 200,
            yoyo: true,
            repeat: -1,
            onUpdate: function (tween)
            {
                const t = tween.getValue();

                graphics.clear();
                graphics.fillStyle(0xffff00, 1);
                graphics.slice(260, 300, 200, Phaser.Math.DegToRad(330 + t), Phaser.Math.DegToRad(30 - t), true);
                graphics.fillPath();

                graphics.fillStyle(0x000000, 1);
                graphics.fillEllipse(260, 180, 30, 90);

                graphics.fillStyle(0xffffff, 1);
                graphics.fillCircle(580, 300, 30);
                graphics.fillCircle(740, 300, 30);
            }
        });

    }
}

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

const game = new Phaser.Game(config);

More in Graphics40 examples