Project description

For the final showcase of our Website Localization course this semester, our group decided to localize a web-based game from English into simplified Chinese and Russian.

The game we chose was a HTML game named “Element One” found from Github. It’s a simple but cute platformer game, in which the player can control the little astronaut to jump, run, and to grab different kinds of gems in order to pass all the levels. The developer package of this game consists of some JavaScript files, the .html file for loading page, assets files like background music or graphics, as well as .css files that style the interface.

Our work in this project is mainly to localize the instruction for player at the beginning and any other components need to localize in a natural way.

Here is the demo of our localized game.

Challenges we met

To wrap those strings in JavaScript files, we decided to employ the “24-ways” method learned on class. Although “24-ways” helped us a lot and simplified the localization process, we still encountered several issues.

• wrapping strings

“24-ways” worked well for most of the text and message strings, however, it failed to wrap some of the strings like this one:

No matter where we tried to put those quotations marks, there were just no reaction from the strings, thus we couldn’t extract those sentences with keys.

• fonts & layout

The original version of the game uses a pixel-style font called “minecraftia-webfont” for title and instruction messages, which raises challenges for us to find corresponding fonts in Russian and simplified Chinese. We believe that a fully localized game should be in a consistent style and give the player same impression.

• localizing graphics

We found that there is a road sign with text on it when testing the game, which will affect foreign players’ experience if not localized into their languages.

• adding language pickers

After successfully localized the game in Russian and simplified Chinese, we came up with the idea of adding a language picker on the loading page to link the three versions together. The problem lies in selecting the proper format and style for it.

My contribution

With my teammates taking care of the issues in wrapping strings, fonts and layout, I solved the problems of localizing graphics and designing and implementing the language picker.

After detecting there exists a graphic need to be localized, I turned to look for that graphic in the folders. Fortunately, the files and folders of the game are well-organized clearly and logically, and all the graphics are documented in the “assets” folder. It turned out that the road sign I was looking for was part of the picture tiles_spritesheet.png. The developer wrote some strings in all.js to extract the element he need at different stages.

Thus, my solution is to copy and localize that graphic into Russian and simplified Chinese with Adobe Photoshop, then replace the original file name with the localized one in our corresponding all_ru.js and all_zh.js.

Now that our localized game is all ready, I worked on complementing it with suitable language picker. We’ve learned how to add a drop-down language selector or a static language list and I tried to do the same to our game, but the result did not match. “Element One” is a lovely game with vivid colorful graphics, I want the language picker to have a similar style. Inspired by the localization of the road sign, I come up with the thought of borrowing elements from existing graphics. I used the road sign and made it into buttons showing language names, then inserted them into the .html files and adjusted the position in the .css file. The code is not complex or advanced, but the outcome is satisfying.

Lessons learnt

To see a game fully localized by ourselves gives us a great sense of achievement, and our group did learn much from this project. The most impressive take-away for me is the experience of taking care of the whole project under the pressure of limited time. Since we changed our project once before we settled with this game, the time left for us is not that abundant and each team member was busy about their finals at the same time. Therefore, improving the efficiency and the communication became significant for the work to process smoothly. I’m glad that despite the difficulties and challenges we met, we accomplished the project with a high quality.