Z-buffers 101 for Paintshop Pro

Tutorial by David Goss
Level: Beginning

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.

Step 1


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.

Step 2


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.

Step 3


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.)

Step 4


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.

Step 5

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.

Step 6

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.

NOTE:
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.

Step 7

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.)

Step 8

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.

Review:
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.

Step 9

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.

Step 10
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 it.

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.