Small Living World - Colors Feedback

[ajrarn]

Hello,

I'm Martin, the developer of Small Living World : http://smalllivingworld.com/
I'm looking for feedback concerning the game, especially the color Palette.
I think I'm better with the code than with colors  .

The game is 95% done, so I'm not looking for major refactors.
I'm mainly looking to adjust the colors.
But, if you have any comments or recommendations, I will accept them gladly  .

Please, try to make your comments constructive  .
Just telling me this is bad will not be very helpful for anyone  .

The game is also available on the Google Play Store if you want to try: https://play.google.com/store/apps/details?id=smalllivingworld.com
Only on android for now, sorry.

[eishiya]

It feels a little dull. None of your colour ramps seem to employ hue-shifting, that is, making the highlights and shadows different hues in addition to giving them different values. Adding hue-shifting can bring a lot of life into your work, I recommend adding some! For example, you could make all the highlights a little yellower/warmer (since the sun is lighting them) and all the shadows a little cooler/bluer, since they're getting the ambient light from the sky.
On a related note, pure greys tend to look rather boring. Clouds, especially on sunny days, are usually not grey, they usually have blue shadows (because the ambient light diffused by the sky fills in the shadows).

Some of the trees don't contrast well from the sky, because they're nearly the same value. Try using a lighter sky and some darker, less saturated greens for the trees. The narrow green trees also look neon and almost radioactive because they're so saturated and because they're lighter than the sky in places, I think slightly less saturation and darker values would really help.

The interior of the bedrock(?), which is presumably the least important thing to look at, is currently hogging all the attention because it has large, clear shapes with relatively high contrast compared to everything else. I think a solid colour with just occasional touches of detail would help keep the focus on the surface and in the dirt with the roots, which I'm guessing is where the player is meant to look. Also, if it is bedrock, it shouldn't be a loose pile of rocks, but rather something solid and possibly layered; the loose piles only happen where the bedrock is exposed to weathering, not where it's covered up.

The gradients on the trees (leaves and trunks) and clouds feel very "programmer art"-ey, and don't match the more interesting textures you're using elsewhere. I think those could really use some additional work. Even if they're procedurally generated, you could use more interesting base sprites/shapes as building blocks, they don't have to be solid/gradient shapes.

Here's a quick edit (mostly using some blending layers rather than manually-editing colours, I'm lazy and your palette is very large xP) that makes the dark colours bluer, the light colours yellower, and desaturates the neon greens:

I also replaced the grey rocks with some dark bedrock, as I think it creates a nicer visual hierarchy, letting the important stuff (the dirt and the stuff directly above it) be framed between two relatively flat expanses of colour (the sky and the bedrock). I doodled in some slanting strata freehand, but the same effect can be achieved with tiles like you're using, and can look much nicer and more rock-like than my doodles.

[ajrarn]

Thanks eishiya,

Those  are very good feedback   .
Concerning the bedrock, you are right, the rock attracts way too much attention.
When you work on a project for a long time, sometime you stop seeing obvious problem  .

I will try to learn what are those hue-shifting things you are talking.
I'm not super knowledgeable in the graphic techniques  .

Most of the graph in the game are procedurally generated, so it will not be easy to follow all the recommendation.

I can certainly do something with the clouds.

The radioactive trees will also follow your recommendation

For the simple gradient used, I still want something clean, not too much pixelated.
Do you have any example of what I can use?

Thanks for your help.

[eishiya]

Hue-shifting might make more sense if you understand the three components of a colour:
Value is how dark or light a colour is. A lower value means a darker colour, while a higher value means a lighter colour.
Saturation is how intense a colour is. Low saturation means the colour is grey-ish (0 saturation = grey), high saturation means it's intense. Neon colours have high saturation, earthy ones have low saturation.
Hue is the "colour" identity. Red, yellow, violet, blue, cyan, etc, these are hues. Combined with saturation and value, you get specific colours.


When I speak of "ramps", I am referring to the colour "gradients" that your objects use, typically these cover a range of values, so you might have a ramp of dark, midtone, and light greens for a tree, so that you can have both shaded and lit areas.
Hue-shifting means making the hue vary between different parts of the ramps instead of keeping the hue the same throughout.



Gradients are just a matter of choosing your colours, and the number of steps the gradients will have, aren't they? So, to avoid a "pixelated" look you just need more steps.
To help the gradients look better, choose start and end colours of different hues (i.e. hue-shifting). If possible, consider passing through a third colour in the middle, to add more variety/"life" to the gradient.
Another factor is your actual math for calculating the in-between colours. Some formulas give nicer results than others. Calculating RGB values directly tends to make the middle colours look greyish and dull, working with HSV or Lab numbers tends to give better results that naturally pass through other hues in the middle, rather than going through grey.

For your clouds, maybe consider generating them more like how you generate those narrow trees - out of a bunch of solid-coloured circles. That'll give you a fluffy cloud look. Have the darkest circles at the bottom, and draw the lighter circles above and in front of the darker ones. If you give each circle a random offset when it's generated, you can get some pretty nice results:

This example uses circles of all the same sizes, but you can also vary the circle sizes. It also only needs a few different colours to be generated to look nice. I don't know how dynamic the clouds are in your game, but this style of generating them can be moved, it can fade out, and can even change over time (the circle offsets can change, and the colours assigned to each circle can change), it works pretty well with procedural generation and procedural animation.
The same method could work for the larger round trees, too.

[ajrarn]

Thanks a lot for all this information   .
I will take time to read this carefully.

But, a quick question : should the gradient of the sky goes from lighter at the top, to darker to the ground ? or the opposite ?

[eishiya]

The sky should be darker at the top, and lighter near the horizon. The images you have posted have it right :]

[ajrarn]

I have made some quick modifications.
I think it is already better  .


I like your idea to use other pattern for the bedrock, unfortunately for now this is the only tile I have.
And I'm not too good to make those by myself  .

Thanks for all those explanations on the HUE color shifting to attract the visual.
This was very interesting.
I'm still not too sure how I can include this in the game, but I will keep this in mind.

But, I will certainly rework the clouds to see if I can do something with those  .
Let see next week.

[eishiya]

The reduced contrast and darker colours on the rocks are nice, though I think you should try drawing a new tile to use, or at least darkening the rocks even more. The rock tile could work well being almost all a solid colour or very simple shapes, so don't shy away from drawing one just because you're not a well-practiced artist :]

I look forward to seeing you implement hue-shifting in your gradients You improved the values already and it does look nice, but without hue-shifting it still looks a bit lifeless overall.

I like the added tree shapes. However, it looks a bit odd to me that one tree and some objects (like mushrooms) are made of sprites, while the rest are made of shapes. The styles just don't work together imho, I think you should commit to either using shapes extensively, or using sprites for almost everything.

[ajrarn]

Good observation concerning the sprite vs. shape   ....

I have struggled with this thing.

All plants are code-generated (yes, even the mushroom). So they are more shape-based.
Except for the Tree Of Life (the big tree in the middle).
The Tree Of Life is also code-generated, but it uses sprite leaves.
But since there is only 1 instance of this plant, I think it can be ok.

The animals are all hand-drawn sprites.
Because they are small are needs precision.

So yes, this was my struggle... 
I'm not too sure how to improve this.
Also, it is too late now to refactor the whole visual.

[eishiya]

I think sprites for animals is fine, but the tree looks out of place to me. Perhaps more than the sprite vs shape thing though, it's just outlines vs no outlines, it's the only tree with outlines. Perhaps not using outlines would help it look less out of place?