Phaser CE and Pixi Filters

Recommended Posts

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){

    // set the uniforms
    this.uniforms.displacementMap =  {type: 'sampler2D', value:texture};
    this.uniforms.scale = {type: '2f', value:{x:75, y:75}};
    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;',





Share this post

Link to post
Share on other sites

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");

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

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


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.