Localizing a Webtoon-Style Korean TV Show Poster

Drawing Survival: Localizing a Webtoon Reality Show

Description

Since my youth, I’ve always enjoyed reading comic books, a passion that has continued into adulthood. Despite the never-ending grind of graduate studies, I still found time to read Webtoons on my phone. For those unfamiliar, Webtoons are digital comics that have taken Korea by storm. They are so popular that there are TV programs featuring webtoon artists who share their artistic journeys and life stories.

One program caught my eye, not just because it whisked three webtoon artists off to a deserted island, but because it immersed them in a vibrant webtoon world. Picture this: a deserted island where these artists have to use their creativity not just to draw but to survive. Their real-life situations often blur with the fantastical webtoon world they create, making for a narrative that’s as unpredictable as it is engaging. The TV show cleverly unfolds like the comic books they create, featuring each artist’s unique art style in the background, further blurring the lines between reality and the webtoon world.

Inspired by this creative chaos, I took on the challenge of localizing the show’s poster into English using Adobe Photoshop and Illustrator. It was a fun task, turning “만찢남” into “Comic Intruders” while maintaining the poster’s original vibrant style.

Workflow Overview

1. Preflight

  1. Download and Open the Image: I downloaded the image file and opened it in Adobe Photoshop. Since I couldn’t find the original source file, the resolution of the image wasn’t ideal.
  2. Check for Localization Issues: I examined the file for any potential localization hiccups, like speech bubbles that might burst under the pressure of text expansion.

2. Make a Picture List and Translate

Once the scanning was done, I started creating a picture list for translation. I set up an Excel sheet, organizing it to include both the original Korean texts and their English translations. Given that there wasn’t a vast amount of text, I dove right in and translated the Korean texts directly within the picture list.

Transcreation Challenge

When translating, I transcreated the title of the poster. The original Korean words were coined to fit the unique style of Webtoon, so I had to get creative to maintain the original essence. For instance, the title ‘만찢남’ (literally “men who rip the comic book and came out of it”) is a playful expression used to describe an unrealistically handsome guy. Capturing this in English while preserving its quirky charm was the hardest part of the transcreation process.

So, how do you coin an English title that encapsulates all those meanings? That was the real puzzle, but it’s all part of the fun in bringing these vibrant Korean Webtoon elements to an English-speaking audience.

3. Text Replacement and Image Recreation

  1. Removing the Korean Text (Photoshop)
    • I started erasing the Korean text using Content-Aware Fill. It worked pretty well, and I successfully removed all the Korean letters except for the title.
  2. Inserting Translated Text (Photoshop)
    • Before adding the translated text to the file, I hunted for fonts that closely matched the original. Due to text expansion, I reduced the font size and realigned the text to fit within the speech bubbles. To mimic the original style, I tweaked the stroke and weight and added shadows to the text. Everything was done except for the title, which was the biggest challenge of this project. The title was more like a graphic design than text, requiring a complete image recreation for localization into English.
  3. Image Recreation (Photoshop & Illustrator)
    • First, I tried to remove only the text without erasing too much of the background using Content-Aware Fill, but it wasn’t easy. Hmm, this would need some manual work. But first, let’s head to Adobe Illustrator. I created the text and turned it into vector graphics to deform it to fit the style. Keeping the original style was tough, so I used my creativity and designed it in a comic style. Then, back to Photoshop for the final QA.

4. QA

Final Touches: With the background and outlines looking sharp, I made sure every element was perfectly aligned and polished.

Objective QA: To ensure everything was spot on, I sent the file to a few friends for an objective QA. They provided fresh eyes to catch any details I might have missed.

5. Delivery & Final Thoughts

With the QA completed and all elements polished to perfection, I exported the final localized image to a high-quality JPG file. The vibrant, comic-style design retained its original charm, now ready for an English-speaking audience. I see that the image recreation is far from perfect; however, in this project, I mostly focused on text localization and recreation. In future projects, I aim to practice more graphic redesign and delve deeper into graphic tools to enhance my skills. This task, blending meticulous detail and creative problem-solving, was a testament to the power of visual localization. As I sent off the finished file, I couldn’t help but feel a sense of accomplishment, excited for the next creative challenge that lay ahead.

Source: Naver Entertainment. “Article Title.” Naver, 2023, https://m.entertain.naver.com/article/311/0001544194.

Copyright Disclaimer: under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. This project is a proof-of-concept, and as such does not represent nor infringe on the creator(s) in any way.

From Script to Screen: Localizing the Nimona Official Trailer into Korean

Introduction

My 8-year-old daughter is an avid fan of Nimona. Thanks to her enthusiasm, I’ve watched the film more than 10 times by now. The reason I chose Nimona for my AV localization project was because I thought it would be ‘metal’ to show my daughter a localized version of Nimona featuring my voice.

Nimona is cool—she’s a shape-shifter who enjoys causing chaos. She’s playful, humorous, and rebellious. I relate to Nimona because, like her, I wear many hats in my career. We’re both shape-shifters in our own right, adapting and having fun along the way.

Plus, I have experience featuring my voice in language education videos, which required some voice acting chops! This is going to be a very fun project, right?

Workflow Outline

File Preparation

  1. Download the Asset: I used a free downloader to obtain the source video from YouTube. It was quick and easy, getting me started right away.
  2. Check the Source Material in Adobe Premiere Pro: I imported the video into Adobe Premiere Pro to ensure everything was in order and ready for editing.
  3. Creating an M&E Track: To separate the voice from the background music, I used Vocal Remover (vocalremover.org). While convenient, it wasn’t perfect. Unfortunately, it removed not only the characters’ dialogue but also significant parts of the background music’s vocals. This left the M&E track missing some of the vocal elements, which was a bit disappointing.

Transcription

I used Premiere Pro to create an automatic transcription and generate captions for the video. However, the process wasn’t flawless. The transcription included singing parts and dialogue from multiple characters, resulting in numerous errors. This was expected, as transcription involves converting spoken language into written text, capturing every word, sound effect, and relevant background noise. After generating the transcription, the next step is to subtitle and perform QA on the source texts to ensure accuracy and clarity.

Subtitling

I used CaptionHub for subtitling and QA of the audio file. Before translating the subtitles into Korean, it was crucial to QA the English source file first, as the timing of the subtitles is set based on the original. I cleaned the source file by deleting unnecessary lyrics and dialogue, then edited it according to Netflix guidelines. These guidelines require subtitles to match spoken dialogue, be time-coded to the frame, and use specific grammar and punctuation for each locale. After QAing the source subtitles, I created the Korean subtitles, translating and adjusting the timing to ensure they were Netflix-compliant.

Dubbing

I exported the subtitles into an SRT file, opened it in Adobe Audition, and began the long process of dubbing. I have to be honest—it was extremely difficult to record for this fast-paced movie trailer where multiple characters exchange rapid dialogue. I tried and tried, but they just spoke too fast. Plus, my range from a high-pitched 10-year-old girl to a deep-voiced, burly knight was, shall we say, limited.

At one point, while I was trying to voice three characters in five seconds, my husband overheard and thought I was finally losing my mind over a school assignment. It took me two hours just to record my voice for a 2 minute and 40 second video… and it’s not even done yet!

Editing the Audio

The next task was to use noise reduction and audio effects to blend my recorded voice smoothly with the background audio. I used several different audio reverb settings for various types of voices, like monster warning announcements and TV news sounds. I also adjusted the voice settings for high and low pitch variations. Lastly, I fine-tuned the volumes for each dialogue segment.

Great! Now it’s time to integrate the audio with the subtitled video!

Integration & QA

I exported the audio file with my beautiful voice and imported it back into Premiere Pro, along with the subtitled video file, and conducted the final QA. As I layered all the files together, I discovered a slight time lag between the audio and the subtitles. Why did that happen? Additionally, the quality of the audio had mysteriously deteriorated.

Hmmm, the situation called for some detective work. I double-checked the audio settings and realized the lag might have been caused by the export settings not perfectly matching. I adjusted the audio settings, volume, and effects one more time. After another round of meticulous tweaking, everything was in sync.

Finally, my localized Nimona is ready to roll! It’s been a wild ride, but seeing the final product made all the effort worth it.

Lessons Learned

This project was quite the adventure, filled with challenges and discoveries. Here are a few lessons I learned along the way:

  1. Patience is Key: Dubbing multiple characters, especially in a fast-paced trailer, requires a lot of patience. Now I highly admire voice actors’ divine work!
  2. Expect the Unexpected: Whether it was the slight time lag between audio and subtitles or the mysterious drop in audio quality, I learned to expect and adapt to unexpected hiccups.
  3. Tools and Tricks: Using tools like Vocal Remover and Adobe Audition taught me a lot about the intricacies of audio editing. Even if they weren’t perfect, they were invaluable for this project.
  4. Attention to Detail: The importance of QA can’t be overstated. Ensuring that every element—audio, subtitles, and visuals—was perfectly aligned took multiple rounds of meticulous checking and adjusting.
  5. Fun Amidst the Chaos: Despite the challenges, this project was a lot of fun. Bringing Nimona to life in Korean and seeing the final product was incredibly rewarding.

Overall, this project was a rollercoaster of learning and creativity, reinforcing my passion for localization and audiovisual projects. After finalizing my work, I showed the video to my daughter. She was so impressed with her mom’s work that she declared me the “localization master” and asked if I could dub her favorite cartoons next. Looks like I might have a new side gig!

Here is subtitled and dubbed Nimona. Hope you enjoy!!

Source: Netflix. (2023, May 10). Nimona Trailer. YouTube. https://www.youtube.com/watch?v=f_fuHRyQbOc&ab_channel=Netflix.

Copyright Disclaimer: under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. This project is a proof-of-concept, and as such does not represent nor infringe on the creator(s) in any way.

Training a Neural Machine Translation (NMT) Engine for League of Legends

Introduction

Imagine diving into the dynamic world of League of Legends, where each patch brings thrilling updates and strategic shifts. Now, envision the challenge of translating these detailed patch notes for a global audience, ensuring every player, no matter their language, stays in the loop.

Welcome to our Machine Translation (MT) pilot program. Alongside my teammates, I am embarking on a project to train a neural machine translation (NMT) engine specifically for translating League of Legends patch notes from English into Korean. Our goal is to push the boundaries of NMT technology to see if we can achieve high-quality translations with minimal human intervention.

Through this pilot, we seek to understand the complexities of game-specific terminology and the nuances of patch note content. By training and refining our NMT engine, we aim to reduce the reliance on human translators, speeding up the process and maintaining the excitement and clarity of each update. Join us as we explore the potential of NMT to revolutionize game localization and enhance the player experience for millions of League of Legends fans.

Pilot Project Proposal

You can view the PDF of the proposal here.

Our initial proposal includes a detailed plan for the MT pilot project, outlining the objectives for quality, timing, and pricing. It specifies the project timelines and processes required for training the MT engines, provides detailed information about the datasets, and includes the expected quotes for the project.

Project Process

File Preparation

1. Developing Crawlers to Extract Text for Translation

Thanks to a successful collaboration between one of my teammates and a skilled software engineer, we developed crawlers to extract text from the League of Legends website. This innovative automated tool efficiently gathers text content from web pages, converting it into TXT files ready for translation. The use of crawlers not only streamlined the extraction process but also significantly reduced the time required to prepare the text for our translation efforts. With our TXT files ready, we converted them into TMX format to align them using TMX editors.

2. Data Cleaning and Aligning

The process of data cleaning and aligning was crucial to ensure the quality of our translations. We used TMX editors like Wordfast AutoAligner and Okapi Olifant to align the extracted text. Despite the capabilities of these tools, the alignment process was time-consuming and required significant manual effort to achieve accurate results.

To clean the data, we employed simple Regex to remove unwanted elements and ensure consistency. We also deleted extremely long sentences that could compromise the translation quality. These steps were vital to prepare clean, well-aligned datasets for training our NMT engine, ultimately enhancing the efficiency and effectiveness of our translation process.

First Round of Training & Post-Editing

Finally, we are ready for our first MT training. To compare performance, we tested both Microsoft Custom Translator and Systran. After evaluating both models, we decided to proceed with Systran due to its higher BLEU scores and user-friendly interface.

Next, it was time for post-editing machine translation (PEMT). We assigned three team members to conduct human evaluations and tracked the word count they post-edited in a two-hour period. To ensure consistent quality assessment, we used the LISA quality model.

Iterative MT Training (Systran)

We embarked on a series of 10 training rounds with Systran. After each round, we huddled together to plot our next move, all in the name of boosting those BLEU scores. Our tactics varied from adding more data to the test dataset, to improving our cleaning and aligning processes, and even to using only the crème de la crème of relevant data.

We started strong with relatively high BLEU scores, which set our expectations sky-high. But, to our surprise, more data didn’t always translate to better results. In some cases, things got messy, and the quality scores actually dropped.

We experimented with every trick in the book to train our MT engine. Along the way, we learned that quality data and meticulous refinement are the real magic ingredients.

Final PEMT and Human Evaluation

After the final round of MT training, we rolled up our sleeves for another round of PEMT and human evaluation. To keep things consistent, our trusty team of evaluators was back at it. We wanted to see just how efficient our MT engine had become, so we crunched the numbers on how many more words we could edit post-training.

And the results? Drumroll, please… The quality of the MT engine soared! We can now save a ton of time and money on translations.

Want the juicy details? Our updated proposal has all the good stuff: the final BLEU scores, the cash we’ll save, and the hours needed for the full training. Intrigued? Check it out here!

Enjoy our video presentation!

TMS (Translation Management System) Improvement Proposal for Bloodify

Introduction

What is a Translation Management System (TMS)?

A Translation Management System (TMS) is designed to streamline and manage the localization and translation of content at scale. It helps businesses handle the complexities of translating large amounts of content into multiple languages and dialects, ensuring consistency and quality. A TMS facilitates collaboration by organizing and managing translated assets effectively. It reduces manual work, improves turnaround times, and ensures high-quality translations—essential for global businesses.

As a simulated project, I chose to provide TMS-related consulting to a fictitious company named Bloodify. Bloodify offers a music and video streaming service positioned between Spotify and YouTube. With Bloodify’s rapid global growth, enhancing our TMS with Smartling will boost productivity and streamline localization.

Let’s explore Bloodify’s key business requirements, current challenges, and how Smartling can bridge these gaps to support its expansion.

Bloodify’s Key Business Requirements

  1. Comprehensive Content Management: Bloodify, a music and video streaming platform, hosts diverse multimedia content including music, podcasts, videos, and app interfaces. A TMS should streamline the translation of all this content into 62 languages.
  2. Consistency: Maintaining a consistent tone and style across millions of tracks and thousands of playlists and podcast summaries is crucial. A TMS should ensure this using translation memory and glossaries.
  3. Efficiency and Speed: Frequent updates require quick localization turnarounds. A TMS should automate the translation workflow, reducing time-to-market for new content and features.
  4. High-Level Automation and Customization: The TMS should offer high-level automation and customization to increase productivity and reduce time and costs in the localization process.

Problems with the Current TMS

  1. Inconsistency in Quality:
    • Using different vendors and external linguists without a unified quality assessment platform leads to inconsistencies.
  2. Delayed Feedback:
    • The reliance on weekly reports delays the feedback loop, hindering timely improvements.
  3. Limited Automation:
    • The current TMS setup lacks automation, resulting in extensive manual data handling.

Proposed Solution: Implementing Smartling

To address these challenges, I recommend implementing Smartling. Based on my research, Smartling offers a range of features and benefits that will significantly enhance Bloodify’s localization processes.

Key Features of Smartling:

  1. Cloud-Based Platform:
    • Centralized system accessible from anywhere, ensuring all team members can collaborate in real-time.
  2. Real-Time Collaboration:
    • Immediate feedback and collaboration between translators, editors, and project managers to improve efficiency.
  3. Automated Workflows:
    • Reduces manual tasks by automating the translation process, from content submission to final delivery.
  4. In-Context Translation:
    • Provides translators with context for each piece of content, ensuring accurate and culturally relevant translations.
  5. Translation Memory and Glossaries:
    • Maintains consistency by reusing previously translated content and standardizing terminology.
  6. Robust Reporting and Analytics:
    • Detailed insights into translation quality, project progress, and performance metrics.
  7. API Integration:
    • Seamlessly integrates with other tools like CMS, JIRA, Tableau, and machine translation engines to streamline workflows.

Benefits of Implementing Smartling:

  1. Improved Quality and Consistency:
    • Unified platform for quality assessment ensures consistent translations across all content.
  2. Faster Turnaround Times:
    • Real-time collaboration and automated workflows significantly reduce the time required to localize content.
  3. Reduced Manual Work:
    • Automation minimizes manual data handling, freeing up resources for more strategic tasks.
  4. Enhanced Productivity:
    • Efficient processes and advanced features increase overall productivity, allowing for quicker updates and releases.
  5. Cost Savings:
    • By automating tasks and improving efficiency, Smartling helps reduce the costs associated with the localization process.
  6. Scalability:
    • Smartling’s robust infrastructure supports Bloodify’s rapid global growth, easily accommodating increasing volumes of content.

By implementing Smartling, Bloodify will overcome the limitations of its current TMS, ensuring high-quality, efficient, and cost-effective localization.

Conclusion

You can view the PDF of the presentation here.

In this proposal video, I analyze Bloodify’s translation management challenges and propose Smartling as the solution to enhance productivity and streamline localization processes. Watch the video to see how Smartling can support Bloodify’s rapid global growth.

Team CAT Project: Otter Awareness Month

Introduction

At MIIS, our approach to learning is hands-on, especially in the Translation Technology course, where we practice through projects that mirror the industry’s real-world demands. As the culmination of our studies, we formed a team under the banner of Amazing Five Translation. We embarked on a project that would see us partnering with Monterey Bay Aquarium during Otter Awareness Month, translating vital campaign materials. Our mission was to adapt these materials for an international audience, ensuring the message was as impactful and engaging as the original. Amazing Five took on the task, providing translations in Chinese, Japanese, Korean, and Portuguese, and managing the workflow with professional tools like SDL Trados, from the drafting of our proposal to the final delivery of our work.

Statement of Work (SOW)

The SOW for our “Otter Awareness Month” project captures the essence of AFT’s translation services.

The document meticulously lays out the workflow stages from preparation, production, and finalization stages. It also outlines communication protocols, pricing, and payment details, while also profiling the expert linguists and tools engaged in the project. It serves as a comprehensive guide for ensuring our client is fully informed and played a crucial role in securing the green light for our project during the initial kick-off meeting with the client.

Kick-Off Meeting with the Client

After meticulously crafting our proposal, our team had a kick-off meeting with the client, affectionately known as Prof. Wooten. He played the role of a client unfamiliar with translation work and we thoroughly guided him through our plan, and while he seemed impressed, he suggested having a minimally bilingual employee review our work, challenging us to defend our professional integrity.

As professionals, we were confident in our skills, but this mock scenario was a lesson in client dynamics. We advocated for our expertise, yet learned that clients often seek external opinions. Having spent a good amount of time in the language industry, I am still discovering new aspects to learn. This project was a brilliant simulation, offering valuable insights into client relations and real-world challenges in translation.

Deliverables

Leveraging our amazing teamwork, we successfully delivered all the required materials to our client on schedule. The deliverables consisted of thoroughly translated documents, Translation Memory, glossaries, and pseudo-translations for Chinese, Japanese, Korean, and Portuguese, ensuring a comprehensive and well-rounded translation package.

Future Improvements

Reflecting on our group translation project, I recognized key improvement areas for more professional and effective project management in real-world scenarios. The significance of having a dedicated project manager became apparent, especially for larger projects. A project manager could optimize workflow in the CAT tool, improving the use of translation memory and glossary management. I also realized the importance of a task tracker such as JIRA to streamline communication, as relying solely on Teams chat proved inefficient. These realizations have equipped me with a deeper understanding of how to enhance both our management and communication strategies for future translation projects.

Reflections

Regular Expressions for CAT tool

Helpful rules for EN-KO translation on Trados

When localizing to a different language, it is essential to adapt the text for the target audience. Using the proper typographic conventions, such as curly quotes, aligns the translated content with the local language’s standard writing style.

1. Rule: Switching from ” ” to “ ” (from straight quotes to curly quotes) 따옴표 바꾸기

Find: “([^”]*)”

Replace: “$1”

This RegEx rule is designed to find text enclosed within straight quotation marks (“). It then replaces the found text with the same content, enclosed in smart quotes or curly quotes (“ ”) for enhanced typographic presentation.

Switching from straight quotes to curly quotes in translations from English to Korean is crucial for several reasons. Curly quotes enhances the visual appeal and professionalism of the text, ensuring cultural and linguistic appropriateness in the target language. Consistency in using curly quotes maintains text cohesion, preventing distractions and ambiguity, especially in technical or legal content. Overall, this transition improves quality, readability, and cultural relevance in the translated material.

2. Rule: Removing cent sign (two decimal digits after the decimal point)

Find: \.\d{2}(?=\D|$)

Replace with:

You can apply this regular expression to locate instances of two decimal digits (decimal places) following a dot and remove them.

In Korea, we typically do not use two decimal places after the dot. Removing them during translation can be quite cumbersome. However, with the help of this RegEx, we can significantly enhance our productivity and save valuable time.

3. Rule: Changing English date format to the Korean date format.

Find: \d{4}[-/.]\d{2}[-/.]\d{2}

Replace with: YYYY-MM-DD

When translating content, you might encounter dates written in various formats, including the typical English format, which is MM/DD/YYYY or DD/MM/YYYY. However, in Korea, the standard date format is YYYY-MM-DD. To ensure that the translated content adheres to the Korean date format, this regular expression can be applied.

4. Rule: Identifying incorrect spacing

Find: [\s][.,?!]+[\s]

This regular expression is for identifying and locating spacing errors. Overall, this regular expression is used to find instances in the text where a punctuation mark (period, comma, exclamation mark, or question mark) is surrounded by whitespace, ensuring that there is a space before and after the punctuation. This will allow you to make adjustments if needed.

Translation Technology

From Babel to AI: The Future of Human Translators in the Age of Advanced Translation Technology

Charting the future of translation: A vibrant depiction of technology's role in the language industry.
Charting the future of translation: A vibrant depiction of technology’s role in the language industry.

What exactly is translation technology?

The quest to understand different languages dates back to ancient times, with the story of the Tower of Babel often symbolizing the genesis of linguistic diversity. Traditionally, translation relied heavily on individual translators, with the quality of translation directly linked to the skill of these linguists.

Today, modern translation is intricately intertwined with technology, aiming to make the process faster and more efficient. This technological evolution in the field of translation includes tools like Computer-Assisted Translation (CAT), Machine Translation (MT) software, and Translation Management Systems (TMS).

One of the first questions that crossed my mind when I began the “Translation Technology” course at the Middlebury Institute of International Studies at Monterey was: Will these technologies replace human translators, or will they become invaluable allies? This course, led by Professor Adam Wooten, started with this intriguing query and guided us through a comprehensive exploration of how to use technology both effectively and ethically. We explored the strengths and limitations of translation technology, understanding its goals and capabilities.

From the pioneering IBM-Georgetown machine translation experiment in 1954 to the advent of Large Language Models and Generative AI, we examined how these technologies are applied in the world of translation. Join me as I share some key insights and takeaways from this enlightening class.

Game Localization: Ninja vs EVILCORP

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.

Welcome to the starting screen of our adventure, crafted by Rémi Vansteelandt.”

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.

GIF from Teenage Mutant Ninja Turtles arcade game (Konami, 1990)

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!

English and Korean
English and Chinese

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.

  1. ’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.
  2. 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