Skip to content

Dissolve

Introduction

Dissolve transition post processing filter. (Reference)

  • Author: Rex
  • A post-fx shader effect

Live demos

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