Localizing a web-based JavaScript game about ants
The Project
Of all the games online, text-based games have always intrigued me. I was fascinated by choose-your-own-adventure books as a child, and as I got older, I discovered there were other choose-your-own-adventure mediums out there, such as comics and movies. A game that has stuck with me over the years is a text-based game called Lifeline that I used to play on my iPod. I loved how my choices could change everything; the possibilities seemed endless, and I replayed the game constantly.
Now that I better understand code, I decided to try my hand at localizing a game like this. (I’m definitely not ready to build one of my own just yet!) I chose We Follow the Fickle Path because it stood out to me in an unexpected way. The story follows Sister Twenty, an ant in a moving colony, and deals with heavy topics like death, faith, and autonomy. It’s not a lighthearted game to play through, and the art and music that accompany the story immerse the player in the ants’ lives. I think the creators did a beautiful job building a narrative around the life of an ant.
On the technical side, I chose this game to experiment with localizing a web-based JavaScript game. I had previously localized a short HTML game using the 24ways method and wanted to branch out and try something else. This game was much more text-heavy than the HTML game and had a number of moving components that I hadn’t initially anticipated. A new experience for me, this project was difficult but highly rewarding.
Process & Challenges Encountered
To start this project, I located the file for translation in Visual Studio Code in the src folder under assets. The file was aptly named main-en.strand. This presented the first challenge I encountered in completing this process – the translation itself. Although I was using machine translation, I hadn’t anticipated that the main file containing the strings for translation would be a .strand file. This file type, in addition to the way in which the Spanish localization was set up, meant that I couldn’t use the 24ways method. A quick scroll through the file itself revealed that if I put the entire file into translation software, it would translate bits of code that were meant to remain in the source language, thereby breaking the code. I decided that the safest way to translate my source code into French would be to go string by string, manually inserting everything myself. With more than 4,600 lines of code, this was going to be a grueling process.
I duplicated the main-en.strand source file and renamed it to main-fr.strand to keep the naming consistent and keep the files in the same place. To ensure that I was translating the correct strings, I would reference the existing Spanish file when unsure, to confirm whether the line I was looking at should remain in the source language or not. Then, line by line, I inserted the translations where needed.
After my file was completely translated, I needed to plug my file into the game. The only problem was that I had no idea how to do that. I assumed that the best way to start was to look at the in-game language selector, so my first step to solving this problem was to open the game in Firefox and use Inspect Element to locate the selector in the code. To open my game files, I opened a new terminal and used npm to make a localhost for my files.
Inspect Element revealed the following line of code:
Following the location of GameScene.ts:74:54, I went back to VSC and found the matching line. It was completely different.
I figured that the language files must be getting plugged into this string from somewhere. I just needed to find the source.
In order to have main-fr.strand called correctly, I needed to plug it into five files: main-en.strand, main-es-419.strand, Game.ts, GameHotReload.ts, and StrandE.ts, but not into GameScene.ts. In the main .strand files, I added French to the Select menu itself. The other files served to properly insert main-fr.strand into the right places.
To find each instance that I needed to replicate for “main-fr,” I searched all files in the game folder with the following terms:
- “main-en”
- “en”
- “es-419”
- “mainen”
It took a good deal of trial and error to arrive at these search terms, because the source used all these variations to call the correct language files for English or Spanish. After I thought I had found every possible instance, I reopened the game and received this error message repeatedly:
The issue continued even after going back to my files and fixing a few other errors I made. I remembered the red error line under ‘mainfr’ (seen in the screenshot below), so I went back in the code to identify what this line was connected to. There I found my mistake – a typo.
I’d forgotten the backslash! The correct line should read import mainfr from ./assets/main-fr.strand’. After correcting the error, I restarted my terminal once again, and my game finally worked!
My next step was to click through everything to make sure there were no errors. A quick run-through revealed a mistake in the menu in main-fr.strand – I had accidentally translated some text that needed to remain in the source language.
The screenshot above shows the corrected string. I had mistakenly translated ‘language select’ into French, which broke the language select button in the French version of the game. I quickly fixed this mistake and, finally, my game was running smoothly!
Takeaways
I learned a lot during this process. Although it was tough, I enjoyed solving the problems I encountered, and the outcome was extremely rewarding. There are many ways to localize games; they aren’t always going to be as efficient as we’d like, but all the effort we put in makes the end result all the more satisfying. Another lesson that I think can be applied to coding in general is that one typo can break the entire project. Typos may be small, but one misplaced backslash or colon can become a huge roadblock. I’m grateful to have been able to find each error I encountered and resolve it myself, and I’m excited to expand my game localization skill set in the future! I’ve included a GIF below that shows me playing through parts of my localized game. Thank you for reading!
Final Product
Source
We Follow the Fickle Path was made by Sean, IAN, and Michael of Sweetheart Squad. Thank you!