更改 spritekit 中的节点颜色

Posted

技术标签:

【中文标题】更改 spritekit 中的节点颜色【英文标题】:Change node color in spritekit 【发布时间】:2018-07-08 10:11:49 【问题描述】:

我有一个带有几片叶子的树枝的矢量图。我正在将分支从屏幕底部移动到屏幕顶部。但是当分支从初始位置(屏幕底部)移动到最终位置(屏幕顶部)时,我希望分支在移动到顶部时将颜色从绿色变为橙色。这应该是一个平稳的过渡。我有树枝和树叶作为矢量图像。我正在使用 spritekit(ios) 进行开发。分支已附在下面的链接中 我不希望颜色立即从绿色变为红色。当分支移到顶部时,我希望它从绿色慢慢过渡到红色

https://ibb.co/bNH7P8

【问题讨论】:

【参考方案1】:

图片

你需要两张图片,绿色的一张

还有红色的。

元素

现在你需要一个节点来保存两个图像

class Element: SKNode 

    private let green = SKSpriteNode(imageNamed: "green")
    private let red = SKSpriteNode(imageNamed: "red")

    override init() 
        super.init()
        self.addChild(green)
        red.alpha = 0
        self.addChild(red)
    

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

    func turnRed(duration: TimeInterval) 
        green.run(.fadeOut(withDuration: duration))
        red.run(.fadeIn(withDuration: duration))
    


动画

最后你只需要调用turnRed(duration:)方法

class GameScene: SKScene 

    let element = Element()

    override func didMove(to view: SKView) 
        self.addChild(element)
    

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) 

        // move the element to bottom
        let bottomY = self.frame.minY + element.calculateAccumulatedFrame().height / 2
        let moveToBottom = SKAction.moveTo(y: bottomY, duration: 2)
        element.run(moveToBottom)

        // change the color
        element.turnRed(duration: 2)
    

更新

如果要将颜色设置为绿色和红色之间的给定比例,请使用以下代码

class Element: SKNode 

    private let green = SKSpriteNode(imageNamed: "green")
    private let red = SKSpriteNode(imageNamed: "red")

    override init() 
        super.init()
        self.addChild(green)
        red.alpha = 0
        self.addChild(red)
    

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

    // colorProgressionRatio must be a value between 1 (full green) and 0 (full red)
    func update(colorProgressionRatio: CGFloat) 
        guard colorProgressionRatio >= 0 && colorProgressionRatio <= 1 else 
            debugPrint("colorProgressionRatio must be a value between 0 and 1")
            return
        

        let greenIntensity: CGFloat
        let redIntensity: CGFloat

        if colorProgressionRatio == 0 
            greenIntensity = 0
            redIntensity = 1
         else if colorProgressionRatio == 1 
            greenIntensity = 1
            redIntensity = 0          
         else 
            greenIntensity = colorProgressionRatio
            redIntensity = 1 - colorProgressionRatio
        

        green.run(.fadeAlpha(to: greenIntensity, duration: 2))
        red.run(.fadeAlpha(to: redIntensity, duration: 2))

    


现在你只需要打电话

element.update(colorProgressionRatio: 0.4)

传递一个介于 0 和 1 之间的值(0 表示红色,1 表示全绿色)。

【讨论】:

我正在尝试随着分数的增加来实现这一点。例如,当分数在 1-20 之间时,叶子是绿色的,但当核心在 21-40 之间时,叶子是红色的。所以我需要叶子随着分数从 20 增加到 40 逐渐从绿色变为红色。所以它们可以在 20 时为绿色,在 22 时略带黄色,并且随着分数的增加颜色逐渐从绿色变为红色。你有解决方法吗?

以上是关于更改 spritekit 中的节点颜色的主要内容,如果未能解决你的问题,请参考以下文章

Swift:Spritekit 中的多个场景,从第二个和第一个场景的不同 Sprite 节点类型调用 touchesBegan

在 Sprite Kit 中混合颜色

iOS7 Sprite Kit如何在更改锚点时计算节点位置?

Sprite Kit:为所有场景只创建一次节点

Sprite kit:删除特定节点而不是所有节点

Sprite Kit:删除底角的调试标签