In an XNA 2D game, I am thinking about blurring the background slightly to increase the feeling of depth? I am already using parallax scrolling which works pretty well in terms of enhancing depth perception. However, some newer games e.g. Super Mario Bros. 2 on the Nintento 3DS additionally use a blurred background.

Admittedly, this is a pretty extreme example:

SMB2 on 3DS example http://www.zavvi.com/blog/wp-content/uploads/2012/08/MARIO2-580x347.jpg

For me, the blurring visually is not very pleasing but nevertheless somewhat enhances the feeling of depth. I was wondering if there are any studies or personal experiences out there on the subject?

At the moment, the blurring is created by a HLSL pixel-shader (or GLSL though Mojoshader with MonoGame) which is parameterized by the velocity of movement (the faster the more blurred).

  • 4
    \$\begingroup\$ Why not simply blur the image itself? No need to overcomplicate things. \$\endgroup\$
    – Djentleman
    Jan 20, 2013 at 9:06
  • 1
    \$\begingroup\$ To help separate foreground and background, you might also want to reduce color saturation, or lighten the background overall. Just blurring it will make the players' eyes hurt! \$\endgroup\$
    – DarenW
    Jan 25, 2013 at 4:13
  • 1
    \$\begingroup\$ It probably looks distracting because there is no "fog color" fading the scenery in the distance. \$\endgroup\$
    – ChrisC
    Jan 25, 2013 at 23:09

2 Answers 2


There are a couple of options.

  1. Blur the image itself (in Photoshop, GIMP, whatever).
  2. Blur the image using a shader (probably not too hard)
  3. Blur the image manually. (Blurring is really averaging of nearby pixels.)

I would personally favour reason #1, unless there's a very strong reason not to. If you need the original, unblurred image, then keep it alongside the blurred version.

Option #2 is probably a good learning experience if you've never written a shader before (I haven't), and the performance is probably not bad; the advantage is that you won't need to save the blurred version of the image alonside the original, and that you can modify the blur at runtime (eg. progressively blur more over time).

  • 1
    \$\begingroup\$ #1 will be fastest but it is not always possible. #2 its very easy shader. Exampe shader with this functionality can be found on xbox.create.msdn.com/en-US in education tab \$\endgroup\$
    – EOG
    Jan 24, 2013 at 22:33
  • \$\begingroup\$ @EOG I'm using MonoGame (even though I'm only targeting PC), so shaders aren't as simple as I like :) \$\endgroup\$
    – ashes999
    Jan 24, 2013 at 22:36
  • \$\begingroup\$ @asges999 Yep, monogame shaders are a bit tricky. If I remember I'll try it this weekend and post results here. \$\endgroup\$
    – EOG
    Jan 24, 2013 at 22:54
  • \$\begingroup\$ Maybe this is a misunderstanding. I use the blurring (only) in-game at 60 fps so no external tools (Photoshop etc.) can be used. I think shaders are the only way to do this. Furthermore, my question is not about HOW this can be implemented (it already is) but IF it should be used. \$\endgroup\$
    – ares_games
    Jan 25, 2013 at 13:16
  • 1
    \$\begingroup\$ @pad_ares my answer gives you a summary of the pros and cons of each approach. How did you implement it? \$\endgroup\$
    – ashes999
    Jan 25, 2013 at 16:25

To me that screenshot looks like the background scene has been rendered as 3D and a depth of field effect has been applied, to simulate a camera lens.

Personally I don't mind the effect too much when the depth of field is fixed, but it gets more annoying when it won't focus on what you want it to in an FPS.

  • \$\begingroup\$ The game is 2D (think something like Mario) so there is only a limited need to focus something in the background. \$\endgroup\$
    – ares_games
    Jan 25, 2013 at 13:17

You must log in to answer this question.

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