Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PostFX effects distort image while resizing canvas #6503

Closed
Waclaw-I opened this issue May 12, 2023 · 7 comments
Closed

PostFX effects distort image while resizing canvas #6503

Waclaw-I opened this issue May 12, 2023 · 7 comments

Comments

@Waclaw-I
Copy link
Contributor

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
Copy link

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
Copy link
Contributor Author

@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
Copy link

scotlandisme commented May 23, 2023

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
Copy link
Collaborator

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
Copy link

saintflow47 commented Sep 30, 2023

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!
2023_09_30_133025

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
Copy link

seansps commented Apr 11, 2024

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.

@photonstorm
Copy link
Collaborator

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/possible-bug-blur-post-fx-moves-on-resize/14198/2

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 14, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants