Filter on group not working

[EvilB]

Hey all,

I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works.

I'm working on my first Typescript project and I like it a lot!
I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group

When I apply a filter to a sprite that I simply added like:

            this.body = this.add.sprite(0, 0, 'bgBase');
            this.body.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ];

the blur filter is applied.

Now when I try to apply the filter to a container which contains Sprites, like:

            this.container = new Container(this.game);
            this.container.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ];

does NOT work.

But when I apply the filter directly to a Sprite inside the container, like:

            this.container.someSprite.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ];

the filter is applied as expected.

I must be overlooking something important for how I create or add the group, but I keep missing it.
I hope somebody has an idea about where to look.

Help will be much appreciated!

[samme]

Try it with a regular Phaser.Group to confirm that Container isn't the problem.

The BlurX/BlurY constructors should have just 1 argument, this.game.

[EvilB]

Thanks for your help Samme!

You have a point. I tried the following in MainGame:

        testGroup: Phaser.Group;

        this.testGroup = this.game.add.group();
        this.testGroup.add(this.someSprite);
        this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ];

and this works, so I must be doing something wrong in my Container class, which looks like this:

module Game {
    
    export class Container extends Phaser.Group {
    
        someSprite: Phaser.Sprite;
        positionX: number;
        positionY: number;

        constructor(game: Phaser.Game, x:number, y:number) {
            super(game, null, 'Container');
            this.positionX = x;
            this.positionY = y;
            this.create();
        }

        create() {
            this.someSprite = this.game.add.sprite(this.positionX, this.positionY, 'someSprite');
            this.someSprite.anchor.setTo(0.5);
        }

    }

}

which I call from MainGame like this:

        testGroup: Container;

        this.testGroup = new Container(this.game, this.world.centerX, this.world.centerY);
        this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ];

This shows me the sprite, but the filter is not applied.
As mentioned before, the filter is applied when I in this example call:

         this.testGroup.someSprite.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ];

 

By the way, when I apply the filter like this:

this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game) ];

Typescript throws an error. Or is that not what you meant when you wrote that the BlurX/BlurY constructors should have just 1 argument?

[samme]

Make sure your Container is actually in the display tree and that it contains some children. Try

super(game, game.world, 'Container');

and

this.someSprite = this.game.add.sprite(this.positionX, this.positionY, 'someSprite', /*frame=*/ null, /*parent=*/ this);

Did you use v2/filters/BlurX.js? That constructor has just 1 argument. But maybe that makes no difference.

[EvilB]

argh, unfortunately that's not it.
When I add the frame (null) and parent (this) to the Sprite, the application hangs because of a RangeError "Maximum call stack size exceeded" and I see that it keeps trying to create the Sprite over and over again.

I'm also not sure the issue is with the sprite, since it does blur when I filter just the sprite (directly). So my hope was that adding the Container to the display tree, but replacing null with game.world unfortunately did not do the magic...

Any other ideas? I'm searching everywhere, but it turns out that the amount of articles and forum posts on Typescript issues is way less that Javascript issues (but I'm still excited by Typescript, don't get me wrong!).

All help is welcome!

[EvilB]

It works when I do it like this:

module Game {
    
    export class Container extends Phaser.Group {
    
        someSprite: Phaser.Sprite;
        positionX: number;
        positionY: number;

        constructor(game: Phaser.Game, x:number, y:number) {
            super(game, game.world, 'Container');

            this.positionX = x;
            this.positionY = y;
            this.create();
        }

        create() {
            var someSprite = this.game.add.sprite(this.positionX, this.positionY, 'someSprite');
            someSprite.anchor.setTo(0.5);
            this.add(someSprite);
        }
        
    }
    
}

Per Samme's advice I added Container to the display-tree and I add the Sprite to the group in a different way.
The combination of all does the trick, even though I still have some reading to do to understand why this was the solution.

Thanks for your help Samme! much appreciated!

[EvilB]

Any chance you happen to know how I can increase the intensity of my blur?
as mentioned above I apply my blur like this:

this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ];

 

[EvilB]

ahhh, found it... I changed my approach a bit and got it to work without any complaints from the Typescript compiler.

For who's interested, this is how I now apply my blur filter:
 

            var groupBlur = new Phaser.Filter['BlurY'](this.game, null, '');
            groupBlur.blur = 36;
            this.testGroup.filters = [groupBlur];

 

There is probably a better and easier way, but I'm not Pro enough to figure out the better way...