Evelina Foxberg

Evelina Foxberg

evelinafoxberg@gmail.com
 

FoxbergArt on Instagram
 
FoxbergArt on INPRNT

My life as a Game Design & Graphics student
 

2015

Over the summer I have attended a course in Life Drawing here at Uppsala University, Campus Gotland. It has been incredibly useful, and the course itself is so awesome I will have to recommend it to anyone who wants to learn how to draw the human form. I have learnt a lot, much thanks to the teacher for the course, Pernilla Persson, who is an amazing artist herself. She has worked at Disney and now has a studio of her own, and her way of teaching art is really, really inspiring.

The work I present to you this time is the final assignment for the course, where you were supposed to choose a piece of art - contemporary or historical, and then exaggerate/change the gesture of the pose. You had to present a gesture drawing, a structural drawing, and a rendered drawing of the pose, as well as an additional drawing showing the pose from another perspective. For this assignment, I chose the work "Sun Goddess" by Frank Frazetta, and I decided to make my own version of it, and make a "Moon Goddess" instead. When rendering, I tried to look closely at how Frazetta himself used colour and edges, and try to translate it into an entirely different colour scheme.

First, the reference artwork, Sun Goddess by Frank Frazetta.

Next, the gesture and the structural drawing.

...and finally, the rendered version of the pose! I focused primarily on the figure, leaving the beast and the fore- and background less well rendered as they were not part of the assignment.

At last, there is the character from another point of view. I added the beastie as well, hrrm hrrm. Ain't he a cutie!

This week, the group and I have worked on a possible tutorial for our game. We did not want it to be something the player has to go through and repeat every time they restart the game, but instead something that feels more optional to the player, or something they can simply ignore in case they already know how to play.

 

We already have a separate part of the level which is dedicated to teaching the player things – it consists of two rooms where our main enemy Otto can't reach, and it has objects to pick up, items to carry, keys to find and doors to unlock with them. It also contains the drop-off point (which is the balcony) so that the player gets to practise the core loop of the game – pick up and drop off. Now we just needed to make the controls clear to the player, so that they know which buttons to use, and explain to them what to do. In particular, we need to explain that the balcony works as a drop-off point for loot.
 
One alternative for this was to make a pop-up window with simple illustrations for each thing, and a short, explanatory text. This would be quite clear for the player, but it would also be annoying the second time they play it, as they would have to click through a couple of these windows.
 
Another thought we discussed was to show all the controls like buttons surrounding the avatar, and that they would disappear as they were being used in the game. This would be quite clear when it comes to the WASD keys, and it would work with a possible explanatory text for the Sprint, Pick up, and Drop off buttons too. However, since the boomerang requires a bit more of an explaination, it would be difficult to get the purpose of it through this way. The same goes for the balcony function.
 
At last we decided to put a third character into the game. This character, the badger, would function as a bit of a guide, explaining things to the player using voicelines. The bader will stand on the grass outside the mansion, below the balcony drop-off point, and shout instructions to the player. Story-wise, he will be the character that buys the stuff that the fox steals from the mansion, generating money / score. The placement of the badger, together with his voicelines, will help make the player understand that the balcony is to be used as a drop-off point. A portrait of the badger will be shown in the HUD so that the player can see and hear him even when not on the balcony, and accompanying every voice line will be a cartoon bubble from the HUD portrait. This is to make it easier for the player, in case they can't hear what he is saying.
 
In conclusion, this solution will help the player if they need it, and will not be too distracting for a player who has previously played the game and already knows the objective and the controls.

Cheers!
Above, left: Old gun colour scheme. Above, right: New gun colour scheme.

This week I have spent most of the time working on the shoot animation for Otto. As mentioned in an earlier blog post, the turtle Otto (who owns the mansion that the player is breaking into) has a Tesla gun which he uses to shoot the player once detected and within range. The gun is supposed to have a bit of a charge time before it can be fired, allowing the player a small amount of time to get away from Otto once they find themselves in his line of fire. During this time, as it is charged up, the final animation shows the batteries of the gun going from a simple red to a glowing purple before it actually fires.

Since the player is supposed to hide from Otto as much as possible, the shooting scenario will be pretty much everything that the player gets to see of Otto. Therefore I want to make as big an impression as possible on the player with this brief animation of Otto shooting, to keep the player motivated to keep hiding from the scary, old turtle.

I recieved some concepts for the gun from one of the other artists in my group, and used those as guidelines for creating the gun. The first problem that I encountered was the colour of the projectile and the gun. As we initially had blue projectiles representing electricity, and blue electricity flares surrounding the player once hit, it would make sense to make the gun blue as well. However, because of the reason stated above, we came to the conclusion that the blue just wouldn't look scary enough, and so I went looking for other options.

My first shooting animation featured a gun with red batteries, which indeed looked menacing and scary. The red light emitted from the glowing batteries added to that feeling. However, the problem with a red gun and projectile, is that the colour doesn't really make sense together with the electric shock that the player recieves. Electricity is rarely if ever portrayed as red. I thought about ways to keep the red and instead change the death animation into something connected with fire, like a grilled chicken with fox-like features for example, but too much work and effort had already been put into the death animation. Fire also wouln't fit with the general theme of the game, as we already have a bit of an electricity-theme for it.

In the end, we settled with purple for the projectile and the fully charged batteries, as this still reads as electricity, and red for the uncharged batteries because it looks scary. The change in hue also adds to the visible charge-up effect, giving the player a clear indication on how long time they have got to escape before they get hit by a projectile.

As for the how, this was probably the heaviest and most time-consuming animation in our game so far, with a total of 96 layers used in Photoshop and too many hours spent. The layers consist of:
 

  • simple Otto body layers with the shell and body tilted in different directions,
  • separate layers for the arms as they change direction,
  • bounce light layers in different hues depending on the gun's state,
  • several different glow layers for the batteries in different charge states,
  • gun line-art layers to put over the glow layers, as well as
  • electrical spark layers that increase in numbers and size as the gun is charged.


There is a left-view and a right-view version of the animation, with visible differences in Otto's shell and where the gun is placed. In hindsight, I should probably have spent less time on this animation as it's not visible that often in the game, but still it's the main enemy's attack animation and the only cause for player death, so it was in my opinion time well spent.

Above: Finished shooting animation.
Etiketter: 5sd033
Above: Early concept sketch of armour

This week I have worked on one of the major power-ups in our game – the steampunk armour. The player can find the armour standing around in the mansion, and when picked up, the player puts it on and continues the game wearing the armour. This creates the need for a second set of player animations, where the character wears the armour, which is what I've been working on.

As the armor was one of the most interesting power-ups that were described in the concept document, I started concepting it already in the beginning of the course (see image above). I used one of those old sketches as a reference when I started making the animation this week.

As all the props in the game are pictured from a full front perspective, I started by making a front view picture of the armour as well, in order to get an object that the player can find and equip. After that, I started working on the animation of the armour – this time from the side.

We want a steampunk style for our game, so therefore a lot of references for steampunk stuff were used in the design process of this armour. The brass colour that we use for a lot of things in the game (including Otto's shell) is actually based on the same early sketch that I used as reference this week. The colour was chosen in order to be childish and playful hence the brightness and saturation, but to also match the steampunk brass theme. This hopefully makes the armour less scary-looking for our target audience (kids), and fits it into the steampunk style. To further steampunk-ify it, I added some green lamps, a pipe, and leather details. The finished armour ended up looking almost exactly like the concept sketch of the armour.

Now to the actual making of the armour! One of the most important things to think about was to make sure the armour looks like the caracter could fit inside it. I used a sprite for the thief character and painted the armour on top of that, but on a new layer (line art and colour on different layers). As the armour is made partly out of brass, it would not allow our character to use the same sneaky, hunched-over walking style that he usually does. Instead, I needed the walk to be a lot more stiff, with a straight back. To illustrate this best, the character has only two different leg positions. 

To avoid the problem of animating a tail in armour, and also in order to achieve a more comical effect that appeals to kids, I decided to let the tail stick out of the armour, and sway along as the character walks.

The armour comes in two variations - one with the lamps working, and one with the lamps not working in order to illustrate HP damage after one hit from Otto. As the working lamps are bright green which is a contrasting colour to orange, the change in HP would hopefully be easy to read for the player.

Etiketter: 5sd033

This week I have worked on making a death animation for our main character, the fox. In our game, the player is trying to sneak around the mansion without getting detected by Mr Otto von Fancy. If they get detected, Mr von Fancy will hunt the player down, and shoot them with his tesla gun, thus ending the game.

Last week, we presented the alpha of our game in front of the rest of the class, and the feedback we recieved included that the game was almost too scary, considering our target audience is kids. One thing that was mentioned was that we should take inspiration from kids cartoon shows on TV for the movements and animations of our characters, in order to make it less scary. Taking this into account, and the fact that Otto is using a tesla gun that shoots bolts of electricity at the player, we decided that we wanted our death animation to look like one of those comic deaths when the character gets struck by lighting. In these, you usually see like an x-ray of their skeleton, together with some lightning flares and a buzzing sound. This would achieve the kids comic feel that we are going for, and the unrealistic death would also help make the game less scary (hopefully).

 

I started by looking at some references, such as this  and this.

I also looked at this video as a reference for the blue surrounding electrizity.

As for the how, I used my previous animations of the walking fox as a template, and drew the skeleton on a separate layer on top of that. I used pictures of fox skulls as reference for the skull shape, and then added a black zig-zag shape underneath. I considered making the black blob a plain silhouette of the fox, so that the jagged parts would represent its fur raised as a result of the electricity. However, this meant that the parts where the fox is wearing cloghes would be straight and not jagged, and as I tried this out I realized it looked pretty strange. Therefore I looked at even more references, and decided that the blob instead would represent the electicity itself, and be a little bit bigger than the character himself. This would also mean that the entire thing could have jagged edges, and it did in fact look much better. To achieve the crisp jagged edges, I used the polygon lasso in photoshop in order to create the shape, and then filled it in with black colour.

The blue surrounding electricity flares were created on a separate layer, where I painted the light blue flares first and then added the glow in "layer properties" using the setting for "outer glow". There I changed the colour of the glow to medium blue instead of the light yellow preset. Two sets of flares were created to match the two different fox poses, and I made them similar to each other in order to create a feeling of consistency even though they are different from each other. I want it to feel like the flare is in fact one flare that is changing a little bit in between the two images, instead of two completely different flares. The flares are heavily referenced from the video posted above.

As I had problems making the GIF work properly on the website this week, you can see the full animation here.

Etiketter: 5sd033

This week I have worked on the Otto animation. I started out making a sketch of the turtle in Photoshop, and then animated the sketch into a walk cycle. This was done in order to see that the movement flowed the way I wanted it to, before continuing on to animating the turtle in a more detailed state.

As the turtle is both old, is supposed to be scary, and make noise when he walks (for the player to hear and respond to), I wanted to make his walk kind of choppy and non-smooth. Therefore, after completing the first walk cycle and noticing that the walk ended up too smooth, I had to reduce the amount of images in the animation. I removed some in-between steps to achieve the right feeling in the movement. I also altered his facial expression compared to the earlier sketches, and made his eyes bigger and angrier with exaggerated eyebrows, in order to communicate his angry personality clearly to the player even though the character himself is pretty small on the screen.
 

I left out Otto's arms in the original animation, as I find it easier to animate them at a later stage, as separate objects. At the moment the arms still need some work, and therefore I have chosen not to include them in the GIF.


After the animated sketch of Otto was done, I started doing a more detailed version of the line art. When one movement phase was done, I used that layer and copied it with transformations applied to the other layers in order to save some time, and also to make sure that the details looked the same and had the same proportions in all the pictures. However, transforming a layer made the lines kind of ragged and pixel-y in the edges, so some smoothing-out was required before they looked good again. After that, I used an earlier sketch of Mr. Von Fancy as a reference for picking colours. Again I used one layer in Photoshop for the colours, and copied it to the other layers with some transormations.

When one full colour and line-art walking cycle was done, I flipped the image horizontally to make an animation for walking in the other direction. Some changes had to be made to the shell of the turtle, as it is asymetrical in its details. Just like in the previous steps, I made one shell picture that I copied and used for all the layers.  
 

Above: Otto walk animation.

Hey y'all!

During this course (Introduction to Game Design), each team will make a Space shooter game. These games will be based on any of the other teams' concepts that were developed during the previous game design course. Our team's chosen concept is Fancy Mansion, which is a sneak game where you try to steal stuff from a mansion in the middle of the night, without getting detected and shot dead by the owner of the mansion. The game has a few comical elements to it, and will be made in a cartoony, antropomorphic style so as to appeal to a younger audience (around 10 years old).

This week I have worked on the Thief character of our game, which is also the player avatar. The character design has been developed during previous weeks, with a racoon as the chosen animal to represent the thief. This decision was based on the general burglar-y look of the animal, with the stripes on the tail and the mask-looking dots on their eyes, which will enhance the thief-y look of the character. However, since our main protagonist is going to be a turtle, a few people made the connection to another game called Sly, which none of us had heard of before. In this other game, they also have a racoon and a turtle as main characters, so therefore we decided that we need to change one of our characters. As the entire group really like the turtle concept, we decided to change the racoon into something different. We all agreed that a fox would suit the game just as much, as they are traditionally seen as sly, clever creatures that could very well be sneaky and stealthy. They also look similar to the racoon, form-wise, so it would be an easy fix.

I also worked on the animation of the Thief character, to get a basic walk cycle done. This was done in Photoshop using the timeline tool to put the right moves in the right order, and different layers for the different stages of the walk cycle. I took the 12 principles of animation into consideration when making it move, applying some overlapping action in the tail – as it bounces along when the character moves. However, as the walk turned out quite ”trotty”, and not as sneaky as I would have liked it, I will continue to work on the walk cycle in order to get the right feeling in it. This could be done through leaning the character forward a bit, hunching it over as if it was sneaking. The arms could be raised a bit as well, to accentuate that the character is trying to be very careful and sneaky. I might also change the footwork of the character, to give it a bit more of a careful step.