Building a Custom Avatar

This page shows you the process for creating your own custom avatar in Being-There. It assumes you have experience with computer graphics tools such as
cover
Jasc Paint Shop Pro 6.01 (at Amazon.com)
or cover
Adobe Photoshop Limited Edition 5.0 (at Amazon.com)

This page illustrates the use of Paint Shop Pro only. To create your own avatar, follow these steps:

  1. Make a Copy of an existing avatar file
  2. Extract the bitmap palette
  3. Find your own avatar graphic file
  4. Change to the Being-There Palette
  5. Clip and Resize the graphic
  1. Make the background Transparent
  2. Save the graphic into your avatar file
  3. Making an 8-sided Avatar
  4. Test the new avatar Offline
  5. Revise and Rename your Avatar File

Make a Copy of an existing avatar file

The avatars are stored in the "Avatars" directory under the main application directory (usually C:\Program Files\Being-there\Avatars). Make a copy of one of the distribution avatars such as "default.avt", and keep your copy in the same directory. All avatars must live in the "Avatars" directory, because that is the only place that Being-there looks for them. We will refer to your copy as my.avt for the rest of this document.

Extract the bitmap palette

The avatar is really just a WinZip file. It uses a ".avt" suffix so you, and Being-there, may easily distinguish it from other WinZip archives. If you don't have a copy of WinZip, Download it from the WinZip web site, and install it.

Now Launch Winzip, and select menu "File -> Open Archive" to open your avatar file, When you get the Open Archive dialog, change the bottom field "Files of Type" from "Zip Files" to "All files (*.*)", Navigate to the "Avatars" directory and open your avatar file (my.avt or whatever you named it in the previous step). Now extract the single bitmap file (file ending in .BMP) contained in your default avatar, and save it in any convenient location, such as you desktop. You will be using this bitmap to get the correct palette for Being-there bitmap files.

Next, use your graphics file editor (Paint Shop Pro, in this example) to open the .BMP file you just extracted with WinZip. You should see the avatar with a black background.

When we build avatars, our background color should also be that same black color, but for now we want to change the background color to hot-pink, or some other color that is unlikely to be found in our custom bitmap graphics. First, select the menu: "Colors" -> "Edit Palette...".

Your Being-there palette should look like the one on the left. Currently, all graphics in Being-there use this palette, In future versions, we plan to support 32-bit color, and your own optimized 8-bit palettes for each avatar and 3D texture graphic. Now, we are going to change the first color on the palette (circled here in red), on the top-left corner, from black to hot pink. Double-click on that color, and you will see the "Color" dialog box
In the "Color" dialog box, click on the hot-pink color, shown here in the red circle, and click the "OK" button. Next, click "OK" to the "Edit Palette" dialog. If you succeeded, the avatar should now have a hot-pink background.
Now use the menu "Colors" -> "Save Palette" and save your Being-there palette file to "bt.pal", in the same directory as your bitmap file. We will use this palette file with our own custom graphic, below. You don't need to save the modified bitmap from the default avatar file - all you need is the palette.

Find your own avatar graphic file

Next, use Paint Shop Pro to open your own graphic file that you want to use as the basis of your avatar. This can be in any of the wide range of bitmap file formats supported by Paint Shop Pro.

Now, to prevent yourself from damaging your original graphic file, use the menu "File" -> "Save As..." to save a copy of the graphics file. in the "Save As" dialog box, Navigate to the "Avatars" directory. Then change the field named "Save as type" from the current type, to "Windows or OS/2 Bitmap (*.BMP)". Give the file a new name such as my.bmp.

Change to the Being-There Palette

Next, we will modify your graphic, "my.bmp", to the 8-bit color palette that we just saved. In Paint Shop Pro, with your graphic file open, use the menu "Colors" -> "Load Palette...". Select the palette file you just created, "bt.pal". Also, select one of the two radio buttons below, namely "Nearest color matching" is usually best because it avoids creating "spots" that look like ugly blemishes when seen close-up. So try "Nearest color matching" first. If this results in an unacceptable distortion of the original colors, "Undo" the change (control-Z), and load the palette again with "Error diffusion dithering".

Now use menu "File" -> Save" to save the changes to my.bmp.

The graphics below shows the result of saving a graphic (jpg) (on the left) with the Being-there palette (on the right). In this case, we used "Nearest Color matching". As you can see, some distortion is unavoidable.
Original graphic in .jpg format Graphic adapted to the 8-bit Being-there palette

Clip and Resize the graphic

Now we need to trim the graphic to remove extra background, and resize the graphic to fit the Being-there 3D world.

To Trim the graphic, select the "Crop" tool from the tool bar. Click and drag the smallest possible rectangle from your graphic that contains all of the avatar image that you hope to display.

Now, select menu "Image" -> "Crop", and your image should be trimmed of excess background material, as shown on the left.

Next, we need to resize the image to fit the 3D world. Avatars should be 256 pixels tall and either 128 or 256 pixels wide. The smaller the better, and in most cases, we can use 128 pixels wide. Select Menu "Image" -> "Resize" and you will get the "Resize" dialog shown on the left.

We want to leave the avatar as large as it can possibly be, within the constraints above. In addition, we need to leave space at the top for the nickname label (approximately 36 pixels high). Therefore we are selecting 220 pixes high.

The resulting image, on the left, has lost much of the original detail. To some extent, this is unavoidable, though we could minimize this by creating an avatar with a larger resolution cut of the image, for example, from the head down to the waste. If we had artistic talent, we could also touch-up this image with the paint tools provided by our image editing software.
Next, we need to increase the background canvas size (without changing our image resolution) so that the entire image is exactly 256 pixels high and 128 pixels wide. We also want to leave enough empty space at the top of the image for our nickname label.

Use menu "Image" -> "Canvas Size...", and you will get the canvas size dialog shown on the left. Set the "New Width" to 128 (or 256), and set the "New Height" to 256. Select "Center Image Horizontally". Change the "Bottom" field to 0 (if you want the avatar standing on the ground), and the "Top" field will automatically adjust to whatever is left.

The resulting image should look something like the one on the left. The background color may be different,depending on the current background color setting on Paint Shop Pro. This doesn't matter, because it will be easy to paint this solid area of background to hot pink in the next step.

Make the background Transparent

This is the most time consuming step in making an avatar. Before going further, be sure that this image is the correct size for your avatar. You probably should preview it in Being-There, offline, as shown below.

Here, we can see that the nickname label does not cover the face, and that the users see the avatar at approximately the correct eye level. After you know that this is the right image, begin the next step of changing all the background pixels to hot-pink, and converting that hot-pink color to pure black required for transparent pixels in Being-There.

Next, we need to color the background hot-pink. There are three techniques that we have found to work at various times, namely "Paint Brush", "Color Replacer" and "Flood Fill". We will illustrate Paint Brush first, because it is the simplest and often the only technique that works.

Paint Brush Technique for Painting the Background

This is the "Brute Force" technique, because here you manually paint every pixel of background. Select the "Paint Brushes" tool , and select "Hot Pink" for the foreground color.
Don't use just any hot-pink, but use the hot-pink that is palette color index 0 on our Being-there palette. Click on the foreground color . You should see the Being-there color palette shown on the left. Verify that the top-left color is hot pink, and that you have this color selected as your foreground color.
Next you can use the tools available in Paint Shop Pro to paint all of the background pink. The simplest and often most effective tool for this is the Paint Brushes tool that we have selected. First use the "Controls Tool" to set the proper attributes for the paintbrush, as shown on the left. In the "Tool Controls" tab (not shown), set the "Paper Texture" to none. Then in the "Brush Tip" tab, set all of parameters as shown on the left. In particular, be sure to set "Opacity" to 100, because it can be very frustrating when you are trying to cover all pixels with one color, but your paintbrush is behaving like an air brush. As you get closer to the edge of your foreground avatar image, you may need to set the "Size" parameter smaller, so you can paint one pixel at a time, if needed.
Painting the background would be unbearably frustrating except for the fact that Paint Shop Pro has a neat feature for multiple brush-stroke level "undo's". You can undo and redo one paint stroke at a time, and go many levels back, as long as you haven't saved the file since your mistake. To activate this feature, use the menu "File" -> "Preferences" -> "General Program Preferences...", and set the parameters as shown on the left. In particular, check the box "Update undo buffers for each brush stroke".
Next, simply (but tediously) paint the background hot-pink. Notice that as you get close to the edges of the avatar image, you can use the Zoom Tool to magnify (left mouse-click) or demagnify (right mouse-click) the image. When you are done, the image should look like the one on the left. Then, simply redefine the palette color 0 from hot-pink to black (r,g,b = 0,0,0). To do this, use Menu "Colors" -> "Edit Palette", double-click on the top-left color, and set that color to pure black. Then, the image should look like the image on the right.

Finally, save the image to a .BMP file (not a .gif file like this web page uses). The .BMP file format is necessary because, at this time, Being-there does not know how to load avatar images in .gif format. This is not a big problem, because after the file is compressed into the .avt archive file, the two image formats result in approximately the same size archive file.

"Color Replacer" Technique for Painting the Background

Be sure you understand the section Paint Brush Technique for Painting the Background before reading this section; this only covers variations on the painting technique and not the entire process of painting the background.

The "Color Replacer" tool works on the premise that whenever it sees one color, it is going to replace that with another color. It refines that technique in two important ways:

To use the Color Replacer tool, set the foreground to the "Hot Pink" color as described above in the Paint Brush Technique. Then set the (Paint Shop Pro) background color to the color outside the edge of your avatar - in the background image. To do this, use the "Dropper Tool" and right-click on the background pixels that you want to replace. Then click back to the Color Replacer Tool and begin painting the edges of your image.

Note, that this technique does not work effectively where the color of the image is very close to the color of the background. In those cases, you sometimes must guess at where the edge of the image should be. It also does not work effectively where there is tremendous variability in the background colors. In either of these two cases, it is more efficient to use the "Paint Brush Technique" described above.

Flood Fill Technique for Painting the Background

This technique uses the "Flood Fill" tool to fill all pixels in an area that have the same or similar color with a different color. If you are lucky enough to get a bitmap with a solid background color, then select the Flood Fill tool and set the foreground color to hot-pink, and simply click once anywhere on the background color. You will instantly change the entire background to hot-pink, with pixel-level accuracy. The problem with this technique is that it is rarely of much use if the background has varying colors. This can sometimes be overcome by increasing the "Tolerance" for this tool, but more often it is of no value in this situation.

Save the graphic into your avatar file

By now we have a bitmap file that should be the correct size and format to serve as an avatar. Now we need to put it in an avatar file (*.avt) and configure the avatar.ini file in the avatar file archive to use the bitmap file.

First, re-open the avatar we made at the beginning, my.avt, with WinZip. If this was the default avatar file, you will see one *.bmp file, and another file named "avatar.ini".

Delete the old bitmap from the archive by selecting that file, and hitting the "delete" key or the menu item "Actions" -> "Delete..." When the Delete dialog appears, select "Selected Files" and hit "OK".

Now add the new .bmp file to the archive with the "Add" button.

Now double-click on the "avatar.ini" file in the archive. If this file is not associated with any program, associate it with "notepad.exe". In notepad, you will see a file something like this:
[General]
autogen_angles=1
slab_thickness=20
back_color=16711680
nframes=1
nangles=8
[Bitmaps]
bm1_1=oldfile.bmp
bm2_1=bm2_1.bmp
bm3_1=bm3_1.bmp
bm4_1=bm4_1.bmp
bm5_1=bm5_1.bmp
bm6_1=bm6_1.bmp
bm7_1=bm7_1.bmp
bm8_1=bm8_1.bmp
The only thing that you really need to do here is change "oldfile.bmp" to "my.bmp", or whatever file name you gave to the BMP file you added to the archive. Then save the file, and close it. Winzip will give you a dialog that says: "File C:\windows\temp\avatar.ini has changed since it was extracted. Update archive with this file?. Click the [Yes] button. Then close WinZip. You now have a new avatar file in your Avatars directory! Be sure to test the avatar offline, as described below, before going online in a chat room with the archive file.

More details on the avatar.ini file

This section will describe more details of the parameters in the avatar.ini file:

Making an 8-sided Avatar

You will notice that most of the avatars in the distribution are flat slabs with solid blue back sides. This is true of the avatars you just created, and it is done to save disk space, and because they are so simple to create. These are also valuable because some of the most interesting images are not available to us to be photographed in three dimensions.

However, it is not difficult to create an avatar that looks much more three dimensional. These avatars are composed of photographs or drawings from each of 8 angles (45 degrees apart). Look for avatars in your distribution with the digit "8" in the .avt file name, and you will see that these are composed of 8 discrete bitmaps.

To make your own avatar with 8 bitmaps, make a copy of one of these avatars, and give the copy your own file name, lets say my8.avt. Now open the file with WinZip, and you will see 8 *.BMP files and one avatar.ini file. The avatar.ini file will look something like this:
[General]
autogen_angles=0
slab_thickness=5
back_color=50
nframes=1
nangles=8
[Bitmaps]
bm1_1=oldfile.bmp
bm2_1=bm2_1.bmp
bm3_1=bm3_1.bmp
bm4_1=bm4_1.bmp
bm5_1=bm5_1.bmp
bm6_1=bm6_1.bmp
bm7_1=bm7_1.bmp
bm8_1=bm8_1.bmp
As you can see, this file is essentially identical to the other avatar.ini file we used, except that "autogen_angles" is set to 0. This means that the system should not automatically generate angles, but should find the file names "bm2_1.bmp", etc, in the .avt file archive.

Test the new avatar Offline

If there is something wrong with the avatar file that you created, it may cause your 3D rendering to fail and your program to crash. In the future, we intend to make the program more "bullet-proof" against errors in avatar files, so that the system will always fall back to loading the default avatar. But for now, this is the behavior of the system.

This vulnerability to avatar file errors is a much bigger problem if you are online. Each of the other people in the chat room will receive a copy of your avatar, and they could all crash!

Until we make the software more tolerant of avatar file errors, it is very important that you test your new avatar files offline, that is, before you hit the [Connect] button.

You can look at your new avatar by lauching "Being-there", and moving to the camera in the back of the room. The "camera" is a small prop that is supposed to look like a security camera near the ceiling. It has a small red dot on it, and a picture of a lense. Click on this camera, and you can see yourself from the camera's viewpoint. When you are done looking at your avatar, click on it, and you will go back to seeing the room from your own personal perspective.

Revise and Rename your Avatar File

Suppose you are happy with your avatar, and you want to keep that figure, but you want to make one small change to the graphic. You must know that if you make that change and save it to the same avatar name, then nobody else will receive the updated avatar, but will continue to have the old avatar. this is because the program will only request avatars from other users that it does not have on it's own hard drive, based on the avatar file name. In the future, we will fix that by transmitting a checksum for the avatar file when you login, but for now, this is a limitation.

Therefore, whenever you make any change to your avatar, no matter now small, you must change the avatar name. It doesn't matter what name you choose, though unusual names are more likely to be unused by other people's avatars. This must be done with each revision that has been seen by other people online.



Contact Being-There