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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.