使用 SpriteKit 的变形虫形状的控件
Amoeba-shaped controls with SpriteKit
我是 SpriteKit 的新手,我正在尝试创建一个像“变形虫”一样的扭曲圆圈。我想要做的是使用 SKShapeNode 初始化与 UIBezierPath 在一个圆上创建超过 8-10 个点,具有一些随机性(类似于):
let theta : Double = (Double(i) * Double.pi / 180.0) * (36.0 + Double.random(in: -1...1))
let radius : CGFloat = CGFloat(100.0 + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
这部分有效,但随后,我开始使用 addCurve() 方法构建路径,结果形状真的很难看 - 可能是因为我不完全理解该方法的工作原理以及我应该使用什么控制点。
如果您有任何更好的想法或帮助我以更好的方式使用 addCurve(),我将不胜感激。
这是我所做的 - 发布可能对某些人有用,参数可以根据您的喜好进行调整。
let path = UIBezierPath()
let numPoints = Int.random(in: 5...25)
let totalPoints = numPoints * 3
var pt : [CGPoint] = Array(repeating: CGPoint(), count: totalPoints)
var coef = 1.0
for i : Int in 0..<(totalPoints) {
let theta = (Double(i) * Double.pi / 180.0) * (360.0/Double(totalPoints) + Double.random(in: -1.0...1.0))
coef = (i % 3 == 2 ? 1 : 0.25)
let radius = CGFloat(100.0 * coef + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
pt[i] = CGPoint(x: a, y: b)
// the code snippet below is to show the curve and critical points
let point : SKShapeNode = SKShapeNode(circleOfRadius: 5)
point.fillColor = i % 3 == 0 ? .green : .cyan
point.position = pt[i]
point.zPosition = 10
self.addChild(point)
// end of code snippet
}
path.move(to: CGPoint(x: self.view!.bounds.minX + pt[0].x, y: self.view!.bounds.minY + pt[0].y))
for i in 1...numPoints{
path.addCurve(to: pt[(i * 3) % (totalPoints)],
controlPoint1: pt[(i * 3 - 1)],
controlPoint2: pt[(i * 3 - 2)])
}
path.close()
let amoeba = SKShapeNode(path: path.cgPath)
amoeba.strokeColor = .orange
self.addChild(amoeba)
我是 SpriteKit 的新手,我正在尝试创建一个像“变形虫”一样的扭曲圆圈。我想要做的是使用 SKShapeNode 初始化与 UIBezierPath 在一个圆上创建超过 8-10 个点,具有一些随机性(类似于):
let theta : Double = (Double(i) * Double.pi / 180.0) * (36.0 + Double.random(in: -1...1))
let radius : CGFloat = CGFloat(100.0 + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
这部分有效,但随后,我开始使用 addCurve() 方法构建路径,结果形状真的很难看 - 可能是因为我不完全理解该方法的工作原理以及我应该使用什么控制点。
如果您有任何更好的想法或帮助我以更好的方式使用 addCurve(),我将不胜感激。
这是我所做的 - 发布可能对某些人有用,参数可以根据您的喜好进行调整。
let path = UIBezierPath()
let numPoints = Int.random(in: 5...25)
let totalPoints = numPoints * 3
var pt : [CGPoint] = Array(repeating: CGPoint(), count: totalPoints)
var coef = 1.0
for i : Int in 0..<(totalPoints) {
let theta = (Double(i) * Double.pi / 180.0) * (360.0/Double(totalPoints) + Double.random(in: -1.0...1.0))
coef = (i % 3 == 2 ? 1 : 0.25)
let radius = CGFloat(100.0 * coef + Double.random(in: 0...20))
let a = CGFloat(cos(theta)) * radius
let b = CGFloat(sin(theta)) * radius
pt[i] = CGPoint(x: a, y: b)
// the code snippet below is to show the curve and critical points
let point : SKShapeNode = SKShapeNode(circleOfRadius: 5)
point.fillColor = i % 3 == 0 ? .green : .cyan
point.position = pt[i]
point.zPosition = 10
self.addChild(point)
// end of code snippet
}
path.move(to: CGPoint(x: self.view!.bounds.minX + pt[0].x, y: self.view!.bounds.minY + pt[0].y))
for i in 1...numPoints{
path.addCurve(to: pt[(i * 3) % (totalPoints)],
controlPoint1: pt[(i * 3 - 1)],
controlPoint2: pt[(i * 3 - 2)])
}
path.close()
let amoeba = SKShapeNode(path: path.cgPath)
amoeba.strokeColor = .orange
self.addChild(amoeba)