Jump to content

How to set background transparent in this filter?


rossi46
 Share

Recommended Posts

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

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...