Over the course of this semester we had the opportunity to imagine website localization through various perspectives: as a project manager within a company, a program manager within an agency, a localization engineer within an agency, and as a translator. Needless to say, they all posed their unique challenges and required critical thinking skills.

In week seven we were introduced to internationalization (i18n). As we learned in class, during software development, i18n is the phase used to determine if a software application can support multiple languages. In order to achieve this, all hard-coded user-facing strings must be removed from within the program code. From there, these strings will be moved to an easily-translatable file (string translation).

The assignment during this week required the implementation of “24 Ways” to internationalize a game called “Bunny Hunt.” This by far was the most challenging assignment of the semester. As such, I decided to use the final project to further explore game internationalization.

Given the complications that can occur when pulling strings, my partner and I agreed to find a JavaScript game that did not an overwhelming amount of strings. We found a simple game on http://www.jsmadeeasy.com/ and would translate it into Chinese. The next step would be implementing the 24 Ways i18n method:

  1. Add the internationalization function and save it as 24Ways.js
  2. Add the JS file name to our HTML file
  3. Externalize strings (or wrapping the strings)
  4. Create strings file
  5. Translate strings

As there are many different steps within this process, I will highlight the issues we encountered and how we resolved them.

1) Adding the internationalization function and the JS file name to our HTML file

Following step one, we created a 24Ways.js file. We also created a Strings_zh-cn.js file for our Chinese translations. Prior to preparing the strings for translation, we needed to add the JS files to our HTML file for the Chinese version of the game.  Here we ran into our first issue.

The HTML file could not find our JS files because we directed it to the wrong files. Specifically, we forgot to put a backslash after the periods in “src=”..js/” and “src=”..lang/” and thus was looking for files in the “zh_cn” folder and not the “js” and “lang” files. Once we added the backslash, the issue was resolved.

2) Externalizing Strings

During this stage we wanted to ensure that the way we wrapped the strings was correctly done, hence the “~~~” before the text. Here, we ran into an issue regarding how we wrapped the strings.

When wrapping segment 33, we left the original single quote, but that cause the string not to render properly in the game. Upon removing the single quote, the “~~~” appeared in the game.

Here is what the correct string formatting looked like in our strings_zh-cn.js file. The single quote has been removed.

3) Issues with the original game files

When we originally opened the original game files in our open source code editor – Brackets – we noticed there wasn’t a game.js file. The JavaScript for the game was coded into the HTML (segment 8).

In order to avoid confusion, we determined to move the <script> portion found in the HTML and create a game.js file.

4) Alternate solution to 24 Ways

The issues we encountered while implementing 24 Ways took us several hours to figure out. At one point, we contemplated abandoning it all together and using an alternate solution. Specifically, given that the game only has a few strings, we could make objects for the strings and pass the objects in the JS through the i18 variable. See below.

This proved to work, but we realized this isn’t a feasible solution when internationalizing a game with a vast number of strings.

Final Thoughts

This project proved to be as challenging as the original assignment involving JavaScript internationalization. However, the opportunity to redo and go through the different steps of 24 Ways helped refine my own understanding of the issues that face software developers when internationalizing. Projects like these are great learning experiences and will minimize future frustrations encountered in JavaScript game internationalization.