如何使用 Sprite Kit 制作具有 3D 效果的戒指?
How to create a ring with 3D effect using Sprite Kit?
我想使用 Sprite Kit 制作一个具有 3D 效果的戒指。 (查看图像)
我尝试子类化 SKNode 并添加两个节点作为子节点。 (见代码)
一个节点是一个完整的SKShapeNode椭圆,另一个是使用zPosition较高的SKCropNode的半椭圆。
看起来不错,但 SKCropNode 将应用 CPU 使用率从 40% 提高到 99%。
关于如何降低 SKCropNode 性能成本的任何想法,或创建相同环形 3D 效果的任何替代方法?
class RingNode: SKNode {
let size: CGSize
init(size: CGSize, color: SKColor)
{
self.size = size
self.color = color
super.init()
ringPartsSetup()
}
private func ringPartsSetup() {
// LEFT PART (half ellipse)
let ellipseNodeLeft = getEllipseNode()
let leftMask = SKSpriteNode(texture: nil, color: SKColor.blackColor(), size: CGSize(
width: ellipseNodeLeft.frame.size.width/2,
height: ellipseNodeLeft.frame.size.height))
leftMask.anchorPoint = CGPoint(x: 0, y: 0.5)
leftMask.position = CGPoint(x: -ellipseNodeLeft.frame.size.width/2, y: 0)
let leftNode = SKCropNode()
leftNode.addChild(ellipseNodeLeft)
leftNode.maskNode = leftMask
leftNode.zPosition = 10 // Higher zPosition for 3D effect
leftNode.position = CGPoint(x: -leftNode.frame.size.width/4, y: 0)
addChild(leftNode)
// RIGHT PART (complete ellipse)
let rightNode = getEllipseNode()
rightNode.position = CGPoint(x: 0, y: 0)
rightNode.zPosition = 5
addChild(rightNode)
}
private func getEllipseNode() -> SKShapeNode {
let ellipseNode = SKShapeNode(ellipseOfSize: CGSize(
width: size.width,
height: size.height))
ellipseNode.strokeColor = SKColor.blackColor()
ellipseNode.lineWidth = 5
return ellipseNode
}
}
你的两层方法和顶部的半滑的想法是正确的。但是,为什么不在裁剪节点内使用形状节点,而是使用路径为半椭圆的形状节点呢?使用 CGPath
或 UIBezierPath
API 创建一个 — 使用带有变换的圆弧使其成为椭圆形 — 然后 create your SKShapeNode
from that path.
您可以尝试将 SKShapeNode
转换为 SKSpriteNode
。您可以使用 SKView textureFromNode:
(但我们知道规模问题要求您仅在将节点添加到视图 和 至少一个更新周期后才使用它 运行),或者使用图像从头开始(当然是使用 CGBitmapContext
以编程方式创建)。
我想使用 Sprite Kit 制作一个具有 3D 效果的戒指。 (查看图像)
我尝试子类化 SKNode 并添加两个节点作为子节点。 (见代码)
一个节点是一个完整的SKShapeNode椭圆,另一个是使用zPosition较高的SKCropNode的半椭圆。
看起来不错,但 SKCropNode 将应用 CPU 使用率从 40% 提高到 99%。
关于如何降低 SKCropNode 性能成本的任何想法,或创建相同环形 3D 效果的任何替代方法?
class RingNode: SKNode {
let size: CGSize
init(size: CGSize, color: SKColor)
{
self.size = size
self.color = color
super.init()
ringPartsSetup()
}
private func ringPartsSetup() {
// LEFT PART (half ellipse)
let ellipseNodeLeft = getEllipseNode()
let leftMask = SKSpriteNode(texture: nil, color: SKColor.blackColor(), size: CGSize(
width: ellipseNodeLeft.frame.size.width/2,
height: ellipseNodeLeft.frame.size.height))
leftMask.anchorPoint = CGPoint(x: 0, y: 0.5)
leftMask.position = CGPoint(x: -ellipseNodeLeft.frame.size.width/2, y: 0)
let leftNode = SKCropNode()
leftNode.addChild(ellipseNodeLeft)
leftNode.maskNode = leftMask
leftNode.zPosition = 10 // Higher zPosition for 3D effect
leftNode.position = CGPoint(x: -leftNode.frame.size.width/4, y: 0)
addChild(leftNode)
// RIGHT PART (complete ellipse)
let rightNode = getEllipseNode()
rightNode.position = CGPoint(x: 0, y: 0)
rightNode.zPosition = 5
addChild(rightNode)
}
private func getEllipseNode() -> SKShapeNode {
let ellipseNode = SKShapeNode(ellipseOfSize: CGSize(
width: size.width,
height: size.height))
ellipseNode.strokeColor = SKColor.blackColor()
ellipseNode.lineWidth = 5
return ellipseNode
}
}
你的两层方法和顶部的半滑的想法是正确的。但是,为什么不在裁剪节点内使用形状节点,而是使用路径为半椭圆的形状节点呢?使用 CGPath
或 UIBezierPath
API 创建一个 — 使用带有变换的圆弧使其成为椭圆形 — 然后 create your SKShapeNode
from that path.
您可以尝试将 SKShapeNode
转换为 SKSpriteNode
。您可以使用 SKView textureFromNode:
(但我们知道规模问题要求您仅在将节点添加到视图 和 至少一个更新周期后才使用它 运行),或者使用图像从头开始(当然是使用 CGBitmapContext
以编程方式创建)。