Tutorial by David Goss
Purpose: This tutorial is not a complete object making tutorial.
It's purpose is to (hopefully) help you understand the basic patterns
used in z-buffers. The next tutorials will talk more about how to
calculate patterns for surfaces that are not parrallel to the grides,
some ways to speed up the process, and a walk-through for those
that would rather have a hands-on method.
About this tutorial: Under each step you will see the name
of the image that is used. The images should be located inside the
zip that contained this file. You can load the image into your drawing
program for reference as you read.
Intro: The Z-buffers are what defines an objects 3-deminsional
shape in the 2 deminsional world of The Sims. The darkness of a
given pixel determines it's `distance' (with respect to other object,sims,
etc), within the tile, from the camera in the game, simple huh!
Example: With two objects placed in the same tile, two cubes,
one cube has a dark z-buffer and one a light z-buffer - the game
would actually draw the dark one over the light one even if the
dark one looks like it is further back in the tile than the light
one. That's because, to the game, there is no back/forward offset,
- ever wonder why in tmog you only adjust left/right and up/down
in the offsets - well that's why. The depth is actually decoded
from the z-buffer.
A simple cube: Ok - lets do a z-buffer for a simple object:
The easiest z-buffers to do are surfaces that are parallel to the
grids. That's why first we will do a simple cube. I'll show you
the long way then in the next tutorial I'll show you my shortcuts.
To get the z-buffer channel I select the entire object in the p-image.
You can easily do this with the wand by selecting the background
then choosing Selections - Invert from the menu. If the object has
'holes' in it you may have to hold down the Shift key and use the
wand to select any additional areas before inverting the selection.
Or if there is few colors you can use the Shift key and the wand
to select 'on this example' each side of the cube because each side
has it's own color (makes it easy for an example). If you select
the object then you won't have to invert the selection.
Once the entire object is selected, I use the brush, set to a large
width. Paint the entire object black or any dark color. This gives
you the exact outline of the entire object and helps eliminate that
buggy yellow outline in the game.
Now select Colors - Decrease color depth to 2 colors. I use the
options Gray values, Nearest color, and Weighted. This should give
you something like the picture in box3.bmp. Now select Colors -
Grayscale from the menu to set your pallet. Now comes the fun part.
(By the way, you could copy this image and paste as a new image,
do Colors - Negative image from the menu and you will have the basis
for the alpha channel.)
It's easier to do the buffers if you sort of draw the main shape
on the solid black image. Use a color that won't be used in the
z-buffer so you don't get your lines confussed. Here I used a real
light color but a few shades darker than the background.
Now you need to determine where your starting point will be. I will
use the bottem middle corner. I will do the right side of this corner
first. What shade do you start with? Pick an object (preferably
a Maxis object) that will have a corner in about the same area.
It don't have to be perfect yet, I will show you how to adjust it
once it's done. For this cube I just happen to know it's about the
same size as the column in the castle fence so I clonned it and
exported its sprites. When I check it's z-buffer I find it has a
grayscale value of 165 in the pixel in that same corner. So that
is the color I will start with.
Flat surfaces are easy. Just remember, the closer you get to the
camera the darker the shades will be. Start with the shade you determined
above and create a line 2 pixels high at the starting point. Move
right and up 1 pixel then make another line 2 pixels high. Repeat
until you reach the other side or the top edge that you drew on
the objects back in step 4. That's the pattern for a flat verticle
serface facing in that direction (the other visible side will be
the same pattern except shifting left which will form a 'V' at the
corner). Now you would go back to the starting point, change your
grayscale color to 1 shade darker, and repeat that pattern just
above the first line. If you wanted to fill in the area on that
side below the line change your brush 1 shade lighter for each line
below the starting line.
Shades of gray: When you first look at the z-buffers, it looks like
the colors form wider lines. That's because the eye cannot distinguish
from shades that are that close. The average person will see a shade
change about every 8 shades. So each one of the 'wide' angled lines
are about 8 different shaded lines.
After 10 or so lines you should start to see something that resembles
box7.bmp. You would continue using the same pattern to fill the
entire side of the cube. The left side will turn out to be a 'mirror'
of the right side so you could do a little 'cut, past, and mirror'
to get the other side but you have to be carefull to keep your z-buffers
within the black outline you started with. (This is another little
trick I will offer in my next z-buffer tutorial.)
Your Z-Buffer should look somewhat like box8.bmp once both sides
are completed. The lighter pixels in the top left corner are the
remains of the outline from step 4. You may or may not still have
those showing. It all depends on how far up you drew your side.
Don't panic if you don't have them, being one or two pixels off
on the corner won't even be noticed in the game.
Ok, so what have you learned here? Basically, for vertical surfaces
parallel to the grids, the pattern is 2 up, over and up 1, and repeat.
The over 1 depends on what 'side' you are working on. The way I
remember what direction to move is to vorm a 'V' in the center corner.
If one of the sides were at an angle (like a door half way open)
then this pattern would not apply.
The top is a horazontal flat surface. Those are also easy. Start
in the front corner with the color of the pixels from the adjacent
pixel on one of the sides. Now just make a straight line across
the top till you reach the corner for the other side. Lighten your
shade by 1, and make another line across the top. Lighten your shade
by 2 and make another line across the top. Repeat making lines alternating
the shades by 1 and 2 until the top is completed.
image : (box10.bmp)
Your finished Z-Buffer should resemble box10.bmp. Notice how the
top corner (the one 'facing' you) has the darkest shades of gray.
That corner is the closest to the camera. Notice the bottem 2 outside
corners and the top-back corner have the lightest shades, those
are the areas that are further away.
So, what does all this mean? Can I do more than just cubes using
this information? Yes, most objects can be broken down into simple
surfaces. Take a bookshelf for instance. The sides, top and bottem,
and shelves all fit as described above. To simplify things you could
even treat the front of the bookshelf as a solid side and it would
work - it would only be noticed when another object is moved through
The next tutorial will walk you through actually creating an object
- (well - ok I'll give you the object) but you will actually create
the z-buffer and alpha channels.