avatar

Mercury Shift Devblog: Art Catch Up

In this last bit, we’re going to cover the progress made by the art department of Klonk Games. This will be a bandwith-intensive post, as we are trying to show off a lot of the recently added graphics in form of static images and GIFs.

I will be picking a few cherries here, as showing off all the new things would be a bit too much. Sorry for all the things you might be missing because of this. I hope you’ll find out after release.

New Assets

Over the course of the last weeks, we made new assets. They were all handcrafted and selected by our finest polygon chefs.

The Receiver

The now somewhat famous “bonus object” (https://www.youtube.com/watch?v=Ohi7LmpQHik) has to be brought in a receiver where it dissolves into confetti. This receiver is now in place and working, including a small opening and closing animation.

The object itself reacts to proximity to the receiver by changing shape and animation.

Receiver in Mercury Shift

Background Objects

We are filling the backgrounds of the levels with, well, stuff. A few of them shall be showcased here:

Molder

The molder is an imaginary compression molding device, that sits in the background and loop animates. It’s meant to provide some meaning to the lab halls, manufacturing things in an infinite loop.

animated gif molder

Boiler

A boiler in the background is simmering, what appears to be mercury sludge.

animated gif boiler

Laundromat

The laundromatlikes process said sludge and deliver it further through the system.

low poly laundromat animated

Flywheel

The flywheels keep everything going and maintain momentum throughout the process.

animated gif flywheel

Stages

Our game is divided into stages. Those stages make up different areas of the game. The first is the laboratory in which the players learn and practice all mechanics of the game.

Training Levels

The laboratory is a very clean and tidy place. Bismo and Plom stroll through the facility, where machines process a strange sludge.

So here are a few screenshots from that stage. All new, all nice and clean :)

New Animations

Nora is trying to make the two characters more lively by adding more animations to them. Playing them should feel nice and the more they react like you would expect them to react in that situation, the better.

Impacts

Bismo and Plom are subject to a lot of physical forces in the game. They are being thrown, pushed and tossed in a lot of ways, as the game has a lot of physics based puzzles.

Those situations should feel and look like the objects affect the players very much. Such, Nora created a lot of different types of impacts for the two characters. These range from being pushed by a huge Jochen to a crate falling on one’s head. But see for yourselves:

character collision gif 1

character collision gif 2

Also the the interaction with boxes, such as being pushed indirectly by a box and getting a box to the head.

character sliding on ground gif

character sliding animation

and the last one: Being hit by a box.

headcrash2

New Shaders and Effects:

Shaders and effects spice up the game big time. Now as we are using a look that is dependent on our own shaders, Simon is putting a lot of effort into making them stand out. On the other hand the performance of the game is also important. Shaders can be draining a lot of computing, so someone has to have an eye on that. In this case Simon is the guy for it. But ever now and then he makes new fancy shaders and effects instead of just optimizing.

Impacts (particles)

Talking of animation for impacts a few lines before, there are also effects emphasizing the impact. Little dust clouds and comical “stars” are being emitted when players or boxes are hitting another object. It makes the boxes feel heavier and amounts for quite a bit more feel to the objects.

impact effect on wall

Holodeck

At the moment we call it the holo deck, but this may undergo some change. The stylized levels such as the canyon or the forest are just a “coverup”. The holo-effect blends these environments over the underlying scaffolding. What sounds weird, is pretty clear when seen in action:

This effect blends the artistic stage into the more plain laboratory stage.

Low Poly Water shader

The hard shaded water is one of the babies of Simon. The shader takes a lot of parameters into account, such as size and height of the waves and outputs a stylized water simulation.

low poly water shader gif

We are using the shader also as a death area. It looks slightly different and toxic. In water, players can be submerged until the heads reach water level.

low poly acid animation

 

New UI

Having never done a game UI, this was interesting for both Rika (coder) and me (design person). I started sketching out a general overview of the menu in XMind to get an idea of the size. After that we made a small user flow diagram to get the relations right and figure out some of the blocks of information.

It looked somewhat like this:

first user flow sketch

and turned into this slightly more elaborate version:

It is still undergoing development changes and is not complete.

After that I sketched out some of the elements and created typical interface elements like checkboxes, tabs and dropdowns.

Again, with the Unity UI around the corner, we were not too sure about making our own system. It proved to be hard work to do, but it seems to be working quite well.

The game menu pops in from the left and gives access to the main functions on the right hand side. So far it is working for most people.

One of the trickier parts was setting up a working hierarchy in which the user could navigate by using mouse, keyboard and controller. Switching between those inputs also had to work. Using the controller for example will temporarily disable the mouse input. Otherwise the mouse position would override the selection of the controller or keyboard.

All in all, it is a lot of cases to cover.

Hinting system

For helping players with the game, we introduced a hinting system which displays hints based on your “skill”. As we have no way of knowing the actual skill of the people, we define a target time for steps of the level and measure playtime against that. After that time is over, the first hint will be displayed. Most of the times hints do not explain the puzzle, but nudge you in the right direction.

This gif shows the hints being displayed after one another, slightly sped up.

skill based hinting system at work

Work in Progress

At the moment there are a few things we are working on. To give you an idea of how we are working we added a few screenshots and photos of the sketches.

World map

The world map is still a big issue. We need it to be user-friendly and good looking. At the moment, the level selection can be made via the game menu. But we want a map which gives players a cool experience as well as a useful way of selecting levels.

In our first drafts, it was a map in which you could walk through like a huge level. Like a multi-story building with floors and doors to enter to get into a level. Although that would fit quite well into the game itself, it takes a lot of time to navigate to a specific place and can be confusing.

So these are some sketches from the world map.

Word map sketches

So the worldmap could consist of those biomes in a order.

worldmap big

This is a small mockup how the map could look like in close up:

macro shot world map

 

So that’s it for this week. We will be picking up our regular schedule next week friday :)

 

This entry was posted in Art department, Dev Diary, Devblog. Bookmark the permalink.