[HTML5] mask + cacheAsBitmap = glitches

#1

Hi,
I am trying to restore as much as I can from a Flash project, and I am working with a moving object behind a mask. The original mask had a gradient to make the object fade away progressively, but for now I have to forget about it.
I noticed that if I activate cacheAsBitmap on the masked object I get glitches, and the masked area is different from the effective mask used.

masking - wrong
masking - wrong.png84×558 45.9 KB

If I disable cacheAsBitmap the result is correct, so it is an easy fix, and I don’t care too much for the performances (for now, in this case).

masking - correct
masking - correct.png84×558 43.9 KB

Oh, I forgot: Lime 5.4.0 + Openfl 6.1.0

#2

Thanks, where are the mask object and cacheAsBitmap object in relationship to each other? Is the mask applied to the cached object, to its parent, or a child?

Thanks :slight_smile:

#3

I have a container for the numbers (that are instances of a class that handles the single number properties): this container is cached as bitmap, and the mask is added upon (or behind, the result is the same) and applied to it.

private var inGameNumbersContainer: MovieClip = new MovieClip();
private var gradientMask: Sprite = new Sprite();

gradientMask.graphics.beginFill( ...
this.addChild(gradientMask);

inGameNumbersContainer.cacheAsBitmap = true;
inGameNumbersContainer.mask = gradientMask;

this.addChild(inGameNumbersContainer);

This configuration creates the glitches.