Toonify

Introduction¶

Draw outlines and quantize color in HSV domain, post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Toonify

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(ToonifyPostFx);

Apply effect to camera
```
camera.setPostPipeline(ToonifyPostFx);
```

Apply effect¶

Apply effect to game object. A game object only can add 1 toonify effect.
```
var pipelineInstance = scene.plugins.get('rexToonifyPipeline').add(gameObject, {
    // edgeThreshold: 0.2,
    // hueLevels: 0,
    // sLevels: 0,
    // vLevels: 0,
    // edgeColor: 0,

    // name: 'rexToonifyPostFx'
});
```
- edgeThreshold : Threshold of edge. Set 1.1 (or any number larger then 1) to disable this feature.
- hueLevels : Amount of hue levels. Set 0 to disable this feature.
- sLevels : Amount of saturation levels. Set 0 to disable this feature.
- vLevels : Amount of value levels. Set 0 to disable this feature.
- edgeColor : Color of edge, could be a number 0xRRGGBB, or a JSON object {r:255, g:255, b:255}

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

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Edge threshold¶

Get

var edgeThreshold = pipelineInstance.edgeThreshold;

Set

pipelineInstance.edgeThreshold = edgeThreshold;

or

pipelineInstance.setEdgeThreshold(value);

Set 1.1 (or any number larger then 1) to disable this feature.

Hue levels¶

Get

var hueLevels = pipelineInstance.hueLevels;

Set

pipelineInstance.hueLevels = hueLevels;

or

pipelineInstance.setHueLevels(value);

Set 0 to disable this feature.

Saturation levels¶

Get

var satLevels = pipelineInstance.satLevels;

Set

pipelineInstance.satLevels = satLevels;

or

pipelineInstance.setSatLevels(value);

Set 0 to disable this feature.

Value levels¶

Get

var valLevels = pipelineInstance.valLevels;

Set

pipelineInstance.valLevels = valLevels;

or

pipelineInstance.setValLevels(value);

Set 0 to disable this feature.

Edge color¶

Get
```
var color = pipelineInstance.edgeColor;
```
- color : Color object.
  - Red: color.red, 0~255.
  - Green: color.green, 0~255.
  - Blue: color.blue, 0~255.

Set

pipelineInstance.setEdgeColor(value);

or

pipelineInstance.edgeColor = value;

value : A number 0xRRGGBB, or a JSON object {r:255, g:255, b:255}