将背景模糊添加到SKSpriteNode（或SKScene）

I have an OverlayPanel SKScene on a SCNScene. This panel contains colors as SKSpriteNode. I don't know how to add a background blur effect to the panel.

我在SCNScene上有一个OverlayPanel SKScene。此面板包含SKSpriteNode颜色。我不知道如何向面板添加背景模糊效果。

Another question: I use this method to add the panel:

另一个问题：我使用此方法添加面板：

 colorPanelScene = SKScene(fileNamed: "art.scnassets/ColorPanelScene")!
 SCNsceneView.overlaySKScene = colorPanelScene
 SCNsceneView.overlaySKScene!.userInteractionEnabled = true;

Is this the correct way or should I create the panel as a separate UIView (and apply the blur effect in a simplier way)?

这是正确的方法还是应该将面板创建为单独的UIView（并以简单的方式应用模糊效果）？

2 个解决方案

#1

You can add an SKEffectsNode to your overlay scene to achieve this effect.

您可以将SKEffectsNode添加到叠加场景以实现此效果。

It is a little tricky though, loading it the way you are doing it will not be enough.

这有点棘手，但是按照你的方式加载它是不够的。

This method will only work with the background being static. Basically what we are going to do is screen shot the background, and load it into an SKEffectNode to get it to blur.

此方法仅适用于静态背景。基本上我们要做的是屏幕截图背景，并将其加载到SKEffectNode以使其模糊。

In the SceneKit editor, add a node to the scene(make sure it is not a child of other nodes) and make sure you set the class of this node to be an SKEffectNode with a name, I will call it EffectNode. This should have the lowest zPosition as possible when designing.

在SceneKit编辑器中，向场景中添加一个节点（确保它不是其他节点的子节点），并确保将此节点的类设置为带有名称的SKEffectNode，我将其称为EffectNode。在设计时，这应该具有最低的zPosition。

Then in code, you want to do the following:

然后在代码中，您要执行以下操作：

if let effectNode = colorPanelScene.childNodeWithName("EffectNode") as? SKEffectNode {
    let  blur = CIFilter(name:"CIGaussianBlur",withInputParameters: ["inputRadius": 10.0]);
    effectNode.filter = blur;
    effectNode.shouldRasterize = true;
    effectNode.shouldEnableEffects = true;


    UIGraphicsBeginImageContextWithOptions(view.bounds.size, true, 0)
        view.drawViewHierarchyInRect(view.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    let node = SKSpriteNode(texture:SKTexture(image: image));
    effectNode.addChild(node);
}

Then, add another SKNode on top of the SKEffectNode, but make sure that it is not a child of the SKEffectNode. Throw all of your overlay elements into this SKNode.

然后，在SKEffectNode之上添加另一个SKNode，但要确保它不是SKEffectNode的子节点。将所有叠加元素抛出到此SKNode中。

#2

I would go with a UIVisualEffectView. It has all the nice optimizations from the UIKit and Core Animation guys, and will make your app look consistent on the platform.

我会选择UIVisualEffectView。它具有来自UIKit和Core Animation人员的所有优秀优化，并将使您的应用程序在平台上看起来一致。

#1