PostFX effects distort image while resizing canvas

[Waclaw-I]

Version

• Phaser Version: 3.60.0

• Operating system: Windows 10

• Browser: tried on FF / Chrome

Description

Hello,
I was upgrading to Phaser 3.60.0 and got some issues with, previously used without any problems on 3.55.2, rexrainbow Outline Plugin. I tried postFX glow and found out it has the same issue now.

Example Test Code

Example Here
Use your mouse wheel to resize canvas. Point at the image to add glow postFX effect.
Image will get distorted if effect is being applied while resizing. Everything is normal otherwise.

Additional Information

PreFX effects are working fine.

[KhalilFH]

hello there I looked into the docs and your problems seems that the PostFX pipeline is not refreshing correctly when the canvas is resized .Maybe Phaser 3.60.0 changed how the engine handles resizing, causing the PostFX effects to distort when the canvas size changes.I would recommend to manually clear the PostFX pipeline whenever the canvas is resized. here's how you could modify your code
`class GameScene extends Phaser.Scene {

preload() {
this.load.image('bomb', 'https://labs.phaser.io/assets/sprites/bombcolor.png');

}

create() {
const bomb = this.add.image(200, 200, 'bomb').setInteractive();

bomb.on('pointerover', () => {
  bomb.postFX.addGlow(0x0000ff);
})

bomb.on('pointerout', () => {
  bomb.postFX.clear();
})

this.input.on('wheel', (pointer, gameobjects, dx, dy, dz) => {
  const newWidth = this.scale.gameSize.width + dy;
  const newHeight = this.scale.gameSize.height + dy;

  this.scale.resize(newWidth, newHeight);

  // Manually clear the PostFX pipeline after resizing.
  if (bomb.postFX.length) {
    bomb.postFX.forEach(effect => effect.reset());
  }
});

}
}

new Phaser.Game({
type: Phaser.AUTO,
width: 800,
height: 600,
scene: [GameScene],
parent: 'gamecontainer'
});
`
here I tried to manually reset each effect in the PostFx pipeline whenever the canvas is resized.
This is my understanding of the problem if I misread something please tell me so I can look more into the problem.

[Waclaw-I]

@KhalilFH Thanks for checking it out. This workaround indeed does the trick and luckily I do not have a ton of FX'es (yet!) used.

[scotlandisme]

Just wanted to second this issue. I had to pull out my camera POSTFX completely for now (applies colourMatrix effects to be used in gif generation of game scene when user wants to share their creation). Clearing prefx/ recreating it worked fine for resolving the issue for each sprite (ie glow, or outline) but haven't found work around for applying postfx to camera it's self.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[saintflow47]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

Hey Richard, i just built the newest version of phaser from source and can confirm that the rescale issue is fixed! However, the blur issue we discovered is still present. As soon as a colormatrix postfx gets added to a layer, all the sprites on the layer get blurred, even when those sprite texture frames dimensions are 128x128. I can also open a new issue for that if that makes sense!

Edit: I think this issue has nothing to do with the blur issue we encountered. This might be just how colormatrix works and that if that postfx effect is active in general, it does things to the sprites, even if in theory it should not change anything.

[seansps]

I am actually seeing issues today with 3.80.1 and postFX.blur.
I think it's related to this issue but I am not sure. I am adding a blur to a graphics object, and it works great. But then if the window resizes (using Phaser.Scale.RESIZE mode), the blur does not seem to resize. I've tried clearing the FX, re-adding blur, destroying, remaking the graphics. I can't figure out a workaround.