Tutorial: Modifying Game Fonts
First off, you are going to need to get a graphics editor. Photoshop works perfectly fine, but you can also use GraphicsGale or Aseprite, which were made with editing pixel graphics in mind.
The first step to expanding your font is making more space for fonts in your images. Luckily, CoilSnake does this for you! Here are some things to keep in mind:
- The main three fonts (fonts 0, 1 and 2) are made up of 16 x 16 pixel tiles
- Font 3 is made up of 8 x 16 pixel tiles
- Font 4 is made up of 8 x 8 pixel tiles
- The normal fonts are made up of 6 rows of 16 characters, making a total of 96 characters
- The credits font doesn't follow this pattern, and we will not be expanding it
- CoilSnake 2.1 will expand the font images to allow for an additional 32 characters in each of the main fonts (0-4)
Okay, so, you're using CoilSnake and your font images all have some extra space on the bottom. Using the information I provided just above, map out where all the tiles are in each of the different images.
This can be done in Photoshop by going to Edit > Preferences > Guides, Grides & Slices
- Under the Grid section, set Gridline Every: to the size that fits your font
- For fonts 0, 1, and 2, that's going to be every 16 pixels
- For fonts 3 and 4, I used every 8 pixels, just remember that font 3 the characters are 16 pixels tall, so two 8 pixel boxes represent a single character
- Set the color to something easy to see. I usually use red
In GraphicsGale, you can do this with the Custom Grid menu.
- For fonts 0, 1, and 2 I use the 16x16 custom grid
- For fonts 3 and 4 I use the 8x8 custom grid
- Remember that font 3 is 8x16, so each character will be 2 8x8 blocks tall, and 1 block wide
Now that you can see where each tile is, edit the tiles with your language's characters. If you plan on using the original 96 characters in EarthBound, simply leave them as they are and draw your new characters in the 32 new font tiles.
You can also edit the entire font if you'd like by filling in all the original characters with the background color and drawing in your own custom font.
The ONLY thing you should remember is that EVERY FONT needs to follow the same pattern. The same position in each of the fonts should all have the same character in them for the sake of consistency.
So... Why do I have to make all the fonts follow the same order?
Not doing so can cause quite a bit of headache, especially because font 0,1, 2 and 3 can be used to display character names, fonts 0 and 1 are going to show item names, and font 4 is going to be used for some UI stuff, mainly headers for some windows in the game. So a lot of these fonts display shared text, and if the order of your characters is different between the fonts you can get some funky results where you aren't expecting them.
There has been a lot of discussion about using portions of the Mr. Saturn font for additional characters. I tried this, and it just didn't work out. Basically I was using the lowercase letters in the Saturn font (because they are identical to the uppercase letters) and re-purposing them for other characters. The problem is, if you go to a Mr. Saturn to sell it an item, it will confirm the item you want to sell using the saturn font. And item names have lowercase letters. So the lowercase letters would all come out as my additional characters and that's ugly.
Additionally, if you have any names for enemies and items that need characters from the Mr. Saturn font, you're out of luck. You cannot use these characters outside of the main game text, so that REALLY limits this option. If after adding 32 new characters you still find you need more space, contact me and we'll try and find a solution for you.
Okay! So you've changed the font! Now you need to update your character widths!
Do this by going into your Fonts folder and opening the font widths file for each of your fonts, such as 0_widths.yml. These files contain the width values for each of the characters in your variable width fonts (Fonts 0, 1, and 2). How do you know your character widths, you ask? Simply look at how wide the character is in pixels and put that value in the corresponding spot in your widths file.
The order in the widths file goes from left to right. The very first tile is usually reserved for the space character (' '), so I would keep that tile blank if your language uses spaces to separate words.
You don't need to worry about adding an extra pixel to your characters to keep them separate, either. EarthBound automatically inserts a single pixel between each character.
- AGAIN, every single font needs to follow the same pattern. If you add a character in one spot on one font, that same character needs to be in the same spot in all your other fonts (except for credits, because that one is different)
- You can replace every single character in the whole font if you need to, allowing you to have up to 128 custom characters for your translation.
Assuming you haven't changed the original 6 rows of your fonts, you can use them normally.
The expanded area in your text can be used by adding the code for each expanded character.
- The codes run from b0 until cf
- The whole font is technically all represented by codes, and the normal font codes run from 50 until af
- A code will always need to be surrounded by square brackets [ ]
For example, if I wanted to type out "Olá!" using my expanded font, I would first need to check which tile in my font the á character is in:
So! The á character is on the last row. It's in the [c0] spot, so to write Olá!, it would be written like this: Ol[c0]!
So, the codes for each of the characters in the entire font, with the rows and columns corresponding to each tile in your image file, would look like this:
50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F
60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F
70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F
80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F
90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F
A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF
B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF
C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF
The easiest way to do this, or at least the way I did, was to write all the translation normally, and then do a search and replace for each of the special characters in my expanded font. So, in my original ccs files I would have written "Olá!", but then I would have done a find and replace and replaced all occurrences of á with [c0] when I was done.