Menu
Can someone provide an example of how to progressively blur a SKSpriteNode's image using Apple's Sprite Kit? For instance, let's say the user touches a button on the screen which will then trigger the background to slowly (i.e. progressively) blur until it reaches a specific threshold. Ideally, I would like to reverse the process too (e.g. allow the user to unblur the image by touching the same button).
224
Google Kawase blur and Gaussian blur shaders for some reference. I've considered it, but discarded it, as there's times when I would want to un-blur it. A solution I've thought is to have every sprite imported blurred and unblurred, and fade between them. But this would mean to double the size of all the sprites.
SpriteKit. The SpriteKit framework makes it easy to create high-performance, battery-efficient 2D games. With support for custom OpenGL ES shaders and lighting, integration with SceneKit, and advanced new physics effects and animations, you can add force fields, detect collisions, and generate new lighting effects in your games.
The sprite is blurred in the center, but the borders keep the hard edges that they had when not blurred, so it looks ugly. So still not a good solution for the problem... but the borders keep the hard edges that they had when not blurred, so it looks ugly.
They just blur the color which makes the output alpha the same as the input alpha, thus the hard edges. I've actually tried depth of field fx, but couldn't make it to work with sprites. Even tried some asset store depth of field shader and they don't work with sprites, not sure why.
There are two possible paths to take on this, both use SKEffectNodes
SKEffectNodes allow you to apply CI Filters to a node.
There is a CI Filter for Gaussian Blur. So Create a SKEffectNode, and assign it a blur filter, then add the button as a child.
How do you animate it?
Use SKAction to create a custom action, and change the parameters of filter, however, this can be slow and doesn't always give the 'progressive' blur effect you might expect, so what I do is this:
I create a filter and SKEffectNode like described above, then I render the result to a Texture, using SKView.textureForNode. I then add the resulting texture to an array, after that I loop this, continuinng to apply the blur effect on top of the previous image created, until I have a set number of frames. Then use the textures created to make an animation with SKAction.animateWithTextures. In my experience, this comes out very nicely.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
