CODEWITHSUNDEEP
iosswiftsprite-kitskactionskshapenode
coco
coco

Reputation: 3136

Expanding circle with fixed outline width

The effect I'm going for is like a raindrop on water, with the wave radiating out from the centre point.

I create a circle shape:

    let initialRadius = 4.0
    let myPath: CGMutablePathRef = CGPathCreateMutable()
    CGPathAddArc(myPath, nil, 0, 0, initialRadius, 0, M_PI * 2, true)

    let myCircle = SKShapeNode()
    myCircle.path = myPath
    myCircle.position = CGPoint(x: xPos, y: yPos)
    myCircle.lineWidth = 0.5
    myCircle.antialiased = false
    myCircle.fillColor = SKColor.orangeColor() // background is orange
    myCircle.strokeColor = SKColor.whiteColor()
    myCircle.physicsBody = SKPhysicsBody(edgeLoopFromPath: myPath)

I then let the sprite expand, and fade out:

    let duration: NSTimeInterval = 1.7
    let fade = SKAction.fadeOutWithDuration(duration)
    let scale = SKAction.scaleTo(9.0, duration: duration)
    fade.timingMode = .EaseOut
    scale.timingMode = .EaseOut
    myCircle.runAction(fade)
    myCircle.runAction(scale)

This is close, but while the circle is correctly expanding in size, the lineWidth is also expanding. Can you think of a way to do this while keeping the line width constant?

Upvotes: 1

Views: 867

Answers (1)

Grimxn
Grimxn

Reputation: 22487

You can use customActionWithDuration to re-draw the path with increasing radius (and constant line width), rather than use scale. Something like:

    // ... All as before, except...    
    // myCircle.runAction(scale)
    typealias ActionBlock = ((SKNode!, CGFloat) -> Void)
    let ab: ActionBlock = { (node, value) in
        if let drop = node as? SKShapeNode {
            let myPath: CGMutablePathRef = CGPathCreateMutable()
            CGPathAddArc(myPath, nil, 0, 0, initialRadius * (1.0 + value * 9.0 / duration) , 0, M_PI * 2, true)
            drop.path = myPath
        }
    }

    let newScale = SKAction.customActionWithDuration(duration, actionBlock: ab)
    myCircle.runAction(newScale)

Upvotes: 1

Related Questions