CRT

Introduction¶

CRT post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

CRT

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object
```
gameObject.setPostPipeline(CrtPostFx);
```
Apply effect to camera
```
camera.setPostPipeline(CrtPostFx);
```

Apply effect¶

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

var pipelineInstance = scene.plugins.get('rexCrtPipeline').add(gameObject, {
    // warpX: 0.75,
    // warpY: 0.75,
    // scanLineStrength: 0.2,
    // scanLineWidth: 1024,

    // name: 'rexCrtPostFx'
});

warpX, warpY : Horizontal and Vertical warp.
scanLineStrength, scanLineWidth : Scan line parameters.

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

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Warp¶

Get

var warpX = pipelineInstance.warpX;
var warpY = pipelineInstance.warpY;

Set

pipelineInstance.setWarp(warpX, warpY);

or

pipelineInstance.warpX = warpX;
pipelineInstance.warpY = warpY;

Scan lines¶

Get

var scanLineStrength = pipelineInstance.scanLineStrength;
var scanLineWidth = pipelineInstance.scanLineWidth;

Set

pipelineInstance.setScanStrength(scanLineStrength);
pipelineInstance.setScanLineWidth(scanLineWidth);

or

pipelineInstance.scanLineStrength = scanLineStrength;
pipelineInstance.scanLineWidth = scanLineWidth;