Thursday, 29 July 2010

The Importance Of Shadow and Light - 2D Game Texture Creation

After reading this book my eyes were opened to some errors I had made and indeed continue to make when creating seamless 2D game textures.

To the untrained eye, the first texture in this post may look OK.
In fact,  it is OK but if a game studio was to consider using this in the development of a new game it would probably be rejected.

Do you know why?

Let me put it this way; By looking at the shadows on this texture,  where is the light source coming from?

I made a mistake in the creation of this texture when using Photoshops default "drop shadow"or the bevel /emboss tool.

I normally always ensure the drop shadow and bevel/emboss light source direction is set to 90 degrees which casts shadows horizontally.

For some reason, I overlooked or forgot this and as a result the shadow is cast in a diagonal upper right direction meaning the light source is coming from the left hand lower corner of the texture.

That is not a natural light source location unless it's coming from artificial light such as a floor spot light from an interior room.

All external textures should have a very subtle 90 degree shadow which tells even the untrained eye that the light source is coming from directly above or midday sun.
But even that is not the correct method for game texture creation.

The shadow on this texture is too obvious. If I was to remake this texture it wouldn't have any shadow at all, or if it did, it would be very subtle.

Why? Well, because game engines have their own shaders and environment simulators which simulate weather and "real time" natural environments.

Shadows from assets in games will be cast longer or shorter depending on where the sun or moon is positioned in the sky and will also move accordingly. If the sky is hazy or overcast, the shadows would be very subtle indeed.

So to have a static dark, sharp and "directional" shadow on a texture used within a game engine would be in conflict with the games shaders and it would look artificial or "out of place"

As Second Life is heading towards more sophisticated game shaders we will find a lot of textures made previously will look strange in the new environment when real time natural environment simulators are used.

Here's another example of an unnatural architecture texture.

Take a good look at the window frame, see how it just "sits" on top of the different depths of the walls carved stone surface?
It should look like it has been "built in" to support the window and not like it's literally been stuck to the wall.

This is where the use of hand drawn shadow and light can make a difference.

Here's an example of how you can over come this kind of problem.

Look closely at the gold borders on this wall where they meet the window frame.
It's the same window that I used in the above texture,  but notice how it appears to "sit" into the wall a little?

This is easily achieved by adding a dark and light line at the edge of the window frame where it meets the wall, in this case the gold borders.

You need to play around with the opacity, Gaussian blur and blending modes of your shadow and light to create the illusion of depth by giving the edge of the wall a beginning and an end.

Here's another good example of how using manually drawn shadow and light can create the illusion of depth.

See how the door frame has an edge to it?

That was done by adding two strips, one dark, one white. The dark creating shadow and the white to create the illusion of light as it catches the edge of the door frame.

When you manually combine shadow and light you can create the illusion of depth or edges to areas that don't naturally have one.
Without it, this door would appear "stuck" on to the wall and would look unrealistic.

I am far from an expert and even this last image isn't perfect.

For an old gothic build like this, the door frame is too straight and perfect. It should be a little uneven and have some weathering or areas of loose crumbling stone.

The point is no matter where you are in the development of creating 2D photo realistic textures for games, there is always room for improvement.
If you look long enough, you can probably find little details that could look so much more realistic if you spend another 30 minutes in post work.

Taking photographs for textures helps you to notice these natural imperfections in architecture.
When looking through the lens of a camera you tend to notice things that you would not normally give a second thought to.

I personally do not like the pristine clean look of some of the builds in Second Life, it's not natural to have brilliant white painted picket fences or perfectly clean interior walls. It looks artificial like The Sims.

I have become quite anal about my work over the last 18 months and can hardly bear to look at my really old stuff, I find it uncomfortable.
And the chances are in another 18 months I will probably look at stuff I consider good by todays standards and cringe all over again.

No comments:

Post a Comment