Generate Texture from Graphics

Demonstrates how to convert a Graphics object into a reusable texture that can be applied to Images or Sprites.

800 × 600

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.make.graphics().fillStyle(0x00ff00).fillRect(0, 0, 800, 100);

        graphics.generateTexture('hudbar', 800, 100);

        graphics.destroy();

        this.add.image(400, 300, 'hudbar');
    }
}

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

const game = new Phaser.Game(config);

More in Graphics40 examples

Generate Texture from GraphicsDemonstrates how to draw shapes using a Graphics object and convert them into a reusable texture that can be applied to an Image Game Object.

Generate Texture to TileSpriteDemonstrates how to draw shapes with Graphics, convert them into a reusable texture key, and apply that texture to a scrolling TileSprite.

Graphics ArcDemonstrates how to draw a curved arc using the Graphics object, specifying the center position, radius, start and end angles, and direction.

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