Mask

Introduction

Apply mask on game object or camera.

• Author: Phaser Team

Usage

WEBGL render mode

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)
   

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)
   

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;