Kawase blur

Note

Phaser3.60 has a built-in blur effect.

Introduction¶

Kawase-blur post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Kawase-blur

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(KawaseBlurPostFx);

Apply effect to camera

camera.setPostPipeline(KawaseBlurPostFx);

Apply effect¶

Apply effect to game object. A game object only can add 1 kawaseblur effect.
```
var pipelineInstance = scene.plugins.get('rexKawaseBlurPipeline').add(gameObject, {
    // blur: 4,
    // quality: 3,
    // pixelWidth: 1,
    // pixelHeight: 1,

    // name: 'rexKawaseBlurPostFx'
});
```
- 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 kawaseblur effect.

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

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