How to create a texture mask

Step 1) Prepare the graphics

You will need to create two images of the same size:

Image 1: the actual texture.

Image 2: the inverse alpha mask. This image must be a transparent PNG. The transparency determines what will be visible through the mask.

Add these images to your assets/textures/tiles folder.

Step 2) The script

Create this MaskTexture.js script in your gameClasses folder. Don't forget to add it to ClientConfig.js!

var MaskTexture = IgeTexture
		.extend({
			classId : 'MaskTexture',
			
			applyMask : function(maskTexture) {
				var inverseAlphaMask = maskTexture.image;
				this.applyFilter(function (canvas, ctx, originalImage) {
					ctx.drawImage(originalImage, 0, 0);
					ctx.globalCompositeOperation = 'xor';
					ctx.drawImage(inverseAlphaMask, 0, 0);
				});
				
			},

		});

if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') {
	module.exports = MaskTexture;
}

Step 3) Setup

Load the images you created in your client.js:

gameTexture[0] = new MaskTexture('../assets/textures/tiles/my_texture.png');
gameTexture[1] = new IgeTexture('../assets/textures/tiles/my_mask.png');

Apply the mask, after the engine has successfully started, using this function:

gameTexture[0].applyMask(gameTexture[1]);

Simply use your gameTexture[0] like you normally would.