Game localization is a buzzing trend in the industry, bridging players worldwide with culturally adapted gaming experiences. Curious about how it works? Let’s start with a simple JavaScript game localization project.
Nostalgic Pixels: From Arcade Classics to ‘Ninja vs EVILCORP’
Introduction
Growing up, my brother and I would often escape to a small, bustling arcade in our neighborhood, immersing ourselves in the world of arcade games. Our favorite was the Teenage Mutant Ninja Turtles game. Lost in the cacophony and excitement of the arcade, we never really understood the storyline behind the ninja turtles’ fierce battles, mainly because these games weren’t translated into Korean back then.
That childhood memory came rushing back when my team member, Zilong, showed me a uniquely stylish ninja game. Reminiscent of those 1990s arcade adventures, this game, featuring a charming ninja character battling an evil corporation, captivated me with its enthralling story and sophisticated range of difficulty levels. This modern ninja, devoid of traditional weapons like knives or shurikens, captivates with incredible sneaking and jumping skills.
“Ninja vs. EVILCORP,” a top 10 contender in the 2020 Js13kGames competition, truly deserves global acclaim. We decided to localize this delightful JavaScript game into Chinese and Korean by utilizing 24 Ways to internationalize JavaScript strings.
Workflow Outline
This graphic outlines the six-step process of game localization, starting with preparation by locating strings, through translation and in-context review, to final customization and delivery.
File Preparation
a. Locating user-facing strings
After downloading the game from GitHub, we began evaluating the code to identify potential localization issues, such as hardcoded strings or text embedded in images that would need additional visual editing. Upon opening the file, we immediately encountered this issue.
The issue we faced was due to template markers in the HTML code (like {{ CSS_INJECTION_SITE }} and {{ JS_INJECTION_SITE }}). These markers indicate that the game uses a special system to insert CSS and JavaScript code dynamically. For localization, which involves adapting the game for different languages, the text needs to be prepared in a way that this system can understand and use. Essentially, the text translations have to be ready to go as soon as the game’s webpage starts to load and set itself up.
To resolve this issue, Zilong and his friend with a CS degree came up with a clever solution. They modified the initialization of the game’s HTML file. They implemented a workaround to enforce the application of 24 Ways to internationalize strings before the game even starts to show anything on the screen, ensuring that the strings would be internationalized right at the start of the HTML file’s processing. Now, we’re all set to make the game internationally friendly!
b. Implementing 24 Ways for internationalization (i18n) and externalizing strings
We searched our game’s code for all the text that players see. This text is what we will need to translate. After finding all those text strings, we put them into a separate ‘.js’ files, one for each language like English, Korean, and Chinese.
Wrap Your Strings: To make sure those strings are recognized by the internationalization system, we ‘wrapped’ them using underscores and parentheses: _( ). For example, if you have a string “Play Now”, you would write it as _(“Play Now”) in your code.
Localization
Awesome, everything is set for translation now.
a. Translation
We began by directly translating the text in each language’s .js file. This straightforward approach allowed us to easily preview the changes in Visual Studio Code. We focused on translating the parts highlighted in orange into the target languages. Before long, we could see our game come to life in Korean and Chinese!
b. In-Context Review
Time to put our translated game to the ultimate test – by playing it! Now, full disclosure: checking the translations in context was a bit of a challenge for me. Why? Well, let’s just say my gaming skills haven’t exactly leveled up since those arcade days. I still vividly remember cheering on my brother as he tackled the final boss in the Ninja Turtles game, while I, well… let’s just say I was more of a ‘supportive spectator.’ Beating games? Not exactly my forte. But still I did manage to review all the strings for any pesky truncation issues. Small victories, right?
c. Customization and Delivery
After translating, a thought struck me – why stop there? What if we spiced things up with different color themes for each language? Time for a CSS makeover! Zilong got creative with a sunset theme for the Chinese version, painting the screen with warm, twilight hues. As for the Korean version, I opted for a bright, daylight theme. Who says ninjas only strike under the cover of night, anyway? Let’s bring some color to these ninja adventures!
Lessons Learned
Now, the game is all set for players in China and Korea to enjoy! Working on this localization project has been quite the adventure, learning both wins and challenges of using ’24 Ways’ with JavaScript games. Here’s what I’ve taken away from it.
- ’24 Ways’ Has Its Limits It’s a handy tool for some games, but ’24 Ways’ isn’t perfect for everything. For more complex games, I’m thinking of trying more traditional localization methods for future projects.
- The Power of Teamwork At MIIS, we learn by doing, and that means working together, just like in real localization projects. This project taught me just how much teamwork can make or break the final result. Zilong was invaluable — without his help, I might’ve thrown in the towel way too soon. I’m incredibly thankful for his hard work and the team spirit that kept us going.
Game On!
Ready to check out how it all turned out?
Wrapping up this localization adventure, it’s been a rewarding ride filled with learning curves and collaborative triumphs. As we roll out this game to Chinese and Korean players, it’s a sweet reminder of how shared efforts and a dash of perseverance can translate into success. Stay tuned for the next chapter in our localization journey!
Credit to Rémi Vansteelandt for creating this engaging game – explore it here: https://js13kgames.com/entries/ninja-vs-evilcorp