Game Development — Part 1

Bringing Characters to Life: A Guide to Sprite Animation in Game Development

lyvennitha sasikumar
4 min readJun 13, 2024

Hey Guys! I am back after long time with some interesting stuffs. Lets see!

Introduction

Creating a dynamic and engaging game experience often hinges on the subtle details that breathe life into your characters. One of the most effective ways to achieve this is through sprite animation, a technique that animates a series of images to create the illusion of motion. In this first part of our game development series, we’ll delve into the essentials of sprite animation, covering everything from the basics to practical implementation. Whether you’re a seasoned developer or a novice stepping into the world of game development, this guide will equip you with the knowledge and tools needed to animate your game characters effectively.

Understanding Sprite Animation

What is Sprite Animation?

Sprite animation is a technique used in computer graphics where a series of images, known as frames, are shown in sequence to create an animated effect. Each frame represents a different stage of the animation, and when these frames are played in quick succession, they create the illusion of movement. This method is widely used in 2D games to animate characters, objects, and other elements.

Sprite Sheet

Preparing Your Assets

Creating and Organizing Sprite Sheets

Before diving into the coding aspect, it’s crucial to have your sprite assets ready. A sprite sheet is a collection of images placed in a single file, where each image represents a frame of the animation. Tools like Photoshop, GIMP, or specialized sprite editors can help you create and organize your sprite sheets effectively.

Tips for Creating Sprite Sheets:

  • Maintain consistent dimensions for each frame.
  • Ensure each frame seamlessly transitions to the next.
  • Organize frames logically, often from left to right, top to bottom.

Here, i just used a spritesheet and cutted the image in sequence in same size. And used texture packer to check the animation.

Implementing Sprite Animation in Code

Setting Up the Scene

To demonstrate sprite animation, we’ll use Swift and SpriteKit, Apple’s framework for 2D game development. We’ll start by setting up a basic game scene and then move on to animating a character sprite.

import Foundation
import SpriteKit
import SwiftUI


class WalkingScene: SKScene {
override func didMove(to view: SKView) {
backgroundColor = .white
let runningCat = SKSpriteNode(texture: SKTexture(imageNamed: "Run1"))
runningCat.position = CGPoint(x: frame.midX, y: frame.midY)
runningCat.size = CGSize(width: 150, height: 150)
addChild(runningCat)

let walkTextures = (1...6).map { SKTexture(imageNamed: "Run\($0)") }
let walkAnimation = SKAction.animate(with: walkTextures, timePerFrame: 0.1)
let repeatWalk = SKAction.repeatForever(walkAnimation)
runningCat.run(repeatWalk)
}
}

Let’s break down the provided code step by step to understand how it works and what each part does. Before breaking the code, one should knw What is SKScene.

SKScene

SKScene is a class in SpriteKit, Apple's framework for creating 2D games. It represents a single scene or screen in your game, serving as the container for all the visual elements (nodes) and actions that make up your game.

Creating the Sprite Node:

let runningCat = SKSpriteNode(texture: SKTexture(imageNamed: "Run1"))
  • SKSpriteNode: This is a node used to display a sprite in SpriteKit.
  • SKTexture(imageNamed: "Run1"): This creates a texture from an image named "Run1". The texture is then used to initialise the sprite node runningCat.

Setting the Position and Size:

runningCat.position = CGPoint(x: frame.midX, y: frame.midY)
runningCat.size = CGSize(width: 150, height: 150)
  • position: This sets the position of the runningCat sprite to the middle of the screen, both horizontally and vertically.
  • size: This sets the size of the sprite to 150x150 points.

Adding the Sprite to the Scene:

addChild(runningCat)
  • addChild: This adds the runningCat sprite to the scene so that it can be displayed and interacted with.

Creating the Animation Textures:

let walkTextures = (1...6).map { SKTexture(imageNamed: "Run\($0)") }
  • (1...6).map: This creates an array of numbers from 1 to 6 and maps each number to a corresponding texture named "Run1", "Run2", ..., "Run6".
  • SKTexture(imageNamed: "Run($0)"): This creates a texture for each image name "Run1", "Run2", ..., "Run6" which we have these textures in our asset.

Creating the Animation Action:

let walkAnimation = SKAction.animate(with: walkTextures, timePerFrame: 0.1)
  • SKAction.animate: This creates an animation action that animates the walkTextures array with each frame displayed for 0.1 seconds.

Repeating the Animation Forever:

let repeatWalk = SKAction.repeatForever(walkAnimation)
  • SKAction.repeatForever: This creates an action that repeats the walkAnimation action indefinitely.

Running the Animation:

runningCat.run(repeatWalk)
  • run: This starts the repeatWalk action on the runningCat sprite, making it run the walk animation forever.

TaDow! OutPut!

The code effectively demonstrates the process of loading multiple textures, creating an animation sequence, and applying that animation to a sprite node in SpriteKit.

What’s Next?

In the next part of our series, we will explore How to create a background and move current texture across the screen.

Our aim is to create a game similar to the Chrome Dino game, featuring a running cat, on iOS using SpriteKit

Will see you all in Next Part!

Happy Coding! 🧚🏼‍♀️

--

--