High memory usage while using dozens of Mask object

Phaser 3
1

Hi

I want to create jigsaw puzzle game using Phaser 3, but i have a problem with memory usage

hhv
hhv913×575 112 KB

Here is how i create this pieces

for(let i=0; i<50; i++){
    	let a = this.add.sprite(210+(51*aa),51+(yy*51),'rounded').setInteractive();
    	let mask = a.createBitmapMask();
	    let b = this.add.sprite(400,200,'shoes');
	    b.setMask(mask);
	    this.input.setDraggable(a);
	    aa++;
	    if(aa === 9){
	    	yy++;
	    	aa = 0;
	    }
    }

It’s only 50 mask/piece (and shoes image) but the memory usage are almost 400mb.

Is there any solution to reduce memory usage ? or any alternative instead of using Mask ?

Thanks

2

As an alternative to using masks, you could create a texture using your source image, and then create a sized canvas for each piece, transferring the applicable part of the source texture to it using drawImage.