Infectors Project Showcase

Project Overview

For the final project for Software & Games Localization course taught by Professor Max Troyer, my team (Shuyu (Chloe) Luo, Bosi (Terrence) Lin and I) localized a javascript game called “Infectors” found on GitHub into Traditional Chinese.

Infectors: How and Why We Chose It?

We had agreed to choose a javascript game where we can implement 24Ways from the very start. We needed a game that is open sourced, completed, not yet localized, with just enough challenges, and most importantly, was approved by our professor. After going through tons of games on GitHub, we finally stumbled upon the Infectors.

Preview of the Infectors

Internationalization

Bosi implemented 24Ways to externalize available strings for localization. Bosi created ZH version of the js files and added a language picker to the game. Bosi talked in detail about his part here in his blog post.

Localization

Shuyu then prepared the strings for translation. One problem we encountered was that Shuyu cannot send the prepared string file to the translator (me, in this case) through e-mail because of the name “infectors”. The e-mail was rejected by the server several times before we realized it could be that the server had thought the file was infected with a virus. We quickly switched to Dropbox as our file transfer tool. Shuyu talked in detail about her part here in her blog post.

Desktop Publishing

There was only one image that needed to be localized, which is the title of the game. Using Photoshop CS6, I was able to duplicate the effect of the original image and change the title into Traditional Chinese. The process of duplicating the effect was quite simple and I did not encounter any problems.

Localized Title

Bitmap Font

One of the biggest problems we didn’t anticipate was the fonts used inside the game. When we implemented the translated strings back into the game, for reasons unknown, the Chinese characters would not show up. After a bit of research and troubleshooting, Bosi found that the font the game uses, is Bitmap Font.

Bitmap Font

Bitmap Font is essentially a kind of font where letters, number, and characters are stored in a picture. For English, there would be no problem since there are only 26 letters, however, Chinese on the other hand has tens of thousands of characters. The solution we came up with was to only use the characters that appeared in the game, which limited the number of characters to around 170.

Next, I searched online for a Bitmap Font generator and found a windows application called BMFont. It seemed fairly easy to use. However, I once again underestimated the problems it could cause.

BitMap Font Generator

First, I had to indicate the font that we want to use for the game. The only Chinese font that worked was SimSun for some reason. Then I adjusted the Export Options to get the effects that we need.

The first few time I tried this, the resulting Chinese came out all wrong. They were Chinese characters, but they were corrupted and did not make any sense. After tweaking it a little bit, finally, I was able to get the characters to show.

BMFont Settings

Another problem I encountered was that instead of just one .png file, the generator generated three .png files. First I tried to implement that into our strings, but obviously, it failed to load.

Failed Attempt
Failed Attempt

After changing the Export Option and adjust the size of the .png file, I finally had just one .png file and one .fnt file.

Non-Executable .fnt File

Last but not least, I couldn’t help but notice that the original .fnt file was executable, while the one I generated was not. After consulting with Google, I found a single command that could change the file into an executable file.

chmod +x file location

Executable .fnt File

Finalization… and One Last Problem

Once the BitMap Font was generated, we had to go through each of the .js files to replace the old font with the new. The game itself uses three different fonts with different font colors, however, when I tried to do the same, the game failed to load.

We ran the game again to make sure that everything is showing up correctly. However, none of us could get to the last level so we couldn’t check whether the last screen appears correctly.

Localized Game Working Properly