CODEWITHSUNDEEP
iosswiftpathsprite-kitbezier
aignetti
aignetti

Reputation: 491

SpriteKit - Progress bar with BezierPath

i use following function to create a Path:

func CreatePath(){
    let startpoint = CGPoint(x: self.frame.size.width / 6.8966, y: self.frame.size.height*0.5)
    let endpoint = CGPoint(x: self.frame.size.width - startpoint.x, y: self.frame.size.height*0.5)
    let controlpoint = CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height)
    curve.moveToPoint(startpoint)
    curve.addQuadCurveToPoint(endpoint, controlPoint: controlpoint)
}

It looks a bit like this: My Path

How could i make a progress bar, which follows this curve from the middle to the outside.

So if the progress in the game is 100% i would add 2 more BezierPaths. One which starts at the middle and goes to the Startpoint (with a new Controllpoint). And the other which starts at the middle and goes to the Endpoint (with a new Controllpoint). No problem here.

But how could i add new Start/Endpoints depending on the progress - for example if the progress in the game is 50% my start and endpoint are not so far away from the middle - i would need new start and endpoints for the curve. Here is my problem.

How could i get the new start/endpoint of the curve?

Thanks !

Upvotes: 1

Views: 161

Answers (1)

Alessandro Ornano
Alessandro Ornano

Reputation: 35402

You need to know a particular point proceeds from a specific percentage.

You can try this algorithm:

func quadBezierForPercent(t:Float, startPoint:Float, controlPoint:Float, endPoint:Float) ->Float {
    let mutablet = (1.0-t)
    let mutablett = mutablet*2
    let tt = t*2

    let start = startPoint * mutablett
    let middle = 2.0 * controlPoint * mutablet * t
    let end = endPoint * tt

    return start + middle + end
}

Usage:

let percentage = 25.0
let xPos = quadBezierForPercent(percentage, startpoint.x,controlPoint.x,endPoint.x)
let yPos = quadBezierForPercent(percentage, startpoint.y,controlPoint.y,endPoint.y)
let point = CGPointMake(xPos,yPos)

Upvotes: 1

Related Questions