27th Sep 2021

Sprite Animation

Game Design

Written By, Utsav Patel

Overview

What is Sprite Animation?

Sprite animation is an alternation or position setting of parts of objects or characters and after that compiling graphics into a single file.

As we all know, the design field is growing faster day by day, and finding some tricks and easy ways to carry out the required design. Like, we can do 2D sprite animation in design software and now we make that from coding also but some old design ideas will give you fun and make you more creative.

What we need for this design is a paper pencil, some creative ideas, and a capable system for design software so we can take out our design from our creativity.

So, let’s start!

Sketch your idea and make the illustration

Firstly take some paper-pencil and take out your creative design on paper with some sketching skills. Here we are taking a simple 2D character, a boy.

Now let’s take our artwork to digitization, scan it, and take it to your workspace of design software.

Now trace and modify your artwork using a pen tool in design software, and make the shape close artwork so we can color easily our artwork

Make a side view of the artwork

Here we are taking a boy character for our sprite animation. The animation is a walking cycle of a boy. For that, we have to make a side view of our character because a walking cycle can be easily understandable in a side view.

So for that, take your character and take guidelines for the body part of the character so, from that we can make the same size and position of parts of a character, which can make our perfect side view.

Make parts of the artwork for sprite

Now for making a sprite animation of our character we have to make parts of the character for a required moment or rotation of parts. For this, first of all, we have to decide which part will move or not, and on their basis, the parts will take out from the character.

After deciding the parts, make it properly joinable so that our sprite animation will go smoothly.

sprite

Now further after making proper joinable parts, place it well for the first movement.

Next, make the copy of the part and paste it, and rotate it for the next position. Take the copy how much you want to make your animation smooth, more copies will make your animation smooth.

movement-sketch-1

Take animation and Export

Now for taking animation of our character place all full copies of parts at equal pixel level like the first position of the character is at 0 pixels (zero) then take next at 300 next at 600 from 0 (zero) respectively further, it means that if we are taking 300-pixel distance for the first position then we have to follow our pixel distance 300 between all positions.

If your artwork is big for big then u can take more pixel distance between two positions but follow that distance from first to last.

Note: Don’t take the first position of your character as the last position of character because the animation is a continuous process so that mistake will take time in the second cycle of animation and that will look bad.

Now for making and exporting our animation take one new file and choose some more pixels with respect to your artwork pixel and take the artboard count the same as we have positions of our character like in our character we have 12 different positions then take count of artboards 12.

custom-setting

Then put a single position of our character in a single artboard and align that all positions in the center with their artboard from the align option. Now we choose the path where we want to export and choose the Use artboard option and choose all options in the popup box.

move-steps

Now export the all single artboard form File > Export > Export As…

export

Now we choose the path where we want to export and choose the Use artboard option and choose all options in the popup box.

export-option

We got all single positions in a single image.

Now we will make a GIF of our animation because the animation effect will be in video format, So for making GIFs we can use many online websites which will combine all our single images and make one GIF.

final-animation

Conclusion

This is it. I hope that what we shared From this method, you will make more creative sprite animation.
Hope you find this helpful.
Thanks.

Written By,

Game Designer at Yudiz Solutions Pvt. Ltd