4
\$\begingroup\$

I'm making a game in unity and I'm trying to add a background blur effect to my game to make things a bit more clear.

Here is an example of what I am looking to do: Background image blur

I'm trying to get the background blurriness and cloudy effect, but I have no idea how to go about getting a similar effect. It looks like a blur + cloudiness of some sort, but I've tried blurring my background objects and it just looks terrible.

Here is what I currently have: Current Game Without background effects

I'm using Unity, it's all 2D sprites so I don't think I can use shaders, which is the only solution I could find people talking about, and have no idea how to proceed. Any help would be appreciated, Thanks.

Edit: Even knowing the terms I could use to search for a solution would help as I'm not quite sure what it is called.

\$\endgroup\$
4
  • 1
    \$\begingroup\$ Why can't you use shaders with your sprites? You should be able to. Going the shader route you'd want to do a Gaussian blur. You'd want to separate it and do an x axis blur then a y axis blur. Separating it like that is more efficient than doing a 2d blur. If you can't go the shader route or decide not to you could also try using alpha to fade out the things in the distance or make them either blacker or whiter in the distance to give the visual cue of depth and help the player distinguish the foreground. \$\endgroup\$
    – Alan Wolfe
    Jun 1, 2015 at 1:29
  • \$\begingroup\$ Are shaders not just full screen effects, wouldn't that make everything blurry if was to use them? or could I just apply it to specific layers? I guess I'm not really all that familiar with them so I assumed I couldn't. \$\endgroup\$
    – Latency
    Jun 1, 2015 at 2:58
  • 1
    \$\begingroup\$ You can apply shaders to specific shapes / models (whether that's a 3d model or just a "quad" with a texture on it aka a sprite), or it can be full screen. You can apply a shader to specific layers, yep! You should read up on shaders or use alpha or whitening / blackening like I was saying. Shaders is the only way to get the blurring you want though, without making and using pre blurred images. \$\endgroup\$
    – Alan Wolfe
    Jun 1, 2015 at 3:10
  • \$\begingroup\$ I'll read up on them then, do know of any good resources off the top of your head? Also if this is going to solve my problem you should throw this in as an answer so I can mark it once I've done some reading. \$\endgroup\$
    – Latency
    Jun 1, 2015 at 3:12

2 Answers 2

Reset to default
2
\$\begingroup\$

Shaders are what you need to use to make this happen, if you don't want to use pre-blurred art.

Basically what you'd do is render each layer to it's own texture every frame, then blur each layer the amount that it should be blurred, then combine all the layers into a single image, which is the output image you see on the screen.

For blurring, you are probably going to be best off using a 2 pass gaussian blur, where the first pass is X axis, and the second pass is Y axis. Doing it in two one dimensional passes is way more efficient than doing a single two dimensional pass.

Here's a good looking tutorial on writing shaders in unity: https://cgcookie.com/unity/cgc-courses/noob-to-pro-shader-writing-for-unity-4-beginner/

Hope that helps!

\$\endgroup\$
2
  • \$\begingroup\$ Yep that worked, thanks for the insight, quick question, Would I just apply a could texture layer on top of the astroids layer and blur that to get the cloudiness in that photo? or do you know of a better way to do it? \$\endgroup\$
    – Latency
    Jun 1, 2015 at 12:38
  • 1
    \$\begingroup\$ Yeah that could work, or you could do it procedurally. A common way to make clouds is using multiple octaves of perlin noise. Here's a link on that: freespace.virgin.net/hugo.elias/models/m_perlin.htm \$\endgroup\$
    – Alan Wolfe
    Jun 1, 2015 at 14:35
1
\$\begingroup\$

A convincing blur is really expensive on mobile. However if this is on desktop, and you want a dynamic blur, here's something I've written:

Gaussian Blur

Here is what it looks like: enter image description here

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .