如何使用 Sprite Kit 创建具有 3D 效果的戒指？

Posted 2023-03-16

【中文标题】如何使用 Sprite Kit 创建具有 3D 效果的戒指？

【英文标题】：How to create a ring with 3D effect using Sprite Kit?

【发布时间】：2015-12-14 23:19:22

【问题描述】：

我想使用 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
        

【参考方案1】：

您的两层方法和顶部的半滑条的想法是正确的。但是，与其在裁剪节点中使用形状节点，为什么不直接使用路径为半椭圆的形状节点呢？使用CGPath 或UIBezierPath API 创建一个——使用带有变换的圆弧使其变为椭圆形——然后使用create your SKShapeNode from that path。

【讨论】：

如何截断使用 UIBezierPath(ovalInRect: CGRect( origin: CGPoint(x: -size.width/2, y: -size.height/2), size: size)) 创建的路径只得到半个椭圆？谢谢

没关系，我忘了你只能枚举路径元素，不能删除它们。

【参考方案2】：

您可以尝试将您的SKShapeNode 转换为SKSpriteNode。您可以使用SKView textureFromNode:（但我们知道规模问题要求您仅在将节点添加到视图并且至少运行一个更新周期后使用它），或从头开始使用图像（当然是使用CGBitmapContext 以编程方式创建的）。