Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to apply Filter to entire game?


GAveryWeir
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

  • 4 weeks later...
  • 3 months later...

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.

Link to comment
Share on other sites

  • 1 year later...
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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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