During website localization class this semester, one of the things we have discussed in class is to localize a game written in JavaScript. When we are hunting for a final project for this course, we came across this beautifully designed game called Hextris (Source: Github).
The game interface is quite straight forward. When game starts, some instructions will show up on the hexagon. The player can use the left and right arrow keys to spin the hexigon in the middle. If the player click the pause button, a “game paused” page will show up. Then the player can access “help page” by clicking the help button on the upper left corner, or restart the game by clicking the restart button on the lower left corner (see screenshots below).
(game start page)
(game paused page)
In order to localize the game, we need to translate the strings that show up during the game play, as well as add a language picker which allows players to switch between languages. As the game is very well designed aesthetically, we really wanted it to look as polished as it was after localization. So we decided to localize this game into four languages: Chinese, Japanese, French and Russian, and on top of this, add an awesome language picker which fits in the original design of the game.
Workflow & Responsibilities
In this last semester website localization final project, we really want to imitate the real-world workflow, to divide up the job based on workflow and try to collaborate without understanding how others get things done. After discussion, we decided that our workflow will be:
- Implement 24 Ways
- String Translation
- Add language picker (non-functional yet)
- Make Language Picker Functional
In this workflow, I was responsible for the third step, which is to conceptualize a language picker and add it to the game interface.
Adding the awesome language picker
Conceptualization
In order to add a language picker that fits the logic and aesthetic design of the game, the first thing I did was to go through the game and see where the button should go, when it should appear and how it should look like.
Looking at the screenshot of the “game paused page” above, you might have noticed, as I did, that there are three hexagon buttons on three corners of the page. I then automatically thought that there should be a fourth button on the upper right corner of the page, in a hexagon shape, that appears when the player clicks the pause button. This button could be our language picker. In addition to this, in order to fit in the spinning theme of the game, I also wanted the button to spin once clicked, and then displays a language menu which allows the player to switch among languages.
(comceptualizing the language picker)
Creating the button in Photoshop
After conceptualization, it was time to bring this thing to life. As I really wanted the language picker to appear only on the “game paused page”, I looked into the other buttons that shows up at the same time. I chose “restart button” as the button to imitate, and looked into the html file to see how it is added to the game. It turns out that all the buttons were first created as an image (.svg file) and then added to the html. So I created the svg image using Photoshop and online converter, and linked it to our html. It successfully shows up in the game when I turned off the css style sheets. The next step is to make it pretty.
(creating language button in Photoshop)
CSS styling & JavaScript
It was not as hard to do css styling on this language button and menu as I originally thought. As the button was created in a hexagon shape with the right color, the only thing I need to do is to adjust the position, so that it stays on the upper right corner of the interface. When it comes to the language menu, I adjusted the font, position, background color and color. It looked quite chic already after all these, but I really wanted to make it able to spin.
I tried several methods to make the language button spin and then display the menu, like css rotate() and css animation, but they didn’t work out for me. My final resort is to try JQuery. After doing some research, I found an add-on JQuery library called JQuery rotates. There is even a piece of sample code on their website which is exactly what I needed. I adapted the code to my game, and it worked! Check out this video to take a look at our demo of the game after localization.
