Hey everyone,
I have just implemented a pause feature in my game, which currently looks like this.
I’d like to blur the background so the user can focus mainly on the pause menu only. How do I do this?
Hi @DevilZ,
So that isn’t so straightforward to implement. Using CSS you can blur HTML elements but that won’t work for a canvas that is rendering a scene using WebGL.
For that you need to implement a custom shader with a post process effect. You can use the bokeh effect without a focus point to blur your scene, but that would be quite heavy to run on many mobile devices.
Or implement a simple gaussian blur shader:
1 Like
I think that may work, I am not very experienced with shaders, so could you send an example? The game isn’t for mobile, so that won’t be a problem.
I’ve attached some links on my post.
1 Like
You might be able to do it with something like Ermis Effect’s DOF blur or some other custom shader. Other than that, I don’t know.
What I do to solve a similar issue is to insert a colored plane and partially dissolve it - picking a color that seems appropriate. In your case, that’d probably be dark blue or purplish.
2 Likes
Alright, will read through both, thanks a lot! Will revert if I have any questions.
Here’s an example picture of one of our implementations with the semi-transparent plane. Not a game, but a menu and a distracting background.
1 Like
@DevilZ another “trick” you can do is to put a white image element with opacity in the background and enable it the time that the game is paused.
That won’t blur the background, but it will make it lose focus behind the opened menu.
2 Likes
you could use grabPass solution.
http://playcanvas.github.io/#graphics/grab-pass.html
Add full screen quad / bottom UI element to use grabTexture and use custom shader to blur it using multiple samples from it.
2 Likes
Thanks a lot everyone for your responses, I very much appreciate it. I think @Murraybot is currently working on a solution, he will post it once he is done.
I went with @Christina’s idea and did about a 50 percent opacity on a dark image element. The pause menu was a root node enabled by the pause function, so no extra code was needed to implement the focus. Later I may use a darkened fuzziness map or something to really offset the menu.
3 Likes