4

我正在编写一个 SpriteKit 游戏，但在 SKView 上遇到了视图模糊的问题。它应该在游戏暂停时从右侧滑动，并且它应该模糊其父视图（SKView）的内容，就像 iOS 7 中的控制中心面板一样。这是所需的外观：

在此处输入图像描述

我实际得到的是：

在此处输入图像描述

事实上，左边的视图并不是全黑的，你可以看到超级视图的高光在几乎不透明的子视图中略微挣扎，但没有应用模糊。是 iOS 8 的错误/功能，还是我的错误/误解

这是我的 UIVisualEffectView 子类的要点：

class OptionsView: UIVisualEffectView {
//...
    init(size: CGSize) {
        buttons = [UIButton]()
        super.init(effect: UIBlurEffect(style: .Dark))
        frame = CGRectMake(-size.width, 0, size.width, size.height)
        addButtons()
        clipsToBounds = true
    }
    func show() {
        UIView.animateWithDuration(0.3, animations: {
            self.frame.origin.x = 0
        })
    }
    func hide() {
        UIView.animateWithDuration(0.3, animations: {
            self.frame.origin.x = -self.frame.size.width
        })
    }

然后在 GameScene 类中：

在初始化程序中：

optionsView = OptionsView(size: CGSizeMake(130, size.height))

在 didMoveToView（视图：SKView）中：

view.addSubview(optionsView)

按下暂停按钮时：

self.optionsView.show()

PS 虽然我知道另外两种实现模糊视图的方法，但我认为这是最简单的，因为我的应用程序将仅支持 iOS8

  1. 从 superview 渲染一个模糊的静态图像 -> 将 UIImageView 放在 OptionsView 上，使用 clipsToBounds = true -> 在为 optionsView 位置设置动画时为 UIImageView 位置设置动画，以便模糊相对于 superview 保持静止

  2. 忘记 UIView、UIVisualEffectView 和 UIBlurView，将 SKEffectNode 与 SKCropNode 一起使用。

4

2 回答 2

2

好的，我已经设法使用 SKEffectNode 而不是 UIVisualEffectView 获得所需的效果。这是面临相同问题的人的代码

class BlurCropNode: SKCropNode {
    var blurNode: BlurNode
    var size: CGSize
    init(size: CGSize) {
        self.size = size
        blurNode = BlurNode(radius: 10)
        super.init()
        addChild(blurNode)
        let mask = SKSpriteNode (color: UIColor.blackColor(), size: size)
        mask.anchorPoint = CGPoint.zeroPoint
        maskNode = mask
    }
}

class BlurNode: SKEffectNode {
    var sprite: SKSpriteNode
    var texture: SKTexture {
        get { return sprite.texture }
        set {
            sprite.texture = newValue
            let scale = UIScreen.mainScreen().scale
            let textureSize = newValue.size()
            sprite.size = CGSizeMake(textureSize.width/scale, textureSize.height/scale)
        }
    }
    init(radius: CGFloat) {
        sprite = SKSpriteNode()
        super.init()
        sprite.anchorPoint = CGPointMake(0, 0)
        addChild(sprite)
        filter = CIFilter(name: "CIGaussianBlur", withInputParameters: ["inputRadius": radius])
        shouldEnableEffects = true
        shouldRasterize = true
    }
}

结果：

在此处输入图像描述

虽然有几个问题

  1. 裁剪不适用于 SKEffectNode，直到它的 shouldRasterize 属性设置为 true。我弄得整个屏幕都模糊了。所以我仍然不知道如何正确实现实时模糊。

  2. BlurCropNode 上的动画不够流畅。由于捕获纹理并将其设置为 effectNode 的 sprite 子项，因此在开始时会有延迟。即使 dispatch_async 也无济于事。

如果有人可以帮助解决至少一个问题，将不胜感激

于 2014-07-28T16:33:45.460 回答
1

我知道我可能有点晚了，但我遇到了同样的问题，并找到了在部分屏幕上创建实时模糊的解决方案。它基于本教程：http ://www.youtube.com/watch?v=eYHId0zgkdE ，其中他使用着色器来模糊静态精灵。我扩展了他的教程来捕捉屏幕的一部分，然后对其应用模糊。对于您的问题，您可以在该侧边栏下捕获。

首先，您创建一个SKSpriteNode来保存捕获的纹理。然后在didMoveToView()你添加你的模糊着色器到那个精灵。（你可以在 GitHub 上找到 blur.fsh 文件，在 youtube 视频的底部有一个链接。）

override func didMoveToView(view: SKView) {
    blurNode.shader = SKShader(fileNamed: "blur")

    self.addChild(blurNode)
}

然后，您必须捕获要模糊的视图部分并将其应用于SKTexture，在我的情况下，blurNode.

override func update(currentTime: CFTimeInterval) {
    // Hide the blurNode to avoid it be captured too.
    blurNode.hidden = true
    blurNode.texture = self.view!.textureFromNode(self, crop: blurNode.frame)
    blurNode.hidden = false
}

应该就是这样。在我的 iPad mini 上，模糊为屏幕宽度的 1/3，fps 为 58-59。使整个屏幕模糊，fps 降至 22 左右，因此对于某些事情显然不是理想的，但希望它有所帮助。

于 2015-01-12T21:36:19.517 回答