How To Create a Pulse Effect On an SKSpriteNode?

Question

Hi would like to learn how to create a visual pulse effect as in the video below.

https://www.youtube.com/watch?v=uiHj-KZWjpU

I followed the link posted in the video; however, I have not been able to achieve the same effect. I am having trouble doing it with an SKSpriteNode.

Preferably I would like to be able to loop this effect to repeat every second or so.

Any help would be very much appreciated! Thanks!

Answer 1

A real easy way of doing this would be to have your button image, and an outline image right below you button. then just run the pulse func on the button outline image and voila! It works with any shape and you can just adjust the actions as you see fit. These are added via the scene editor but it makes no difference how they are added as long as the outline images have a lower zPosition than the button.

class LevelMenu: SKScene {

    private var button1 = SKSpriteNode()
    private var button1Outline = SKSpriteNode()
    private var button2 = SKSpriteNode()
    private var button2Outline = SKSpriteNode()
    private var button3 = SKSpriteNode()
    private var button3Outline = SKSpriteNode()

    override func didMove(to view: SKView) {

        if let button1 = self.childNode(withName: "button1") as? SKSpriteNode {
            self.button1 = button1
        }

        if let button2 = self.childNode(withName: "button2") as? SKSpriteNode {
            self.button2 = button2
        }

        if let button3 = self.childNode(withName: "button3") as? SKSpriteNode {
            self.button3 = button3
        }

        if let button1Outline = self.childNode(withName: "button1Outline") as? SKSpriteNode {
            self.button1Outline = button1Outline
        }

        if let button2Outline = self.childNode(withName: "button2Outline") as? SKSpriteNode {
            self.button2Outline = button2Outline
        }

        if let button3Outline = self.childNode(withName: "button3Outline") as? SKSpriteNode {
            self.button3Outline = button3Outline
        }
    }

    func pulseAction(node: SKSpriteNode) {

        let copyNode = node.copy() as! SKSpriteNode
        copyNode.position = node.position
        addChild(copyNode)

        let scale = SKAction.scale(by: 1.75, duration: 0.4)
        scale.timingMode = .easeInEaseOut
        let wait = SKAction.wait(forDuration: 0.25)
        let fadeOut = SKAction.fadeOut(withDuration: 0.15)
        let fadeSeq = SKAction.sequence([wait, fadeOut])
        let pulseGroup = SKAction.group([scale, fadeSeq])

        copyNode.run(pulseGroup, completion: { copyNode.removeFromParent() })
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

        pulseAction(node: button1Outline)
        pulseAction(node: button2Outline)
        pulseAction(node: button3Outline)
    }
}

Answer 2

Copy and paste this extension code to your project :

import SpriteKit

extension SKSpriteNode {

    private static let fillColor = UIColor(red: 0, green: 0.455, blue: 0.756, alpha: 0.45)

    func addPulseEffect(circleOfRadius: CGFloat, backgroundColor: UIColor = fillColor) {

        let circle = SKShapeNode(circleOfRadius: circleOfRadius)
        circle.fillColor = backgroundColor
        circle.lineWidth = 0.0
        circle.position = CGPoint(x: 0, y: 0)
        self.addChild(circle)
        let scale = SKAction.scale(to: 3.0, duration: 1.0)
        let fadeOut = SKAction.fadeOut(withDuration: 1.0)
        let pulseGroup = SKAction.sequence([scale, fadeOut])
        let repeatSequence = SKAction.repeatForever(pulseGroup)
        circle.run(repeatSequence)

    }

    func repeatPulseEffectForEver(circleOfRadius: CGFloat) {
        let _ = Timer.scheduledTimer(withTimeInterval: 0.8, repeats: true) { (timer) in
            self.addPulseEffect(circleOfRadius: circleOfRadius)
        }

    }

}

Then you can use it like this :

self.anySKSpriteNode.repeatPulseEffectForEver(circleOfRadius: 80)

For more information please check: Github repo