how i can erase a part of a sprite

[pranadevil]

hi there people,

 

im just wondering about a way to erase certain parts of a sprite, how i can do that in phaser?

 

any idea or example will be very helpful!

[JazzAceman]

You can use the mask property of the sprite object. You can set a PIXI.Graphics object where you have drawn your desired shape. Everything within this shape will be rendered, everything outside not. Here an example:

...preload: function() {   this.load.image('image', 'images/myImage.png');},create: function() {   var sprite = this.add.sprite(0, 0, 'image');   var mask = new PIXI.Graphics();   mask.position.x = 0;   mask.position.y = 0;   mask.beginFill(0, 1);   mask.moveTo(0, 0);   mask.lineTo(100, 0);   mask.lineTo(100, 100);   mask.lineTo(0, 100);   mask.lineTo(0, 0);   mask.endFill();   sprite.mask = mask;}...

This makes an Rectangle area with a side length of 100 pixels visible and cuts everything outside this area off. If your Sprite is moving, than you must also update your mask's position. 

[pranadevil]

so if for example i have a circle(sprite)  can i with the mouse erase certain parts of it?

[andreialex]

Yes you can do that.

You would need to know the coordinates and how you want to erase ( square, circle, line, ... ).

Also as a start you can use the example from @JazzAceman and just populate the required lineTo.

[pranadevil]

Yes you can do that.

You would need to know the coordinates and how you want to erase ( square, circle, line, ... ).

Also as a start you can use the example from @JazzAceman and just populate the required lineTo.

any example? im pretty interested in the erase shape and erase using the mouse right click

[JazzAceman]

 

so if for example i have a circle(sprite)  can i with the mouse erase certain parts of it?

 

Yes, this this approach would work, but dynamically generated shape-changing paths at runtime with non-primitive form is not so trivial. Perhaps a bitmap-manipulation-based approach could be easyer to manage. You could use Alpha masking and pixel-wise alpha chanel manipulation on a mask image. I can't give you an example since I've never tried something like this before and it's a little bit complicated. But I think this principle would work very fine: You have a complete black alpha mask image and your actual sprite image. Then, on your mask image, you reduce the alpha channel to zero at your mouse position and on the surrounding area (see: BitmapData Object). Then you use this image as an alpha mask for your actual sprite. You can find a example of using alpha masks here:

http://phaser.io/examples/v2/bitmapdata/alpha-mask

 

Another approach, depending on your use case, could be to make your sprite not one big sprite, but a "puzzle" of many small sprites, perhaps organized in a group. Then you check whether the player clicked on one of this small "puzzle pieces". And if so, you can make this piece invisible or delete it. That way you also can have full control over the look of the edges of your pieces. The disadvantage is that the coordinate precision of your erasure is lower since your puzzle pieces should be bigger than pixel size.