Phaser 3 How to erase image like in scratch cards using mouse?

Phaser 3
1

hello guys im new to phaser and im trying to create a scratch card game where i can erase an image using a mouse pointer down_?should i use texture render?

1 Like
2

any leads?

3

This is only a suggestion, but I’ve seen colouring or art games where you can paint or fill made with Phaser, don’t know names off the top of my head. I would try looking up games like that and trying to apply that concept.

4

I don’t know for sure, but I would guess that you’d be able to draw whatever the user has “erased” to a graphics, make that a texture, then use that texture as a mask?

Actually it looks like there are a couple examples that do this:
https://labs.phaser.io/view.html?src=src/game%20objects\render%20texture\erase%20part%20of%20render%20texture.js

and

https://labs.phaser.io/view.html?src=src/game%20objects\render%20texture\erase%20part%20of%20render%20texture%20canvas.js

1 Like
5

I did this in P2 with a bitmap. Still wrapping my head around P3 and haven’t got to converting this yet. if someone successfully converts it I’d appreciate them posting their solution here.

    //background: it's a function here because I had random scratchcards that would be chosen. I won't bother posting that function--it was just a random selector.
               this.back = this.getBack();
//silver is the silver scratchcard stuff to scratch
    		this.silver = this.add.bitmapData(200, 200);
    		this.silver.context.fillStyle ="silver";
    		this.silver.context.fillRect(0, 0, 400, 400);
    		this.silver.update();
       		this.silver.x = 400;
                    this.silver.y =  200;
    		this.silver.addToWorld(this.silver.x, this.silver.y);
    	//currently they haven't finished scratching
    		this.finished = false;
      //set the minimum scratch ratio: a  higher number is less of overall scratched 
    		this.minscratchRatio = 0.2;
    		this.game.input.onUp.add(this.testscratchRatio, this);

//now we test the scratchRatio to see how much of the area has been scratched.

	scratchRatio : function (ctx) {
            var scratchPixels = 0;
             var data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
                     for(var i = 3; i< data.length; i += 4) {
                          if(data[i] > 0) scratchPixels++;
                 }

    return scratchPixels / (ctx.canvas.width * ctx.canvas.height);
  },

	testscratchRatio: function(){
    if(!this.finished && this.scratchRatio(this.silver.ctx) < this.minscratchRatio){
          this.finished = true;
		 	this.back.kill();
			this.silver.clear();
			//you've scratched it off.
		}
		else{
		//lost
		   console.log("loser");
			
			this.back.kill();
			this.silver.clear();
			
		}
6

CanvasTexture is like Phaser 2 BitmapData.

http://phaser.io/examples/v3/search?search=canvas+texture