Creating sprite frame animations

Creating sprite frame animations

April 10, 2017

In an early chapter you already learned how to create an animation using the timeline features of SpriteKit (remember the bear?). In this chapter you will learn how to create a sprite frame animation, using a series of sprite files. You will animate penguins to sit around the catapult, waiting for their turn to make history and fly.

Animation action

You're going add this new penguin animation action to the SpriteKit actions file, Actions.sks.

Select Actions.sks and Add a new action, name it JumpPenguin.

Add JumpPenguin action

Build the animation

The first thing you need to do is drag a AnimateWithTextures action into the JumpPenguin timeline. SpriteKit Texture Animation

SpriteKit allows you to sequence the animation frames by dropping them into the Textures box. The order for this animation will be penguin_# 1,2,3,2,4,5,6,5,4.

Drag each of the penguin_#.png assets from the Media Library into the Textures box in the order show above. Set Duration to 2

It should look like this when you're finished. SpriteKit Texture List

Great, you've made a JumpPenguin action. Time to apply this to the GameScene

Adding Penguins

Drag a waitingpenguin.png asset into GameScene.sks

Expand the timeline for this sprite and drag in the JumpAction action into the timeline.

You will want to repeat the animation forever so set this action repeat to forever.

JumpAction Infinity

Copy and Paste this penguin two more times, placing them close to each other.

Run your game... You should see the three penguins blinking and jumping for joy next to the catapult:

Penguin animation

Desynchronize penguins

The animation looks pretty good. However, it seems unnatural that all three penguins perform the JumpAction at the exact same time. This happens because your timeline actions all start at zero, this means the animation starts as soon as the object enters the scene.

You improve this quite easily, click on each JumpAction in the timeline and modify the Start Timer, set it to 0 , 0.25 and 0.5 respectively for each node.

Remember you can preview this in Xcode by pressing Animate in the timeline.

Run your game... Looking good!


Well done! You now have mastered sprite frame animations in SpriteKit.

In the next chapter you are going to polish the gameplay.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more