Have you ever seen a flip-book animation? Maybe you've doodled one yourself, in the corner of your notebook, and proudly flipped the pages with your thumb to watch your little movie come to life. The same principle is used to create digital animations, often with the use of sprite sheets. What is a sprite sheet and how does it work? If you aren't sure how you could make one yourself, don't feel intimidated - I've chronicled the process from the point of view of a newbie making a sprite sheet for the first time!
A sprite sheet is a series of "sprites," or individual images, that are sequenced along a strip, like a comic strip. The individual sprites are often very similar to each other, with only tiny changes from one image to the next, to create the illusion of motion. In the below sprite sheet, the images of a falling cat are exactly the same, so it's not a true animation. This sprite sheet was used as a placeholder for the MonRiverGames project, Spy Cats, until a new animation could be developed.
First, we need the artwork. Fortunately, I had access to existing artwork made by one of the awesome artists at MonRiverGames, like what you can see below. I selected some poses that might come together to create a more natural transition from jumping, to falling, to finally landing on all fours. After all, a cat always lands on its feet!
I started by slightly tilting the jumping animation, duplicating it, and then tilting it again. It took a few online tutorials to learn how to use the features in my art tool (ProCreate for Ipad) but this was the easiest part! The cat seems to tilt forward out of the top of its jump.
Next, I added the other selections of art I found amongst the assets already made by talented MonRiverGames volunteers. The cat seems to land in a crouch, then prop himself up into a standing position. I used the grid to carefully space the images evenly apart. This is very important so that your game authoring tool (such as Unity) can split the sprite sheet and animate it properly.
Finally, a sprite sheet must have a transparent background, then published as a PNG file type before being added to a game. Below is the final sprite sheet that was inserted into Unity for testing. After further testing and tweaking some details, we may soon see this animation in the game, Spy Cats!
In the meantime, here is a preview of what the animation looks like for now, slowed down so you can take it all in. Game designers have a good eye for finding ways to improve the flow of movement, so we may see some feedback that will lead us to an even better animation in the future.
Do you have ideas that could help us improve upon this animation? What have your eyes caught in this preview? Let us know in the comments!
Comments