SpriteKit中的磨砂玻璃效果？

Posted 2023-02-25

【中文标题】SpriteKit中的磨砂玻璃效果？

【英文标题】：Frosted glass effect in SpriteKit?

【发布时间】：2014-07-06 15:31:26

【问题描述】：

我正在尝试为我的游戏中的节点添加磨砂玻璃效果。例如http://bit.ly/1vNMvAG 这样做的正确方法是什么？

【问题讨论】：

模糊过滤器会产生类似link 的效果，但我需要模糊节点后面的所有内容。类似“模糊蒙版”的东西。

@CHBuckingham 我需要模糊节点后面的场景。在模糊白色纹理时我不会得到这种效果。

@CHBuckingham 这说明了区别：link 或者我不明白你的意思？

删除 cmets 并在答案中一步一步。

【参考方案1】：

我一定是遗漏了一些东西，因为我会按照原始 cmets 中的建议留在 SpriteKit，但也许我会接受教育并学习新的东西。 :-) EDIT，简化了一切，现在您可以通过将裁剪蒙版设置为属性来移动裁剪蒙版，然后随时动态更改其位置。显然你可以用不同的精灵层来增加它的活力。

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;

【讨论】：

不幸的是，这不起作用。我只看到透明节点。

如果你不帮自己，我帮不了你。上面的代码效果很好。我不知道“只看到透明节点是什么意思”。但听起来你错过了一步。

我需要类似 ios7 的效果。 UIKit中有UIToolbar，我可以使用CALayer来改变它的形状，但是把它和SpriteKit混合起来是不现实的。

听起来你还是一头雾水。我不能再回到 cmets 了。我花时间为您提供了一个非常棒的逐步解决方案。你可以定制它，但你希望你的模糊效果加上一个可选的磨砂层看起来。祝你好运。 :-)

我认为这是正确的方法，感谢发布！

【参考方案2】：

据我所知，此效果仅在 ios 7 中可用。 Engin Kurutepe 已将其发布在 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

【讨论】：

更新：如果您没有使用 ios 7 sdk，请查看 ***.com/questions/11601166/…

但它适用于 UIView。如何为 SKSpriteNode 应用模糊？

我想解决方法是做类似 var overlay = UIView(new RectangleF(0,0, 100, 100)); overlay.AddSubviews(...)

谢谢！我添加了模糊的 UIImage 作为 SKSpriteNode 的纹理，效果很好。

@user3785463 太好了！知道一定有办法！