Group Group Group Group Group Group Group Group Group
raywenderlich.com Forums

Sprite Kit Animations and Texture Atlases in Swift

Create an animated walking bear while you learn about using sprite sheets and texture atlases in this Sprite Kit tutorial, updated for Swift!


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1985-sprite-kit-animations-and-texture-atlases-in-swift

Question: How can you do this but for an iPhone? How do you convert images for an iPhone? I’m working on a game and just finished my first set of frames for the main hero. (Super excited, and super clueless at the same time). I have Pixelmator at my fingertips, but I don’t have any idea of what dimensions to use or anything. Any ideas?

Seems to need a Swift 3 update. “C-style statement has been removed in Swift 3.”

Swift 3 Updates

If you’re using Swift 3 for this tutorial, here are the changes you need to make:

  • To remove the status bar, instead of overriding a function, the variable is overridden directly, like so:

      override var prefersStatusBarHidden: Bool {
          return true
      }
    
  • The for-loop does not work like that anymore. According to the official documentation for loading textures from an atlas, you should load your textures like this:

      let bearAnimatedAtlas = SKTextureAtlas(named: "BearImages")
      
      let b1 = bearAnimatedAtlas.textureNamed("bear1.png")
      let b2 = bearAnimatedAtlas.textureNamed("bear2.png")
      let b3 = bearAnimatedAtlas.textureNamed("bear3.png")
      let b4 = bearAnimatedAtlas.textureNamed("bear4.png")
      let b5 = bearAnimatedAtlas.textureNamed("bear5.png")
      let b6 = bearAnimatedAtlas.textureNamed("bear6.png")
      let b7 = bearAnimatedAtlas.textureNamed("bear7.png")
      let b8 = bearAnimatedAtlas.textureNamed("bear8.png")
      
      let walkFrames = [b1, b2, b3, b4, b5, b6, b7, b8]
      
      bearWalkingFrames = walkFrames
    

Not pretty, but it’ll get the job done. If you want it nicer, do it with a while-loop:

    let bearAnimatedAtlas = SKTextureAtlas(named: "BearImages")
    var walkFrames = [SKTexture]()
    
    var i = 1
    while i <= bearAnimatedAtlas.textureNames.count / 2 {
        let bearImage = bearAnimatedAtlas.textureNamed("bear\(i).png")
        walkFrames.append(bearImage)
        i = i+1
    }
    
    bearWalkingFrames = walkFrames
  • Setting the bear’s position with CGRectMidX is way easier now:
    bear.position = CGPoint(x: self.frame.midX, y: self.frame.midY)

  • converting the repeatForever function for SKAction should be easy enough

The rest is pretty straight forward conversion of method names (like CGPoint(x:y:) instead of CGPointMake() and so on)

The loop doesn’t have to look that terrible. Just write it like this:

let bearAnimatedAtlas = SKTextureAtlas(named: "BearImages")
var walkFrames = [SKTexture]()
let numImages = bearAnimatedAtlas.textureNames.count / 2
for i in 1...numImages {
  walkFrames.append(bearAnimatedAtlas.textureNamed("bear\(i)"))
}
bearWalkingFrames = walkFrames

Great tutorial! What if I wanted to save and load images from the Photo library? I have already written the functions to save and get an image array of images that are stored in the image directory I programmatically created. I am trying to load the sprite using the same:
let sprite = SKSpriteNode(imageNamed: fSprite)
using fSprite as the image directory of the saved image, but it is not working…

any suggestions? thanks!