This tutorial was put together by our team member Jason for Rosebud AI, the AI-powered game creation platform.
Join our Discord to find more tutorials and connect with other creators!
Spritesheet animation is one of the key ways that animated assets get added to video games.
It works by having an image that is a strip of multiple images of something. The game then rapidly switches from image to image in that strip, showing only one image at a time. This makes the image appear to be moving!
In this quick tutorial, we're going to add two animated characters to our project. Here is what we'll end up with: https://play.rosebud.ai/games/00cdb249-eb0d-4415-90d5-801443d92270
Using spritesheets on Rosebud AI isn't too difficult as long you know a few key pieces of information. Please follow the following simple steps to get started with your own spritesheets!
Getting your Spritesheet
Get your spritesheet. If you don't have one, places like Itch and kenney.nl are great places to search.
For this tutorial, we'll use this asset pack: https://kenney.nl/assets/pixel-platformer
Finding the Info about your Spritesheet
Check your asset pack for any specification files. These tell you very important information about your spritesheets, like the size of each frame, the padding between the frames, how many frames there are, and more. You'll need to give Rosie a lot of this info since she currently can't visually see assets.
Upload the Spritesheet to Rosebud
If you haven't already, create a new Rosebud project and then upload the spritesheet to the Asset Tab.
Writing the Prompt for Rosie
Submit the following prompt to Rosie:
Please add characters 1 and 2 from my spritesheet to the scene. The spritesheet is 9x3. Frames 1 and 2 on the first row are character 1's frames. Frames 25-27 are character 2's frames.The sprite sheet's frames are 24x24 with 1x1 padding between them.The spritesheet is @{ your_asset_name}
Make sure that you use the number values that match your spritesheet if you're using a different one!
.svg)
.svg)
.svg)