Animating Sprite

Introduction

For this workshop, we will be learning how to create our own sprites and animate them, so that we can use them in Unreal Engine. It is possible to use Adobe Illustrator and Adobe After Effects for this workshop, however this is a more straight-forward website we can use called Piskel. This is easier to use as it requires less knowledge and practice to be effective.

For this workshop, I initially wanted to draw each frame for my sprite on my iPad – this was a lot easier for me and put less strain on my wrists compared to drawing with mouse and keyboard. Here is my first sprite character design that I planned to use:

However, when saving and importing this image into Piskel, it was extremely blurred regardless of the resolution and the website was not compatible with my iPad for some reason. After trying a few different things to fix this problem, I ended up starting from scratch.

Unfortunately, this time I had to use my mouse and keyboard to draw the sprite. I was using Piskel on my computer’s web browser. My second character is a lot more simple due to the obvious restrictions I faced this time.

Here is a simple, bored raptor character. The colour palette is easy on the eyes and calm. You can see underneath I had been working on the next frame for his walk cycle. At the moment, I have two frames for his walk cycle and I already like the way it looks at it suits the pixelated art style and nature of this workshop.

To add a bit more motion to this frame, I added some movement to the character’s tail and fur on top of his head.

So we have a basic walk animation done. Next, we need to create a jump animation. For this, I will consider editing things such as the fur, tail, and legs.

Here is a current animated gif of the basic walk animation. I can see in this gif that the paint bucket fill tool has missed a few areas on the fur, here I will proceed to fill it in. This was helpful for me as I didn’t notice this before.

To create a run animation, I can simple just increase the frame rate and maybe add a few more frames to make the animation last longer.

This animation is played with 12 fps.

I struggled a little bit figuring out where the legs would go and how they would move due to the anatomy of my character. I added motion to the tail and fur to rein act the affects of gravity and added a little bit of emotion to the eyes by adjusting the eyelid.

This simple animation has only 3 frames. Drawing a lot at once with my mouse and keyboard puts a lot of strain on my wrist so I prefer to get more work done by including fewer frames. Besides I like the way it looks, I feel it suits the style of the workshop better.

Next, I want to create an attack animation for this raptor. The character looks very laid back and perhaps friendly… which gives me an idea for the attack animation.

For this animation, I decided I wanted to put a little unexpected dark twist on this character. The animation is limited to a few frames, so this means that the animation wont have much detail – thus taking away from the attack itself. However, this is the most frames I’ve done for one of the animations yet and I think that it captures my idea pretty well.

Each frame gets more and more intense.

Here is the final animation;

Conclusion

This is a very simple character design that I was in a rush to make, therefore it wasn’t able to have many frames. I still enjoyed this process and it was easier than I imagined making a sprite would be initially. From this entire workshop, I think this part was the best for me as it was more creative. Still, I didn’t get a chance to transfer and use this character in Unreal.