Shockwave

Introduction¶

Shockwave post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Shockwave

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(ShockwavePostFx);

Apply effect to camera

camera.setPostPipeline(ShockwavePostFx);

Apply effect¶

Apply effect to game object. A game object only can add 1 shockwave effect.

var pipelineInstance = scene.plugins.get('rexShockwavePipeline').add(gameObject, {
    // center: {
    //    x: windowWidth / 2,
    //    y: windowHeight / 2
    //}
    // waveRadius: 0,
    // waveWidth: 20,
    // powBaseScale: 0.8,
    // powExponent: 0.1,

    // name: 'rexShockwavePostFx'
});

waveRadius : Radius of shockwave, in pixels.
waveWidth : Width of shockwave, in pixels.
powBaseScale, powExponent : Parameters of shockwave.

Apply effect to camera. A camera only can add 1 shockwave effect.

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Wave radius¶

Get

var waveRadius = pipelineInstance.waveRadius;

Set

pipelineInstance.waveRadius = waveRadius;

or

pipelineInstance.setWaveRadius(waveRadius);

Wave width¶

Get

var waveWidth = pipelineInstance.waveWidth;

Set

pipelineInstance.waveWidth = waveWidth;

or

pipelineInstance.setWaveWidth(waveWidth);