Jump to content

how i can erase a part of a sprite


Recommended Posts

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. 

Link to comment
Share on other sites


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:



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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...