How to: Overlay a UIVisualEffectView on top of SKScene?

All,

I have a container in the main ViewController and when my game is paused i want to overlay this blurr effect on the gamescene. The container has a UIView with UIImage and UIButtons.


Is there an example of how to do this? or can someone write some spaghetti code that indicates the general idea?

Accepted Reply

I've added Visual Effect View (tag 22) to Game View Contoller in storyboard. Then I've added view container (tag 999) to Game View Controller in storyboard. In view container I show my help dialog with UIButton, UILabel, etc.. Below is peace of my spaghetti code:

    override func viewDidAppear(_ animated: Bool) {
        /
        let blurView = skView.viewWithTag(22)
        blurView?.alpha = 0
        blurView?.isHidden = true
    
        /
        let helpView = skView.viewWithTag(999)
        helpView?.frame.origin.y += skView.frame.maxY
        helpView?.isHidden = true
    }


     /
    private func hideViewWithAnimation(_ view: UIView, completion block: (() -> Swift.Void)? = nil) {
     
        var rect = view.frame
        rect.origin.y += skView.frame.maxY
     
        UIView.animate(withDuration: 0.3, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations: {
            view.frame = rect
        }, completion: { _ in
            view.isHidden = true
            if block != nil {
                block!()
            }
        })
    }

    /
    private func showViewWithAnimation(_ view: UIView, completion block: (() -> Swift.Void)? = nil) {
        view.isHidden = false
        var rect = view.frame
     
        rect.origin.y -= skView.frame.maxY
     
        UIView.animate(withDuration: 0.3, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: {
            view.frame = rect
        }, completion: { _ in
            if block != nil {
                block!()
            }
        })
    }

    private func showBlurEffect() {
        let blurView = skView.viewWithTag(22)
        blurView?.isHidden = false
        UIView.animate(withDuration: 0.3, animations: {
            blurView?.alpha = 1.0
        })
    }

    private func hideBlurEffect() {
        let blurView = skView.viewWithTag(22)
        UIView.animate(withDuration: 0.3, animations: {
            blurView?.alpha = 0.0
        }, completion: { _ in
            blurView?.isHidden = true
        })
    }

    func showHelpDialog() {
        print("Help Dialog Will Show")
        let helpView = skView.viewWithTag(999)
        showViewWithAnimation(helpView!)
        showBlurEffect()
    }

    func hideHelpDialog() {
        /
        let helpView = skView.viewWithTag(999)
        hideViewWithAnimation(helpView!)
        hideBlurEffect()
    }


p.s.: you can see the blur effect over in my game: https://www.wodbgame.com

Replies

I've added Visual Effect View (tag 22) to Game View Contoller in storyboard. Then I've added view container (tag 999) to Game View Controller in storyboard. In view container I show my help dialog with UIButton, UILabel, etc.. Below is peace of my spaghetti code:

    override func viewDidAppear(_ animated: Bool) {
        /
        let blurView = skView.viewWithTag(22)
        blurView?.alpha = 0
        blurView?.isHidden = true
    
        /
        let helpView = skView.viewWithTag(999)
        helpView?.frame.origin.y += skView.frame.maxY
        helpView?.isHidden = true
    }


     /
    private func hideViewWithAnimation(_ view: UIView, completion block: (() -> Swift.Void)? = nil) {
     
        var rect = view.frame
        rect.origin.y += skView.frame.maxY
     
        UIView.animate(withDuration: 0.3, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations: {
            view.frame = rect
        }, completion: { _ in
            view.isHidden = true
            if block != nil {
                block!()
            }
        })
    }

    /
    private func showViewWithAnimation(_ view: UIView, completion block: (() -> Swift.Void)? = nil) {
        view.isHidden = false
        var rect = view.frame
     
        rect.origin.y -= skView.frame.maxY
     
        UIView.animate(withDuration: 0.3, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: {
            view.frame = rect
        }, completion: { _ in
            if block != nil {
                block!()
            }
        })
    }

    private func showBlurEffect() {
        let blurView = skView.viewWithTag(22)
        blurView?.isHidden = false
        UIView.animate(withDuration: 0.3, animations: {
            blurView?.alpha = 1.0
        })
    }

    private func hideBlurEffect() {
        let blurView = skView.viewWithTag(22)
        UIView.animate(withDuration: 0.3, animations: {
            blurView?.alpha = 0.0
        }, completion: { _ in
            blurView?.isHidden = true
        })
    }

    func showHelpDialog() {
        print("Help Dialog Will Show")
        let helpView = skView.viewWithTag(999)
        showViewWithAnimation(helpView!)
        showBlurEffect()
    }

    func hideHelpDialog() {
        /
        let helpView = skView.viewWithTag(999)
        hideViewWithAnimation(helpView!)
        hideBlurEffect()
    }


p.s.: you can see the blur effect over in my game: https://www.wodbgame.com

Thanks for the help and link.


Cool webpage, what did you use to get your code embedded in the webpage?

It's a static web site (without CMS).

My stack: Bootsrap (html,css,js) + Firebase (hosting static content)