Fisheye

Introduction¶

Fish-eye post processing filter. Reference

Author: Rex
A post-fx shader effect

WebGL only

Only work in WebGL render mode.

Live demos¶

FishEye

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import plugin¶

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

Install plugin in configuration of game

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

Apply effect

Apply effect to game object

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

Apply effect to camera

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

Import class¶

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

Add to game config

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

Apply effect

Apply effect to game object

gameObject.setPostPipeline(FishEyePostFx);

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

Apply effect¶

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

var pipelineInstance = scene.plugins.get('rexFishEyePipeline').add(gameObject, {
    // center: {
    //    x: windowWidth / 2,
    //    y: windowHeight / 2
    //}
    // radius: 0,
    // intensity: 1,
    // mode:0,  // 0|1|'asin'|'sin'

    // name: 'rexFishEyePostFx'
});

center.x, center.y : Local position of fisheye center.
radius : FishEye radius.
intensity : 0(original) ~ 1(fisheye). Default value is 1.
mode :
- 0, or 'asin' : asin mode. Defaule value is 0.
- 1, or 'sin' : sin mode.

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

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

Remove effect¶

Remove effect from game object

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

Remove effect from camera

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

Get effect¶

Get effect from game object

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

Get effect from camera

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

Radius¶

Get
```
var radius = pipelineInstance.radius;
```

Set

pipelineInstance.radius = radius;
// pipelineInstance.radius += value;

or

pipelineInstance.setRadius(radius);

Intensity¶

Get

var intensity = pipelineInstance.intensity;

Set

pipelineInstance.intensity = intensity;
// pipelineInstance.intensity += value;

or

pipelineInstance.setIntensity(intensity);

intensity : 0(original) ~ 1(fisheye)

Center position¶

Default value is center of window.

Get

var x = pipelineInstance.centerX;
var y = pipelineInstance.centerY;

Set

pipelineInstance.centerX = x;
pipelineInstance.centerY = y;

or

pipelineInstance.setCenter(x, y);
// pipelineInstance.setCenter();   // set to center of window

Mode¶

Get

var mode = pipelineInstance.fishEyeMode;

Set
```
pipelineInstance.setFishEyeMode(mode);
```
- 0, or 'asin' : asin mode.
- 1, or 'sin' : sin mode.