【问题标题】:How do I draw a filled circle using SpriteKit?如何使用 SpriteKit 绘制实心圆?
【发布时间】:2015-11-15 01:12:31
【问题描述】:

我正在尝试在 SpriteKit 中绘制一个实心圆圈。

我目前正在画一个这样的圆圈。

node.physicsBody = SKPhysicsBody(circleOfRadius: radius)
node.fillColor = color
node.strokeColor = node.fillColor

我需要根据 0.0 到 1.0 之间的值在某个级别填充此圆圈。我怎样才能达到这个效果?

例如,上面的圆圈以 0.5 的值填充。

【问题讨论】:

  • 您对您的要求的描述:“我需要根据0.0和1.0之间的值将这个圆圈填充到某个级别。”我不清楚。您是否需要它看起来像图片中的那样,或者您正在寻找渐变效果?
  • @Aky 我试图让圆圈看起来像图片中的那个。我已经编辑了我的帖子以使其更清晰。

标签: ios swift sprite-kit skphysicsbody


【解决方案1】:

实现此目的的一种方法是使用SKCropNode


首先你需要创建两个圆形纹理,像这样;


然后创建自定义SKSpriteNode:

import SpriteKit

class Circle : SKSpriteNode {
    var fillSprite : SKSpriteNode!
    var cropNode : SKCropNode!
    var maskNode : SKSpriteNode!

    override init(texture: SKTexture?, color: UIColor, size: CGSize) {
        super.init(texture: texture, color: color, size: size)

        fillSprite = SKSpriteNode(imageNamed: "bluecircle") 

        maskNode = SKSpriteNode(color: UIColor.blackColor(), size: CGSize(width: self.size.width, height: self.size.height))
        maskNode.position.y -= self.size.height/2

        cropNode = SKCropNode()
        cropNode.addChild(fillSprite)
        cropNode.maskNode = maskNode
        cropNode.zPosition = 1
        self.addChild(cropNode)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setFillAmount(amount: CGFloat) {
        // amount parameter must be float value between 0.0 and 1.0
        let newHeight = amount * (self.size.height*2)
        maskNode.size = CGSize(width: self.size.width, height: newHeight)
    }

}

要使用这个:

// Image size is 150x150px in this example
let circle = Circle(texture: SKTexture(imageNamed: "whitecircle"), color: UIColor.whiteColor(), size: CGSize(width: 150, height: 150))
circle.setFillAmount(0.4)

就是这样。


也许不是完美的解决方案,但可以开始。至少它有效。

【讨论】:

    【解决方案2】:

    我只有时间给你一个部分的答案。正如 Carrl 所说,您可以使用 Core Graphics 绘制您正在寻找的形状(除了我使用的是基于它构建的 UIBezierPath):

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100, 100), false, 0)
    UIColor.greenColor().set()
    let p = UIBezierPath()
    p.moveToPoint(CGPointMake(0, 50))
    p.addArcWithCenter(CGPointMake(50, 50), radius: 50, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: true)
    p.closePath()
    p.fill()
    p.removeAllPoints()
    p.moveToPoint(CGPointMake(0, 50))
    UIColor.greenColor().colorWithAlphaComponent(0.5).set()
    p.addArcWithCenter(CGPointMake(50, 50), radius: 50, startAngle: CGFloat(M_PI), endAngle: CGFloat(2 * M_PI), clockwise: true)
    p.closePath()
    p.fill()
    let im1 = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    

    您仍然需要弄清楚如何在SKSpriteNode 中将其用作纹理,但您应该能够在此站点上找到答案。 (SKShapeNode 可能 是一个选项,但上次我尝试在 Swift Playground 中使用它时,我记得它在尝试填充形状节点的路径时抛出了错误。)

    【讨论】:

      【解决方案3】:

      我建议您使用 CoreGraphics 中的方法以编程方式绘制图像:

      UIGraphicsBeginImageContextWithOptions(size, false, 1)
      //your code to draw the shape here
      let imageYouWant = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
      

      然后用imageYouWant作为你SKSpriteNode的形象

      【讨论】:

      • 为 0.0 到 1.0 之间的每个可能值创建图像是不现实的。
      • @NRitH 只要你想改变状态就创建它
      猜你喜欢
      • 1970-01-01
      • 2014-12-30
      • 1970-01-01
      • 2011-01-31
      • 2015-10-26
      • 2019-01-21
      • 1970-01-01
      • 1970-01-01
      • 2021-04-19
      相关资源
      最近更新 更多