Master 2D Animations with Sprite Sheets

This guide walks you through creating a running animation for a 2D character using Waffle.

When you are working with Waffle, or any other game engine, mastering sprite sheets is essential. This guide walks you through creating the perfect run animation using the example of this elf character throughout.

What is a Sprite Sheet?

A sprite sheet is a single image that contains multiple frames of animation laid out in a grid. Instead of loading individual images for every frame, the game engine loads one image and cycles through portions of it.

Think of it like a film strip - each frame is one pose of your character.

It’s important that the character is centred in every frame and that each frame transitions smoothly into the next. You can find ready-made sprite sheets at OpenGameArt or Itch.io. You can create your own sprite sheets at Aseprite or LibreSprite.

See our asset guide to learn more about creating or sourcing sprites

Using Sprite Sheets in Waffle

Here’s your blueprint for getting sprite sheets working in Waffle without the headaches. Follow these steps carefully to avoid common pitfalls and make sure your animations look sharp.

1. Find and Inspect Your Sprite Sheet

   • Locate your image file (e.g. elf_run.png)
   • Check its dimensions in an image viewer
   • Example: 2880x128 pixels, 1 row, 10 columns
2. Prepare Your Sprite Sheet

   • Trim extra space around frames for cleaner alignment
   • Ensure the background is transparent (PNG format recommended)
   • Resize your sprite to match the scale of your game world
3. Tell Waffle How to Use It

   Upload you sprite sheet to the assets tab in Waffle. Select it and add a prompt. For this elf example:

   Let’s use this sprite sheet for our elf’s run animation. It is 1 row, 10 columns. The image size is 2880x128.

   Waffle will now handle the spritesheet automatically for animation.

4. Handling Multi-File Sprites

   If you downloaded a spritesheet that is split into multiple files (e.g., elf_run_1.png, elf_run_2.png), tell Waffle:

   Let’s use these images in order (1, 2, 3, …) for the elf’s run animation.

   Pro tip: Always test your sprite sheet animations in Waffle early. Don’t wait until later to realize your elf’s feet are gliding instead of running.

Common Pitfalls to Avoid

• Wrong frame dimensions: Double-check grid size
• Missing transparency: Use PNG, not JPG
• Uneven frame alignment: Make sure all frames are evenly spaced in the sheet

Best practices to follow

• Group sprite sheets by animation type: run, jump, attack, etc.
• Keep naming consistent (elf_run, elf_attack, etc.) to avoid confusion
• Optimize file size for web-based games by compressing PNGs (use tools like TinyPNG)

Example Waffle Prompt

Here is a ready-to-go prompt you can use in Waffle:

Load elf_run.png as a sprite sheet. It has 1 row, 10 columns, size 2880x128. Set animation speed to 12 frames per second. Loop the animation continuously while elf is moving.

Next Steps

Have questions about sprite sheets or want to share your Waffle creations?

Start Building

Jump into Waffle and learn hands-on!

Join Community

Get tips from other developers in our Discord.