Using a png to mask a shape

#1

Hi, I would like to use a png to mask out over a background shape as illustrated in the image below.

so far I have tried the below where _mask is the loaded image:

// file.type == FileType.IMAGE

var _mask:Bitmap = new Bitmap(file.data);
addChild(_mask);

_shape = new Sprite();
_shape.graphics.beginFill(0x0000FF, 1);
_shape.graphics.drawRect(0, 0, _mask.width, _mask.height);
_shape.cacheAsBitmap = true;
addChild(_shape);

_shape.mask = _mask;

At the moment the mask includes the transparent pixels so I just get a blue square.

#2

I could get it working only on flash target (I’m using openfl 4, there was massive bitmap refactor between 3 and 4, maybe it works on 3):

var _mask:Bitmap = new Bitmap(file.data);
_mask.cacheAsBitmap = true;

_shape = new Sprite();
_shape.graphics.beginFill(0x0000FF, 1);
_shape.graphics.drawRect(0, 0, _mask.width, _mask.height);
_shape.cacheAsBitmap = true;
_shape.mask = _mask;

addChild(_shape);
addChild(_mask);
#3

This is on the TODO list, it requires a custom shader to support

#4

Thanks, so is there a way for me to ignore transparent pixels in a png for mouseEvents which is the problem I was trying to solve here? This is for a HTML5 target.

#5

Thanks, I am going to use bitmapData.getPixel32(x,y) which will solved this problem very nicely. If the value returned is 0 then I know that the pixel is transparent and do nothing.

#6

Personally, I’d suggest copyChannel():

var maskData:BitmapData = file.data;
var _mask:Bitmap = new Bitmap(maskData);
addChild(_mask);

var shapeData:BitmapData = new BitmapData(maskData.width, maskData.height, true, 0xFF0000FF);
var rect:Rectangle = new Rectangle(0, 0, maskData.width, maskData.height);
shapeData.copyChannel(maskData, rect, new Point(), BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);

_shape = new Bitmap(shapeData);
addChild(_shape);
#7

Thanks, is there a reason that you would prefer to use copyChannel();

#8

I think we have hit testing for transparent pixels supported already in the core of OpenFL, but perhaps not for masks, yet

#9

It copies everything at once, and it only touches the channel you care about, which ought to make it faster. But if your implementation is already fast enough, then I guess you don’t have to worry about it.

#10

I am not using trying to use a mask anymore. I am using getColorBoundsRect() and cropping the bitmapData to the area that contains no transparent pixels. Then I am using transform.colorTransform to change the color.

#11

It is working but I have not tested the speed yet. A faster solution is always welcome. I will take a look at copyChannel(), thanks for the input.

#12

Updating to openFL 4.0.3 and lime 3.0.3 stops the colorTransform working. copyPixels() and copyChannel() do not work has something changed?

#13

We do not have colorTransform support across the board – I’m hoping (?) there’s some fast way to do color transformation when blitting with Cairo and Canvas, but to my knowledge, there is one. We need a strategy for how we will handle that.

In the meantime, bitmapData.colorTransform should work fine, so if you have a bitmap already, or bitmapData.draw to one, you should be able to accomplish what you need