帶圖像的圓形加載欄

Question

我想在我的游戲中創建一個成就系統。 我希望玩家能像這樣看到他們的成就進度。

例如，如果他完成了 65% -> 75% -> 100% 看起來像這樣。

https://imgur.com/a/P3l6hOQ

有沒有辦法將圖像圓形裁剪成圓形進度條？ 一個方向、一個提示、一個吊艙或一段代碼是值得贊賞的。

我的圖像將是帶圓角的矩形，代碼是用 SpriteKit 編寫的。

Answer 1

設法解決它。 事實上，最好和最簡單的解決方案是創建一個 mask_node。

    let button_image : SKSpriteNode = SKSpriteNode()
    let crop_node : SKCropNode = SKCropNode()

    let completion : CGFloat = 0.83  // from 0.0 to 1.0

    let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
    circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

    let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
    mask_node.zRotation = CGFloat.pi/2

    let wrapper_node = SKNode()
    wrapper_node.addChild(mask_node)

    crop_node.maskNode = wrapper_node
    crop_node.addChild(button_image)
    addChild(crop_node)

祝你好運！