Kaneva Bible - Chapter 8

Alpha Texturing

Welcome to Kaneva Alpha Texturing tutorial. This tutorial is part of the "Kaneva Bible" series I am putting together. In this tutorial we will be covering the use of a texture with an alpha channel to make transparency and 'see-thru' effects in our Kaneva game.

Before we go any further, let's make sure you have all the right programs for the job:

1. Adobe Photoshop 7
2. DDS Exporter plugin for Photoshop (can be downloaded here)
3. 3ds Max 7
4. Kaneva (obviously)

Now, that list is a bit detailed version-wise, as there are many ways to do this using different program combinations, I find the use of Photoshop alpha textures to be the easiest, and after this tutorial and a few textures of your own, you will be able to make alpha textures from scratch and use them in a matter of minutes. Those programs will also be used in the order listed.
Let's get started!

Step 1: Setting alpha in Photoshop

Ok, open Photoshop and select File -> New. A window will appear asking for some values to describe the image.
1. Enter 'alphaFence' for the Name.
2. Enter 256 for the width and height and set them to pixels.
3. Choose 72 for the Resolution, RGB Color for the Mode, and White for the Contents. These should be default anyway.


Figure 1

For this tutorial, we are going to make a fence texture. This is very useful if you have fences in your game that go long distances. Imagine having to model 1,000 fence posts and railings and importing them into Kaneva. It is possible but would take way longer than using a texture of a fence and mapping it around a long box object, which we will get to in a minute.
After you enter the values click OK. Your blank image will appear.

What we want to do here is make a fence. The best way is to draw a post and 1 or 2 railings. This part of the tutorial is mostly based on your imagination, but Figure 2 describes what a simple fence might look like:


Figure 2

Note: After you draw your image in Photoshop, go to Image on the toolbar and select Flatten Image, you'll see why in a minute.

Ok, now we have a simple fence image. It is time to remove the white parts, as this is where we do not want anything to show in the game. You are going to use the Magic Wand tool to do this. The Magic Wand is appropriately named because it is a selection tool that lets you choose parts of an image automatically. We will then invert the selection
1. Choose the Magic Wand selection tool.
2. Hold Shift and click all of the white areas of your image to select them.
3. Choose Select on the toolbar and go to Inverse (Shft + Ctrl + I)
4. Press Ctrl + C to copy the selection.
5. Press Ctrl + V to paste the selection.

When you paste your selection, it will appear as a new layer. I won't go into layers, but all you need to know is that the new layer you pasted is the one we want. We will remove the background in the same way. Go to your Layers panel and drag the 'Background' item into the trash can (Figure 3).


Figure 3

Now you have your image with the background removed. We are now going to set the alpha information.

Note: We could have chosen Transparent as the Contents when we created a new image. However, doing it this way also lets you edit textures that you have made in another program or images taken with a digital camera as well as images made from scratch.

Here is how to set the alpha information:
1. Choose the Magic Wand selection tool.
2. Hold Shift and click all of the now transparent areas of your image to select them.
3. Choose Select on the toolbar and go to Inverse (Shft + Ctrl + I)

Once you have done this, create a new channel called Alpha 1. This channel is created by default as Alpha 1 and must be called that. It also must be the only alpha channel present, or you will have problems exporting the image. Figure 4-1 describes setting the alpha channel, and upon doing so, your image should turn completely black with the fence part outlined.


Figure 4-1


Figure 4-2

So the steps are:
1. Make sure your Color boxes are set to white and black (Figure 4-2). This should happen automatically when you create the alpha channel.
2. Click the New Channel button (Figure 4-1) to create the alpha channel.
3. Choose the Paint Bucket tool and click the image.

When you click the image, the fence part should turn white, which is exactly what we want. In an alpha channel, white areas designate what you will see, and black areas designate what you will see through. You can also use different levels of grays to make gradual transparency effects. White = 100% opaque. Black = 100% see-through.

Ok, we are almost done, I promise. The final step involves flattening the image and saving it as a .DDS file, which I recommend for all textures you will use in Kaneva.

1. Choose Layer from the toolbar -> Flatten Image.
2. Choose File -> Save.
3. When the Save dialogue appears, choose the MapsModels folder, or wherever you are saving the textures for your game in.
4. Choose DDS (*.DDS) from the Format list (this is assuming you have already installed the DDS Exporter plugin for Photoshop, which you can grab at the beginning of this tutorial).
5. Under the Save Options, make sure Alpha Channels is checked.
6. Click Save.

The dialogue should appear for the NVidia DDS export. If you get an error, or the Save button in the exporter is disabled, make sure your alpha channel is called Alpha 1 and that it is the only alpha channel in the channels list. Also remember to flatten your image before trying to save it.

Note: We made the image 256x256 pixels. This is important because .DDS format works with images that are powers of 2 (128x128, 512x512, or even 128x256). To find a power of 2, just multiply 2 by itself for as many times as you think you want the size of your image to be.

You are going to save this image as a DXT5. The DXT5 format allows for alpha channel information. Refer to Figure 5 to export this texture and click Save.


Figure 5

Ok! If it saves you have successfully created your texture with an alpha channel! The next step shows what to do with it in 3ds Max.

On to Step 2 >>>