How to apply Filter to entire game?

[GAveryWeir]

I'm really liking Phaser, and am trying out converting a WIP Flixel project. I'd like to do a bloom filter over the whole canvas. What's the best way of going about this? I have a working bloom filter already; I'm just trying to figure out how to apply it to an entire Game or State.

 

Sprites seem to have the filters property, but Game doesn't seem to have an equivalent. I've tried drilling into the Pixi code, but its filters don't seem to be superclasses of Phaser's filters, and I thought I'd ask a question before hacking away any further.

[Mike]

Let me share my super little experience... hmm better let me share my experiment so you can see how I added a filter above all my game

 

http://mihail.ilinov.eu/games/WIP/AdventureJS/

 

It's frankly super easy

 

 

You need this 3 lines:

this.load.script('filter', 'js/lib/filters/Fire.js'); - in preloader

In Game.js in create: function () {..}

this.filter = this.add.filter('Fire', this.game.width, this.game.height);

and in the update function {...}

this.filter.update();

Hope this help you enough

[GAveryWeir]

Let me share my super little experience... hmm better let me share my experiment so you can see how I added a filter above all my game

 

You've got a Sprite called background there with a filter on it that's getting alpha blended with the rest of the game. Your filter is only manipulating a blank Sprite. I'd like to actually put a shader on the game's stage output. It would take the rendered graphics as its input and display the bloomed result.

 

That's a very cool look, though.

[Mike]

Ok I get the difference I'll be eager to see solution to your question as well.

[RyanTheBoy]

+1 from a curious individual looking to filter. 

[Jmaharman]

I was just looking into this, I found the most obvious way was to add the filter to the stage, i.e. this.game.stage.filters = [this.filter];

 

Not sure if that's best practice or not but it works well.

 

** Edit **

 

I actually applied the filter the world in the end, rather than the stage, as I believe this is disposed of when you move between states.

[Cross_]

var fragmentSrc = [
            "precision mediump float;",
            // Incoming texture coordinates. 
            'varying vec2 vTextureCoord;',
            // Incoming vertex color
            'varying vec4 vColor;',
            // Sampler for a) sprite image or b) rendertarget in case of game.world.filter
            'uniform sampler2D uSampler;',

            "uniform vec2      resolution;",
            "uniform float     time;",
            "uniform vec2      mouse;",

            "void main( void ) {",
            // colorRGBA = (y % 2) * texel(u,v);
            "gl_FragColor = mod(gl_FragCoord.y,2.0) * texture2D(uSampler, vTextureCoord);",
            "}"
        ];

        scanlineFilter = new Phaser.Filter(game, null, fragmentSrc);
        game.world.filters = [scanlineFilter];

Simple annotated sample for applying a scanline filter to the whole game.

[s4m_ur4i]

How do you exclude objects when you apply a filter to the whole world?
maybe a blur or s.t. like that?