1. We have added a Gift Upgrades feature that allows you to gift an account upgrade to another member, just in time for the holiday season. You can see the gift option when going to the Account Upgrades screen, or on any user profile screen.
    Dismiss Notice

how to fix your broken gamefont.tga

Discussion in 'Civ4 - Modding Tutorials & Reference' started by davidlallen, Jun 15, 2008.

  1. davidlallen

    davidlallen Deity

    Joined:
    Apr 28, 2008
    Messages:
    4,743
    Location:
    California
    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.
     
  2. deanej

    deanej Deity

    Joined:
    Apr 8, 2006
    Messages:
    4,859
    Location:
    New York State
  3. davidlallen

    davidlallen Deity

    Joined:
    Apr 28, 2008
    Messages:
    4,743
    Location:
    California
    I am not an expert in photoshop elements. But I was using the selection brush, with no antialiasing, a hard edge, 100% opacity, and I still got "dark grey" in my alpha channel on the borders. So I recommend putting a hard black into the alpha borders as a final step, just to make sure.
     
  4. CyberChrist

    CyberChrist You caught my attention

    Joined:
    Dec 6, 2001
    Messages:
    1,424
    Location:
    The Matrix
    Just to be sure then you need to turn off(uncheck) AntiAliasing for the selection tool BEFORE you make any selections.
     
  5. deanej

    deanej Deity

    Joined:
    Apr 8, 2006
    Messages:
    4,859
    Location:
    New York State
  6. CyberChrist

    CyberChrist You caught my attention

    Joined:
    Dec 6, 2001
    Messages:
    1,424
    Location:
    The Matrix
    Once you unchecked an option (ie. AntiAliasing for Magic Wand) then it should stay unchecked unless you check it again. Not sure if any PlugIns can mess with this though, but I am not aware of any that does.
     
  7. deanej

    deanej Deity

    Joined:
    Apr 8, 2006
    Messages:
    4,859
    Location:
    New York State
    What about for other tools? I don't want ANY AntiAliasing of any kind, not just none on magic wand.
     
  8. The_Triturador

    The_Triturador Warlord

    Joined:
    Apr 2, 2008
    Messages:
    132
    Location:
    Peru
    :goodjob: Excellent!! I've been dealing with my broken TGAs and It was the alpha channel on the magneta border :crazyeye: . Thank you man ... you really helped me. :goodjob:
     
  9. Mailbox

    Mailbox King

    Joined:
    Oct 6, 2007
    Messages:
    873
    I've been trying to edit a gamefont.tga in GIMP but it doesn't seem to give me the alpha layer. I'm not sure what I'm doing wrong but I know that if I just try and make the simple edit the file size shrinks by 600kb so there is something being lost with the save.

    Anyone with GIMP experience know what's going wrong?
     
  10. smeagolheart

    smeagolheart Monarch

    Joined:
    Sep 4, 2007
    Messages:
    924
    Location:
    Phoenix, AZ
    Hey anyone have a guide on getting this going with the newer versions of photoshop? As the tutorial states it doesn't work on newer versions. I can select everything as he's described but when you go to Selection paste selection as per step 5 there no longer any buttons you can select at the same time?

    This alpha layer thing is killing me (and plenty of others I think)
     
  11. Jet

    Jet No, no, please. Please.

    Joined:
    Mar 16, 2006
    Messages:
    2,364
    For anyone's information, here's how I did it in GIMP 2.2.17. Edited existing icons from scratch, not added new icons or fixed a broken file. I think most of this will be obvious to people skilled with graphics programs.

    1. Open the gamefonts TGA file.
    2. Zoom in far enough that each pixel looks like a distinct square.
    3. GIMP displays transparent pixels as transparent, but if you select the eyedropper and click somewhere on the image it will pop up the Color Picker window, which shows the alpha value as well as the color values. Use the eyedropper to sample pixels around the icon you want to edit, to see exactly where it ends and the transparent-magenta border begins.
    4. Select that rectangle. Unlike what was mentioned above for Photoshop magic wand selection, GIMP rectangle selection doesn't have antialiasing (or at least by default, it didn't, for me.)
    5. Use the eyedropper again to double check that the rectangle is correct.
    6. As long as you leave the selection up, you're prevented from changing anything outside the selection, so now you can edit the icon safely.
    6a. Select the eraser tool and rub it all over the selection. Be sure to cover the entire selected area, to make sure you get any stray transparent pixels.
    6b. Now you can do any other editing that doesn't require you to re-select. Such as use the pencil tool. Or you can paste the graphic in from somewhere else. Pasting will blow away the selection, but zoomed in this far, you should be able to eyeball it to see whether or not what you're pasting in overwrites anything outside the selection.
    7. When you save you get a Save as TGA dialog box with two options, RLE compression and Origin at bottom left. Check Origin at bottom left but do not check RLE compression.

    I also tried this in Paint.NET 3.36 but Paint.NET always saves fully transparent pixels as black transparent rather than magenta or cyan transparent like we need. (The Paint.NET developers said on their support forum that they don't want to change it.)
     
  12. Omathaar

    Omathaar Warlord

    Joined:
    Jun 30, 2008
    Messages:
    133
    That was just perfect, Jet! Just exactly what I needed, and it worked like a charm. I'd never have figured this out otherwise :p Thanks tons for taking the effort to post this! So glad that GIMP works after all.
     
  13. Tholish

    Tholish Emperor

    Joined:
    Jul 5, 2002
    Messages:
    1,344
    Location:
    Japan
    Res/Fonts, the files GameFont.tga and GameFont75.tga, are of course a pain in the neck. When I first did my futuremod I spent a week doing a really bad one by just cutting and pasting from other tga files with gimp and erasing. All this was freehand, as gimp doesn't give guidelines of any sort. I also have PaintShopPro9. It doesn't save tga correctly, but it shows you the lines, the boundaries where you can have your icons in. However, any modification done there won't save visibly. Further, cutting other people's tga files in gimp gets you these objects with big invisible borders that seem to distort things, and often put scraps out of bounds as visible in PaintShop.

    Recently (the last 24 hours) I developed a way to do a functional tga with gimp. Here's what I did. I selected an existing GameFont.tga with the same number of religions and corporations as mine, many of them shared. In this case it was the one from the Extra mod. Next, I put that one and the "donor" tga files in a folder with it for ease of browsing. Then I opened up both Extra tga at 800% zoom and the donor tga at 1600% zoom. I minimized the extra tga and took a screenshot of the donor tga with the PrintScreen button on my keyboard. Then, went to edit, paste as new, which got me the screenshot as a new picture in gimp. I cut the desired icon out of THAT and again pasted as new to get a squarish picture. I selected image, scale. For GameFont I scaled to 18 by 18 and for GameFont75 to 14 by 14, just to be safe. Then I picked select all, copy, closed both untitled pictures, minimized the donor tga, and did a PasteInto the copy of the extra mod tga. Then I dragged the icon to the desired position, on top of an existing icon, mostly obsuring it, but making sure to stay inside the lines of the older icon a little. I clicked off on a blank area. Rinse, wash reapeat. In this case 36 times. Tested and it worked. You can't really tell at this scale that the resolution has been compromised.

    When I was struggling to get PaintShop to work, I did a search for advice on this, and saw much more complicated schemes. While tedious, this one is simple and effective.
     
  14. Midnight-Blue766

    Midnight-Blue766 The filidh that cam frae Skye

    Joined:
    Sep 24, 2007
    Messages:
    3,452
    Location:
    Northern Equestria
    How do I fix the broken GameFont file with Adobe Photoshop 4?
     
  15. Mr Blue

    Mr Blue Chieftain

    Joined:
    Sep 11, 2009
    Messages:
    35
    Location:
    the pits of hell
    I'm not sure how to fix it using Photoshop 4 but if you load them up I can take a look at them.
     
  16. WilliamOfOrange

    WilliamOfOrange King

    Joined:
    Jul 17, 2003
    Messages:
    998
    Location:
    Lincolnshire, UK
    Any advice for Photoshop 7? I don't have any alpha layers/channels when I open it up. I tried something in Microsoft Direct X Texture Tool to get the magenta and then save in Photoshop, but it's not working. Any help would be hugely appreciated. Thanks.
     
  17. MephistoLV

    MephistoLV Chieftain

    Joined:
    Nov 4, 2010
    Messages:
    12
    Make sure you are running Photoshop 7.0.1 patch. It fixes an issue that was preventing the alpha chanel from loading correctly.
     
  18. Terradive

    Terradive Warlord

    Joined:
    Jun 4, 2009
    Messages:
    186
    Ok so I really don't know alot about graphics.

    I think the gamefont.tga is messed up because the symbols are corporation symbols on the city screen but in civpedia they are fine.

    I've got the file opened the DTXBMP and GIMP.

    Everything looks fine on the pictures portion so I'm guessing the alpha channel is messed up.

    HELP?
     
  19. The_J

    The_J Say No 2 Net Validations Retired Moderator Supporter

    Joined:
    Oct 22, 2008
    Messages:
    32,872
    Location:
    DE/NL/FR
    It might be the easiest thing to redo the gamefonts. Just use this program, then redoing them is a piece of cake ;).
     
  20. Terradive

    Terradive Warlord

    Joined:
    Jun 4, 2009
    Messages:
    186
    Thank you J.
     

Share This Page