Animating Stephen

I am going to write about an artifact I made last week. This artifact is a swimming animation I made for the main character Stephen.

I started out with the placeholder, looking at it and I thinking about how the fin should move to make it look like the player character is swimming. I thought the frame by frame method (which is drawing one frame at a time, to make an animation) would be most suitable for the character considering the enemies were animated in the same way and it look very natural and organic. This animation, just like the placeholder image, was created in Photoshop. Together with the other graphics artist in my group, we agreed on having an uneven number of frames and a maximum of 20 frames. This way, we would have animations that were not too different from each other.

stephen-concept

The placeholder.

I dropped the placeholder in a separate layer in Photoshop, to have not only as a reference, but also to be able to trace the lines of the character (on a new layer of course). I made sure to simplify the line art to make the process a bit faster.

I then cleaned up the lines a bit, just to see them clearer and still to be able to play around with the placement of the tail fin on each frame. I made the line art of the eyes and eyebrows, the mouth and the body on one layer and then copied it onto the other frames.  I could choose this process because the only part that was going to move was Stephen’s tail fin. This was the best choice, given the fact that I knew that part of his body and face would always be covered by a weapon.

Once I was done with the fixed line art, I proceeded to sketch the fin starting with the frames that I decided to be the outer keyframes. These two keyframes would determine the range of the fin when it’s moving.

After the keyframes were there, I went on to sketch the fin on the frames in between the middle and the outer ones. I tried to make the movement look as fluid as possible, but at the same time kept the cartoony feeling that our game has.

When happy with the sketches, after I trying out the animation many times to make it look right, I made the final line art on each frame.

Color wise, I used the same local color (yellow) as the placeholder and colored the frames. Again, me and the other artist decided not to paint shadows in our animations. This decision was made so we could keep the cartoony theme of our game and as an added bonus make it easier for the player to see what is happening on the screen.

merged-layers-stephen-swim-ver1

Finished animation.

On its own the finished animation looks a bit too simple, but in the game it looks good and I’m happy with the result.

stephen-idle-anim-spriteheet

Here’s a sprite sheet, showing each individual frame of the animation (not in order).

About Anna Lindholm

2016 Graphics