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
any leads?
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.
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
1 Like
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();
}