Learning Localization Lessons

Entanglement has been a great learning experience for us at Gopherwood Studios. When Derek originally developed Entanglement we were unaware what it would become and where it would take us. For that reason, the game was written with the naive expectation that we would never deal with many of the typical challenges of "real" game development. One such challenge, that I've been dealing with this week, is translating the game into other languages. What seemed like an unnecessary precaution when the game was a fun side-project is now a very real need as the Chrome Web Store expands worldwide. So, what did we do wrong? How are we fixing it? And what are we doing in future projects such as Thwack!!?

What did we do wrong?

Three things, we embedded text in the code, we embedded text in images, and we created interfaces that can't adapt to languages that require more space. These all seem like simple problems to anticipate, but it's easy to neglect them when you're coding in a hurry, or developing something for "fun".

How are we fixing it?

Fixing the text embedded in the code has been a painful process of locating all the text, putting it into a spreadsheet and replacing it with a variable in code. Each column in the spreadsheet will eventually be filled with the translated text. Using the spreadsheet we export and generate JavaScript files for each language that assign the text variable to the appropriate translation.

The artist-made text merged with the background looks great, but good luck translating it.

For the text embedded in images, we've decided to keep the English text images since they're already made, but for other languages we'll be replacing the images with regular text using the same method we're using for the rest of the text. This makes the code a bit messier, but we think it's worth it to keep the game looking as close to the original for our English audience.

If the English just fits, you know you have no chance in German.

To adapt the interface for longer languages we're taking a two pronged approach. First, in a few special cases we're modifying the interface in to hold the longer text. This is only done in some cases because it is somewhat cumbersome and time-consuming since the interface in Entanglement has largely solidified at this point. In cases where the font size is large, we will attempt to support longer language texts by shrinking the font size so text fits better.

What will we do in the future?

On future projects, starting with Thwack!!, we'll be applying the lessons we've learned from Entanglement should the need arise to translate one of our games.

For Thwack!!, we already have a spreadsheet set up to handle any text that will appear in the game. Our artist has (politely) recommended we handle all of the text code-side (rather than embedding it images) which should make the display code simpler and negate that problem entirely. And we're planning ahead on how to make scalable interfaces that can handle longer text.

A nice aspect about CSS3 that brings together the beauty of the interface with the necessities of localization is that we are now able to do programmatically to text what could, in earlier specs, only be done via images:

1. We can add shadows and glow to text using the text-shadow property. Making a nice shadow only requires a single line of CSS: "text-shadow: 2px 2px 3px #333333;".
2. We can use a growing variety of fonts that are not tied to those already installed on a majority of user's computers, without creating the text via images like we did with Herculanum (the font used in the images like "High Scores" above). For Entanglement, licensing Herculanum proved prohibitively expensive, but there are a growing number of services and fonts that are making this much easier. Many, like Google Web Fonts, only require including an extra CSS file link in our HTML. Providing fonts via our own server, as we did with most of the text in Entanglement, is likewise relatively easy using @font-face directly:
   
   

   @font-face { /* A font by Jos Buivenga (exljbris) - www.exljbris.com */
     font-family: 'Fontin-SmallCaps';
     font-style: normal;
     font-weight: normal;
     src: local('Fontin-SmallCaps'), url('Fontin-SmallCaps.ttf') format('truetype');
   }

   
   
3. We can also rotate text vertically by using the CSS transform property like so:
   
   

   .vertical-text
   {
    -moz-transform:rotate(-90deg); 
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
   }

Here's to hoping when Thwack!! asks for some localization, we'll be better prepared.