Kodeco Forums

Sprite Kit Animations and Texture Atlases in Swift

🎓 Courses & Articles
1

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
2

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?

3

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

4

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)

5

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
6

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!