How to Make Your Game Look Beautiful
Entry posted by Josh ·
3,895 views
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:
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.
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:
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).
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.
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.
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.
*The high school I attended Is actually named after this mountain in California.
Since our skybox already has a nice orange glow in some places, I decided to use that for our sun color.
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.
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.
-
8
3 Comments
Recommended Comments