Horri-fi

Introduction¶

6-in-1 post processing filter

Bloom
Chromatic Abberation
Scanlines
VHS Distortion
CRT TV Curve
Noise
Vignette

Reference : Horri-fi shader effect

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

Horrifi

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(HorrifiPostFx);

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

Apply effect¶

Apply effect to game object. A game object only can add 1 horrifi effect.

var pipelineInstance = scene.plugins.get('rexHorrifiPipeline').add(gameObject, {
    enable: false,

    // Bloom
    bloomEnable: false,
    bloomRadius: 0, bloomIntensity: 0, bloomThreshold: 0,
    bloomTexelWidth: 0, bloomTexelHeight: 0,

    // Chromatic abberation
    chromaticEnable: false,
    chabIntensity: 0,

    // Vignette
    vignetteEnable: false,
    vignetteStrength: 0, vignetteIntensity: 0,

    // Noise
    noiseEnable: false,
    noiseStrength: 0,
    noiseSeed: 0,

    // VHS
    vhsEnable: false,
    vhsStrength: 0,

    // Scanlines
    scanlinesEnable: false,
    scanStrength: 0,

    // CRT
    crtEnable: false,
    crtWidth: 0, crtHeight: 0,

    // name: 'rexHorrifiPostFx'
});

enable : Default enable value for all shader effects.
Bloom
- bloomEnable : Set true to enable bloom effect.
- bloomRadius, bloomIntensity, bloomThreshold
- bloomTexelWidth, bloomTexelHeight
Chromatic abberation
- chromaticEnable : Set true to enable chromatic abberation effect.
- chabIntensity
Vignette
- vignetteEnable : Set true to enable vignette effect.
- vignetteStrength, vignetteIntensity
Noise
- noiseEnable : Set true to enable noise effect.
- noiseStrength
- noiseSeed
VHS
- vhsEnable : Set true to enable VHS effect.
- vhsStrength
Scanlines
- scanlinesEnable : Set true to enable Scanlines effect.
- scanStrength
CRT
- crtEnable : Set true to enable Scanlines effect.
- crtWidth, crtHeight

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

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Bloom¶

Enable¶

Enable

pipelineInstance.setBloomEnable();
// pipelineInstance.setBloomEnable(true);

or

pipelineInstance.bloomEnable = true;

Disable

pipelineInstance.setBloomEnable(false);

or

pipelineInstance.bloomEnable = false;

Get

var bloomEnable = pipelineInstance.bloomEnable;

Parameters¶

Set

pipelineInstance.setBloomRadius(value);
pipelineInstance.setBloomIntensity(value);
pipelineInstance.setBloomThreshold(value);
pipelineInstance.setBloomTexelSize(width, height);

or

pipelineInstance.bloomRadius = value;
pipelineInstance.bloomIntensity = value;
pipelineInstance.bloomThreshold = value;
pipelineInstance.bloomTexelWidth = width;
pipelineInstance.bloomTexelHeight = height;

Get

var bloomRadius = pipelineInstance.bloomRadius;
var bloomIntensity = pipelineInstance.bloomIntensity;
var bloomThreshold = pipelineInstance.bloomThreshold;
var bloomTexelWidth = pipelineInstance.bloomTexelWidth;
var bloomTexelHeight = pipelineInstance.bloomTexelHeight;

Chromatic abberation¶

Enable¶

Enable

pipelineInstance.setChromaticEnable();
// pipelineInstance.setChromaticEnable(true);

or

pipelineInstance.chromaticEnable = true;

Disable

pipelineInstance.setChromaticEnable(false);

or

pipelineInstance.chromaticEnable = false;

Get

var chromaticEnable = pipelineInstance.chromaticEnable;

Parameters¶

Set

pipelineInstance.setChabIntensity(value);

or

pipelineInstance.chabIntensity = value;

Get

var chabIntensity = pipelineInstance.chabIntensity;

Vignette¶

Enable¶

Enable

pipelineInstance.setVignetteEnable();
// pipelineInstance.setVignetteEnable(true);

or

pipelineInstance.vignetteEnable = true;

Disable

pipelineInstance.setVignetteEnable(false);

or

pipelineInstance.vignetteEnable = false;

Get

var vignetteEnable = pipelineInstance.vignetteEnable;

Parameters¶

Set

pipelineInstance.setVignetteStrength(value);
pipelineInstance.setVignetteIntensity(value);

or

pipelineInstance.vignetteStrength = value;
pipelineInstance.vignetteIntensity = value;

Get

var vignetteStrength = pipelineInstance.vignetteStrength;
var vignetteIntensity = pipelineInstance.vignetteIntensity;

Noise¶

Enable¶

Enable

pipelineInstance.setNoiseEnable();
// pipelineInstance.setNoiseEnable(true);

or

pipelineInstance.noiseEnable = true;

Disable

pipelineInstance.setNoiseEnable(false);

or

pipelineInstance.noiseEnable = false;

Get

var noiseEnable = pipelineInstance.noiseEnable;

Parameters¶

Set

pipelineInstance.setNoiseStrength(value);
pipelineInstance.setNoiseSeed(value);

or

pipelineInstance.noiseStrength = value;
pipelineInstance.noiseSeed = value;

Get

var noiseStrength = pipelineInstance.noiseStrength;
var noiseSeed = pipelineInstance.noiseSeed;

VHS¶

Enable¶

Enable

pipelineInstance.setVHSEnable();
// pipelineInstance.setVHSEnable(true);

or

pipelineInstance.vhsEnable = true;

Disable

pipelineInstance.setVHSEnable(false);

or

pipelineInstance.vhsEnable = false;

Get

var vhsEnable = pipelineInstance.vhsEnable;

Parameters¶

Set

pipelineInstance.setVhsStrength(value);

or

pipelineInstance.vhsStrength = value;

Get

var vhsStrength = pipelineInstance.vhsStrength;

Scanlines¶

Enable¶

Enable

pipelineInstance.setScanlinesEnable();
// pipelineInstance.setScanlinesEnable(true);

or

pipelineInstance.scanlinesEnable = true;

Disable

pipelineInstance.setScanlinesEnable(false);

or

pipelineInstance.scanlinesEnable = false;

Get

var scanlinesEnable = pipelineInstance.scanlinesEnable;

Parameters¶

Set

pipelineInstance.setScanStrength(value);

or

pipelineInstance.scanStrength = value;

Get

var scanStrength = pipelineInstance.scanStrength;

CRT¶

Enable¶

Enable

pipelineInstance.setCRTEnable();
// pipelineInstance.setCRTEnable(true);

or

pipelineInstance.crtEnable = true;

Disable

pipelineInstance.setCRTEnable(false);

or

pipelineInstance.crtEnable = false;

Get

var crtEnable = pipelineInstance.crtEnable;

Parameters¶

Set

pipelineInstance.setCrtSize(width, height);

or

pipelineInstance.crtWidth = width;
pipelineInstance.crtHeight = height;

Get

var crtWidth = pipelineInstance.crtWidth;
var crtHeight = pipelineInstance.crtHeight;

Enable all effects¶

Enable all

pipelineInstance.setEnable();
// pipelineInstance.setEnable(true);

Disable all
```
pipelineInstance.setEnable(false);
```