Frosted glass effect in SpriteKit?

Question

I'm trying to add frosted glass effect for nodes in my game. For example http://bit.ly/1vNMvAG What is the right way to do that?

Blur filter makes something like this [link](http://bit.ly/1rDorCR) But I need to blur everything behind the node. Something like "blur mask". — user3785463, Jul 06 '14 at 17:24
@CHBuckingham I need to blur the scene behind the node. I won't get this effect while blurring white texture. — user3785463, Jul 06 '14 at 20:03
@CHBuckingham This illustrates the difference: [link](http://bit.ly/1xCcgXr) Or I didn't understand you? — user3785463, Jul 06 '14 at 20:16
Removing comments and just putting a step by step in the answer. — Cooper Buckingham, Jul 06 '14 at 21:25

Cooper Buckingham · Answer 1 · 2014-07-07T00:12:49.277

1

I must be missing something, as I would just stay with SpriteKit, as suggested in original comments, but maybe I'll get schooled and learn something new. :-) EDIT, simplified everything, and now you can just move the crop mask by setting it as a property and then changing its position dynamically as you go. Obviously you could jazz it up with various sprite layers.

SKSpriteNode *bgImage = [SKSpriteNode spriteNodeWithImageNamed:@"bgImage.png"];
bgImage.anchorPoint = CGPointZero;
[self addChild:bgImage];

cropMaskNode = [SKSpriteNode spriteNodeWithImageNamed:@"clippingImage.png"];

SKCropNode *cropNode = [SKCropNode node];

SKSpriteNode *bgInsideOfCrop = [SKSpriteNode spriteNodeWithImageNamed:@"bgImage.png"];
bgInsideOfCrop.anchorPoint = CGPointZero;
SKEffectNode *effectNode = [SKEffectNode node];
effectNode.filter = [self blurFilter];
effectNode.shouldEnableEffects = YES;
effectNode.shouldCenterFilter = YES;
effectNode.shouldRasterize = YES;

[self addChild: cropNode];
[effectNode addChild:bgInsideOfCrop];
[cropNode addChild:effectNode];
cropNode.maskNode = cropMaskNode;

edited Jul 07 '14 at 00:12

answered Jul 06 '14 at 21:11

Cooper Buckingham

2,503
2
15
23

Unfortunately, this doesn't work. I just see transparent node. – user3785463 Jul 07 '14 at 09:27
I can't help you if you don't help yourself. The code above works great. I don't know what "only see a transparent node means". But it sounds like you missed a step. – Cooper Buckingham Jul 07 '14 at 09:32
I need something like iOS7 effect. There is UIToolbar in UIKit and I can change its shape using CALayer, but its not real to mix it with SpriteKit. – user3785463 Jul 07 '14 at 09:36
It sounds like you're still confused. I can't go back in forth in comments again. I took the time to give you a pretty great step by step solution. You can tailor it with however you'd like your blur effect plus an optional frosted layer to look. I wish you the best of luck. :-) – Cooper Buckingham Jul 07 '14 at 09:48
This is the correct approach in my opinion, thanks for posting it! – Howard Cohen Nov 21 '15 at 01:24

score 0 · Answer 2 · answered Jul 06 '14 at 15:36

0

this effect is only available in ios 7 to my knowlwdge. Engin Kurutepe has posted it on Github

- (void)willMoveToSuperview:(UIView *)newSuperview
{
    [super willMoveToSuperview:newSuperview];
    if (newSuperview == nil) {
        return;
    }
    UIGraphicsBeginImageContextWithOptions(newSuperview.bounds.size, YES, 0.0);
    [newSuperview drawViewHierarchyInRect:newSuperview.bounds afterScreenUpdates:YES];
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIImage *croppedImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect(img.CGImage, self.frame)];
    UIGraphicsEndImageContext();

    self.backgroundImage = [croppedImage applyBlurWithRadius:11
                                                   tintColor:[UIColor colorWithWhite:1 alpha:0.3]
                                       saturationDeltaFactor:1.8
                                                   maskImage:nil];
}

Code Sample Ref

answered Jul 06 '14 at 15:36

Rachel Gallen

27,943
21
72
81

update: if you are not using the ios 7 sdk then check out http://stackoverflow.com/questions/11601166/iphone-sdk-frosted-glass-ios-7-blur-effect – Rachel Gallen Jul 06 '14 at 15:40
But it is for UIView. How can I apply blur for SKSpriteNode? – user3785463 Jul 06 '14 at 15:53
i guess the workaround would be to do something like var overlay = UIView(new RectangleF(0,0, 100, 100)); overlay.AddSubviews(...) – Rachel Gallen Jul 06 '14 at 16:07
Thank you! I've added blurred UIImage as a texture of SKSpriteNode and it works good. – user3785463 Jul 06 '14 at 16:18
@user3785463 that's great! knew there had to be a way! – Rachel Gallen Jul 06 '14 at 16:18
Unfortunately, this method is good for static background, but not for dynamic. – user3785463 Jul 06 '14 at 17:22

Frosted glass effect in SpriteKit?

2 Answers2