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.
var MaskTexture = IgeTexture
.extend({
classId : 'MaskTexture',
init : function(url, horizontalCells, verticalCells) {
this._super(url, horizontalCells, verticalCells);
},
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 = IgeCellSheetExt;
}
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 using this function:
gameTexture[0].applyMask(gameTexture[1]);Simply use your gameTexture[0] like you normally would.