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.

Sniper Rifle

Shotgun

Bazooka

 

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.

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

Shotgun

Bazooka

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.

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.

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.

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

Enemy Squid Design and Animation

This week has been dedicated to final design of- and the beginning of animating the new enemy my team created for our game.

This new enemy is a squid that we feel complement the other enemies (piranhas, swordfish and blowfish) in the aquarium rather well, as this enemy has its own projectile based attack. It will, when in range of Stephen (the player character), let out a cloud of ink to blur the vision of Stephen (the player) and thus make it more difficult to see or move when swimming in the “inked” area. The squid also has its own movement pattern, where it is meant to mirror the movement of an actual squid. This pattern is a zig-zag pattern where the squid is launching forward/upward and then coming downward/backward in a slower manner. The zig-zag movement will be greatly helped by the swim animation when it is finalized and in place.

When it came to the visual design, the biggest struggle for me (design wise) I would say was the fact that I had to try to mold the look of a squid into the cartoony style of our game. It took me a couple of tries, but I kept the original sketch and worked with that.

To make the placeholder, I went through the same process I have developed throughout the last couple of weeks. First, I clean up the sketch and make the line art. After that I add local colors and lastly some simple shadows. Because this is a simple placeholder for our game, I did not bother with fancy lighting of the character. The colors were decided in our Style guide which I’m also working on currently. Purple felt like a good squid color and it suited the color scheme of the rest of our characters. They’re all warm colors to stand in contrast to the background consisting of only cold colors.

So, this week I made my first animation of the squid and kept it sketchy for the ability to make changes if needed. I did a frame by frame, with a total of 17 frames. This one is the swim animation, but the squid is also supposed to have 3 other animations (if everything goes well).

For the swim animation, I wanted to keep the cartoony feel and go for a bit more squash and stretch (which is the visual sense of something being crunched/squashed together and then stretched out). This principle of animation is quite difficult to master, but over all I’m happy with the result.

I decided on the end keyframes, where the movement would “peak” both ways, and drew those poses. Stretching out the tentacles and the body for the launching forward look and then squashing the body and tentacles to make it look like the squid is gathering momentum. In the other frames, I made drawings of the tentacles in positions that makes a transition between the end frames and thus complete the animation. To create a loop, I simply copied frames and placed them in the correct order to make the cycle.

Next up will be cleaning up the animation, coloring it and adding shadow. Then I will have a complete work process to apply to the coming animations.

 

 

The Moray Eel boss

This past week me and my team have been discussing the possible implementation of a boss in our game (SelFish). As of yet, it’s not final that we will have this boss in our finished product. However, we felt that it is important to include a designed concept with the core mechanics needed before the feature freeze coming up next week. So therefore, I’ve mainly been focusing on this boss this sprint.

The team decided on a moray eel as the boss enemy, partly because of the movement pattern it allows for. We want it to stay still on one side of the screen and attack from that same side, never revealing more than its head and a portion of its body. It also made sense to make the boss a moray in regards to the aesthetics of the aquarium, being a more reef inspired kind of environment. Furthermore, implementing our own boss character will make this game stand out from the others with the same concept. As a side effect bonus, the moray will be easier to animate than the originally intended boss of an octopus.

It was clear that everyone in our team knew the importance of the design aspect, that we would discuss the behavior and attacks of this enemy boss before going into the pure aesthetics. We also wanted to have it make sense in the story that this moray eel is attacking the player (Stephen). One idea that came to mind was that Stephen, in self-defense, is attacking the moray eels’ children (implemented as their own enemies of the main character) and thus making the mama/papa eel really angry.

When it came to visually designing this boss, I had a lot of freedom. After scrapping a few sketches that didn’t live up to expectations of visual appeal, I ended up with a sketch that I liked and felt was an accurate representation of the character.

In my previous blog post I mentioned line art as a weak point of mine, but have since then developed a technique that works for me when cleaning up the outlines of my artwork. I start with making a thicker line on a separate layer (in Photoshop) over the sketch and proceed with using the eraser to shave off the thickness and make the lines have the right weight to them. I then go back and forth with the brush (filling in the line where needed) and the eraser until I achieve the look I want. Using this technique is a quick method for decent looking line art.

After line art was done, I moved on to local colors. I chose a khaki green, darker hue that I felt represented the antagonist role of this character well. This color also stands out from the background but does not visually conflict with the player character Stephen (who is yellow).

Because I wanted some visual interest and not just a flat color, I added some textures in the shape of different values and hues. And although that made it look appealing, I wondered if this look could possible conflict with the rather simplistic look of the rest of our assets/characters in our game. So, I made a simpler version of it as well, for the team to be able to choose from.

As far as the shadows go, I simply added a form shadow signaling that the light is coming from above. Nothing fancy, no key lights. This is after all just a concept placeholder of a boss that may not end up in our game.

Over all, I’m pretty happy with the result and we now have our boss concept done with both design and aesthetics.

 

 

Meet Stephen 1.0

This is Stephen. He is the main character of the game SelFish, which is a game about this little fish who gets picked on by the other fishes in the aquarium where they all reside. Eventually he’s had enough, snaps and tries to kill everyone.

As one of the graphic designers in the Team Unicorn, I designed and drew Stephen. What I wanted to convey in the design was the feeling of Stephen as the underdog, slowly traversing the boundaries of sanity and loosing his mind to become a full fledged killer.

I already had an idea of what he would look like, considering I had already spent the previous week/sprint on character concepts.

It was a natural choice to go for a small body, and overall small Stephen. He is after all the harassed underdog. Big eyes that will be used for displaying different facial expressions was also a concious choice. And I also gave him an ominous smirk.
Stephen has no dorsal fin, which is further confirming his social position in the aquarium. And as an artist, I found it easier to tie his personal look together whitout the fin. His back is simply too small to put a decent looking fin on.

When it came to production, I divided my work into different categories;
Sketch, line art, local colors and key shadow + key light.

I chose one of my concept sketches and cleaned it up a bit, then started to work on the line art. This step is most time consuming and tedious task… until you find yourself having fun with it! Getting the hang of line weight and how to produce relatively straight lines is crucial to achieving the look you want for your line art.

The general look we (the dev.team) wanted for our game was a cartoony and humoristic version, pretty close to the original concept. So therefore I decided to make the line art as clean and sharp as possible (generating hours upon hours of work in Photoshop). I used a hard edged brush and varied the size where needed to get the right line weight. I chose to build the lines and then erase away the excess to try and achieve a nice look.

Next up was the local colors. Here I wanted a color that makes Stephen stand out from the background. The player should always be able to spot where they are on the screen, so after talking about color choice with the team I went with yellow. This contrasts well with the blueish underwater background color in our game.
I chose white for the eyes, as this further helps to see where the player character is on the screen.

When it came to the lighting I wanted to make it simple, mirroring the look and feeling of the game. I shaded with a darker yellow color and used a soft edged eraser to blur the edges of the shadow. Same process with the key light (light source from above).

Last but not least, an honorable mention to; Photoshop, which has been working against me troughout the whole process! Freezing up, refusing to cooperate and almost crashing on me. Pro tip when this happens: 1. Patience and 2. Save your project often.