Scratch effect but with different images as a mask

[galerijanamar]

Hi guys, I'm trying to create something like this in Phaser 3 https://codepen.io/andreruffert/pen/pvqly. Thing is that I can do something similar but with the graphics only, I can't use images.  I see that there is bitmapData in phaser 2, is there anything similar in v3?

What I want to do is to get some image of the brush, and use that brush as a tool for "scratching". Can someone give me an idea how to accomplish this in Phaser 3.

Is there any possibility to attach some vanilla canvas element to phaser scene maybe and to do the functionality like in example?

 

Thanks in advance!

[samme]

Look in the Textures examples.

[galerijanamar]

@samme thanks a lot! I've succeeded with renderTexture.

 

If anyone need similar functionality here is the code

 

//texture that we will use as a mask
this.rt = this.make.renderTexture({ x: 0, y: 0, width: 800, height: 640, add: true }).setOrigin(0.0);
let brush = this.add.image(0, 0, 'apple');

let background = this.add.sprite(0, 0, 'backyard').setInteractive();
background.setOrigin(0, 0);

background.mask = new Phaser.Display.Masks.BitmapMask(this, this.rt);


this.input.setDraggable(background);

this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
  //this is needed to calculate dots between two mouse positions so you have smooth scratch
  let points = pointer.getInterpolatedPosition(10); 
    
  points.forEach( (p) =>  this.rt.draw(brush.texture, brush.frame, p.x-brush.width / 2, p.y-brush.height / 2) );
});

 

[prob]

This is nice, thanks for the example.  Have you tried implementing the getFilledInPixels function in the original example?

[galerijanamar]

Not yet, that's next thing. I assume it will be the same. Will post it here if you need it when I'm done.

 

P. S. For getInterpolatedPosition you must use the newer version of Phaser (I've tried with 3.11) because I've tried first with 3.8 and it didn't work

[galerijanamar]

So I can't solve the issue of reading the pixels. This renderTexture is working currently just for the WebGl (there is an open issue https://github.com/photonstorm/phaser/issues/3862).

So when I want to readPixels I can read them just if I turn on preserveDrawingBuffer to true in config. But the thing is that alpha is always set to 255. As I found on the web, it seems that phaser create webgl context alpha channel so default is 255. How can I overcome this issue and do this functionality of calculating "scratched" percentage?