Mask

Introduction

Apply mask on game object. Built-in render of phaser.

  • Author: Richard Davey

Usage

Add mask

  1. Create mask object
    • Create mask from texture
      1. Create image (image, sprite, quad, bitmap text, particles, text)
        var shape = scene.add.image(x, y, key).setVisible(false);
        
      2. Create mask
        var mask = shape.createBitmapMask();
        
        or
        var mask = new Phaser.Display.Masks.BitmapMask(scene, shape);
        
        WebGL only
    • Create mask from graphics
      1. Create graphics
        var shape = scene.make.graphics();
        
      2. Create mask
        var mask = shape.createGeometryMask();
        
        or
        var mask = new Phaser.Display.Masks.GeometryMask(scene, shape);
        
  2. Add mask object to image game object
    // var image = scene.add.image(...);
    image.setMask(mask); // image.mask = mask;
    
    A mask object could be added to many game objects.

Clear mask

  • Clear mask
    image.clearMask();
    
  • Clear mask and destroy mask object
    image.clearMask(true);
    

Invert alpha

Only GeometryMask has inverse alpha feature.

  • Inverse alpha
    mask.setInvertAlpha();
    // mask.invertAlpha = true;
    
  • Disable
    mask.setInvertAlpha(false);
    // mask.invertAlpha = false;