2

so in my project I have an SKEffectNode that I use to provide a glow effect around some of my spriteNodes. I use a spriteNode (blurNode) to get the color of my obstacle and then give it to the effectNode. This works fine.

 let blurNode = SKSpriteNode(imageNamed: "neonLine.png")
    blurNode.color = obstacle.color
    blurNode.colorBlendFactor = 1.0
    blurNode.size = CGSize(width: obstacle.size.width + 30, height: obstacle.size.height + 30)


    let effectNode = SKEffectNode()
    effectNode.shouldRasterize = true
    obstacle.addChild(effectNode)
    effectNode.addChild(blurNode)
    effectNode.filter = CIFilter(name: "CIGaussianBlur", withInputParameters: ["inputRadius":30])
    effectNode.alpha = 1.0

My issue occurs here.

let colorFadegreen = SKAction.sequence([SKAction.colorize(with: UIColor(red: 0, green: 0.6471, blue: 0.3569, alpha: 1.0), colorBlendFactor: 1.0, duration: 3)])

obstacle.removeAllActions()
obstacle.run(colorFadegreen)

blurNode.removeAllActions()
blurNode.run(colorFadegreen)

What I want to do is have the "glow" that's around the obstacle change colors with the obstacle. That is exactly what happens; however, when I do so my frame rate drops down to 30fps.

So, my question is does anyone know how to improve the performance of this task? Or is there maybe another way I could go about doing this.

One of the ideas I thought of would be to manually blur the "neonLine.png" in photoshop and then add it to the blur node like so let blurNode = SKSpriteNode(imageNamed: "bluredNeonLine.png"). The only thing is I can never get the blur right it always looks off.

Any help would be very much appreciated. Thanks!

EDIT:

Here are some photos of the glows in my project:

Glowing lines on iPhone game

Here is the glow and lines changing color:

Glowing lines on iPhone game

Matthew Anguelo
  • 293
  • 2
  • 12
  • can you show me an example of a glow you've seen that you like the look of? If so I can probably show you how to make that with code. As to improving performance of the ability to change colour, you can either rasterise your node and apply the colour change to it, or bake it into an SKTexture and then create a Sprite from it, and change the colour of that. – Confused Nov 15 '16 at 15:40
  • Hey I edited my post to show you the glow that I like. Also, I think baking it into the texture is what I'm looking for. How do you do that? – Matthew Anguelo Nov 15 '16 at 15:58
  • side note, because you're thinking of rendering to a texture, you can use multiple glow effects with different radius and opacity to get really nice gradients to your glows. Most good looking glows are done this way, with a stacking of the effect at various sizes and strengths to get an exponential fall off, which looks much better. – Confused Nov 15 '16 at 16:44
  • Just a thought, if you remove this line, do you still get the colour blend working, and go back to 60fps: `blurNode.run(colorFadegreen)` – Confused Nov 15 '16 at 16:55
  • I ask, because this animation of the fade is going to cause the effect to re-create itself via re-rendering for every single frame of the animation that changes the colour, and rasterise each of them, too. So that's double work, and probably unnecessary from the beginning. If your `neonLine.png` is white and you colourize it blue to start with, this should be performant with the shouldRasterise, if you remove this animation of the blurNode's colorisation. – Confused Nov 15 '16 at 16:57

1 Answers1

2

Three answers to the performance question with regards glows:

    1. Use a pre-rendered glow, as per your mentioning in the question, done in Photoshop or similar bitmap editor, exported as bitmap with opacity and used as an SKSpriteNode texture, probably with additive blending for best results, and colour caste to taste.
    1. Bake a texture of the SKEffectNode that's creating a desirable glow within SpriteKit by making it into a texture, and then loading it into an SKSpriteNode, as per this example: https://stackoverflow.com/a/40137270/2109038
    1. Rasterise the results from your SKEffectNode and then hope your changes to colour casts don't cause re-rendering. This is shown in a wonderful extension, here: https://stackoverflow.com/a/40362874/2109038

In all cases, you're best off rendering a white glow that fades out as you like, and then applying colour blend changes to it, since SpriteKit has this built in, and it's reasonably performant in the few tests I've done. This is known as colorizing:

You can change and animate both the blend amount: https://developer.apple.com/reference/spritekit/skspritenode/1519780-colorblendfactor

and the color being blended with the texture: https://developer.apple.com/reference/spritekit/skspritenode/1519639-color

Community
  • 1
  • 1
Confused
  • 6,048
  • 6
  • 34
  • 75