Mask

Introduction

Apply mask on game object.

• Author: Phaser Team

Usage

WEBGL render mode

Shared mask

1. Create mask game object, from graphics (Graphics), image (image, sprite, bitmap text, particles, text),or shader

   var maskGameObject = new Phaser.GameObjects.Graphics(scene); 
   

2. Create shared mask object

   var maskObject = new Phaser.Filters.Mask(maskGameObject.scene.cameras.main, maskGameObject);
   maskObject.ignoreDestroy = true;
   

3. Apply shared mask object to game object

   gameObject
       .enableFilters()
       .filters.external.add(maskObject)
   

4. clear mask object

   gameObject.filters.external.remove(maskObject)
   

Private mask

1. Create mask game object, from graphics (Graphics), image (image, sprite, bitmap text, particles, text),or shader

   var maskGameObject = new Phaser.GameObjects.Graphics(scene); 
   

2. Enable filter list

   gameObject.enableFilters();
   

3. Create mask object

   var maskObject = gameObject
       .filters.external.addMask(maskGameObject)
       // .filters.external.addMask(maskGameObject, invert, viewCamera, 'world', scaleFactor)
   

   var maskObject = gameObject
       .filters.internal.addMask(maskGameObject, undefined, undefined, 'local', undefined)
       // .filters.internal.addMask(maskGameObject, invert, viewCamera, 'local', scaleFactor)
   

4. clear mask object

   gameObject.filters.external.remove(maskObject)
   

   gameObject.filters.internal.remove(maskObject)
   

CANVAS render mode

1. Create mask game object, from Graphics game object

   var maskGameObject = new Phaser.GameObjects.Graphics(scene);
   

2. Create shared mask object

   var maskObject = maskGameObject.createGeometryMask();
   

3. Apply shared mask object to game object

   gameObject.setMask(maskObject);
   // gameObject.mask = maskObject;
   

4. clear mask object

   gameObject.clearMask();
   // gameObject.mask = null;