Jump to content

Masking sprite a to sprite b.


techsin
 Share

Recommended Posts

First of all what i am trying to do:

Imagine a fiery ball that goes near thing that make them appear lighter...

i am trying to make a glowing ball that blends with certain objects. So imagine a scene in which there is a background, some other stuff, and rocks. A glowing ball follows mouse with opacity halfed. now this ball of light needs to blend in addition to being opaque with rocks and not with background and other stuff.

 

My approach:  not saying it's the best but i intended to make two glow balls one that was opaque and one that would blend with objects and would remain masked out other wise. It's mask would be all object that it need to appear on.

 

But there is not a way i can find to do it.

 

I would like to have a group of sprites to which i can masks this so this firy ball only appears when it's over them.

 

doing this gives error

 

fireball.mask=sprite_object.  

Link to comment
Share on other sites

  • 1 month later...

Real new to all this but I was having this same question and got something to work.

 

You could use alphaMask to use another sprite as a mask: http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask

 

If you really want to use 'mask' you could create a graphic and use that to mask.

 

   
    masked = game.add.group(); // This group holds all masked objects
    bg = masked.create(0, 0, 'pic'); // add all your elements here

 

    // Set up the mask
    bgMask = game.add.graphics(0, 0);
    bgMask.beginFill();
    bgMask.drawCircle(0, 0, 90);
    bgMask.endFill();

    masked.mask = bgMask; // mask it

 

 

Probably a terrible approach for a full game. If you can use webGL you might want to check out all the filters out there like this one: http://examples.phaser.io/_site/view_full.html?d=filters&f=lightbeams.js&t=lightbeams

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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