Jump to content
  • entries
    940
  • comments
    5,894
  • views
    864,044

How to Make Your Game Look Beautiful


Josh

3,568 views

 Share

In this article I am going to explain some simple color tricks you can use to give your game environments a much more cohesive color scheme and look much better.

Now if you look at most indie game environments that are thrown together from random models they will look something like this:

screenshot160.thumb.jpg.d3e6fce829d196ed89042fefb7b155a3.jpg

It looks awful, with no consistent color scheme and saturation levels all over the place.  In fact, most look much worse than this.  I'm going to show you how to fix this.

Control Saturation Levels

The first step is to limit your saturation levels.  You can see the rocks and plants have fairly muted colors but the building, train engine, and cargo containers stick out like sore thumbs.  They sky also looks like a smurf.  You want to limit your saturation levels so that you can later apply lighting to the scene and get a more uniform look.  To do this you need to open the source images of your textures in Photoshop or another paint program and run a desaturation filter on any that look too colorful.  The image below shows a more desaturated scene, which still doesn't look great but it's a step in the right direction.

screenshot161.thumb.jpg.6c3c14329a542cabe108a7072e0ba2e5.jpg

Use a Good Skybox
In an outdoor scene the sky typically takes up about 50% of your screen pixels, so it's important for this to look good.  There are only two types of good skyboxes.  You can either used one based on real photos of the sky, or use one created in the Vue Esprit software program.  Anything else is bad.  (Please do not use Terragen to make your skies!)  Photo-based skyboxes have the advantage of almost always looking great, while procedural skies created in Vue give you a lot more control over exactly how the sky should look.  (I used Vue for the default skybox that comes with Leadwerks.)  The scene below shows the photo-based skybox we used for The Zone DLC:

screenshot162.thumb.jpg.adb71aa81c09f440dca3c7dda4cacb6c.jpg

Colored Lighting

In nature, light is almost never white, but there's not really any such thing as "colored light", there's just light.  Light has properties of both particles and waves, and can travel at different wavelengths.  You have three types of photoreceptors in your eyes that each detect a different range of wavelengths.  These different receptors perceive light as red, green, and blue, but it's really all just light.  The combination of these different receptors inputs gives us all the colors in-between like turquoise (blue + green), yellow (red + green), and purple (red + blue).

lightwavelength.gif.bb76359a067c15e1e3a8b92e4da62e5a.gif

Blue light has the shortest wavelength and is the most powerful, while red has the longest wavelengths and is weakest.  Consequently, when light is dim it actually appears tinted blue because we can see the blue wavelengths more strongly.  This is easily visible at night when everything you see has a subtle blue tint.

Image2.thumb.jpg.2556f72546aa44a48b347808e5d6a837.jpg

In the screenshot below I changed the ambient light level from RGB 64,64,64 to RGB 61,61,86.  It's not an extreme change but you can see the rocks look a little more natural.

screenshot163.thumb.jpg.3d39fcd6d1941b11f45364d892684b9b.jpg

The ambient light level is added to the entire scene on top of any other lighting.  If our sunlight is pure white then our entire scene will have a blue tint when we add in the blue ambience.  Just to counteract this we need to tint the sunlight a little bit with a color that is low in blue light.  RGB 255,255,0 is bright yellow, and guess what color sunlight tends to be?  It usually range anywhere from yellow to pink depending on the time of day and atmospheric conditions.

Alpenglow-and-Moonset-Over-Mt.-Whitney.thumb.jpg.0dab286ea60b96809063aa9cab7cb9c7.jpg

*The high school I attended Is actually named after this mountain in California.

Saint-Helens-Alpenglow.jpg.edc219cb9df4893c31fffdffd49870ee.jpg

Since our skybox already has a nice orange glow in some places, I decided to use that for our sun color.

screenshot167.thumb.jpg.06894867b0bef36eaab0b94d7eaecbe7.jpg

Because my saturation levels are kept in check the whole scene now has a nice orange tint to it, while retaining the original reds, yellows, and greens of the environment.  The orange counteracts the ambient blue in areas that have direct sunlight, while a subtle blue tint is retained on shaded surfaces.

Post-Process Effects

My basic stack of post-processing effects I use are SSAO and standard bloom.  I also add the iris adjustment effect for outdoor scenes, as this allows us to simulate a greater range of lighting intensities.  Here is the final scene with these post-process effects added.

screenshot166.thumb.jpg.9c525ab8c36e31392c09b58de0246ff1.jpg

Notice the whole scene has an overall theme of blue, orange, and very subtle green/brown.  The bloom filter tends to increase perceived color saturation a bit, so the blue shadows are clearly visible now when contrasted to the orange glow.  Compare this to our image at the beginning of this article.  Which looks better to you?

This is the process I use for pretty much any game level I make, and it will make your games look 200% better.

  • Like 8
 Share

3 Comments


Recommended Comments

Another hint when using the iris adjustment shader in outdoor scenes: Bright environments (high noon) should use darker ambient light than morning or evening scenes.  The increased difference between lit and shaded areas will make the effect scale more when you are indoors, making the sky outside look very bright.  Or if you are outside, the interior of buildings will look very dark.

  • Upvote 1
Link to comment

^^^^ This ^^^^

What he says. You have to ask yourself, is there a lot of reflective surfaces. For indoor scenes, definately turn your ambient light color to absolute black, but leave the power at 1.0 . 

For outdoor scenes, get that reflection probe running at full scoop. 

I have had stunning results with metal and concrete surfaces . Leadwerks makes normal maps look great, and those are the advantages to creating realistic scenes. My textures are 4096x4096 and it is great. Will post pics soon. 

  • Like 1
Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...