Jump to content

Masking sprite a to sprite b.


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



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.drawCircle(0, 0, 90);

    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


  • Recently Browsing   0 members

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