Sprite Sheets for Game Engines

Importing Sprite Sheets

1. Drag your sprite sheet into the Assets panel.
2. Select the image and set Sprite Mode to Multiple.
3. Open Sprite Editor → Slice → Apply.
4. Add the sliced sprites to an Animator or Animation clip.

C# Animation Script

using UnityEngine;
public class SpriteAnimator : MonoBehaviour {
  public Sprite[] frames;
  public float frameRate = 12f;
  SpriteRenderer sr;
  int index; float timer;
  
  void Awake() => sr = GetComponent<SpriteRenderer>();
  
  void Update() {
    timer += Time.deltaTime;
    if (timer >= 1f / frameRate) {
      index = (index + 1) % frames.Length;
      sr.sprite = frames[index];
      timer = 0f;
    }
  }
}

Setting Up Paper2D

1. Enable the Paper2D plugin in your project settings.
2. Import the sprite sheet PNG into the Content Browser.
3. Right‑click the texture → Sprite Actions → Apply Paper2D Texture Settings.
4. Create a Flipbook from the sprites and add it to a Flipbook Component.

C++ Flipbook Control

// C++ Flipbook playback
UPaperFlipbookComponent* FlipbookComponent;

void AMyActor::BeginPlay() {
  Super::BeginPlay();
  FlipbookComponent->PlayFromStart();
  FlipbookComponent->SetPlayRate(2.0f); // 2x speed
}

AnimatedSprite2D Setup

1. Drag the PNG into the FileSystem dock.
2. Add an AnimatedSprite2D node to your scene.
3. Create a new SpriteFrames resource and set the frame size.
4. Assign the sprite sheet and play the animation.

GDScript Animation

# GDScript animation control
extends Node2D

@onready var animated_sprite = $AnimatedSprite2D

func _ready():
  animated_sprite.play("walk")
  animated_sprite.speed_scale = 1.5  # 1.5x speed

Loading and Playing Sprites

1. Preload the sheet with this.load.spritesheet specifying frame width and height.
2. In create, define an animation with this.anims.create.
3. Play the animation on a sprite using play.

Phaser 3 Implementation

// Phaser 3 sprite sheet animation
function preload() {
  this.load.spritesheet('ball', 'bouncing-ball.png', { 
    frameWidth: 32, 
    frameHeight: 32 
  })
}

function create() {
  this.anims.create({ 
    key: 'bounce', 
    frames: this.anims.generateFrameNumbers('ball'), 
    frameRate: 12, 
    repeat: -1 
  })
  
  const sprite = this.add.sprite(100, 100, 'ball')
  sprite.play('bounce')
}