Horri-fi

Introduction¶

6-in-1 effect

Bloom
Chromatic Abberation
Scanlines
VHS Distortion
CRT TV Curve
Noise
Vignette

Reference : Horri-fi shader effect

Author: Rex
A filter 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('rexhorrififilterlugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhorrififilterlugin.min.js', true);

Apply effect

Apply effect to game object

gameObject.enableFilters();
var filterList = gameObject.filters.internal;
var controller = filterList.addRexHorrifi(config);

or

var controller = scene.plugins.get('rexhorrififilterlugin').add(gameObject, config);

Apply effect to camera

var filterList = camera.filters.internal;
var controller = filterList.addRexHorrifi(config);

or

var controller = scene.plugins.get('rexhorrififilterlugin').add(camera, config);

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

gameObject.enableFilters();
var filterList = gameObject.filters.internal;
var controller = filterList.addRexHorrifi(config);

or

var controller = scene.plugins.get('rexHorrifiFilter').add(gameObject, config);

Apply effect to camera

var filterList = camera.filters.internal;
var controller = filterList.addRexHorrifi(config);

or

var controller = scene.plugins.get('rexHorrifiFilter').add(camera, config);

Import class¶

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

Import filter and controller class

import { HorrifiFilter, HorrifiController } from 'phaser3-rex-plugins/plugins/horrifipipeline.js';

Register effect

if (!scene.renderer.renderNodes.hasNode(HorrifiFilter.FilterName)) {
    scene.renderer.renderNodes.addNodeConstructor(HorrifiFilter.FilterName, HorrifiFilter);
}

Apply effect

Apply effect to game object

gameObject.enableFilters();
var filterList = gameObject.filters.internal;
var controller = filterList.add(
    new HorrifiController(filterList.camera, config)
);

Apply effect to camera

var filterList = camera.filters.internal;
var controller = filterList.add(
    new HorrifiController(filterList.camera, config)
);

Apply effect¶

Apply effect to game object.

gameObject.enableFilters();
var filterList = gameObject.filters.internal;
var controller = filterList.addRexHorrifi({
    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 controller = scene.plugins.get('rexHorrifiFilter').add(camera, config);

Disable effect¶

controller.setActive(false);
// controller.active = false;

Remove effect¶

Remove effect from game object

var filterList = gameObject.filters.internal;
filterList.remove(controller);

or

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

Remove effect from camera

var filterList = camera.filters.internal;
filterList.remove(controller);

or

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

Get effect¶

Get effect from game object

var controller = scene.plugins.get('rexHorrifiFilter').get(gameObject)[0];
// var controllers = scene.plugins.get('rexHorrifiFilter').get(gameObject);

Get effect from camera

var controller = scene.plugins.get('rexHorrifiFilter').get(camera)[0];
// var controllers = scene.plugins.get('rexHorrifiFilter').get(camera);

Bloom¶

Enable¶

Enable

controller.setBloomEnable();
// controller.setBloomEnable(true);

or

controller.bloomEnable = true;

Disable

controller.setBloomEnable(false);

or

controller.bloomEnable = false;

Get

var bloomEnable = controller.bloomEnable;

Parameters¶

Set

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

or

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

Get

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

Chromatic abberation¶

Enable¶

Enable

controller.setChromaticEnable();
// controller.setChromaticEnable(true);

or

controller.chromaticEnable = true;

Disable

controller.setChromaticEnable(false);

or

controller.chromaticEnable = false;

Get

var chromaticEnable = controller.chromaticEnable;

Parameters¶

Set

controller.setChabIntensity(value);

or

controller.chabIntensity = value;

Get

var chabIntensity = controller.chabIntensity;

Vignette¶

Enable¶

Enable

controller.setVignetteEnable();
// controller.setVignetteEnable(true);

or

controller.vignetteEnable = true;

Disable

controller.setVignetteEnable(false);

or

controller.vignetteEnable = false;

Get

var vignetteEnable = controller.vignetteEnable;

Parameters¶

Set

controller.setVignetteStrength(value);
controller.setVignetteIntensity(value);

or

controller.vignetteStrength = value;
controller.vignetteIntensity = value;

Get

var vignetteStrength = controller.vignetteStrength;
var vignetteIntensity = controller.vignetteIntensity;

Noise¶

Enable¶

Enable

controller.setNoiseEnable();
// controller.setNoiseEnable(true);

or

controller.noiseEnable = true;

Disable

controller.setNoiseEnable(false);

or

controller.noiseEnable = false;

Get

var noiseEnable = controller.noiseEnable;

Parameters¶

Set

controller.setNoiseStrength(value);
controller.setNoiseSeed(value);

or

controller.noiseStrength = value;
controller.noiseSeed = value;

Get

var noiseStrength = controller.noiseStrength;
var noiseSeed = controller.noiseSeed;

VHS¶

Enable¶

Enable

controller.setVHSEnable();
// controller.setVHSEnable(true);

or

controller.vhsEnable = true;

Disable

controller.setVHSEnable(false);

or

controller.vhsEnable = false;

Get
```
var vhsEnable = controller.vhsEnable;
```

Parameters¶

Set

controller.setVhsStrength(value);

or

controller.vhsStrength = value;

Get

var vhsStrength = controller.vhsStrength;

Scanlines¶

Enable¶

Enable

controller.setScanlinesEnable();
// controller.setScanlinesEnable(true);

or

controller.scanlinesEnable = true;

Disable

controller.setScanlinesEnable(false);

or

controller.scanlinesEnable = false;

Get

var scanlinesEnable = controller.scanlinesEnable;

Parameters¶

Set

controller.setScanStrength(value);

or

controller.scanStrength = value;

Get

var scanStrength = controller.scanStrength;

CRT¶

Enable¶

Enable

controller.setCRTEnable();
// controller.setCRTEnable(true);

or

controller.crtEnable = true;

Disable

controller.setCRTEnable(false);

or

controller.crtEnable = false;

Get
```
var crtEnable = controller.crtEnable;
```

Parameters¶

Set

controller.setCrtSize(width, height);

or

controller.crtWidth = width;
controller.crtHeight = height;

Get

var crtWidth = controller.crtWidth;
var crtHeight = controller.crtHeight;

Enable all effects¶

Enable all

controller.setEnable();
// controller.setEnable(true);

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