Cast gray filter to everything behind a sprite

[MegaBrutal]

Hi all,

What I'd like to do is to cast a grey filter to the world behind a sprite.

I found another post which explained how to apply a grey filter to a specific sprite. I thought maybe if I set this sprite's alpha to less than 1 so I allow to see through it, the world behind it would also be grey; but of course it's not that simple. Actually, only the sprite gets grey and everything behind it remains colored – and it's logical, if I think about it. See the attached screenshot.

What I'd like to achieve is to cast everything grey behind my grey sprite, so the dude and the ground underneath should also be rendered in greyscale. Actually, I don't even want to see my grey sprite, it's only function would be to specify which part of the world should be rendered greyish. So I don't want to see it, but everything behind it should be grey. Important that if the player (or any other sprite) moves out of the grey area, it should immediately regain its colors. If anything is half-behind the grey sprite, only half of it should be grey. Any ideas how to implement that?

Please check my code below (only my create method matters, everything else is to just create a moving player sprite).

 

        var game = new Phaser.Game(800, 600, Phaser.WEBGL, '', { preload: function() { this.state.add('GamePlay', GamePlay, true); } });
        var player;
        var cursors;

        const PLAYER_SPEED	= 100;

        window.addEventListener("keydown", function(e) {
            // Prevent default browser action for arrows and spacebar
            if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
            e.preventDefault();
            }
        }, false);

        class Player extends Phaser.Sprite {
            constructor(x, y) {
                super(game, x, y, 'player');
            }

            enablePhysics() {
                game.physics.arcade.enable(this);
                this.body.bounce.y = 0.2;
                this.body.bounce.x = 0.2;
                this.body.collideWorldBounds = true;
            }

            control() {
                if (this.alive)
                {
                    if (cursors.left.isDown)
                    {
                        this.body.velocity.x = -PLAYER_SPEED;
                    }
                    else if (cursors.right.isDown)
                    {
                        this.body.velocity.x = PLAYER_SPEED;
                    }
                    if (cursors.up.isDown)
                    {
                        this.body.velocity.y = -PLAYER_SPEED;
                    }
                    else if (cursors.down.isDown)
                    {
                        this.body.velocity.y = PLAYER_SPEED;
                    }
                }
            }

            update() {
                super.update();
                this.control();
            }
        }


        class GamePlay extends Phaser.State {

            preload() {

                game.load.image('ground', 'ground.png');
                game.load.image('player', 'dude.png');
                game.load.script('gray', 'https://cdn.rawgit.com/photonstorm/phaser-ce/master/filters/Gray.js');

            }

            create() {

                game.world.setBounds(0, 0, 800, 600);
                game.stage.backgroundColor = '#00AFFF';
                game.physics.startSystem(Phaser.Physics.ARCADE);

                var ground = game.add.tileSprite(0, game.world.height - 200, 3200, 200, 'ground');
                game.physics.arcade.enable(ground);
                ground.body.immovable = true;

                player = new Player(128, game.world.height - 300, 'player');
                player.enablePhysics();
                game.add.existing(player);
                game.camera.follow(player);
                cursors = game.input.keyboard.createCursorKeys();

                var gray = game.add.filter('Gray');
                var filterSprite = game.add.tileSprite(0, 0, game.world.width / 2, game.world.height, 'ground');
                filterSprite.alpha = 0.5;
                filterSprite.filters = [gray];

            }

            update() {
            }
        }