Haiyi Lin

For this project, my colleague Yiwei Wu, and I decided to try out hands at localizing an open-source web game Clumsy Bird into a Chinese version with sunset mode.

File Preparation

1. Source file of the game

Clumsy Bird is an open-source web game provided on GitHub. We first downloaded the source file from Github and analyzed the file type to see if it could be applied to 24Ways.

We can see that there is no paragraph or text content in the index.html file, which means that the text contents of the game are in the js files. In this case, 24Ways could be applied.

2. 24Ways

We downloaded the source js file from the source website and moved the js file to the js folder of the game.

3. Images in the game

Some text strings are in the image format. Therefore, we need to translate the texts and edit them with Photoshop.

String Extract

After the file preparation was done, we needed to locate the text string from the js file. It was actually an easy step since there are only 5 text strings in the game.

All we needed to do was to use the search function in Visual Studio Code and locate the actual string.

However, after we added the “_()” function to the strings, it didn’t work. In the end, we figured out that the “_()” function should be added to the main js file which is the clumsy-min.js file.

Translation

Since there were only 5 text strings, it was pretty easy to translate the texts. We didn’t even need to translate it via CAT tools.

After the translation is done, we need to put the file into a translation folder and link the 24Ways.js file and the ClumsyBird_zh-CN.js file to the index.html file.

Photoshop

Editing the image in Photoshop is not that difficult. First, we used the Lasso tool to select the area with the words. Then, we used the Paint Bucket tool to fill the area with the background color. After that, we used the Horizontal Type tool to add the translation. In the end, we exported the png file and replaced it with the original image.

Other than that, since we decided to change the game mode into the Sunset mode, we also played around with the background, pipe, ground, and bird images, as well as the color of the fonts.

Font

Since this is a pixel-style game, we wanted to choose a cuter font. We found a very cute Chinese font at Aa Font.

After the selection of fonts, we need to play around with the CSS file. Basically, we just changed the URL of the font file and kept the font-family name of the font.

Video

Please check the video by clicking here.