Adding a visual effect to a SKSpriteNode when pressed

Question

I am working on my first SpriteKit app in Xcode 6, coding in Swift. Now I have made some nice buttons from transparent png files. But I am trying to show a visual effect when the button is pushed.

Example how I now show a static button:

let playButton = Button(imageNamed:"playButton")
playButton.position = CGPointMake(self.size.width/2, self.size.height/2 - playButton.size.height * 2.5 - displacement)
self.sharedInstance.addChildFadeIn(playButton, target: self)

Any effect would be enough, maybe a pulse effect, or glow on press. I've searched, but I can't really find anything in Swift.

edit: more info

    class Button: SKSpriteNode {  
        init(imageNamed: String) {
            let texture = SKTexture(imageNamed: imageNamed)
            // have to call the designated initializer for SKSpriteNode
            super.init(texture: texture, color: nil, size: texture.size())
        }
        override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
            self.runAction(SKAction.scaleTo(1.3, duration: kButtonFadingSpeed))
        }    
        override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
            self.runAction(SKAction.scaleTo(1.3, duration: kButtonFadingSpeed))
        }
         override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
            self.runAction(SKAction.scaleTo(1.0, duration: kButtonFadingSpeed))
        }

        required init(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
}

    func addChildFadeIn(node: SKNode, target: SKNode) {
        node.alpha = 0
        target.addChild(node)
        node.runAction(SKAction.fadeAlphaTo(1.0, duration: NSTimeInterval(kAddChildSpeed)))
    }

The function AddChildFadeIn is defined in class: singleton

Any help is much appreciated!

I've edited the post with that information. Could you help me? — Mr.Boon, Feb 24 '15 at 17:53
Unfortunately I don't know SpriteKit. I've updated your title and tags to make your question more discoverable by people who can answer. — Brian Nickel, Feb 24 '15 at 17:59
The simpliest effect I can think of is to colorize the node using this [method](https://developer.apple.com/library/prerelease/ios/documentation/SpriteKit/Reference/SKAction_Ref/index.html#//apple_ref/occ/clm/SKAction/colorizeWithColor:colorBlendFactor:duration:) — Dmitry Klochkov, Feb 25 '15 at 09:27

FierceMonkey · Answer 1 · 2015-10-03T15:49:48.760

I found a nice solution to this problem is to copy the original node, set the copy's alpha to 0.5 place it directly over top of the original node, and set its blendMode to add. here is a sample.

// this is our original node that we want to make glow
playButton.anchorPoint = CGPointMake(0.5, 0.5)

// create a copy of our original node create the glow effect
let glowNode : SKSpriteNode = playButton.copy() as! SKSpriteNode
glowNode.size = playButton.size
glowNode.anchorPoint = playButton.anchorPoint
glowNode.position = CGPoint(x: 0, y: 0)
glowNode.alpha = 0.5
glowNode.blendMode = SKBlendMode.Add

// add the new node to the original node
playButton.addChild(glowNode)

// add the original node to the scene
self.addChild(playButton)

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

You might want to take a look at this thread How can you create a glow around a sprite via SKEffectNode where some users have proposed the use of SKEffectNode. However, it takes alot of CPU power to do that.

There is also the usage of SKShapeNode proposed which also might have performance issues and further reading about it can be done here Poor performance with SKShapeNode in Sprite Kit.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 02 '15 at 14:48

Wraithseeker

1,884
2
19
34

Adding a visual effect to a SKSpriteNode when pressed

2 Answers2