Eye of the Beholder

As I traverse the length and breadth of Twitter's game development circles, one of the more common "mistakes" that I see are distracting backgrounds in 2D side-scrollers.  I've made this mistake a lot when I was learning the "ins" of proper background aesthetic, and truth be told, I'm still learning.  But a few things jump out to me and are easy to rectify with some added work.  In an effort to help a bit, I'll post a short list below as well as some examples of proper technique.


1.  Detail:  When you're early in your game dev career, it's easy to become smitten with your own artistic growth, and want to put intricate detail everywhere in your game's visuals.  In a lot of cases this hubris is welcome: character detail, environment art, landscape textures.  In these areas the world is your oyster, so long as you don't clog the CPU cycles and the detail serves the purpose of your game's feel and aesthetic, you're good to go!  But detail is what you want to keep to a minimum in 2D side-scrollers, particularly in "auto-scrollers" like side-view shooters (Gradius) and rhythm games (Geometry Dash, Rayman Legends).  In every artistic case, detail draws the eye toward it.  In the case of video games, this has the effect of drawing your player's eye toward an unwanted object on the screen.  As a game designer, distracting your player should be your worst enemy, unless the distraction is a legitimate part of your game's flow and purpose.  Often it isn't, so you need to keep detail to a minimum without sacrificing your overall aesthetic.  This can be a fine line, so tread it carefully and pay attention.

Gradius

 In the above image of Gradius, you can see the difference between foreground and background detail.  While the earth and space station are both large and imposing on the screen, their detail is significantly lower than even a small piece of one of the enemy ships on-screen in the foreground.  The stars and Earth are also blurred, further decreasing fidelity and native interest for the eye, lowering the player's distraction.  I'm more interested in those ships than I am the fuzzy planet, though that planetary backdrop as a whole still maintains aesthetic value for the game, telling us where we are in the narrative.  But the more pertinent information lay in the foreground, with those ships that are trying to kill us.  That's where our focus should be.

Metal Slug

In the above image of Metal Slug, note the difference in detail between the foreground and background.  There is about as much intricate detail in a few inches of that foreground train, as there is detail in the entire background itself.  The shape of the houses and steeple in the background and the slight detail of those windows keep the scene just interesting enough to provide personality and atmosphere to the game without detracting from the gameplay.


2.  Saturation:  When designing your background pieces, you'll often use splashes of color to highlight the details you do have and to keep your aesthetic vision intact.  Maybe mountains and trees, or a sprawling cityscape.  Whatever your concept entails, you need to keep your saturation lower than that of your foreground.  Bright, moving backgrounds pull the eye the same way heavy detail does, so it needs to be a few shades lower than the foreground, meaning they have to be more muted and blended with grey, evenly across all the colors.  One way to achieve this, if you've already drawn your backgrounds, is simply to adjust your graphics software's "Saturation" color modifer until the colors become more muted, and less noticeable during active gameplay.

Saturation is the "greyness" of a hue

Metal Slug

In the image above of Metal Slug you can easily note the differentiation between foreground and background by the more muted, low-saturation colors of the background.  They appear to almost blend together while still maintaining enough color to differentiate distinct objects.  The level itself has character, but the player's highly saturated game space is the central focus.

Mega Man X

In the image of Mega Man X, above, you can see the different saturation levels between the green foreground and the muted cityscape in the background, achieved by lowering saturation levels on that background sprawl.  Increasing the saturation would bring out the reds and purples back there, which would then contrast with the greens and blues of the foreground and Mega Man's character sprite.  The artists and designers knew better, so they lowered the saturation instead to make the foreground POP.


3.  Contrast:  Contrasting colors (Blue/Yellow, Red/Cyan, Green/Magenta) attract the eye heavily in the intersection of their hues.  It's very important to keep your background as low-contrast as possible.  In other words, keep all of the colors on the same side of the color wheel.  The more contrast you have in the background pieces, the more distracting it will be.  In addition to this, and a key point to keep in mind, it's often the case that the more contrasting shapes you have, the more detail you're working with.  This should be a red flag for you to rethink your detail and tone it down a notch to keep it smooth.

Color wheel pointing out effective contrasting colors

Metal Slug

Metal Slug is just earning all kinds of points in this post, but they really know how to make backgrounds.  Take a look above and you'll notice, in each of the three levels presented, the vast swath of them are on the same side of the color wheel.  Lots of brown/red in the top level, blues in the middle level, and greens in the bottom level.  They keep all of that contrast as low as they can while still keeping details both minor and minimally saturated.  The exception to the "low detail" rule is the top level, where they kept contrast and saturation so low that they can get away with a bit more detail in those buildings to pump up the environment's character.  Your eye is still focused on the more intense contrast of the foreground actors.

Gunstar Heroes

In the image of Gunstar Heroes above, the level shown is an auto-scroller like Gradius, but faster-paced.  The background is whizzing past the player's view quickly, so the artists kept detail and contrast at an absolute minimum, while leaving saturation alone.  Definitely note the contrast levels here.  The entire palette for this background is confined to about 30-degrees of the entire 360-degree color wheel.  It moves so smoothly past the eye that it barely registers as a distraction while still maintaining a very distinct sense of speed.

Rayman Legends color/greyscale

Above, you can see Rayman Legends makes good use of all three of our list points: minimal detail, low saturation, and low contrast in both their foreground and background.  I've split the image myself to get a better understanding of the color values by using a greyscale image.  Note the stark contrast between dark-and-light grey in the foreground characters as well in the individual details of the stone walkway.  These capture the eye very easily and keep the player focused on them.  In direct comparison, notice the background saturation and values.  Look carefully at how well-blended they are across the screen, with very little saturation, minimal contrast, and almost no detail.  These levels are extremely well painted, working perfectly for level design.


That should do it for now.  I really hope this list and these examples can help you achieve better looking and better playing levels in your projects moving forward!  For your background, remember: Low Detail, Low Saturation, Low Contrast.  And there will always be room to fiddle with some exceptions!  Focus on your player, and keep pushing your work!

Keep playing, friends!

~Anthony