Animation in SpriteKit

Have you ever made one of those little flip-books that when you thumb through the pages, your drawings come to life? With a flip-book, you can string together a series of static images that appear to move as you flip through them, sort of like a filmstrip animation, like so:

Working with animation in SpriteKit isn’t much different than making a flip-book: you grab a handful of images known as textures, and you cycle through them one by one. The more textures you use, the smoother the animation; however, too many textures can quickly overload device resources, making the animation choppy and slow. The trick is to strike a balance between being resource-efficient and having enough images for a smooth animation.

To find the right balance, you must first understand the concept of frame rate and how it relates to motion. The frame rate, also known as frames per second (FPS), is the rate at which individual images show up on the screen. For SpriteKit, the default frame rate is 60 FPS.

Let’s get scientific for a moment. The human eye can process 10 to 12 images per second. When animating characters and other elements, it’s common practice to use the principle of on twos. With on twos, there’s one drawing for every two frames. If you need faster animation, such as a character running or a heavy ball dropping, you can use the on ones principle, which uses one image per frame.

For film, the average frame rate is 24 FPS, and the general rule of thumb for a typical walk cycle is about 12 images on average using the on twos principle.

Cycle animations let you create repeating actions, like walking and running, by looping through a series of animations. A walk cycle has four main poses:

• Contact
• Recoil
• Passing
• High point

The remaining images make up the frames in between, also known as inbetweening or tweening.

You don’t always need 12 images for a walk cycle; sometimes you need more, sometimes you need less—it all depends on what you’re trying to do and the length of time the animation needs to run.

Now that you have a better sense of how frame animation works, it’s time to load the images you’ll use to animate the main character in Gloop Drop.