Fake 3d Lighting Tutorial Part 1

How to create Graphics for Isometric Tile Games

This is a repost from my old playground website from May 19th, 2007.

Contents:

• Introduction
• Modeling The Object
• Scene And Model Preparation
• Adjusting The Render Frame
• Setting Up The Camera
• Adding Light
• Rendering
• Post Processing
• Final Thoughts

Introduction

I thought that it is about time I am doing a tutorial for modo. I have often stated I would eventually do one, now I am here to deliver.

In this tutorial I am introducing a technique to use modo to create sprites for tile based games. These sprites can then be used to generate a fake 3d lighting effect within the game, without the need for real 3d calculations. But that is part of a later tutorial really, today I just want to focus on the scene lighting, object and camera setup.

The results of this mini series can be used in traditional isometric tile games or adapted in other games as well. Right now this technique is in experimental stage, but I have made some demonstrators. One uses Javascript and the other uses Actionscript inside a flash movie:

• Flash movie
• Javascript implementation (currently no IE and Opera, sorry)
• download tutorial files (zip archive)

The technique introduced in this tutorial was used to create this image

Modeling The Object

Since modeling isn’t really topic of this tutorial I won’t go much into detail here. I used a tile size of 1 meter - although you could chose another size, for the purpose of this tutorial I would stick to this size. I wanted my column to cover up the whole tile so the base of it is 1 meter long in each direction. If you need it, a zip file containing the scene, and all the rendered images is available for download. If you want to model something similar yourself, fire up modo and lets go.

I used a fantasy glass column to have some nice lighting effects. The base and top are rather simple with some crevices to catch shadow. The column body is made of a glass material which is basically just a cylinder which I scaled on the x/z axes with a radial falloff to give it the bottle shape.

For the carvings I deleted the top and bottom of it, selected each second edge and extruded it. I converted the selection into polygons and made an edge slice with a slight depth. Then I closed the top and bottom again by selecting the appropriate edge and hitting “P” for “make Poly”. If you look at my model you can see that there are some more steps involved, but as I said, this is not actually part of this tutorial.

If you like the modeling and are interested how to do this kind of stuff, drop me a line and if more than just one or 2 people are interested I’ll think about a nice tutorial.

Scene And Model Preparation

If you want to you can create an ambient occlusion map for your model to give it some more depth. There are plenty of tutorials covering this, so I won’t spend a lot of time on it here either. Since I was going to use the model specifically for these isometric graphics, I went with an ambient occlusion pass instead. How to make this is covered later under the point rendering.

To let the overall lighting look a little nicer and to have softer shadows, I rendered the scene with GI turned on. The ground plane below the column is visible to GI though it is invisible to everything else. The bounces are set to 2 to have the light bounce slightly inside the crevices.

We are going to use Irradiance Caching since it is faster and smoother than brute force GI. Click on the render item in your shader tree and select the Global Illumination tab. Make sure you set the Ambient Intensity to 0W/srm2 as we don’t want it in our render. For everything else use settings similar to those on the picture.

Adjusting The Render Frame

The tile size for our game is 128×64 pixels. This is a ratio of 2/1 for width and height. However, since our object isn’t flat but rather high, we can’t rely on the tile height right now.

Navigate to the frame tab of the render item in the shader tree and set the “Frame Width” to 128 pixels and the “Frame Height” to 320 pixels so we have sufficient space to encompass the objects height. Set the “DPI” to 72 since we are rendering for screen usage. Leave all other settings at their defaults.

To get the object into the right view, we continue with the camera setup.

Setting Up The Camera

The camera setup for this one was a bit of a trial and error. Since modo’s preview and final render have a slightly different field of view, getting the render framed exactly to the pixel took a while.

The important things to point out here is that we want the “Projection Type” set to orthographic since we are making a graphic for a tile based game. If we were to use the Perspective Projection, the object would get distorted and the tiles would no longer tile so to speak.

We leave the film size at the default, but set the Film Fit to Overscan so it won’t get distorted if we change the image aspect ratio.

If you were to look through the camera right now you won’t see very much yet. To fix this, we need to rotate and move the camera. Set the camera position x and z each to 1m and the y to 2.4m. Rotate the camera 45 degrees on the y axis and -30 degrees on the x axis. These are the standard rotation values for the 3/4 perspective (also called isometric perspective).

Our column still looks a off. To get it right we need to change the cameras field of view. Since perspective has no effect in orthographic projection, focal length doesn’t give us any results. Instead we need to change the “Focus Distance” to 520 mm. This will have the effect that our 1m square tile will fill the entire width of our image.

Now we have a good view of our object. The only thing left to do is adding some light to the scene.

Adding Light

The default directional light isn’t good for our purpose. To have a possibility to render out a daytime version leave it in the scene for now but turn it off in the item list. Click on new item and in the popup on point light.

To let it look like our column is lit by a torch or hand lamp we move the light to a position of 1.3 meters on each axis. The reason we move it to this position is because our camera looks at the object from a 45 degree angle. To have the object lit directly from a horizontal or vertical direction in the final image, the light must be off in a 45 degree direction also.*
Rightclick on the light again and chose “add to group” which will make a group at the origin of our scene. Now the repositioning of our light around the object gets easier since we merely have to rotate the group instead of setting new positions for the x and z axes. Surely you could do the same with action centers, but this way is easier to handle if you want to add other lights or objects later on.

Since we are using GI we also need to take care of a few other settings.

Click on the Environment object in the Shader Tree to see it’s settings. Uncheck everything but “Visible to indirect rays” and set the intensity to 0.03W/srm2. This will give a very subtle effect we need later on.

*Now some might say why not turn the object 45 degrees on the y axis instead. Well, if we were to render more than one object we would lose the grid reference for our tiles. That’s why.

Rendering

Now that we have everything set up we can start to render. First we want to create an Ambient Occlusion pass to give our final images some more detail and depth.

Navigate to the render item in your Shader Tree. In the frame tab where you previously set the render size, you’ll find the output settings at the bottom. It is possible that your screen is to small and you can’t see it. If that’s the case simply click on the double arrow at the bottom to show the hidden options. We set the color output to Ambient Occlusion(AO) to get just that.

Hit F9 to render. After a few seconds you’ll have your AO pass. If you find it too grainy, simply navigate to the GI tab and use more Indirect Rays. You’ll most likely have to turn IC off to change this setting. Don’t forget to turn it back on after you’ve made your changes. The Ambient Occlusion render will use always the standard GI instead of IC. This is why changing anything on the IC settings won’t have any effect.

When the AO Pass has a sufficient quality we save it as base_ao.png.

Now we navigate back to the frame tab and change the output back to color.

To get an image of our column lit from each side we need to first render an image with Ctrl+F9 or Render Visible from the render menu (we don’t want the directional light to show up). We save this image as front.png. Next we turn our group containing the light by 90 degrees on the y axis and use Render Visible again. We save this image as right.png. Repeat the steps for a rotation of 180 degrees and -90 degrees to get an image for each direction.

Last step in modo is the base image - the image of the unlit column.

For this image we need to make the point light invisible in the item list and simply use Render Visible. This should give us an image of a very subtly lit column.

That’s it, that’s all the images we needed. Now we move on to the gimp or Photoshop if you like - the process is the same in both.

Ambient Occlusion Pass and Base Image plus the four light directions front, left, back, right (ltr)

Post Processing

Open your favorite image editor. I have gimpshop, but any other that supports layers and “multiply” layer mode or similar will do.

We need to load all the images we just created into one image as separate layers. We need to move them so the base_ao layer is the topmost layer and set it’s mode to multiply and the opacity to about 35%.

Now make any layer below except for one invisible - similar to this image.

In Photoshop you would probably use save for web now to save as 24 bit PNG. In gimp/gimpshop simply select save as and chose export. Do this for each light layer and the base layer too of course and you have successfully created the necessary sprites for use in an isometric tile engine.

Wheew this was it, my first tutorial for the web. I hope you could follow my dark and twisted way of thinking and liked this tutorial. I am probably babbling too much, but that’s just me. If you have any thoughts, suggestions and critique, please be so kind to comment or send me an email. I’d love to hear if I messed up or did something good.

This is the first part of a 2 part tutorial. So stay tuned for the second part that deals with concepts of implementing these sprites into an isometric engine.

© May 19th, 2007 Torsten M. Walter aka Misha3d

Tags: Games, isometric, lighting, modo, Rendering, tile graphics