Sprite-kit optimized batching and texture sharing

Question

One of Apples videos on best practices with SpriteKit covers using batching to limit the draw calls. It then references using texture atlases in a way so that you can draw multiple different textures at the same time.

Can someone explain how I accomplish this?

See video: https://developer.apple.com/videos/play/wwdc2014/608/

at 22:22 in the presentation.

Might need to watch from 20:00 - 23:00 to get the full picture.

How do I get it to draw these helicopters in 1 draw pass?

Additional question. How do I get this same affect without code? Adding the helicopter sprites and assigning textures in the sks file?

Answer 1

First, create a texture atlas and add it to your project

1. create a folder with a .atlas extension in your project directory
2. add the helicopter parts images to the folder
3. add the folder to your project (by right clicking in the Xcode's File Navigator and selecting "Add Files to "[Your Project]..." option)

Load the texture atlas by adding the following to didMove(to view:SKView):

let atlas = SKTextureAtlas(named: "helicopter")

and then create a texture for each part

let body = atlas.textureNamed("body.png")
let rotor = atlas.textureNamed("rotor.png")
let missiles = atlas.textureNamed("missiles.png")

Lastly, assemble the helicopters with the parts. The zPosition of each part determines the order in which they are drawn.

    let startX:CGFloat = -200

    for i in 0...10 {
        let helicopterBody = SKSpriteNode(texture: body)
        helicopterBody.zPosition = 100
        helicopterBody.position = CGPoint(x: startX + CGFloat(i*40), y: 0)

        let helicopterRotor = SKSpriteNode(texture: rotor)
        helicopterRotor.position = CGPoint(x: startX + CGFloat(i*40), y: 0)
        helicopterRotor.zPosition = 200

        let helicopterMissiles = SKSpriteNode(texture: missiles)
        helicopterMissiles.position = CGPoint(x: startX + CGFloat(i*40), y: 0)
        helicopterMissiles.zPosition = 0

        addChild(helicopterBody)
        addChild(helicopterRotor)
        addChild(helicopterMissiles)
    }

Show the draw count by adding the following to GameViewController:

view.showsDrawCount = true