Jump to content

Scratch Demo not working

Fractal Games

Recommended Posts

Hey everyone,

We are currently developing a scratch game and have started using Phaser 3 for the first time (wohoo!). The scratching effect should work on CANVAS as well (or only CANVAS is also fine).

I saw this demo CLICK  , but it is not working. I also tried the approach in this topic CLICK without any luck. 

Currently I am using the code from this demo: CLICK which looks something like this:

this.scratchBG = this.add.sprite(this.sys.game.canvas.width / 2, 
                                 this.sys.game.canvas.height / 2,

this.texture = this.textures.createCanvas('canvastexture', this.scratchBG.width, this.scratchBG.height);
this.scratchFG = this.textures.get('scratch-cover').getSourceImage();
this.brush = this.textures.get('brush').getSourceImage();

this.texture.draw(0, 0, this.scratchFG);
this.texture.context.globalCompositeOperation = 'destination-out';


this.input.on('drag', (pointer) => {
      this.texture.draw(pointer.x, pointer.y, this.brush);

The scratching works, but I have a few problems with this approach. 

1. I cannot reposition the 'canvastexture' element

2. I cannot set scale or rotation to the brush. 

3. Is there a wait to check pixels for percentage of revealed area?

And more generally, Is my approach correct? Any suggestions will be much appreciated. The final goal is something like this: CLICK

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...