Introduction
This article will show you how I localized the JS game “Raven” from American English to Simplified Chinese and Mexican Spanish with my teammate, Siying Guo. We decided to localize this game because first, we are game lovers; second, Siying and I had an experience of localizing projects that were related to games (click here if you’re interested in my previous projects). So, we chose to localize this game because working on a project we like significantly stimulated our passion for increasing work efficiency. Besides, we were interested in exploring the possibilities of using the 24 Ways JS file to localize the game into the target languages.
“Raven” is a 2D top-down action-puzzle game made by Elliot Nelson. Players can use a mouse or touchpad to look around, and W/A/S/D or the arrow keys to move. Watch out, don’t turn your back to enemies! Here is a game demo in the source language to help you better understand how to play “Raven.”
Working Process
STEP 1: Organizing Source Package
Organizing source files we received from a client is an essential step in localization (whether game localization, software localization, or others). Before we started localizing the game, we created folders for each stage of the localization process and made the backups.
STEP 2: Wrap Strings
To wrap strings in the “app.js” file, first, we created the 24 Ways strings file and a new folder called “translation.” Next, in the new folder, we created a file called “Raven_en-us.js” file using a key/value pair set to store the source and target strings. Then, we wrapped the strings in the “app.js” file for internationalization and copied them twice into the “Raven_en-us.js” file.
STEP 3: Translation
We created a new project in Memsource to translate the JS file. When we started a new job, we entered RegEx in the TXT section so that Memsource would recognize the key/value pairs and only translate the string that followed a colon and space.
After we checked translated files, we saved them as “Raven_es-mx.js” and “Raven_zh-cn.js” files and added them into the “translation” folder.
Next, we copied the source HTML file and renamed them as “index_es-mx.html” and “index_zh-cn.html” files. Finally, we added two lines of code and let the 24 Ways JS file do its job.
STEP 4: Final Delivery
Our final delivery includes the game source code and the “translation” folder.
Here are demos of the localized game in two target languages.
Challenges We Met
1. Missing JS File
When we started localizing the game, we encountered our first challenge very soon: The source code we downloaded on Github missed one important JS file called “app.js.” We were not able to run the game offline without this JS file.
Luckily, this game has an online version (click here). So, we used Firefox to inspect the website to check its accessible properties. We found an “app.js” file in the debugger section that we needed to play the game. After downloading the file and adding it to the game’s folder, we successfully ran the game offline.
2. Messy Code
Another challenge we had was wrapping strings. As you can see, this “app.js” file includes all the strings that need to be translated. However, its messy format made it hard to find and wrap strings. Also, starring at the code hurt our eyes. Hence, the process of wrapping strings wasted our time and energy and greatly reduced the efficiency of the localization. We learned that if we were under similar circumstances in practical work, we should connect our client in time and ask if the client could offer the source file in a clear format.
P.S. We have some new thoughts on how to format a messy JS code. See below for more details.
More Takeaways
Unify JS file
As mentioned above, the messy “app.js” file caused wasted time while localizing the project. Later, our peers reviewed the project and suggested us use a tool to unify the code. We found one Chrome extension called “JavaScript and CSS Code Beautifier.” Then, we used the extension to unify the “app.js” file in Chrome and saved the code as a new “app.js” file.
As you can see, the code looks much better now. We will use this extension to beautify messy JS code in the future.
Last But Not Least
This article has finally come to an end! I hope you enjoyed this journey of our game localization. However, if you are an auditory person, feel free to check this short video introducing our localization workflow: