In this tutorial, I will show you how to design, animate, and export a 2d game character animation in Blender for your project.
Character Setup
If you want to follow along, I have provided the link to the Blender file
The first thing I need to do is move the 3D cursor to the place where I want the individual graphics to rotate and move around
For the head, I hide the beard and use SHIFT + Right-click to move the 3D cursor to the bottom-center of the head
I then right-click and set the origin to the 3D cursor and unhide the beard
I then select the left arm and use SHIFT + Right-click to move the 3D cursor to the top-center of the arm
I then right-click and set the origin to the 3D cursor
I repeat this process for the right arm
For the left leg, I use SHIFT + Right-click to move the 3D cursor to the top-center of the leg
I then right-click and set the origin to the 3D cursor
I repeat this process for the right leg
Animation
I will split the viewport and open the timeline
Under the output tab, I change the FPS to 60 and the end frame to 60
On frame 1, I select the left leg and rotate it around the Y-Axis -30-degrees
Using the I-key, I insert a keyframe for rotation
On frame 30, I rotate the leg around the Y-Axis 60-degrees and insert a keyframe for rotation
I copy the keyframes from frame 1 and paste them on frame 60
On frame 1, I select the right leg and rotate it around the Y-Axis 30-degrees and insert a keyframe for rotation
On frame 30, I rotate the leg around the Y-Axis -60-degrees and insert a keyframe for rotation
I copy the keyframes from frame 1 and paste them on frame 60
On frame 1, I select the left arm and rotate it around the Y-Axis 30-degrees and insert a keyframe for rotation
On frame 30, I rotate the leg around the Y-Axis -60-degrees and insert a keyframe for rotation
I copy the keyframes from frame 1 and paste them on frame 60
On frame 1, I select the right arm and rotate it around the Y-Axis -30-degrees and insert a keyframe for rotation
On frame 30, I rotate the leg around the Y-Axis 60-degrees and insert a keyframe for rotation
I copy the keyframes from frame 1 and paste them on frame 60
Sprite Sheet
For the sprite sheet, I need to export keyframes from Blender
I use NUMPAD Zero to go into camera view
Under the output properties tab, I change the resolution to 36 x 36
I select my camera and use ALT + G AND ALT + R to clear the location and rotation
In side view, I rotate the camera around the X-Axis by 90-degrees
Back in camera view, I move the camera until the character is standing on the floor and within frame
I add an area light and rotate it around the X-Axis by 90-degrees
I reduce the power
Under the render properties, under the film panel, I make sure “transparent” is checked so I can export the images with a transparent background
Under the output properties tab, I make sure the file format is PNG and the color profile is RGBA
On frame 0, I render the image
I then save the image to my folder
I repeat this process for every 5 frames [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, and 60]
I open GIMP and make a new document that is 252px x 72px with a transparent background
Under the image menu, I select configure grid and change the horizontal and vertical to 36
Under the view menu, I select “show grid”
I import each of my renders in sequence onto the new document
After they are all imported, I can export the entire sprite sheet as a PNG