 |
 How to create tiles with Adobe Photoshop?
This article will show you how to create and edit TGA tile files, using Adobe Photoshop version 6.0.
Other versions of Photoshop may have small differences, but the idea is the same.
We'll start with a simple black and white tile with alpha mask, like most of the tiles used for Z80 style.
Create a new image of the desired size and RGB Color mode.
Fill it with pure black (000000) and paint with pure white (FFFFFF).
You must use the pencil, not the brush!
Make sure you set the opacity to 100%,
tolerance to 0 and no anti-aliased.
The idea is to only work with to colors (pure black and pure white) and avoid having
any nuances between. You can always check this with the magic wand tool,
with tolerance to 0, no anti-aliased and no contiguous. It will help you select all pixels
with the same color.
The contiguous option is also usefull for the fill can tool.
If set, only neighbour pixels with the same color will be filled. If not, all the pixels with the same color from the whole image
will be affected.
Paint a simple big white dot, in the middle of the tile.
Now, we will create an alpha channel that matches what we painted in the RGB channels.
Add an alpha channel for the image, by clicking where the red dart points.
A simple way is to select with the magic wand all the white pixels from the RGB channels, as explained before,
then focus the alpha channel and fill the selection with white (or simply delete it with
a white color).
Now you should have the same image both in rgb and alpha channels.
This means that your white dot will be visible in game and it's black background will be ignored.
Save the file as TGA 32 bits, with the specific DizzyAGE naming convention, in the game's tiles folder.
Test it in the DizzyAGE editor.
You should see the white dot and no black background,
unless you use the opaque shader.
This is how most of the DizzyAGE tiles are build, so they can be used with any color from the editor.
Now let's improve out tile with a small black border.
There are more ways to do it and I will present one of them.
First, fill all the black background with pure read (FF0000).
Paint a thin black contour arround the white dot, pixel by pixel.
Of course this can be done with a few selection and stroke tricks too.
Now reconstruct the alpha channel. Select alpha in the channels dialog.
Select all the image (ctrl+a) and delete it with black color.
In the RGB channels, select with the magic wand all the red pixels,
invert the selection (ctrl+shift+i) and, in the alpha channel,
fill it with white.
This will include both the white dot and the black border,
leaving only the red background to be masked in the game.
Save it again and test it in the editor.
Having a black border arround the image can sometimes be very usefull,
especially for overlapping elements, like items, or characters.
See how the tree leafs tile takes advantage of this technique.
You can imagine how it would look like, to place lots of such leafs
one over another, if all but the white pixels would be transparent.
However, considering that most of the background in Dizzy games is black,
this will be usefull only for overlapping elements.
These techinques explained here, are usefull for the classic Z80 graphic style.
Of course, your game can go for a more colorful approach and even use more levels of transparency.
How to create tiles with The Gimp?
The Gimp is a free graphic editor, ported from Linux.
Editing with The Gimp is very similar to any other graphic editor.
Read the above article about Adobe Photoshop. The techniques explained there can be used in Gimp too.
However, there are a few differences in the interface.
For example, some people may consider it a real challenge, to work with alpha channels in Gimp.
I myself can be counted among them, so I can't help you too much with it.
I think it is possible, see the Transparence option in the Layers pulldown menu.
If you reached the end of your patience, with it, you can still use the Gimp to edit two distinct
images for RGB and ALPHA and save them as 24bit uncompressed BMP files.
Then use the TgaWorks tool to "implode" them into a nice working TGA file.
See the next chapter for details.
When you save an image, don't forget that DizzyAGE works with uncompressed TGA files.
How to create tiles with Windows Paint?
If you don't have a better graphic editor, you can still torture yourself with the Windows Paint.
The problem with this editor (and a few others) is that it can't edit the alpha channel of the images.
However it is still possible to paint two uncompressed BMP images, one with the RGB (24bits) and the other
with the alpha, also 24bits, but black and white.
These two images you can "implode" together using the TgaWorks tool from the DizzyAGE devtools.
Of course, these two images must be of the same width and height.
As I said, the ALPHA image is also a 24bit BMP, but it's content is only black and white.
In fact, it can have grey tones, if you need more levels of transparency.
You can also use the TgaWorks to "explode" a TGA into two BMP images,
edit them and then "implode" them back into TGA. See the tool's help for each operation.
The interface of Windows Paint is limited enought, so I will let you deal with it, as you feel like.
How to auto-build alpha for tiles?
You can quickly build the alpha channel for a tile, with TgaWorks,
based on a specified color in the RGB channels.
For example, if you painted the tile's background in plain red (FF0000), blue (0000FF), or other unique color,
give it to the tool, and it will generate an alpha mask for you, masking out this color.
This is also usefull when working with editors that can't edit the alpha channel.
|
|
