SpriteKitNode 背景颜色

Posted 2023-02-24

【中文标题】SpriteKitNode 背景颜色

【英文标题】：SpriteKitNode Background Color

【发布时间】：2020-01-12 19:34:45

【问题描述】：

我正在构建一个纸牌游戏，并为我的 SpriteKit 节点的纹理制作了一张图像。该图像是卡片艺术品的 pdf 图像，我想设置卡片的背景颜色（艺术品周围的空白区域）。我拥有的图像只是卡片的艺术品，没有任何背景细节。如何为此设置背景？在 SKSpriteNode 初始化中设置“颜色”属性只会改变我的图像对象的颜色。如何在保持 super.init 中设置的宽度和大小的同时访问图像后面“空白空间”的颜色和纹理？

我不想更改我所有的 pdf 文件并在背面添加一个白色图层，因为我可能希望在玩游戏时对卡片的背景进行一些自定义颜色更改。我尝试在 init 函数中添加一个 SKShapeNode（下面的示例），但从技术上讲，它覆盖在我的 Card SKSpriteNode 之上，然后用户无法单击实际的“Card”。看起来这应该相当简单，但我遇到了很多麻烦。

import SpriteKit

class Card: SKSpriteNode 

    init(image: String) 
        super.init(texture: SKTexture(imageNamed: image), color: .clear,
                   size: CGSize(width: K.cardSize[0], height: K.cardSize[1]))

        //Background
        let background = SKShapeNode(rectOf: CGSize(width: K.cardSize[0], height: K.cardSize[1]), cornerRadius: 15)
        background.fillColor = UIColor.white
        background.zPosition = -10
        addChild(background)
    

【问题讨论】：

你已经设置了 zPosition，所以背景应该在卡片的后面，看起来是正确的。如果您在谈论用户交互，哪些节点正在处理交互（设置了isUserInteractionEnabled）？也许您正在处理树中较高位置而不是卡片上的触摸，并且正在使用atPoint，它返回最深的孩子（在本例中为背景）？如果是后者，修复包括使用nodes(at:)、获取触摸背景的父级或让Card 处理用户交互。

不需要 SKShapeNode，使用颜色和大小初始化的 SKSpriteNode

【参考方案1】：

像这样创建 2 个 SKSpriteNodes

class Card: SKSpriteNode 

    init(imageName: String) 
       let card = SKSpriteNode(imageNamed:imageName)
       //Create the rounded corner image without resorting to SKShapeNode
       UIGraphicsBeginImageContext(card.size)
           let context =  UIGraphicsGetCurrentContext()
           context.clear(rect)
           context.setFillColor(UIColor.white.cgColor)
           let rect = CGRect(origin: .zero, size:size)
           let path = UIBezierPath(roundedRect:rect, cornerRadius:0.15)
           path.fill()
           let image = context.makeImage();
       UIGraphicsEndImageContext();

       super.init(texture:SKTexture(cgImage:image))        

       card.isUserInteractionEnabled = false
       addChild(card)
    

现在这会将您的卡片图像视为纹理而不是交互式节点。

【讨论】：

谢谢！这很好用！唯一对我不起作用的是圆角。我的“bezierPathWith...”出现错误。它只需要“roundedRect”作为参数。我将我的 rect 传递给该参数，但最终产品仍然带有尖角。有什么想法吗？