Home » Portfolio » Localizing Defectors - The Engineering Part

Localizing Defectors - The Engineering Part

Project Overview

For the final project for Software & Game Localization course by Professor Max Troyer, my team (Chloe (Shuyu) Luo, Jenny Lowe and I) localized a web-based javascript game “Infector” into Traditional Chinese.

As the engineer of the team, I was responsible for internationalizing the game for localization purpose. I used a pre-built JavaScript approach called 24Ways to externalize all available strings in the game. The approach was implemented by adding an existing JavaScript function in a .js file name 24Ways.js (Pic 1). This function enables the engineer to externalize all the strings embedded in JavaScript by simply using “_(string)”, as is shown in Pic 2.

 

screen-shot-2016-12-15-at-12-42-00

Pic 1

screen-shot-2016-12-15-at-12-50-07

Pic 2

Another component for 24Ways approach is the Strings.js file, which is essentially a JavaScript file that stores all the externalized strings from .js files in order for the function to recognize original strings and apply their corresponding translations to the game at runtime. When the Strings.js file was ready with all strings necessary, its content was replicated in a word document for further processing. Other elements belonging to the category of strings were hidden in the word document to prepare the strings for translation before sending out for translation.

screen-shot-2016-12-15-at-13-07-15
Pic 3

Another process of the effort was creating ZH version of js files which contain strings to be translated. Their paths were marked in html files to load correct js files. 

The last part of the internationalization process was to add a simple drop-down language picker in the game. This was achieved by adding <select> and <option> tags to both versions of html files, with the corresponding <option> tags being in the first line.

lang_picker_1

lang_picker_2

Problems Encountered:

Internationalization was followed by string translation. I was in charge of applying the targeted translation to its corresponding Strings.js file after receiving the targeted string in return.

Since the Strings.js seemed to be working well in the pseudo-localization phase when I added an “_” in front of duplicated (original) string. However, it turned out that all the targeted strings failed to display in the localized version of the game.

I initially attempted to apply a different font to the game by modifying the css file, but to no avail. Perplexed as to why it wouldn’t work, I consulted our instructor for advice on behalf of my team. I was told that the game used a type of font named “bitmap font”, which works in a different way than regular fonts. Usually consists of two files, a .fnt file and a png file, a bitmap font is essentially a font system which relies on the executable .fnt file to select characters to be displayed in the application from a corresponding .png chart.

We were left with 3 choices for this project. One is to find a way to convert text strings into bitmap font, the other being to make the game support regular text font. The last resort was to start all over with a new game with the similar structure. Since the second option was unlikely due to the looming deadline and its complexity, Jenny and I worked on the first option while Shuyu (Chloe) focused on searching for another feasible project. After hours of trial and error, Jenny managed to use a windows-based application to create bitmap font components for targeted strings required in the application.

 

Lessons Learned

Throughout this project, I acquired valuable lessons in software and games localization.

  1. Follow best practices at all times. Abiding by best practices in the industry will save you tremendous amount of time in troubleshooting afterwards, and even restarting the whole project. In my case, it is always ideal to test the externalization first to make sure the 24ways approach works properly before proceeding.
  2. Never assume. One is tempted to assume he/she knows what they have previously done, and then be surprised. I assumed this project uses regular CSS font, like many other JavaScript games I’ve come across. But the bitmap font challenge that my team faced was something that were utterly strange to us.
  3. Be capable of quick research and fast learning. There is a limit to our knowledge while problems and issues that we may encounter are numerous. Ignorant of the concept of bitmap font, my team researched it in great length before finally resolving the issue in the game. It wouldn’t have been achieve without this ability.

 

Sites DOT MIISThe Middlebury Institute site network.