Dynamically created image masks

[Damla Eker]

Hi all,

I need to display a large image and dynamically hide sections of it.

I already use masking to specify which parts should be displayed.

The code I use to achieve this is in the form:

this._topMask = game.add.graphics(0, 0);
this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320);
this.defaultGroup.mask = this._topMask;

This is useful in that it gives me a rectangle within which the image renders.

Now I need to dynamically block sections of that rectange and create areas that are not rendered.

Ideally, I would like to be able to create masks similar to the image below. I cannot use presaved images because the position of the rectangles change dynamically.

What is the most performance optimised way to achieve this in Phaser? (I am on version 2.4.4)