4

I am designing and developing a 2D-platformer and I'm having trouble with the look and feel of the game. The game is about an inventor who is kidnapped for warfare. Theme: Childish but sad.

There are three other layers: the blue cracked sky, the pillars, doodads (like the missile) and the tiles.

Screenshot

(The hairy guy in the center is the protagonist.)

What should be changed to make the character stand out?

What should be the palette of the tiles, the font, and the background to make the character the center of attention?

What colors should be there revolving around the character and the theme?

Edit:

This is the revised color palette. Should've studied color theory before I went drawing like crazy.

enter image description here

3
  • Contrast can exist in other things: contrast movement speed (parallax scrolling): youtube.com/watch?v=aRExmZIurUs , and parallax scrolling w/atmospheric perspective: youtube.com/watch?v=UfGqAdQw8jk . Another contrast is between sharp edges and soft edges (particularly depth of field): the important parts are in sharp focus, where things which can be ignored are blurred.
    – horatio
    Sep 25, 2012 at 20:29
  • It's not necessarily always about color or the ability to draw well. There's this very well done flash based game called N i.stack.imgur.com/t5FiF.jpg - devppl.com/flash-game/fullscreen/n-game Very simple graphics ( Simple geometrical shapes ), but a very well done game. Maybe that can inspire you.. or something.
    – Joonas
    Sep 26, 2012 at 9:17
  • Different colour (its head is about the same colour as the blocks) and perhaps thicker lines. You chose for a 'busy' background, then the risk is it 'coming to the front' too much, so to speak. If the bg stands out much, make the sprites in front stand out a lot more.
    – paddotk
    Sep 27, 2012 at 11:51

3 Answers 3

6

How to make something stand out? Contrast. Easiest way is to use dark vs. bright or opposing colors like red and green.

The issue you are having is that your caracter also blends with the tiles, while the background is rich in color. Which makes us look at the background first. Basically, look at any similar game, you will see that background and foreground are seperated. And most often, the background will fade out which also adds the illusion of depth. Look at this example, the foreground is rich and the background fades gradually away. Then there is also complexity, complex and detailed characters and boxier backgrounds. All this draws the focus on the mai character, which is exactly what you are asking.

So, I would either reverse your palette, go light and grayish in the back, or darken your background to make it less "pop out". It's called background for a reason.

3
  • 1
    There is also a shape contrast problem - your protagonist strongly resembles the plants(?) behind him.
    – e100
    Sep 25, 2012 at 11:09
  • 1
    +1. Note that "contrast" doesn't mean only "light and dark," it also means "different". One term that may be useful for this is "atmospheric perspective": you have the air which, over distance, reduces color and texture contrast. In a game, this could be rendered as a color filter: render your background (some games use 3 layers, like in the old popeye cartoons), and lay a blue color filter over the whole layer, then render the next layer on top. This method gives you "free lighting" in that you can change the color of the filters.
    – horatio
    Sep 25, 2012 at 15:15
  • I have applied all suggestions on the new mock-up. Valuable lesson: learn the color theory before designing a game.
    – Helix Quar
    Sep 25, 2012 at 15:46
3

Looks like a case of too much contrast. In photoshop/gimp/whatever, try looking at a portion of the green things, and a sample of the cracked sky, the character etc. Look at the histograms of these. They each span a broad range of values, black or near black to white or near white.

Objects and background are easier for the eye to separate when their ranges of values don't overlap, or overlap a little. A light object with moderately contrasty detail will sit nicely in front of an all dark low-contrast background, and visa versa. But a medium value contrasty object over a medium value less contrasty background won't work so well, and never mind when foreground and background are both contrasty.

In your sample image, try repainting the green fuzzypuffs to be all somewhat lighter, darker. This will help, but this isn't the main problem. The tiles are very harshly contrasting. You want them visually in front, of course, but their very light texture with absolute black outlining draws visual attention away from all else, so your main character and the background tend to recede together in unimportance. These are not unimportant to our conscious minds, but at some level of visual processing in our eye/brain system, the relation of importance to object is lost.

Besides non-overlapping ranges of values and generally moderating contrast ranges, you can try well-separated ranges of color - bright red object over a watery blue/green background, for instance. Mario in KMSTR's linked-to image stands out by being saturated red, as well as being darker (not dark, just darker) than the surroundings.

The long-term general solution: take some informal art classes. Even experienced computer graphics experts can benefit from a bit of painting or charcoal drawing.

2

I think that maybe you should add a little contrast. To me it seems you have too many analogous colors http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm If you want it to have more of a childish feel I think you should go for primary colors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.