Skip to content

Color replace

Introduction

Replace color 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('rexcolorreplacepipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcolorreplacepipelineplugin.min.js', true);
    
  • Apply effect
    • Apply effect to game object
      var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(gameObject, config);
      
    • Apply effect to camera
      var pipelineInstance = scene.plugins.get('rexcolorreplacepipelineplugin').add(camera, config);
      

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import ColorReplacePipelinePlugin from 'phaser3-rex-plugins/plugins/colorreplacepipeline-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexColorReplacePipeline',
                plugin: ColorReplacePipelinePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Apply effect
    • Apply effect to game object
      var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, config);
      
    • Apply effect to camera
      var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);
      

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add to game config
    import ColorReplacePostFx from 'phaser3-rex-plugins/plugins/colorreplacepipeline.js';
    var config = {
        // ...
        pipeline: [ColorReplacePostFx]
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Apply effect
    • Apply effect to game object
      gameObject.setPostPipeline(ColorReplacePostFx);
      
    • Apply effect to camera
      camera.setPostPipeline(ColorReplacePostFx);
      

Apply effect

  • Apply effect to game object. A game object only can add 1 colorreplace effect.
    var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(gameObject, {
        originalColor: 0xFF0000,
        newColor: 0x000000,
        // epsilon: 0.4,
    
        // name: 'rexColorReplacePostFx'
    });
    
    • originalColor : The color (0xRRGGBB) that will be changed.
    • newColor : The resulting color (0xRRGGBB).
    • epsilon : Tolerance/sensitivity of the floating-point comparison between colors (lower = more exact, higher = more inclusive)
  • Apply effect to camera. A camera only can add 1 colorreplace effect.
    var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').add(camera, config);
    

Remove effect

  • Remove effect from game object
    scene.plugins.get('rexColorReplacePipeline').remove(gameObject);
    
  • Remove effect from camera
    scene.plugins.get('rexColorReplacePipeline').remove(camera);
    

Get effect

  • Get effect from game object
    var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(gameObject)[0];
    // var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(gameObject);
    
  • Get effect from camera
    var pipelineInstance = scene.plugins.get('rexColorReplacePipeline').get(camera)[0];
    // var pipelineInstances = scene.plugins.get('rexColorReplacePipeline').get(camera);
    

Original color

  • Get
    var color = pipelineInstance.originalColor;
    
    • color : Color object.
      • Red: color.red, 0~255.
      • Green: color.green, 0~255.
      • Blue: color.blue, 0~255.
  • Set
    pipelineInstance.setOriginalColor(value);
    
    pipelineInstance.originalColor = value;
    
    • value : A number 0xRRGGBB, or a JSON object {r:255, g:255, b:255}

New color

  • Get
    var color = pipelineInstance.newColor;
    
    • color : Color object.
      • Red: color.red, 0~255.
      • Green: color.green, 0~255.
      • Blue: color.blue, 0~255.
  • Set
    pipelineInstance.setNewColor(value);
    
    pipelineInstance.newColor = value;
    
    • value : A number 0xRRGGBB, or a JSON object {r:255, g:255, b:255}

Epsilon

  • Get
    var epsilon = pipelineInstance.epsilon;
    
  • Set
    pipelineInstance.epsilon = epsilon;
    // pipelineInstance.epsilon += value;
    
    or
    pipelineInstance.setEpsilon(value);