As a final project for the Fall 2018 semester at the Middlebury Institute of International Studies, two of my colleagues and I localized a JavaScript version of Pacman from English into three different languages (Arabic, French, and German). We leveraged the skills and methods taught to us throughout the semester to complete this project in a timely fashion. Here are the results:
The process of localizing a game or application that runs on JavaScript is a fairly straightforward, if somewhat tedious, process, but please allow me to walk through it step by step.
My colleagues and I utilized the “24 ways” method which involves three distinct JavaScript files being created. The first file is called “24Ways.js”:
Very simple and concise. It essentially checks to see if a translated version of a string is available, and, if it is, replaces the source text (ST) string with the target text (TT) string during run-time. It is the crux of this method, but, ironically, requires the least amount of maintenance among the files used for this method.
The next part required the majority of the work needed to bring the project to completion. In this step, we gathered all of the strings in the JavaScript files that players of the game will encounter during normal gameplay. We copied the strings into the simply named “Strings.js”.
This array of strings is passed to the “_” function in the “24Ways.js” file so they can be translated. They are divided into two sets (purple and orange), and the rightmost set (orange) needed to be translated. Normally, the text in this file would be copied into a word document or .txt file, but since the scope of the project was small, we manually translated the orange strings into our three languages. But to translate the strings using the normal method, after copying the strings to a text file or word document, all the characters other than the strings to be translated would be toggled to “hidden”. Then, when the document is exported to a translation management tool (e.g. Trados Studio, Memsource, etc.), the text is directly translated, and everything (including the hidden characters) can be copied and pasted back into a JavaScript file.
With the “Strings.js” file in English, we added the target language copies to the game, “Strings_DE.js”, “Strings_FR.js”, and “Strings_AR.js”. (The source and target text versions of these files were the second and third of the three distinct JavaScript files mentioned earlier.)
With our 24Ways and Strings files in place, it was simply a matter of calling the “_” function for every string in the JavaScript files that players of the game would encounter. (e.g. _(“example text”) )
In many cases, this process required splitting up strings that were written in HTML code that ran during runtime, as was the case with the screenshot above.
The only remaining text requiring translation, then, was anything in the main HTML file “index.html”. Thus we translated the file and made target language copies. (“index_DE.html”, index_FR.html”, “index_AR.html”) So when a player launches the any of the translated HTML files, the game is entirely localized into the language of the “index” HTML file they chose.
At the end of this process, for the sake of usability and efficiency, we added a language selector to the game, so that players can freely switch between languages during runtime. It should be noted, here, that we also made some minor changes to the primary CSS file to accommodate some issues with the target languages. This is a common problem when localizing into foreign languages, but simple to fix.
Ultimately, this entire process was simple and straightforward, but it consolidated the skills we learned in our localization courses and put them to the test. Here is the link to the original game (this game does not belong to me):
And here are some screenshots of our work:
And, lastly, here is a link that you can copy and paste into a browser for the downloadable version of the localized game on Google Drive:
https://drive.google.com/open?id=1XK5a_GmkzOmOBhNi7yUM8fo-82dtDl6_