Juego Swift, sprite kit: ¿Ha desaparecido el círculo en el sentido de las agujas del reloj? ¿A tiempo?

timer xcode6

Question

Muy bien, así que no sé el nombre para esto, pero tengo un juego de sprite kit (un juego de corredor) que, cuando termine el juego, tendrá un botón de "guardarme" y un temporizador que se agotará en consecuencia. Cuando se acaba el tiempo, ya no puede hacer clic en el botón y guardar el personaje.

No obstante, no quiero mostrar este temporizador en el texto: quiero un círculo que "se desenrolla", si lo desea, y desaparece a la velocidad que se acaba el temporizador. Es decir, cuando el temporizador llega a 0, el círculo ha desaparecido por completo. El círculo desaparece grado por grado en un movimiento en el sentido de las agujas del reloj de acuerdo con el temporizador.

Aquí hay algunas fotos para explicar de lo que estoy hablando.

¿Cómo haría esto?

Answer 1

Al cambiar la propiedad de path de un SKShapeNode en un intervalo fijo, puede crear una secuencia de animación fotograma a fotograma. Para crear la animación, establezca la propiedad de path en una secuencia de formas que comienza con un círculo y termina con nada. Puede usar UIBezierPath , un contenedor para CGPath , para crear formas para la animación usando los siguientes pasos:

1. Mover el "bolígrafo" del camino al centro del círculo
2. Agregue un arco a la ruta con addArcWithCenter desde startAngle a endAngle
3. Agregue una línea a la ruta desde el punto del círculo correspondiente al ángulo de finalización al centro
4. Cambia el endAngle del endAngle por una cantidad fija
5. Repita los pasos 1-4

Aquí hay una implementación de los pasos anteriores:

override func didMove(to:SKView) {

    let circle = SKShapeNode(circleOfRadius: 50)
    circle.fillColor = SKColor.blue
    circle.strokeColor = SKColor.clear
    circle.zRotation = CGFloat.pi / 2
    addChild(circle)

    countdown(circle: circle, steps: 20, duration: 5) {
        print("done")
    }
}

// Creates an animated countdown timer
func countdown(circle:SKShapeNode, steps:Int, duration:TimeInterval, completion:@escaping ()->Void) {
    guard let path = circle.path else {
        return
    }
    let radius = path.boundingBox.width/2
    let timeInterval = duration/TimeInterval(steps)
    let incr = 1 / CGFloat(steps)
    var percent = CGFloat(1.0)

    let animate = SKAction.run {
        percent -= incr
        circle.path = self.circle(radius: radius, percent:percent)
    }
    let wait = SKAction.wait(forDuration:timeInterval)
    let action = SKAction.sequence([wait, animate])

    run(SKAction.repeat(action,count:steps-1)) {
        self.run(SKAction.wait(forDuration:timeInterval)) {
            circle.path = nil
            completion()
        }
    }
}

// Creates a CGPath in the shape of a pie with slices missing
func circle(radius:CGFloat, percent:CGFloat) -> CGPath {
    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 bezierPath.cgPath
}

y un video clip: