SpriteKit颜色在Swift

时间:2017-03-22 05:08:07

标签: swift sprite-kit sprite watchkit apple-watch

我有一张图片,如下所示:

enter image description here

我希望它的颜色水平随着时间和动画而降低。 目前,我能够使用图像序列为其设置动画。

但我想在精灵套件和动画中使用它。 那么如何在精灵工具包中执行此操作?

我有一些想法用SKTextureAtlas来做。 这是正确的方法吗?

还有什么工具可以为纹理生成多个图像吗?

2 个答案:

答案 0 :(得分:2)

你应该总是尝试在Stackoverflow上显示一些代码,否则人们往往不会帮忙。

在SpriteKit中你可以像你想象的那样使用SKTextureAtlas。

1)转到资产目录并单击+并从下拉菜单中选择新的精灵地图集。称之为DropAtlas。在该图集中添加所需数量的图像集,将每个图像集标记为此类

dropImage_1
dropImage_2 
dropImage_3 

2)为纹理创建一个辅助类,这样你只需要预加载一次纹理。您可以轻松地将此类扩展到您可能使用的其他纹理动画。这也有助于提高绩效。

 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)

我不确定创建不同图像的好工具是什么。

希望这有帮助

答案 1 :(得分:0)

我这样做有两个图像;白色轮廓为png,中心切出,蓝色水作为背后的单独图像。将它们设置在打开了clipToBounds的视图中,这样就不会看到蓝色图像的溢出。

然后围绕设置新值使用动画,有点像这样:

UIView.animate(withDuration: 0.3, animations: {
    waterImage.center.y = newOffset
}, completion: nil)