So essentially what I wanted was something like this.
|The actual view with a carousel, Upgrade and Restore buttons on it|
|The parental gate with a translucent background frost effect similar to iOS UIToolbar|
How do they do it!
This can be done in 3 simple steps
- Convert the underlying UIView to an UIImage
- Frost/Blur the UIImage
- Set this new frosted/blurred UIImage as background of your new view
NOTE: The explanation of how to do these steps can be found in this SO Answer.
Convert the underlining UIView to an UIImage
This can be done by creating a new category of UIView and adding the following method to that category
Frost/Blur the UIImage
To frost/blur the UIImage that we created in the previous step we can use the Apples Image Effect category. The code for ImageEffects category looks as follows
Using this ImageEffects category we can frost/blur any UIImage as follows
Set this new frosted/blurred UIImage as background of your new view
This is by far the simplest step of all. All that needs to be done here is to set the newly created UIImage as the background of your new view. Our game is developed with Cocos2d and we could do this using the following lines of code
The end result is very satisfying. It looks great on the devices as well!
Thats all folks! I hope you like this realtime frosted glass/blurred effect as much as I do.