This portfolio is based on a project of localizing a JavaScript game called Swap by my teammates Roxy Ma, Michelle Huang and me in the course Website Localization during the 2018 spring term at MIIS. The portfolio is divided into three parts: the brief introduction of the project, the basic workflow of the project, and thoughts from the angle of project management based on the project.

Brief Introduction of the project

Our project is to localize a JavaScript game called Swap with a method called 24 Ways from English into Simplified Chinese. Swap is an on-line tile-based puzzle game. It’s written in Javascript using the HTML 5 canvas for rendering. You control the ball and progress through various tricky and challenging levels to reach your goal. The death count piles up when you reach a new level. The following link can take you to a short 20-second demo of the original game: Demo of the original game. Our goal is to localize all the texts on the web page and add a dynamic language picker that looks natural to the interface.

 

Basic workflow of localizing the game

Our process of localizing the game includes preparation, translation, localizing the victory tiles and adding a language switcher.

Preparation

The first thing we did was to figure out what needs translation. We went through all the levels and identified the texts that needs translation. Below is the interface of the beginning of the game. All the strings circled down below such as “Deaths”, “Level”, “Reset” and “Skip” should be translated. The tips at the bottom like “Use arrows or WASD to move” in Level 1 varies as levels change and we need to make sure every tip is translated.

Finally, if the users successfully go through all the levels and win, they will see “SWAP” at the end, which is something we need to localize in a quite unique way.

For the strings in HTML, we duplicated the index.html file and renamed it to index_zh.html. For the strings in JavaScript, we adopted the method of 24 Ways internationalization. As seen in the code down below, we wrapped the strings “Deaths” and “Level” by adding an underscore and parentheses around them for externalization.

After we wrapped up all the strings, we put them in a Strings.js file in the js folder of the game and it was ready for translation.

A challenge we encountered was we found that the tip strings are in an array. We tried to use 24 ways internationalization to wrap it, but it didn’t work.

So after brainstorming, we came up with a direct and simple solution: we copied the level.js file and then we decided to translate the tips directly in the Chinese level_zh.js file and linked it back to the index_zh.html file.

Translation

Now that all the strings were internationalized, we were ready to translate. For the HTML file, we simply threw the .html file into Memsource to translate. Then, we copied all the translations into the index_zh.html file like this:

For strings in JavaScript, we needed some extra work. First we copied the String.js into a word doc, and then we hid all the unnecessary. And then we saved it as .rtf file and then imported to Memsource to translate. After the translation was done, we put it back in the Strings_zh.js file, and linked it back to the index_zh.html file.

Localizing the victory tiles

At the end of this little game, when the player manages to win all rounds, there is a tile visualization of the English word “SWAP” shown. In order to properly localize this final screen, we need to figure out a way to transform this “SWAP” word into some Chinese characters.

Since the final credit “Swap, by Noah Moroze and MIchael Yang. Thanks for playing!” is shown together with the “SWAP” tiles, they must have been created at the same place, so we went ahead and searched for this line among all js files and found that it’s true. The swap tiles are mapped out using coordinates, 1 equals a grey tile, 0 equals a white tile and -1 place a blue inside the white tile.

Chinese characters are very complicated to be visualized by tiles, we could easily lose the aesthetic sense of the characters by drowning ourselves into the 1 and 0s, so we decided to come up with a simple workflow to visualize the character design first in powerpoint, then convert the design into coordinates and finally copy the coordinates into the js file.

To prove our assumption, we converted our characters into coordinate bundle. And the “Swap” tiles are successfully mapped out at the end of game.

Adding the language picker

After all the translations, it’s time to add the language picker and link it to the pages using HTML and CSS.

First, we created the language selector in both the English and the Chinese HTML pages using the code. And it looks like this on the page. The link worked, but it just didn’t look pretty.

So we inspected the existing codes inside the <body> tag and moved the language <span> tag to the right place and used CSS make the language switcher look natural to the webpage. So we added some styles to the language picker. We set the font family to match the font of all the other texts. We found the color of the grey tiles that appear on the start page in a .js file and set the background color to the same color. To make the picker look like a button, we adjusted the border radius. Then, we removed the underline of the text in the language picker and changed the font color to white. Our language picker now looks like this and everything was well translated.

We eventually successfully localized the game into three languages. The final version can be seen here: Final version of the localized game.

 

Thoughts from the perspective of project management

Even though all of our team members play the roles of localization engineers and translators during the project and no project management was involved, project management in this case may involve complicated steps and is never easy. Project managers who is going to manage similar JavaScript games should take the following factors into account:

• When a game is being localized, text truncation will be a major issue if the text boxes are not expandable. Engineers may want the translators to make some tweaks and have a shorter version of the translations, which requires project managers to communicate with the translators about the need. This problem didn’t happen in our project since each piece of the dialogues was not too long. But one of our challenges was that when throwing HTML files to Memsource, translators had to manually inserted the tags into the right place. In real world, this can cause so much trouble since a missing tag may mess up the file. Project managers are supposed to make sure either engineers filter the tags out before handing over to translators or MQA check the tags carefully.

• Therefore, localization testing is a major step that project management should be involved in as much as possible. Many potential issues will show up in testing and project managers need to in which step things goes wrong and return to people responsible for that step for modification.
• Last but not least, for the 24 Ways internationalization method, because the translator was working on the .rtf file and it was the engineer that was responsible for copying every translated string into JavaScript, there was a huge possibility of pasting a wrong for an engineer who doesn’t know the language. So in this project, a strict LQA process is highly required and the project manager should closely monitor the process.