Is there any way to apply a blur effect to an image or sprite in Phaser 3?
You could apply a custom pipeline to the object. Something like this:
https://labs.phaser.io/edit.html?src=src\camera\camera%20blur%20shader.js
That’s for the whole camera but you could apply it to a single object like this:
https://labs.phaser.io/edit.html?src=src\renderer\Custom%20Pipeline.js
Ok, that is something I will try then. Thanks!
There’s no built-in way to do this. The only way it could be done is with a shader, but if you need to use it a lot it will become inefficient really quickly. The only other way would be to use pre-blurred images (i.e. blur them in Photoshop and export as PNGs), which, depending on the effect you’re after, often works well.
The problem with using a premade image is that I would like to use it with an animated sprite. However, I will try B3L7’s suggestion and if it doesn’t work well then I will figure out some way to hack it using a static image instead. Thanks!
There’s no reason why you can’t have a blurred animated Sprite too (i.e. create an animation from the blurred frames). It depends on how many frames there are and how many sprites need blurring, but if the numbers are low this would be a lot faster than using a shader.
1 Like
What exactly is the ‘blur’ method here used for then? https://photonstorm.github.io/phaser3-docs/Phaser.Core.Events.html
I couldn’t find an example for it, but the description is exactly what I am looking to do for modals. Pre-blurring a png is very heavy at 1920x1080 too depending on the look.
blur is what it’s called when a browser, or browser element, loses focus. It’s nothing to do with actually blurring an image I’m afraid. More details here: https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
1 Like