rossi46 Posted January 4, 2016 Share Posted January 4, 2016 I want set the background color to transparent this filter or run this filter in a background image like ocean. How to do that. Here the link of demo undersea from Phaser http://phaser.io/examples/v2/filters/undersea Thanks and sorry for my bad english Link to comment Share on other sites More sharing options...
drhayes Posted January 4, 2016 Share Posted January 4, 2016 You'll have to add the sprite or image that has that filter first, before you add anything else. That way everything you add afterwards will be "on top" of it. Either that, or do a "game.world.sendToBack" on it. Link to comment Share on other sites More sharing options...
rossi46 Posted January 5, 2016 Author Share Posted January 5, 2016 You'll have to add the sprite or image that has that filter first, before you add anything else. That way everything you add afterwards will be "on top" of it. Either that, or do a "game.world.sendToBack" on it. Here ís my code. But when run, I don't see the background image, i just see the wave with black background.<!doctype html><html><head> <script type="text/javascript" language="javascript" src="js/phaser.min.js"></script> <script type="text/javascript" language="javascript"> var game = new Phaser.Game(960, 577, Phaser.AUTO, '', {preload: preload, create : create, update : update }); function preload(){ game.load.image('bg', 'assets/backgrounds/bg.jpg'); game.load.image('bg-1', 'assets/backgrounds/bg-1.jpg'); } function create(){ game.add.sprite(0, 0, 'bg-1'); var bg = game.add.sprite(0, 0, 'bg'); var fragmentSrc = [ "precision mediump float;", "uniform float time;", "uniform vec2 resolution;", "uniform vec2 mouse;", "#define MAX_ITER 4", "void main( void )", "{", "vec2 v_texCoord = gl_FragCoord.xy / resolution;", "vec2 p = v_texCoord * 8.0 - vec2(20.0);", "vec2 i = p;", "float c = 1.0;", "float inten = .05;", "for (int n = 0; n < MAX_ITER; n++)", "{", "float t = time * (1.0 - (3.0 / float(n+1)));", "i = p + vec2(cos(t - i.x) + sin(t + i.y),", "sin(t - i.y) + cos(t + i.x));", "c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),", "p.y / (cos(i.y+t)/inten)));", "}", "c /= float(MAX_ITER);", "c = 1.5 - sqrt(c);", "vec4 texColor = vec4(0.0, 0.01, 0.015, 1.0);", "texColor.rgb *= (1.0 / (1.0 - (c + 0.05)));", "gl_FragColor = texColor;", "}" ]; filter = new Phaser.Filter(game, null, fragmentSrc); filter.setResolution(960, 577); bg.filters = [ filter ]; } function update(){ filter.update(); } </script></head><body></body></html> Link to comment Share on other sites More sharing options...
drhayes Posted January 5, 2016 Share Posted January 5, 2016 Right. You need to add the ocean shader/filter thing first, before the image. Link to comment Share on other sites More sharing options...
Recommended Posts