Phaser CE and Pixi Filters

[tembac 3]

I want to implement this filter using Phaser CE 2.11

https://pixijs.io/examples/index.html?s=filters&f=displacement-map.js&title=Displacement#/filters/displacement-map.js

But it seems like pixi filters were deleted from phaser CE repo on github. How can I use it?

Thanks!

[samid737 117]

This should help getting started:

https://codepen.io/Samid737/pen/VGjjBG

It is similar to the filter found here: https://web.ist.utl.pt/ist172700/ccu/save/docs/DisplacementFilter.js.html

You will still need to load in a Power of two texture it seems.

[tembac 3]

Thanks for your help!

Now I'm closer but can´t be able to move or set the size of the filter.

 

export default class extends Phaser.Filter
{
  constructor (game, texture){
    super(game);

    // set the uniforms
    this.uniforms.displacementMap =  {type: 'sampler2D', value:texture};
    //distorsión.
    this.uniforms.scale = {type: '2f', value:{x:75, y:75}};
    //movimento.
    this.uniforms.offset = {type: '2f', value:{x:120, y:120}};
    this.uniforms.dimensions = {type: '4fv', value:[0,0,0,0]};
    this.uniforms.mapDimensions = {type: '2f', value:{x:0, y:0}};
    this.uniforms.resolution = {type: '2f', value:{x:1, y:1}};

    this.uniforms.mapDimensions.value.x = texture.width;
    this.uniforms.mapDimensions.value.y = texture.height;

    this.fragmentSrc = [
        'precision mediump float;',
        'varying vec2 vTextureCoord;',
        'varying vec4 vColor;',
        'uniform sampler2D displacementMap;',
        'uniform sampler2D uSampler;',
        'uniform vec2 scale;',
        'uniform vec2 offset;',
        'uniform vec2 mouse;',
        'uniform vec4 dimensions;',
        'uniform vec2 mapDimensions;',

        'void main(void) {',
        '   vec2 mapCords = vTextureCoord.xy;',
        '   mapCords += (dimensions.zw + offset + mouse )/ dimensions.xy ;',
        '   mapCords.y *= -1.0;',
        '   mapCords.y += 1.0;',
        '   vec2 matSample = texture2D(displacementMap, mapCords).xy;',
        '   matSample -= 0.5;',
        '   matSample *= scale / mapDimensions;',
        '   gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));',
        '   gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);',
        '   vec2 cord = vTextureCoord;',

        '}'
    ];

  }

}

 

[samid737 117]

You can play with the uniforms/properties before calliing update on the filter (inside update) :

https://codepen.io/Samid737/pen/VGjjBG?editors=0010

 

[tembac 3]

Thanks! That worked.

Now I don't know why the filter texture covers all the screen if it is smaller:

 

 

    var group = this.add.group();
    this.back = this.add.image(0,0, "roomText", "Background 8");
    group.add(this.back);

    this.glass = new Phaser.Sprite(this.game, 0,0, "displaceImg");

    this.filter = new FilterGlass(this.game, this.glass.texture);
    group.filters = [ this.filter ];