Below are the links to the live demo of the game Tower Building and the source code on Github:

Live demo: https://Violatsai.github.io

Source code: https://github.com/Violatsai/Violatsai.github.io

 

For the website localization final project, my teammates and I decided to localize a game called Tower Building from Simplified Chinese into English. We chose this game for the following reasons:

  • Tower Building is an open-source game on Github, which means that the source code of this game can be easily accessed.
  • Tower Building is primarily built with HTML5 and JavaScript. Therefore, as we have built and localized our websites using these programming languages during the class, we are more confident with localizing this game.

 

When we were assessing the source code of the game, we noticed that most of the strings in the game are embedded in the images. Since we haven’t learned Desktop Publishing, this problem became the biggest challenge in the localization process.

In order to solve this problem, we did some research on how to localize the strings in images. According to the article What You Need To Know About Graphic Localization, the best practice for the localization of graphics containing text is to obtain the “original” artwork, which contains editable text layers. However, in our case, the source artwork files with editable text layers cannot be accessed. Thus, we had to photoshop every image containing text.

Hence, we started working on the localized version of the images with Photoshop. Nevertheless, as we weren’t very adept at using Photoshop, it took us a while to figure out how to remove original text and add the translated text to the images. Meanwhile, Hannah found a quick fix for this problem: If there is only one background color in the image, we can simply use the preview in Mac to edit the image.

After we finished editing the images, we duplicated all the files in the original folder and put them in a new folder (named en-us) in which we keep the localized content. Then we added the hreflang to the HTML files to distinguish two versions of the website. Next, we translated a few strings and swapped out all the images in the localized HTML file. At this point, both the original and the localized HTML files seemed fine. So far so good.

Nevertheless, we hit a wall when we tried to link the original website to the localized website. We adopted the approach used in our previous localization assignment, which is using a language selector to go back and forth between the websites. However, we couldn’t get the language selector to appear on the homepage of the game. Then I realized it was because we forgot to put the span tag inside a div, so the computer didn’t know where to insert the language selector. After this problem was fixed, the language selector finally showed up on the webpage.

Shortly after fixing the issue, we were faced with another problem: the language selector javascript file could not function properly. We didn’t know what was wrong with the code, so we adopted an alternative approach, which is connecting the original webpage and the localized webpage with hyperlink. It works, but we weren’t satisfied with this solution, as it is not scalable if we were to localize the game into more languages.

Therefore, we were determined to fix the problem with the language selector. After thoroughly examining the code, we realized that the problem was the directories in the JavaScript file. Because in our previous assignment, the language selector was designed to localize the website from Chinese into English . Therefore, the localized folder was named zh-tw instead of en-us. Therefore, the language selector could not find the correct HTML file because the folder name was incorrect. The language selector finally works after we fixed this problem.

In short, I think the greatest lesson I learn from this project is to be perseverant. It is very important to have grit while facing one challenge after another, because the process of troubleshooting and debugging can be very frustrating. We could have taken the easy way out by settling down with the hyperlink approach. However, we wanted to figure out why it didn’t work, so we got to the bottom of this and resolved the issue. Hence, I believe the lesson here is that, if we are determined in pulling through a difficult task, we can achieve our goal and really grow from the experience.