ios - 更改 spritekit 中的节点颜色
问题描述
我有一个带有几片叶子的树枝的矢量图。我正在将分支从屏幕底部移动到屏幕顶部。但是当分支从初始位置(屏幕底部)移动到最终位置(屏幕顶部)时,我希望分支在移动到顶部时将颜色从绿色变为橙色。这应该是一个平稳的过渡。我有树枝和树叶作为矢量图像。我正在使用 spritekit(ios) 进行开发。该分支已附加在下面的链接中,我不希望颜色立即从绿色变为红色。当分支移到顶部时,我希望它从绿色慢慢过渡到红色
解决方案
图片
您需要 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")
}
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 表示全绿色)。
推荐阅读
- java - 使用 for 循环遍历项目列表
- node.js - 如何将nginx连接到本地mongodb
- python - 创建一个函数,调用时将初始化我的串行端口(com 端口)
- python - 有没有办法根据条件语句从各种列表中删除项目?
- git - 为什么我们的 Git-Tree 看起来这么乱
- java - JBOSS Server 卡在启动状态
- fonts - 背面 XeLatex:未找到 Comic Sans Italic
- c++ - FileInformation - 提取文件重命名详细信息
- javascript - + 运算符覆盖而不是连接 Javascript 中的字符串
- c++ - 具有自定义 value_type 的 C++ 映射