Descrambling - "Saturation to the max"

Watching art can be very insightful. So how insightful can viewing art together be? We will find out!

This first issue will mostly be about color :)

• Saturation to the max
• Colors
• Depth
• Ramps
• Count
• Composition
• Discussion

Saturation to the max

This image is a mock up for a platform game, created by Vierbit. It is made out of a bit less than 145 unique tiles and contains 52 colors in total. Sadly, there are a lot of double colors in it, but not counting those would get you to around 40 colors, I guess.

It is made for a jump'n'run style game.

As the title says, this image is one of the very saturated sort. That is one of the reason why I found it interesting to write about this. It is quite hard to work with such saturated colors, but if you succeed you often have a very warm and happy image.

Depth

Away from the technical part, this image contains a lot of layers. These layers define the function of the tiles in the game, and create the feel of depth. Vierbit has applied some standard platformer tricks very well here :)

The one most on front is probably the stone part, where you can not get trough as a player, neither upwards or downwards.

Why do you immediately get the feeling it is closest to the viewer?

The brightest colors are used here. The grass on this 'layer' starts one shade brighter than the grass in the rest of the image does. This somehow creates the illusion that this part is closer to us.

Also, the stones are of a very bright color, which does not only fit nicely in the composition, but also creates that depth again.

You can see the right side of every stone, which makes the image more realistic and interesting. You do not get the feel they are flat on the side, as you do often get with messy rock textures.

The tree branches could be seen as the second layer. They are probably supposed to be 'clouds' in the game, you can stand on them but you jump trough them if you are coming from below. Again, the brightest shade used on the tree is one color brighter than the rest of the image.

Did you notice that there are some kind of 'holes' in the tree branches, on the top of them? They make the image more interesting, but the programmer does not have to watch out for this, the 'empty space' is filled up with dark colors. The same goes here for the stone tiles, every stone seems to be at another height.

Next comes the trees, and than the leafy background.

The leafy background is really interesting to look at, because of the amount of detail on the top and the bottom of each part, but is not distracting from the rest because of its, again, darker colors (the leaves on the tree use mostly the brightest color, while the grass in the background use mostly the darker ones). Also, between the upper and the lower grass part there is a plain dark green, which also makes sure the background does not get distracting.

Something to watch closely for, is that the tiles on top of the leaf background are totally different and brighter than the lower ones, which define the shape of the background bush.

At last, the real background layer, the sky and the 'forest' far away from the trees. This is a loose graphic, which can most likely move loosely from the rest of the map in the game. That gives a good feel of depth too, but we can not see that in this static image.

What we do see is that there is a huge contrast between the dark edges of the previous layer and the bright blue sky.

It is sometimes said that there are no beautiful colors, just beautiful color combinations. In this case, this really is a beautiful sky color too. It matches perfect with everything, but extremely well with the green leaves.

Did you ever notice that on landscape photographs, grass and other vegetation looks way more green when there is a bright blue sky behind it?

The clouds make it a bit more interesting, but not distracting because the contrast between the sky and the clouds is much less than the contrast between the sky and the leaves.

The forest in the background uses a simple but effective texture, and is very low saturated to not blend with the frontal layers. The stones, in a bit of the same style as the stones on the first layer, but also with less saturation, make the background more interesting.

Ramps

The actual colors used are saturated. Why do they work?

In case of duplicate colors I used my own favorites.

The tree ramp, containing 5 colors, can be divided in 3 parts. 

The first part is the highlight. This is the first color on the ramp.

Where light from the light source (the sun) would directly be reflected into your eye, you would logically see this color. Since the sun comes from the top, it is logical that on the branches the top is highlighted. It is maybe a bit too light there, but that helps in pulling the branches closer to the viewer.

The second part contains the second, the third and the fourth color. They are a bit different from the first part, but they themselves do not have much contrast. They blend really well.

They are used for the part of the tree where the sunlight is reflected towards you, but it only does this because of the textured surface. We call it diffused reflection.

Since most of the tree uses this color, this should be the color the tree would be in reality. The first part is yellowish, the third part is blueish, but this part has to be brown or you will get a very unrealistic tree. Because of these browns, the yellow and the blue does not look distracting, but interesting.

The third part contains colors five and six, they are blueish and very dark.

They are used for the places where the tree does not reflect light directly from the sun, but indirectly, from other parts of the area.

The green ramp can less easily be divided in these parts.

It contains much less hue shifting than the tree ramp, the whole ramp is inside the green part of hues. This seems to make the green feel more saturated than other colors.

Count

There are quite a few double colors in here, and a lot of ramps could possibly have been put together.

Still, in my opinion, that is not a huge point.

In this case the final product is a game. The game players won’t notice the difference, and the engine does not have any color restrictions. Pixel art has probably been chosen for this, because of the feel and the amount of detail. It is more important to be productive than to spend time on perfecting the unnoticed 'errors'.

Composition

The tiles Vierbit made are amazing, but this image would not have been that cool without decent composition skill as well!
What I really like, is that there is almost as much background as there is foreground. Balance. Maybe it is not too important, but it is the first thing I noticed.
On a game mockup, the only thing that may attract your eye more than other stuff is the player. Not the tiles or the background. There is no main subject or most important place here, which makes it hard to design a thing like this. Also, the edges we see on the canvas do not exist in the game of course.
Lastly, it is quite boring to see a combination of tiles being used too often.
These things were surely taken into account. For example, you can see that on the stone floor tiles that are used as corners are usable and used in the middle of a row of rocks too!
Every light part you can stand on as a player is surrounded by the dark grass background color. That way it comes more to the front, but I already wrote enough of this in the depth chapter.
On the left side of the image you can see only half of the rocks, and even less of a tree. This gives even more of the feeling that this thing would be scrollable in 'reality'.

Discussion

When I started writing this, I was very enthusiastic about this, and wrote half of the full article in 2 days. I told Vierbit I probably had this ready within a week. That was 2 weeks before Christmas or so.
In the end I just sort of wanted to finish it, but I am not too passionate anymore about it. Yet I hope you enjoyed reading.
I would really like to hear what you thought of it, if you want the next issue to be shorter, and more accurate etc…
Also, I’d love to hear your opinion about Vierbit’s wonderful piece! Please share it in this thread!!