Armed to the teeth

The artifact I want to write about this week is not one single artifact, but a bundle of them that are included in the same category.

 

Last week I focused my attention on creating and finishing the weapons for the main character Stephen in our game. It’s essential that he has weapons so that the player will be able to shoot the fishes that are attacking Stephen. My team and I wanted the focus of our game to be on different choices of weapons with different behaviors, mainly for the fun factor of it.

During playtesting for both the Alpha and the Beta versions of our game, there were some confusion over the weapon’s behaviors among the playtesters – and rightly so. The fact that we had used the machine gun sprite for all the weapons made it really difficult to distinguish between them and know why there were different behaviors and shooting patterns. Everyone simply ended up thinking that the machine gun was malfunctioning.

The plan all along was of course to make placeholders for all four of our chosen weapons. Apart from the machine gun, we decided to implement a shot gun, a bazooka and a sniper rifle. We focused our attention on getting a different feel of the handling of them and code wise we already had this going in the game.

So, the first thing that I did was to research the different types of weapons for references and to figure out the design of each one. I simply chose the reference pictures according to my liking and the way they displayed the functionality of the individual weapons.

As I’ve had the same work-flow and procedure with all the weapons made last week, I will only include a general description of the process and not go into describing the making of all the weapons individually.

I began sketching (in Photoshop, as per usual), using the reference pictures as guides for the outlines and most of the details. I kept it imprecise, so that I would focus the attention on the general shape and get the initial design down rather that nitpicking on details.

Sniper rifle sketch

Example of sketch: Sniper Rifle

After I had a sketch ready, I made a new layer and proceeded to draw the line art. At some points in the process I would hold down the shift button during a stroke, to make a completely straight line. This made the whole process a bit less time consuming. Otherwise, I’ve been getting better at line art, so I didn’t struggle as much with creating straight lines as I’ve done before.

The coloring process was fairly simple. I decided to keep the same color scheme for all the weapons. After I’d done the local color in a layer, I went on to create the shadows. I wanted the shadows to stand out and create a quite special effect from a visual design point of view. That’s why I didn’t blend or fade the shadows but kept them harsh looking.

Looking back, it’s quite interesting to see the progress that I’ve made with the weapon assets design. Just comparing the machine gun to the other weapons, it’s clear which of them was created first. I didn’t really encounter any difficulties during creation this time, which was a nice breather from the usual technical struggles I’ve had with Photoshop. I went with the flow and had fun making these assets!

Sniper rifle - v1

Sniper Rifle

shotgun - v1

Shotgun

bazooka - rocket launcher

Bazooka

machine-gun_version1

Machine Gun

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).