Swift 中的 SpriteKit 颜色填充动画
SpriteKit color fill out animation in Swift
我有一张水滴的图片如下:
我想让它的颜色级别随着时间和动画而降低。
目前,我可以使用图像序列对其进行动画处理。
但我想在 sprite kit 和动画中使用它。 那么我如何在 sprite kit 中做到这一点?
我想用 SKTextureAtlas 来做。 这样做正确吗?
还有什么工具可以为纹理生成多个图像?
我这样做的方法是有两张图片;白色轮廓为 png,中心被切掉,蓝色水作为其背后的单独图像。将它们设置在已打开 clipToBounds 的视图中,这样您就不会看到蓝色图像溢出。
然后使用围绕设置新值的动画,有点像这样:
UIView.animate(withDuration: 0.3, animations: {
waterImage.center.y = newOffset
}, completion: nil)
您应该始终尝试在 Whosebug 上展示一些代码,否则人们往往不会提供帮助。
在 SpriteKit 中,您可以像您假设的那样使用 SKTextureAtlas 来完成。
1) 转到您的资产目录,然后从下拉菜单中单击 + 和 select new sprite atlas。称它为 DropAtlas 之类的东西。在该图集中根据需要添加尽可能多的图像集,将每个图像集标记为这样
dropImage_1
dropImage_2
dropImage_3
2) 为你的纹理创建一个助手class,这样你只需要预加载你的纹理一次。您可以轻松地将此 class 扩展到您可能使用的其他纹理动画。这也有助于提高性能。
class TextureHelper {
static var dropTextures = [SKTexture]()
static func setup() {
// Drop textures
let dropAtlas = SKTextureAtlas(named: "DropAtlas") // or the name you gave the atlas in step 1
for image in 1...3 { // how many images there are in the animation
let texture = dropAtlas.textureNamed("dropImage_\(image)") // or the name you gave the image sets
dropTextures.append(texture)
}
}
}
3) 当您的应用启动时调用设置方法,例如 App Delegate 或 GameViewController。
TextureHelper.setup()
4) 最后在您的场景中,您可以像这样为节点设置动画。
private let dropAnimationKey = "DropAnimationKey"
class GameScene: SKScene {
let dropNode = SKSpriteNode(imageNamed: "dropImage_1") // defaults to image 1
override func didMove(to view: SKView) {
dropNode.position = ...
addChild(dropNode)
startDropNodeTextureAnimation()
}
private func startDropNodeTextureAnimation() {
guard !TextureHelper.dropTextures.isEmpty else { return } // so you dont crash incase texture array is empty for some reason
let textureAnimation = SKAction.animate(with: TextureHelper.dropTextures, timePerFrame: 0.3)
dropNode.run(SKAction.repeatForever(textureAnimation), withKey: dropAnimationKey)
}
}
要停止动画,您可以使用正确的键简单地删除动作
dropNode.removeAction(forKey: dropAnimationKey)
我不确定创建不同图像的好工具是什么。
希望对您有所帮助
我有一张水滴的图片如下:
我想让它的颜色级别随着时间和动画而降低。 目前,我可以使用图像序列对其进行动画处理。
但我想在 sprite kit 和动画中使用它。 那么我如何在 sprite kit 中做到这一点?
我想用 SKTextureAtlas 来做。 这样做正确吗?
还有什么工具可以为纹理生成多个图像?
我这样做的方法是有两张图片;白色轮廓为 png,中心被切掉,蓝色水作为其背后的单独图像。将它们设置在已打开 clipToBounds 的视图中,这样您就不会看到蓝色图像溢出。
然后使用围绕设置新值的动画,有点像这样:
UIView.animate(withDuration: 0.3, animations: {
waterImage.center.y = newOffset
}, completion: nil)
您应该始终尝试在 Whosebug 上展示一些代码,否则人们往往不会提供帮助。
在 SpriteKit 中,您可以像您假设的那样使用 SKTextureAtlas 来完成。
1) 转到您的资产目录,然后从下拉菜单中单击 + 和 select new sprite atlas。称它为 DropAtlas 之类的东西。在该图集中根据需要添加尽可能多的图像集,将每个图像集标记为这样
dropImage_1
dropImage_2
dropImage_3
2) 为你的纹理创建一个助手class,这样你只需要预加载你的纹理一次。您可以轻松地将此 class 扩展到您可能使用的其他纹理动画。这也有助于提高性能。
class TextureHelper {
static var dropTextures = [SKTexture]()
static func setup() {
// Drop textures
let dropAtlas = SKTextureAtlas(named: "DropAtlas") // or the name you gave the atlas in step 1
for image in 1...3 { // how many images there are in the animation
let texture = dropAtlas.textureNamed("dropImage_\(image)") // or the name you gave the image sets
dropTextures.append(texture)
}
}
}
3) 当您的应用启动时调用设置方法,例如 App Delegate 或 GameViewController。
TextureHelper.setup()
4) 最后在您的场景中,您可以像这样为节点设置动画。
private let dropAnimationKey = "DropAnimationKey"
class GameScene: SKScene {
let dropNode = SKSpriteNode(imageNamed: "dropImage_1") // defaults to image 1
override func didMove(to view: SKView) {
dropNode.position = ...
addChild(dropNode)
startDropNodeTextureAnimation()
}
private func startDropNodeTextureAnimation() {
guard !TextureHelper.dropTextures.isEmpty else { return } // so you dont crash incase texture array is empty for some reason
let textureAnimation = SKAction.animate(with: TextureHelper.dropTextures, timePerFrame: 0.3)
dropNode.run(SKAction.repeatForever(textureAnimation), withKey: dropAnimationKey)
}
}
要停止动画,您可以使用正确的键简单地删除动作
dropNode.removeAction(forKey: dropAnimationKey)
我不确定创建不同图像的好工具是什么。
希望对您有所帮助