Drop shadow

Note

Built-in preFX/postFX also provide shadow effect, might try these first.

Introduction

Drop-shadow post processing filter. Reference

• Author: Rex
• A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos

• Drop-shadow

Usage

Sample code

Install plugin

Load minify file

• Load plugin (minify file) in preload stage

  scene.load.plugin('rexdropshadowpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdropshadowpipelineplugin.min.js', true);
  

• Apply effect
  • Apply effect to game object

    var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(gameObject, config);
    

  • Apply effect to camera

    var pipelineInstance = scene.plugins.get('rexdropshadowpipelineplugin').add(camera, config);
    

Import plugin

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Install plugin in configuration of game

  import DropShadowPipelinePlugin from 'phaser3-rex-plugins/plugins/dropshadowpipeline-plugin.js';
  var config = {
      // ...
      plugins: {
          global: [{
              key: 'rexDropShadowPipeline',
              plugin: DropShadowPipelinePlugin,
              start: true
          },
          // ...
          ]
      }
      // ...
  };
  var game = new Phaser.Game(config);
  

• Apply effect
  • Apply effect to game object

    var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, config);
    

  • Apply effect to camera

    var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);
    

Import class

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Add to game config

  import DropShadowPostFx from 'phaser3-rex-plugins/plugins/dropshadowpipeline.js';
  var config = {
      // ...
      pipeline: [DropShadowPostFx]
      // ...
  };
  var game = new Phaser.Game(config);
  

• Apply effect
  • Apply effect to game object

    gameObject.setPostPipeline(DropShadowPostFx);
    

  • Apply effect to camera

    camera.setPostPipeline(DropShadowPostFx);
    

Apply effect

• Apply effect to game object. A game object only can add 1 dropshadow effect.

  var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(gameObject, {
      // ** Offset **
      // rotation: 
      // angle: 45,      // degrees
      // distance: 5,
  
      // ** Shadow color **
      // shadowColor: 0xffffff,
      // alpha: 0.5,
  
      // shadowOnly: false,
  
      // ** Parameters of KawaseBlur **
      // blur: 4,
      // quality: 3,
      // pixelWidth: 1,
      // pixelHeight: 1,
  
      // name: 'rexDropShadowPostFx'
  });
  

  • Offset
    • rotation, angle : The angle of the shadow in radians/degrees.
    • distance : Distance of shadow.
  • Color
    • shadowColor : Color of the shadow.
    • alpha : Alpha of the shadow.
  • shadowOnly : Whether render shadow only.
  • Parameters of KawaseBlur
    • blur : The blur of the filter. Should be greater than 0. If value is an Array, setting kernels.
    • quality : The quality of the filter. Should be an integer greater than 1.
    • pixelWidth, pixelHeight : Sets the pixel size of the filter. Large size is blurrier. For advanced usage.
• Apply effect to camera. A camera only can add 1 dropshadow effect.

  var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').add(camera, config);
  

Remove effect

• Remove effect from game object

  scene.plugins.get('rexDropShadowPipeline').remove(gameObject);
  

• Remove effect from camera

  scene.plugins.get('rexDropShadowPipeline').remove(camera);
  

Get effect

• Get effect from game object

  var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(gameObject)[0];
  // var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(gameObject);
  

• Get effect from camera

  var pipelineInstance = scene.plugins.get('rexDropShadowPipeline').get(camera)[0];
  // var pipelineInstances = scene.plugins.get('rexDropShadowPipeline').get(camera);
  

Rotation

• Get

  var rotation = pipelineInstance.rotation;  // radians
  // var angle = pipelineInstance.angle;     // degrees
  

• Set

  pipelineInstance.rotation = rotation;   // radians
  // pipelineInstance.angle = angle;      // degrees
  

  or

  pipelineInstance.setRotation(radians);
  pipelineInstance.setAngle(degrees);
  

Distance

• Get

  var distance = pipelineInstance.distance;
  

• Set

  pipelineInstance.distance = distance;
  // pipelineInstance.distance += value;
  

  or

  pipelineInstance.setDistance(distance);
  

Shadow color

• Get

  var color = pipelineInstance.shadowColor;
  

  • color : Color object.
    • Red: color.red, 0~255.
    • Green: color.green, 0~255.
    • Blue: color.blue, 0~255.
• Set

  pipelineInstance.setShadowColor(value);
  

  pipelineInstance.shadowColor = value;
  

  • value : A number 0xRRGGBB, or a JSON object {r:255, g:255, b:255}

Alpha

• Get

  var alpha = pipelineInstance.alpha;
  

• Set

  pipelineInstance.alpha = alpha;
  

  or

  pipelineInstance.setAlpha(alpha);
  

Shadow-only

• Get

  var enable = pipelineInstance.shadowOnly;
  

• Set

  pipelineInstance.shadowOnly = enable;
  

  or

  pipelineInstance.setShadowOnly(enable);
  

Blur

• Get

  var blur = pipelineInstance.blur;
  

• Set

  pipelineInstance.blur = blur;
  // pipelineInstance.blur += value;
  

  or

  pipelineInstance.setBlur(value);
  

Quality

• Get

  var quality = pipelineInstance.quality;
  

• Set

  pipelineInstance.quality = quality;
  // pipelineInstance.quality += value;
  

  or

  pipelineInstance.setQuality(value);
  

Pixel size

• Get

  var pixelWidth = pipelineInstance.pixelWidth;
  var pixelHeight = pipelineInstance.pixelHeight;
  

• Set

  pipelineInstance.pixelWidth = pixelWidth;
  pipelineInstance.pixelHeight = pixelHeight;
  

  or

  pipelineInstance.setPixelWidth(pixelWidth);
  pipelineInstance.setPixelHeight(pixelHeight);
  pipelineInstance.setPixelSize(pixelWidth, pixelHeight);