Mask

Introduction

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

• Author: Richard Davey

Usage

Add mask

1. Create mask object
   • Create alpha mask from texture
     1. Create image (image, sprite, bitmap text, particles, text), or shader

        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);
        

   • Create mask from graphics, masked pixel fully visible or fully invisible without changing its alpha (opacity).
     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.

Error

Don't put game object and its mask into a container together. See this testing, enable line 22-24.

Note

Bitmap Mask is WebGL only.

Note

Can combine Geometry Masks and Blend Modes on the same Game Object, but Bitmap Masks can't.

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;