Evelina Foxberg

Evelina Foxberg

evelinafoxberg@gmail.com
 

FoxbergArt on Instagram
 
FoxbergArt on INPRNT

My life as a Game Design & Graphics student
 

Hello and welcome back to my daily blog-spamming!
 

It occurred to me that I haven't talked a lot about the actual game we made during the project, except for the short introduction that I gave in this post. In short, Slumber is a game that is supposed to help the player sleep. It's intended to be played on a smartphone or a tablet, in bed, before going to sleep.

In my last post I promised to explain what a nudibranch is and why we are making a game about it! Nudibranch means "naked gills", and they are a kind of sea slug that can be found in almost any ocean. They all have exposed gills, which is the rosette-like thing you can see on their back. Some of them eat poisonous sponges and collect the poison inside themselves, which renders them quite untasty for predators. They come in a lot of amazing colours and patterns - the picture below is from here, where you also can read a bit more about these adorable and crazy creatures. So why a nudibranch? When I was thinking about the setting of the game I figured being underwater and exploring might be one of the most relaxing things out there, and that works well with a game that is supposed to help you sleep. The nudibranch got chosen simply because it's so darn cute, and also more people should know about it!

Some other things that we did in the game to make it adapted to sleep were:

  • Avoiding the colour blue. As it is becoming increasingly common to interact with phones and tablets before going to bed, we wanted to design a game for those platforms that did not share the same problems that other games might have. One of the biggest problems with interacting with screens before going to bed is the light that the screens emit, which prevents the player from feeling more sleepy. This is especially true of blue light, which is the most effective at stopping the production of sleep hormones in your body, preventing you from feeling sleepy. Therefore Slumber is designed with a reddish colour scheme, which is on the opposite side of the spectra from blue.
  • No dangers in the game. Having dangers in the game could make the player more stressed, and prevent them from feeling sleepy. The environment is entirely safe, and 
  • No stress. No time-limits, nothing to make the player feel like they have to play for another 30 minutes in order to gather those points they need to reach a certain goal. Our goal is to make the player feel like they could leave the game at any time in order to go to sleep, without losing progress.
  • Balance between engagement and relaxation. This is a tough one. Allthough we want to provide a safe and calming environment for the player, they also need to not be bored by the game because then why would anyone play it? We solved it by adding a system for befriending fish, which is done through giving them food. The player then has to collect algae around the world which they can use to feed the fish. This provides an extra goal for the player, who now get to explore AND look for fish food, as well as create an even more friendly environment because you're surrounded by potential friends. 
  • Reward sleeping. Slumber will detect when you fall asleep, and when you sleep you will gather "sleep energy". This energy is then used to create content in the game that you can explore the night after, giving you new things to explore and play with. This is also meant to provide an opportunity for the player to create better sleep routines by continously coming back to play Slumber before going to bed.
Cheers and thanks for reading!

Happy friday everyone!
 

In my last post I talked some about how to make the Slumber fish in 3D, including modelling, rigging, and animation. Today I'm going to talk a bit more about the same fish, but focusing on the textures instead! As an example I will go through the process of creating the juvenile Koran Angelfish below (credit to http://fishy-bizness.com/ for the picture). We chose to depict the juvenile version because it has a much more clear and readable pattern than the adult fish.

Since you will rarely see both sides of a fish at the same time (they are quite flat), I chose to mirror the UVs and use the same texture on both sides. In the first draft (1) I just tried to get the basic shapes and colours down. When we put this into the game, however, it looked a little bit dull and not as "watercoloury" as we wanted. Therefore for version two (2) I experimented a little bit with smudging the edges of the patterns, as well as applying a watercolour texture on top of everything. This looked a little bit better, but when you only have a little bit of smudging in there it runs the risk of looking sloppy rather than intentional. So for the final version (3), I went full on watercolour. This might look a bit extreme, but it fits a lot better into the context of the game, and clearly communicates the watercolour effect we were going for.

You might notice that the fish lacks side-fins and eyes! That's because they were added onto the fish as sprites and animated in Unity by Sebastian, and he explains a little bit about it in this post. You can see what the Koran Angel fish fin looked like to the right - yep, it's the blue thing there. We actually desaturated the whole texture a little bit and changed the hue to make it less blue, as we were trying to avoid the specific colour to allow for melatonin production in the players.

Cheers!
 

Hello again!
 

Two weeks has now passed since Gotland Game Conference, and I've spent [insert relatively large measurement of time here] eating delicious noodle soups and writing the obligatory report that comes with the course. Now I have some blogging to do, so I thought I might explain how the Slumber fish came to be! Excited?? Great! Here goes.

Slumber is a 3D game, so naturally the fish must be in 3D. That means we will need a mesh, textures, and animations. Since we wanted the game to work on mobile phones as well as tablets, and we didn't know beforehand exactly how much they can handle in terms of textures and mesh sizes, I had to play it safe and start small. To optimize performance AND production time we also wanted the fish to share animations. None of us had any experience in rigging and skinning using anything but a default CAT-rig for humanoids, so this part was a little risky for us at first.

So the goal here was to create a test fish mesh in 3DS Max, that I could put a simple animation on top of, and try to get all things to work well in Unity. This was done to test the workflow to see if it works at all before getting gritty with textures or details. We also wanted to test if animations were transferable between fish meshes, which would spare us both production time and optimize performance.
 

To the right you can see what the first test fish looked like! We later realized that the best way to add side-fins was to create separate planes and animate them in Unity. Good thing we made a test-run! After creating the basic fish mesh I then needed to add a skeleton which would allow the fish to move. This part was a lot of trial and error for me as there were no clear direction to go. After testing several different ways to go, I ended up just creating the fish skeleton starting from a hip bone and then adding bones in both directions from there, including a head and a few tail bones. You can see what that looked like after it was rigged in the picture below!

Note: It's very important to save the rigged and skinned mesh to a separate file, let's call it Fish_Rig in this particular case. Then you can always use that as an empty slate or a starting point for when you make different animations (Fish_Swim, Fish_Idle, etc). You also want to keep the unanimated rig if you want to use the same animation on several fish. What you do in that case is that you modify the mesh so that it looks like a new fish - DO NOT change the rig in any way at this point because that might render your animation unuseable on that fish. You will however have to reskin the fish after you modify it. Then you can save the new fish with the same rig under a different name, let's say Fish2_Rig (that's a lousy name, don't use that. (but for the sake of this example, let's use that. (got it? okay got it))).  

Skin the mesh to the rig, and then you have a fish mesh that could potentially move around in the ocean! The next step is to add a simple animation in 3DS Max and save it as a new file (see note above!), and import both mesh and animation into Unity.

Once the fish and the animation worked well in Unity, it's time to make a new mesh USING THE SAME RIG so that the same animation could be used on this one. To do that I duplicated Fish_Rig and named it Fish2_Rig, and then started modelling to create another kind of fish. Since I already tested the first fish in Unity I was a little more sure that it would work, so I spent a little more time working on this fish. After the remodelling was done, I have to fit the new fish to the old rig, and then export it to Unity.

Note on making fish of different sizes: All fish are not the same size in the ocean, right? But all 3D fish that are using the same rig are going to need to be the same size because they need to fit the same rig, and you can't scale the rig because then your animation might get wonky on that particular fish. So how do we solve this? You scale the fish in Unity. BOOM. Mic drop. This might be obvious to some of you, but I had no idea.


That's all for now! I hope that was helpful to anyone who is also going to model fish.

Cheers!

Hello and welcome back!
 

Team Dream Dust are now at the sixth week of development, and the game has got a fantastic new name: SLUMBER!
 

During these past weeks I have worked on a lot of different things, including the game's logotype as seen below and on the right! Since Slumber is set underwater we wanted to show that in the logotype somehow. Our first thought was to depict our main character, the Nudibranch, in the logotype as the game centers around it, but if you don't already know what a nudibranch is you're more likely to associate it with regular ol' land snails and less likely to associate it with anything underwater. Tricky.

So we thought some more. What about fish? That makes a lot of sense, since the main goal of the game is to befriend different kinds of fish. Fish also make great S's, which is excellent for this purpose!

I then continued to put it all together, including pretty watercolour textures that are featured a lot in-game, as well as our blue-phobic colour scheme (more on that in another post, but in short it's because blue light makes you less tired). We had to make some adjustments to the fish in order to make sure the logo read as SLUMBER instead of LUMBER, and after some feedback from our Lead art I also added the tail to the R at the end to balance the whole thing out. Neat, right!

Cheers!

Spring has arrived, and with it the last course of the semester: Big Game Project! This is a course that allows us students to work on creating a part of a game (a so called Vertical Slice), that we then can show to other people and be like: "hey, if you like this we can make more of it, so that's why you should give us all of your ca$h".

...Essentially.
 

So, since this is a PrettyBigDeal, I've been working since last fall with a particular project that goes under the working title Nudibranch (EDIT: It's now called Slumber, and you can find its official webpage here). I had the idea for this game when I was lying in bed trying to sleep, but failed miserably. After an hour of tossing and turning I picked up my phone to play a little bit of Hearthstone, but of course that did not make me any sleepier. Rather, the opposite happened, and I stayed up for at least two more hours because I was hooked in the game, and when I finally put it down I still wasn't tired. So I started thinking....

"What if there was  A Game That Would Make Me Sleep Better...?
...
...a game that I could play before going to bed, which might actually make me sleepier? I wonder if there are any games like that..." 


There weren't.

So I gathered up a crew, and now we're making one, and it's called Nudibranch! This is my Personal Blog during this project, and you can also find our developer's blog here!

More info on the actual game in my next blogpost, where I will also answer the Very Important Question: What is a Nudibranch, and why are we making a game about them? (hint: those may or may not be Nudibranchs in the picture below.)

Cheers!

Above: Concept images of Nudibranchs.
Above: Concept images of Nudibranchs.

I am so happy and excited  at the moment, as I just found out that the book Adam Stormstjärna & det förlorade arvet that I made illustrations for in the spring of 2014 has found its way to the internet! The book is to be released sometime during 2016, and it already has a webpage that you can find here, as well as a TEASER TRAILER! I mean, how awesome is that?! :D

Cheers!

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