Sprite Animation with SpriteKit

This reference article covers how to create animations using SpriteKit SKSpriteNode and textures.

Sprite Animation with SpriteKit

When creating a game using SpriteKit one of the first things we want to do is guarantee that our game feels alive. To bring that touch of life into the game a common practice is to animate the game elements.

How to create sprite animations in a SpriteKit game?

The first thing you need to do is create a Sprite Atlas in your Assets folder. The Sprite Atlas is a special type of folder that will collect images that are used together often to improve memory usage and rendering performance.

Creating a Sprite Atlas at the Assets folder

Once the Sprite Atlas is created, place the sprites for your animation inside.

Images inside a Sprite Atlas

To know more about Sprite Atlases you can check the article About Texture Atlases on the official Apple documentation portal.

Apple Developer Documentation
About Texture Atlases - Article at the Apple Developer Portal

You are now ready to use those images in your SpriteKit based game.

To easily access your Sprite Atlas create a computed property return a SKTextureAtlas, like in the example below. Make sure that the value of the name parameter is the same as the Sprite Atlas you created previously.

private var playerAtlas: SKTextureAtlas {
	return SKTextureAtlas(named: "Player")
}
Accessing a Sprite Atlas on code

Now let’s load the textures to be used in our animation cycles using our Sprite Atlas. Load the textures in the order of your animation cycle.

private var playerIdleTextures: [SKTexture] {
	return [
        playerAtlas.textureNamed("idle_1"),
        playerAtlas.textureNamed("idle_2"),
        playerAtlas.textureNamed("idle_3"),
        playerAtlas.textureNamed("idle_2")
    ]
}
Loading textures to be used in an animation

You can also preload your textures, for better performance. To know more about texture performance read the article Maximizing Texture Performance at the official Apple documentation portal.

Apple Developer Documentation
Maximizing Texture Performance - Article at the Apple Developer Portal
func startIdleAnimation() {
    let idleAnimation = SKAction.animate(with: playerIdleTextures, timePerFrame: 0.3)
    
    player.run(SKAction.repeatForever(idleAnimation), withKey: "playerIdleAnimation")
}
Animating a SKSpriteNode

This is what your game scene might look like.

class GameScene: SKScene {
    
    var player: SKSpriteNode!
    
    private var playerAtlas: SKTextureAtlas {
        return SKTextureAtlas(named: "Player")
    }
    
    private var playerTexture: SKTexture {
        return playerAtlas.textureNamed("player")
    }
    
    private var playerIdleTextures: [SKTexture] {
        return [
            playerAtlas.textureNamed("idle_0"),
            playerAtlas.textureNamed("idle_1"),
            playerAtlas.textureNamed("idle_2"),
            playerAtlas.textureNamed("idle_3"),
            playerAtlas.textureNamed("idle_4"),
            playerAtlas.textureNamed("idle_5"),
            playerAtlas.textureNamed("idle_6"),
            playerAtlas.textureNamed("idle_7"),
            playerAtlas.textureNamed("idle_8")
        ]
    }
    
    private func setupPlayer() {
        player = SKSpriteNode(texture: playerTexture, size: CGSize(width: 70, height: 46))
        player.position = CGPoint(x: frame.width/2, y: frame.height/2)
        
        addChild(player)
    }
    
    override func didMove(to view: SKView) {
        backgroundColor = SKColor.white
        self.setupPlayer()
        self.startIdleAnimation()
    }
    
    func startIdleAnimation() {
        let idleAnimation = SKAction.animate(with: playerIdleTextures, timePerFrame: 0.05)
        
        player.run(SKAction.repeatForever(idleAnimation), withKey: "playerIdleAnimation")
    }
}
Example of a game scene running a sprite animation

Wrapping up

Now that you know how to run animation using sprite atlas, textures and a SKSpriteNode start thinking about how would you organize your code if your nodes have different states.

What if your player has a death animation, an idle animation, and a walking animation? How would you change between those animations?

We are going to address this and much more in future reference articles and tutorials.