Dissolve

Introduction¶

Dissolve transition post processing filter. (Reference)

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Dissolve

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(DissolvePostFx);

Apply effect to camera

camera.setPostPipeline(DissolvePostFx);

Apply effect¶

Apply effect to game object. A game object only can add 1 gray-scale effect.
```
var pipelineInstance = scene.plugins.get('rexDissolvePipeline').add(gameObject, {
    // toTexture: textureKey,
    // toFrame: frameName,
    // resizeMode: 1,

    // noiseX: undefined,
    // noiseY: undefined,
    // noiseZ: undefined,
    // fromEdgeStart: 0.01,
    // fromEdgeWidth: 0.05,
    // toEdgeStart: 0.01,
    // toEdgeWidth: 0.05,

    // progress: 0,

    // name: 'rexDissolvePostFx'
});
```
- toTexture, toFrame : Texture key and frame name of transition target texture.
- resizeMode : Resize mode of transition target texture.
  - 0, or 'stretch' : The target texture is stretched to the size of the source texture.
  - 1, or 'contain' : The target texture is resized to fit the source texture.
  - 2, or 'cover' : The target texture is resized to cover the source texture.
- noiseX, noiseY, noiseZ : Parameter of Perline noise.
  - undefined : A random value.
- fromEdgeStart, fromEdgeWidth : Dissolve edge start, edge width of from-texture (texture of game object, or render result of camera).
- toEdgeStart, toEdgeWidth : Reveal edge start, edge width of to-texture.

Apply effect to camera. A camera only can add 1 gray-scale effect.

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Transition target texture¶

Get

var textureKey = pipelineInstance.toFrame.texture.key;
var frameName = pipelineInstance.toFrame.name;

Set

pipelineInstance.setTransitionTargetTexture(textureKey, frameName);
// pipelineInstance.setTransitionTargetTexture(textureKey, frameName, resizeMode);

Progress¶

Get

var progress = pipelineInstance.progress;

Set

pipelineInstance.setProgress(value);  // value: 0~1

or

pipelineInstance.progress = value;  // value: 0~1

Resize mode¶

Get

var mode = pipelineInstance.resizeMode;

Set
```
pipelineInstance.setResizeMode(mode);
```
- mode :
  - 0, or 'stretch' : The target texture is stretched to the size of the source texture.
  - 1, or 'contain' : The target texture is resized to fit the source texture.
  - 2, or 'cover' : The target texture is resized to cover the source texture.

Noise¶

Get

var noiseX = pipelineInstance.noiseX;
var noiseY = pipelineInstance.noiseY;
var noiseZ = pipelineInstance.noiseZ;

Set

pipelineInstance.noiseX = noiseX;
pipelineInstance.noiseY = noiseY;
pipelineInstance.noiseZ = noiseZ;

or

pipelineInstance.setNoise(noiseX, noiseY, noiseZ);
// pipelineInstance.setNoise(); // Passing 3 random float numbers

Edge¶

Get

From texture (texture of game object, or render result of camera)

var edgeStart = pipelineInstance.fromEdgeStart;
var edgeWidth = pipelineInstance.fromEdgeWidth;

To texture (transition target texture)

var edgeStart = pipelineInstance.toEdgeStart;
var edgeWidth = pipelineInstance.toEdgeWidth;

Set

From texture (texture of game object, or render result of camera)

pipelineInstance.fromEdgeStart = edgeStart;
pipelineInstance.fromEdgeWidth = edgeWidth;

or

pipelineInstance.setFromEdge(edgeStart, edgeWidth);

edgeStart : 0~1, default value is 0.01
edgeWidth : 0~1, default value is 0.05

To texture (transition target texture)

pipelineInstance.toEdgeStart = edgeStart;
pipelineInstance.toEdgeWidth = edgeWidth;

or

pipelineInstance.setToEdge(edgeStart, edgeWidth);

edgeStart : 0~1, default value is 0.01
edgeWidth : 0~1, default value is 0.05