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)