davidlallen
Deity
Editing gamefont.tga is a real challenge for many people. This post will explain why your edit broke the file, and how you can fix it. Thank you to several people, including Refar, xienwolf, deanej and CyberChrist, for getting me on the path to illumination.
Scope
In many cases you only want to change the graphics; you don't want to change the number of graphics. For example, you want some different religion icons. This post does not describe how to change the number of graphics.
I have used photoshop elements 3. I am pretty sure the same technique works with newer versions. I have tried photoshop 7, and I do not quite understand how it handles transparency. So my technique does not work for photoshop 7, but I am sure a photoshop expert could add information on how to do it.
You may want to see this older thread. But it requires making notes and counting pixels. It will help find "obvious" problems, but if you miss one pixel which is "dark grey" instead of pure black in the alpha channel, your file will still be broken.
Symptoms
You edit the gamefont.tga file. Then, either the game crashes, or in-game text displays strangely, or the city bar icons are displayed incorrectly. For example, when you add a religion to a city, the city bar may display using the aluminum icon or some other wrong icon. One other poster commented that his missionaries were spreading whales.
What is wrong
When the game reads your gamefont.tga, it splits up the file into icons of different sizes, according to some markers which are in the file. If you edit the file and you aren't aware of the exact marker, you can damage the markers so the game won't find them. Then when the game displays the icons, they aren't the ones you expect. For example, you may damage a separator between two horizontally adjacent icons. Then the game will count these as a single double width icon, and all icons after that in the file will be "off by one".
There are two types of markers in the file. If you open the original file and zoom in a few times, you will see the magenta borders around the icons. Also, each icon has a single pixel cyan colored spot on the right edge, near the bottom. Both of these must be maintained exactly.
The important point most people miss is that the magenta border must be drawn correctly on the *alpha channel* as well. If the border is transparent, even a tiny bit, then the game will not find it. Many drawing tools do not make it obvious when a pixel is "a little bit" transparent. It is awfully hard to see even in a greyscale display of the alpha channel. For example, using DXTBMP, the border must be completely black. If it is "really dark grey", the file will still be broken.
Very often when you edit the alpha channel, you use a brush which is greyscale. For example, a 3x3 pixel brush may actually have some effect in a 5x5 range, adding some very dark grey. Even when you use a "hard edge" pencil, this effect may occur. Antialiasing is a similar technique which can introduce the same effect.
How to fix it
This is a simple technique for removing stray alpha values from your border. Once you understand the trick, you can probably apply it in many different ways.
In photoshop elements 3, you can combine selections in several ways, such as addition, subtraction or intersection. What we want to do is create pure black on the alpha channel on the borders.
1. Select the magic wand tool and make sure its options are set like this. Tolerance: zero. Antialiasing: unchecked. Contiguous: unchecked.
2. Click on one of the magenta border pixels. This will result in highlighting a large portion of the file, including all the borders between the icons. The highlighted portion is surrounded by an animation that looks like "crawling ants".
3. Zoom in and shift-click on one of the cyan border pixels. This is a single pixel on the right edge, near the bottom, of each icon. This will add all the cyan border pixels to the selection.
4. Inspect what you have selected. If you see any gaps in the gridwork between the icons, it means you have changed the color by accident. Unselect all and use the pencil tool to put back exactly the correct color. Then redo steps 2-3 to make sure you have the right grid.
5. In the layer menu, choose "Save selection". This brings up a dialog with a dropdown for the selection name, and a set of radio buttons. In the dropdown, choose "Alpha 1". Now the radio buttons will become active with "replace selection" chosen. DO NOT HIT OK YET!
6. Choose the "subtract from selection" radio button. Now hit OK. This takes your hard edged selection of the gridwork, and ensures that all of its pixels have zero transparency.
7. Making sure that you are not overwriting any original files, save your gamefont.tga file.
Now it should work!
Suggestions for creating artwork
There is no one "right way" for creating the artwork to go into gamefont.tga. I find it helpful to create each icon in a separate file which is exactly 21 pixels wide by 20 pixels tall, with a solid black background. This makes it easier to cut and paste into gamefonts.tga. In case I want to go back later and fix something, I can edit the individual icon file and then paste it again. If you also need to edit gamefont_75.tga, produce a second set of files which are exactly 16x16 pixels.
I have still not worked out the best way to fill in the alpha channel. I use the selection brush while editing gamefont.tga. This gives me some anti-aliasing problems, but if I fix the alpha as described above, it seems OK. Others have suggested creating the alpha channel in the small size original files, but so far I have not been able to figure out how to paste the alpha channel using photoshop elements 3. Maybe there is additional information later in this thread.
Hope it helped, please add any additional information to this thread. If you have questions, please start a new thread in the main forum to keep the tutorial threads clean.
Scope
In many cases you only want to change the graphics; you don't want to change the number of graphics. For example, you want some different religion icons. This post does not describe how to change the number of graphics.
I have used photoshop elements 3. I am pretty sure the same technique works with newer versions. I have tried photoshop 7, and I do not quite understand how it handles transparency. So my technique does not work for photoshop 7, but I am sure a photoshop expert could add information on how to do it.
You may want to see this older thread. But it requires making notes and counting pixels. It will help find "obvious" problems, but if you miss one pixel which is "dark grey" instead of pure black in the alpha channel, your file will still be broken.
Symptoms
You edit the gamefont.tga file. Then, either the game crashes, or in-game text displays strangely, or the city bar icons are displayed incorrectly. For example, when you add a religion to a city, the city bar may display using the aluminum icon or some other wrong icon. One other poster commented that his missionaries were spreading whales.
What is wrong
When the game reads your gamefont.tga, it splits up the file into icons of different sizes, according to some markers which are in the file. If you edit the file and you aren't aware of the exact marker, you can damage the markers so the game won't find them. Then when the game displays the icons, they aren't the ones you expect. For example, you may damage a separator between two horizontally adjacent icons. Then the game will count these as a single double width icon, and all icons after that in the file will be "off by one".
There are two types of markers in the file. If you open the original file and zoom in a few times, you will see the magenta borders around the icons. Also, each icon has a single pixel cyan colored spot on the right edge, near the bottom. Both of these must be maintained exactly.
The important point most people miss is that the magenta border must be drawn correctly on the *alpha channel* as well. If the border is transparent, even a tiny bit, then the game will not find it. Many drawing tools do not make it obvious when a pixel is "a little bit" transparent. It is awfully hard to see even in a greyscale display of the alpha channel. For example, using DXTBMP, the border must be completely black. If it is "really dark grey", the file will still be broken.
Very often when you edit the alpha channel, you use a brush which is greyscale. For example, a 3x3 pixel brush may actually have some effect in a 5x5 range, adding some very dark grey. Even when you use a "hard edge" pencil, this effect may occur. Antialiasing is a similar technique which can introduce the same effect.
How to fix it
This is a simple technique for removing stray alpha values from your border. Once you understand the trick, you can probably apply it in many different ways.
In photoshop elements 3, you can combine selections in several ways, such as addition, subtraction or intersection. What we want to do is create pure black on the alpha channel on the borders.
1. Select the magic wand tool and make sure its options are set like this. Tolerance: zero. Antialiasing: unchecked. Contiguous: unchecked.
2. Click on one of the magenta border pixels. This will result in highlighting a large portion of the file, including all the borders between the icons. The highlighted portion is surrounded by an animation that looks like "crawling ants".
3. Zoom in and shift-click on one of the cyan border pixels. This is a single pixel on the right edge, near the bottom, of each icon. This will add all the cyan border pixels to the selection.
4. Inspect what you have selected. If you see any gaps in the gridwork between the icons, it means you have changed the color by accident. Unselect all and use the pencil tool to put back exactly the correct color. Then redo steps 2-3 to make sure you have the right grid.
5. In the layer menu, choose "Save selection". This brings up a dialog with a dropdown for the selection name, and a set of radio buttons. In the dropdown, choose "Alpha 1". Now the radio buttons will become active with "replace selection" chosen. DO NOT HIT OK YET!
6. Choose the "subtract from selection" radio button. Now hit OK. This takes your hard edged selection of the gridwork, and ensures that all of its pixels have zero transparency.
7. Making sure that you are not overwriting any original files, save your gamefont.tga file.
Now it should work!
Suggestions for creating artwork
There is no one "right way" for creating the artwork to go into gamefont.tga. I find it helpful to create each icon in a separate file which is exactly 21 pixels wide by 20 pixels tall, with a solid black background. This makes it easier to cut and paste into gamefonts.tga. In case I want to go back later and fix something, I can edit the individual icon file and then paste it again. If you also need to edit gamefont_75.tga, produce a second set of files which are exactly 16x16 pixels.
I have still not worked out the best way to fill in the alpha channel. I use the selection brush while editing gamefont.tga. This gives me some anti-aliasing problems, but if I fix the alpha as described above, it seems OK. Others have suggested creating the alpha channel in the small size original files, but so far I have not been able to figure out how to paste the alpha channel using photoshop elements 3. Maybe there is additional information later in this thread.
Hope it helped, please add any additional information to this thread. If you have questions, please start a new thread in the main forum to keep the tutorial threads clean.
Excellent!! I've been dealing with my broken TGAs and It was the alpha channel on the magneta border 
. Thank you man ... you really helped me. 
Thanks tons for taking the effort to post this! So glad that GIMP works after all.
.
