Mask

Introduction

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

• Author: Richard Davey

Usage

Add mask

Create mask object

Bitmap mask

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 = scene.add.bitmapMask(shape);
   

or

var mask =  scene.add.bitmapMask(undefined, x, y, key, frame);

Geometry mask

The mask is essentially a clipping path which can only make a 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();
   

Apply mask object

gameObject.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;
  

Get shape game object

• Bitmap mask

  var shape = mask.bitmapMask;
  

• Geometry mask

  var shape = mask.geometryMask;