Color replace

Introduction¶

Replace color post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Color replace

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