Blurring the scene in SpriteKit

You know what’s pretty cool? SKEffectNode, that’s what. In the game I’m currently hacking on I wanted to have the screen slowly blur out underneath my UI, and a little mucking about with SKEffectNode and Core Image turned up a really nice-looking solution:

The above code will work nicely with the 2D cameras in Swift post. Since my UI is rendered in a separate node attached directly to the scene (and not attached to world), it doesn’t get blurred and everything looks nice and slick.

Blurred background, crisp UI.

Blurred background, crisp UI.

4 thoughts on “Blurring the scene in SpriteKit

  1. Dobromir Minchev says:

    Great article!

    I’ve some delay before starting to display the effect (a few seconds) which is very annoying. I’ve tried with very simple node (only one texture) and there is always this delay (I’m not talking about the blurDuration). It would be great if there is a way to loose it.

    • doches says:

      Computing the blur effect can be moderately expensive — how big is that texture? And what device are you running on? In the game I’m working on at the moment I only use the effect on new-ish (5S, Retina iPad Mini, &c) hardware, because no amount of tuning could make it run at an acceptable framerate on older devices.

      I know that’s not a super-helpful answer, but hey — it’s an expensive effect! When your do get the effect to start displaying, what does it do to your framerate?

  2. I tried this on a full screen image and it ran great on my new iPad Air 2 (dropped the framerate to 30fps, Choked anything less. The simulator dropped to a framerate of 1.5fps.

    Maybe a bit more than moderately expensive.

    • doches says:

      Definitely. I’m very carefully using it with small textures and at times when player interaction is very minimal, so a (somewhat) diminished framerate isn’t the end of the world. It’s an effect to be used sparingly, that’s for sure…

Leave a Reply

Your email address will not be published. Required fields are marked *