Evelina Foxberg

Evelina Foxberg


FoxbergArt on Instagram
FoxbergArt on INPRNT

My life as a Game Design & Graphics student

2015 > 03

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.

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