Getting japanese fonts working with an Adobe AIR game for free

Instructions on how to get Japanese (or any language) fixed-width bitmap fonts working, assuming you have the TTF file and uses UTF-8 encoding.

I am likely going to be releasing a Japanese version of Anodyne in September for Windows (Mac, Linux and iOS if I can compile by then), working with a localization team Kakehashi Games – who have localized many things in the AAA sphere, as well as the indie – they did Superbrothers . Which is quite cool!

Anyways, this is a pretty straightforward task programmatically, there are just a few hiccups. For some reason there is no easily available program that does exactly this, but there are lots of pre-existing tools that you can cobble together.

Anodyne uses the FlxBitmapFont.as class. It is a great bitmap font class that works with fixed-width bitmap fonts as PNGs, and uses a string to map character codes to the actual symbols.

So I was recommended a font that would work, and I set out to find it  – which was easy – I found it in PNG form. Unfortunately, the .png that was provided did not match up with the data of the actual .TTF , so I couldn’t get a character string out of the .png which I would use for the bitmap font class. So that wouldn’t work.

And typing out the string myself is not feasible, because, well…

…yeah.

So the TTF MUST contain character codes, right? I found a nice python program – http://sourceforge.net/projects/fonttools/ – which, once installed has a command-line utility, ttx.py .

If you run

python ttx.py -t cmap font_file.ttf

It produces the file “font_file.ttx” . It’s just an XML file though, and contains all of the character codes in hexadecimal format. Depending on the file there could be a few different character sets in there, but it’s easy enough to cut out the ones you don’t want via inspection and playing with the TTF in a text editor. Once you’ve done that, it’s straightforward to convert the XML file into a UTF-8 string that will be used in your game to map the character codes to symbols in your font. I just wrote this quick python script, which just extracts the character codes from every “<map>” node and writes it out to a file. If you uncomment the “out_s += “\n”” line, you can make it print a certain number of characters per line, which is useful for making a .png that you can read better. However, you will want to comment it out when generating the string you use for mapping characters with FlxBitmapFont.

import sys
f = open(sys.argv[1],”r”)

out_s = “”
ct = 0
for line in f:
    if “<map” in line:
        code = line.split(“\””)[1]
        code = unichr(int(code,16)).encode(“utf-8”)
        out_s += code
        ct += 1
        if ct == 50:
            ct = 0
#            out_s += “\n”
    if “</cmap” in line:
        break
f.close()
f = open(“test.txt”,”w”)
f.write(out_s)
f.close()

Now, we just need to make the actual font picture.

I downloaded and installed the free ImageMagick

convert -background “transparent” -fill “#000″ -pointsize 8 -font misaki_gothic.ttf label:”@test.txt” ~test.png

Assuming the python script spat out “test.txt” , the ‘convert’ program will produce ‘~test.png’ which is a png with 8×8 boxes for each character code in test.txt , in white (#000) color, with a transparent background – which is what is needed for FlxBitmapFont and Anodyne.

Then you’re done. Just copy and paste the string into your game where you can reference it, and you should be good to go! You may need to trip the picture in some image editor.

And…

Summary:

1. Find a free TTF

2. Convert to XML with ttx.py

3. Create PNG with imagemagick, create character string with any script

4. Add to game!

Note: Friend Ethan (who ports a lot of games to Linux and is very good at it!) wrote something with SDL that may do this . I have not tried it, but it could very well be quicker than doing what I’ve outlined: http://t.co/WXHqaZMbk9

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s