Search code examples
masking

createjs combine 2 shapes in a mask

I have a symbol S1 with two shapes (lets say sh0 and sh1). On the stage I have an instance of another symbol mc. At run time, I will create an instance mc1 of the symbol S1. Using createjs, how can I use mc1 as a mask for mc?

Solution

  • I assume when you say "symbol", you mean a graphic or MovieClip in Adobe Animate. Unfortunately, you can only use a CreateJS "Shape" as a mask directly. There are a few options:

    1. Combine the shapes into one yourself.

    2. Combine the instructions. This is a bit dirty, but you could in theory concat the graphic instructions from one shape into another. I suspect this would have issues if the Shape instances have different x/y positions.

    symbol.shape1.graphics._instructions.concat(symbol.shape2.graphics._instructions);
    1. Cache the symbol as use it as a Mask with AlphaMaskFilter. The example in the documents should get you what you want.
     var box = yourSymbol;
 box.cache(0, 0, 100, 100);

 var bmp = new createjs.Bitmap("path/to/image.jpg");
 bmp.filters = [
     new createjs.AlphaMaskFilter(box.cacheCanvas)
 ];
 bmp.cache(0, 0, 100, 100);

    The 3rd is probably your best option, but it is limiting and can be performance intensive due to the use of the filter (especially if content changes and you have to update it constantly).

    Feel free to post more details on what you are working with in order to get a better recommendation.

    Cheers.