2 Replies
      Latest reply on Feb 12, 2019 3:34 PM by gchiste
      igorland Level 1 Level 1 (0 points)

        Hi. For the past few days, I have been trying to create an SKShapeNode (a rectangle) that will be used as a menu screen moving down from the outside of the screen when a button is tapped. Everything behind the node should be blurred.

         

        Something to this effect: https://stackoverflow.com/questions/49142867/spritekit-blurred-background-sknode

         

        Alternatively, I may have everything in the background blurred with the exception of the SKShapeNode and its children.

         

        Using this:

         

        let  blur = CIFilter(name:"CIGaussianBlur",withInputParameters: ["inputRadius": 10.0])
        self.filter = blur
        self.shouldRasterize = true
        self.shouldEnableEffects = true
                            
        menu.run(moveMenuDown)

         

        where self is the scene, blurs the background and the SKShapeNode. Besides, it is an awful hit on FPS.

         

        I tried the following:

         

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.view!.bounds
        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.view!.addSubview(blurEffectView)

         

        This is very fast, but again this blurs everything including the SKShapeNode, which is not intended.

         

        Is there anyone who did something like that?

         

        Thanks a lot!

        • Re: Fast way to blur the background behind a Sprite Node
          moontiger Level 1 Level 1 (0 points)

          Hi, I don't know if this is ideal for what you want, but I was trying to do a similar thing, except the entire background would be blurred. I found the following things key to helping reduce frame rate hit...

           

          1. I think the higher the blur inputRadius, the slower it is. 4 blurs it enough for my situation.

          2. Lower resolution is quicker. My scene is only 200x200 and then scaled to fit, etc. Luckily it suits the graphics style I'm doing.

          3. I rendered the entire scene to a texture (view.texture(from: myscene)) and then applied that texture to a SKSpriteNode which was a child of an SKEffectNode which has the blur filter applied.

           

          With those things applied, I'm still seeing a frame rate of at least 60fps.

          • Re: Fast way to blur the background behind a Sprite Node
            gchiste Apple Staff Apple Staff (80 points)

            moontiger is on the right track, however, it is absolutely possible to blur only a portion of your SpriteKit scene, here is how:

             

            1.  Set up a node (contentNode) within your scene that will hold all of your scene's contents, except for the blur node.

             

            2.  Add an SKEffectNode to the root of your scene, add an SKShapeNode (blurNode) as its child.  Make sure that your blurNode is in front of all of the content in your contentNode by setting its zPosition.

             

            3.  Set the filter of your SKEffectNode to a CIGaussianBlur:

             

            let blurFilter = CIFilter(name: "CIGaussianBlur", parameters: ["inputRadius": 75])
            

             

            4.  Set the initial fillColor of your blurNode to .white

             

            5.  Generate an SKTexture of your content node, crop this texture using the frame of your blurNode, set this cropped texture as the fillTexture of your blurNode (self is the SKScene here):

             

            let fillTexture = self.view?.texture(from: contentNode, crop: blurNode.frame)