Animating Sprites

What is animation?

In order to achieve the desired effect of animating our character, we need to understand a little more about animation. Behind the scenes, we will be showing a rapid succession of images, which gives the illusion of movement. 

What is a texture atlas?

To understand what a texture atlas is, check the figure following this section. As you can see, an atlas is an image that contains many subimages. Our game is able to access certain images in a texture atlas due to a special configuration file that keeps the coordinates of each image in a texture atlas.

Before Xcode 5 and Sprite Kit, you had to use third-party tools in order to create texture atlases, but now, all you need to do is create a folder named name.atlas, where the name can be anything; add images to it and add that into your project in Xcode. Xcode will handle everything for you transparently, and you won't have to worry about plists, coordinates, efficiency, and everything else.

Benefits that texture atlases provide are as follows:

• All drawing from one atlas can be processed in one draw call, thereby increasing performance dramatically.
• If your image has empty space, it will be cropped, and when you need the image, it will be restored. This way, you save memory, and your applications are smaller, which is a good thing. 

Create a new project in Xcode by selecting File\New\Project... from the main menu. Select the iOS\Application\Game template and click Next.

Enter AnimatingSprites for the Product Name, select Swift as the language and SpriteKit as the Game Technology, choose Universal for Devices and then click Next. 

Select a location on your hard drive to store the project and click Create.

Select the AnimatingSprites project in the Project Navigator and then select the AnimatingSprites target. Go to the General tab and make sure that only Landscape Left and Landscape Right are checked: 

Select GameScene.sks and delete it from your project. Then open GameViewController.swift and replace the contents with the following:  

import UIKit

import SpriteKit

class GameViewController: UIViewController {

    

    

    override func viewDidLoad() {

        super.viewDidLoad()

        let scene =

        GameScene(size:CGSize(width: 2048, height: 1536))

        let skView = self.view as SKView

        skView.showsFPS = true

        skView.showsNodeCount = true

        skView.ignoresSiblingOrder = true

        scene.scaleMode = .AspectFill

        skView.presentScene(scene)

    }

    override func prefersStatusBarHidden() -> Bool {

        return true

    }

}

Download and add hero.atlas folder from  https://drive.google.com/folderview?id=0B3tYjved1fZFbEhwdUdPcEM4dk0&usp=sharing 

To add these, simply drag the  hero.atlas folders into your project. Make sure that Copy items if needed, Create Groups, and the AnimatingSprites target are selected, and click Finish. 

Replace the content of GameScene.swift with the following.

import SpriteKit

class GameScene: SKScene {

    let backgroundlayer = SKNode()

    var hero: SKSpriteNode!

    let heroAnimation: SKAction

    

    override func didMoveToView(view: SKView) {

        

        // Create background

        

        backgroundlayer.zPosition = -1

        backgroundColor = SKColor.whiteColor()

        addChild(backgroundlayer)

        

        // create SKSpriteNode

        

        hero = SKSpriteNode(imageNamed: "WaLK")

        hero.position = CGPoint(x: 100, y: 600)

        hero.setScale(2.5)

        backgroundlayer.addChild(hero)

        

    }

    override func update(currentTime: CFTimeInterval) {

        

        // move hero to position (1500,600)

        if hero.position.x  <= 1500 {

            hero.position = CGPoint(x: hero.position.x + 10, y:600)

            startHeroAnimation()

        }

        

        // stop animation after reaching to position (1500,600)

        

        if hero.position.x  >= 1500 {

                    stopHeroAnimation()

                }

        

    }

    override init(size: CGSize) {

        

        // You create an array that will store all of the textures to run in the animation.

        

        var textures: [SKTexture] = []

        

        //creates a string for each image name and then makes a texture object from each name using the SKTexture(imageNamed:) initializer.

        

        for i in 1...4{

            textures.append(SKTexture(imageNamed: "WaLk\(i)"))

        }

        

        //This adds frames 3 and 2 to the list (remember, the textures array is 0 based). In total, the textures array now contains the frames in this order: 1, 2, 3, 4, 3, 2. The idea is you will loop this over and over for a continuous animation.

        

        textures.append(textures[2])

        textures.append(textures[1])

        

        //Once you have the array of textures, running the animation is easy—you just create and run an action with animateWithTextures(timePerFrame:)

        

        heroAnimation = SKAction.repeatActionForever( SKAction.animateWithTextures(textures, timePerFrame: 0.1))

        super.init(size: size)

        

    }

    

    required init (coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")

    }

    

    // start animation

    func startHeroAnimation(){

        if hero.actionForKey("animation") == nil{

            hero.runAction(SKAction.repeatActionForever(heroAnimation),withKey: "animation")

        }

    }

    

    // stop animation

    func stopHeroAnimation() {

        hero.removeActionForKey("animation")

        

    }

}

Build and run, and check out your animated hero. 

Gopinath T B,

CEO, Meteora Gaming