tembac 3 Report post Posted August 28, 2018 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! Share this post Link to post Share on other sites
samid737 117 Report post Posted August 28, 2018 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. Share this post Link to post Share on other sites
tembac 3 Report post Posted August 28, 2018 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;', '}' ]; } } Share this post Link to post Share on other sites
samid737 117 Report post Posted August 28, 2018 You can play with the uniforms/properties before calliing update on the filter (inside update) : https://codepen.io/Samid737/pen/VGjjBG?editors=0010 Share this post Link to post Share on other sites
tembac 3 Report post Posted August 28, 2018 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 ]; Share this post Link to post Share on other sites