Fractal Games Posted March 20, 2019 Share Posted March 20, 2019 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, 'scratch-bg').setInteractive(); 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.setDraggable(this.scratchBG); 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 More sharing options...
Recommended Posts