Swift and SpriteKit: how to implement non-fuzzy circle timer with SKShapeNode

问题

The code below implements a circle timer with SKShapeNode where one slice of the circle vanishes as time ticks off.

Unfortunately, the timer is fuzzy because of limitations with SKShapeNode.

Answers like this did not address the issue, and also were old and may no longer apply.

1) Is there a way to use SKShapeNode without such fuzzy lines?

2) If there is no way to fix SKShapdeNode, what are the alternatives for implementing a similar circle timer?

    let timer = SKShapeNode(circleOfRadius: CGFloat(50))
    timer.fillColor = UIColor.red
    timer.strokeColor = UIColor.clear
    timer.lineWidth = 0
    timer.zRotation = CGFloat.pi / 2

    timer.path = self.circle(radius: CGFloat(50), percent: CGFloat(90))

fileprivate func circle(radius: CGFloat, percent: CGFloat) -> CGPath {
    // Adjust <percent> if less than 0
    let percent = percent < 0 ? 0 : percent

    // Generate circle path
    let start = CGFloat(0)
    let end = CGFloat.pi * 2 * percent
    let center = CGPoint.zero
    let bezierPath = UIBezierPath()
    bezierPath.move(to: center)
    bezierPath.addArc(withCenter:center, radius: radius, startAngle: start, endAngle: end, clockwise: true)
    bezierPath.addLine(to: center)

    // Return path
    return bezierPath.cgPath
}

回答1:

Shaders will probably accomplish what you want, check out http://battleofbrothers.com/sirryan/understanding-shaders-in-spritekit/

Also, SKShapeNode should not be used outside of debugging according to AppleDocs, have ran into a few issues using them in the past.

回答2:

@ElTomato mentioned setting a stroke color and line width, this will work in masking the fuzziness.

A better solution may be to just turn off anti-aliasing with isAntialiased = false

This would depend on your graphic preference of course.

来源：https://stackoverflow.com/questions/51317484/swift-and-spritekit-how-to-implement-non-fuzzy-circle-timer-with-skshapenode

标签

ios

swift

sprite-kit