{"id":28,"date":"2023-12-09T05:17:51","date_gmt":"2023-12-09T05:17:51","guid":{"rendered":"https:\/\/mingmingzi.com\/?page_id=28"},"modified":"2023-12-15T23:03:18","modified_gmt":"2023-12-15T23:03:18","slug":"localization-showcase","status":"publish","type":"page","link":"https:\/\/mingmingzi.com\/index.php\/localization-showcase\/","title":{"rendered":"Project Showcase: Localizing ‘The House’ Game"},"content":{"rendered":"\n

Quests Accomplished<\/p>\n\n\n\n

In this project, I focused on localizing a game to make it more accessible to Chinese-speaking players. My work involved three primary tasks:<\/strong><\/p>\n\n\n\n

1. Localization of Static Texts: I applied localization methods to static texts within .html and .js files, resolving concatenations. For example, the text concatenation in JavaScript was changed from:<\/strong><\/p>\n\n\n\n

text: 'The item \"' + item_name + '\" has been used!',<\/code><\/pre>\n\n\n\n
to:<\/p>\n\n\n\n
text: (\u201dThe item \u2018\u201d) + item_name + (\u201d ' has been used!'\u201d),<\/code><\/pre>\n\n\n\n
\"\"<\/figure>
\n
2. Dynamic Text Localization: For dynamic texts like tooltips that couldn’t be localized using standard methods, I duplicated .html files and altered the page injection or load method to fetch the Chinese (zh) HTML files directly.<\/strong><\/p>\n\n\n\n
I know, it looks like a disaster…<\/em><\/p>\n\n\n\n
Despite exploring every avenue, the quest for solutions persists. <\/strong><\/p>\n\n\n\n
I mean, most HTML files look like this:<\/em><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Delve into the latter part of this report to discover potential resolutions.<\/strong><\/p>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
3. Image Localization: I localized certain JPEG and PNG files, changing the English characters within the images to Chinese using Procreate on my iPad.<\/strong><\/p>\n\n\n\n
Challenges Encountered<\/strong><\/p>\n\n\n\n
1. Dynamic Text Localization: The ’24 ways’ method could not localize dynamic texts due to its limitations in handling real-time content changes. For example:<\/p>\n\n\n\n
        <div id=\"door_kitchen\" data-tooltip=\"Go to the kitchen\"><\/div>\n        <div id=\"door_toilet\" class=\"opacity\" data-tooltip=\"Go to the toilet\"><\/div>\n        <div id=\"door_bathroom\" class=\"opacity\" data-tooltip=\"Go to the bathroom\"><\/div>\n        <div id=\"door_big_room\" class=\"opacity\" data-tooltip=\"Go to the room\"><\/div><\/code><\/pre>\n\n\n\n
2. Page Loading Methods: Determining the correct method for loading pages within various JavaScript files (game-min.js, view-min.js, etc.) was challenging. <\/p>\n\n\n\n
I mainly changed the .load and .inject methods in the min .js files.<\/p>\n\n\n\n
inject:function(){room.settings.inject?$(\"#the_game\").load(room.settings.inject+\"_zh<\/strong>.html?\"+(new Date).getTime(),<\/code><\/pre>\n\n\n\n
$('#the_game').load('intro_zh<\/strong>.html', function() <\/code><\/pre>\n\n\n\n
\n
3. Unlocalizable Texts: Certain texts within the .js files, specifically attributes within the span elements, proved impossible to localize with 24 Ways. For example:<\/p>\n<\/div>
\"\"<\/figure><\/div>\n\n\n\n
Localization Log<\/strong><\/p>\n\n\n\n
First following the normal procedures of implementing 24 Ways, I first pasted the 24 Ways.js and schedule.js, created .jason files, and wrapped strings in _() which the system recognized. <\/p>\n\n\n\n
Testing and Implementation: I tested the localization in Firefox to ensure the zh-CN locales worked correctly. That was when I discovered my arch enemy—the tooltips.<\/p>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\n
I dug through the .js files, the minified .js files, and the minified-minified .js files and tried to find a solution. I tried to ask chatGPT to write me a new localization function within the 24 Ways to recognize and extract tooltips and the id attribute within the div elements. But the functions it wrote me failed and I had no clue why. This is proof that overreliance on a program rather than my brain can be counterproductive.<\/p>\n<\/div>
\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
For the unlocalizable texts (four lines in total)<\/strong> <\/mark>with 24 Ways, I regretfully changed the text in the original code directly…At this point, I was rewriting the program rather than localizing it. So I felt a bit sad. <\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
Finally, I got my hands dirty by butchering the images with embedded texts, without giving a single thought to suitable fonts.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I then changed the path to image assets. For example:<\/p>\n\n\n\n
background: rgba(0, 0, 0, 0.8) url(..\/images\/menu.png) no-repeat;<\/code><\/pre>\n\n\n\n
background: rgba(0, 0, 0, 0.8) url(..\/images\/menu_zh-CN<\/strong>.png) no-repeat;<\/code><\/pre>\n\n\n\n
Potential Solution <\/strong><\/p>\n\n\n\n
While searching online, I came across this post.<\/a><\/p>\n\n\n\n
Maybe dynamically change the data-tooltip attribute of the HTML elements using JavaScript.<\/mark><\/strong><\/p>\n\n\n\n
<script>\n        function setTooltipText(elementId, newText) {\n            var element = document.getElementById(elementId);\n            if (element) {\n                element.setAttribute('data-tooltip', newText);\n            }\n        }\n\n        \/\/ Change tooltips when the page loads\n        window.onload = function() {\n            setTooltipText('curtain_use', 'Localized text for the washing curtain');\n            setTooltipText('door_corridor', 'Localized text for going to the corridor');\n        };\n    <\/script>\n<\/head>\n<body>\n    <div id=\"curtain_use\" data-tooltip=\"The washing curtain\"><\/div>\n    <div id=\"door_corridor\" data-tooltip=\"Go to the corridor\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Why Localize? <\/strong><\/p>\n\n\n\n
After spending 10 hours on this project, my thoughts naturally wandered to my motivation. <\/mark><\/strong>Is it worth the time?<\/p>\n\n\n\n
I would say yes because it is fun and interesting. Also, I can let families and friends play the simple game I have localized after a semester’s study.<\/p>\n\n\n\n
Conclusion<\/strong><\/p>\n\n\n\n
In conclusion, while I faced several challenges during this localization project, including limitations with dynamic texts and specific JavaScript challenges, the project was ultimately successful. The game is now more accessible to Chinese-speaking players, aligning with my goal of sharing its unique style (with a broader audience.<\/p>\n\n\n\n
A Walkthrough Video<\/strong><\/p>\n\n\n\n
\n