Localization involves not just translating the text but also creating new GUI elements in the target language. Take a look at the process of converting existing elements into the new language.

YDD progress update

The localization of YDD is progressing nicely, with both the French and the (Simplified) Chinese versions in the final phases of proofreading.

Here are the main menu screens of the three languages:

English main menu of Your Dry Delight

English

English main menu of Your Dry Delight

French

English main menu of Your Dry Delight

Chinese

As you can see with just the main menu, the two translator groups have different approaches to localizing. The French title might translate as: wistfully thinking about drunkenness, and the Chinese subtitle could be: sorrow will never come with wine. While the French is a complete replacement, we only add the Chinese version as a subtitle. You’ll see throughout the Chinese translation that several English terms are kept side-by-side with the Chinese text, while French is almost exclusively in French.

Screenshot of Chinese glossary showing each entry with English and Chinese text

Chinese glossary

But that’s all an aside. Let’s take a look at GUI!

French options screen

French options

Chinese options screen

Chinese options

What do we have here…one of the arrows in the selector pointer is missing in the Chinese version?

This is because of the code for defining hotspot locations. The Options screen is just a static image, and we define rectangles of the format (x_position, y_position, width, height) that allow us to get a hover effect when the mouse is over the rectangle. The hover effect here is indicated by the arrows on the left.

The problem with the Chinese code is that the rectangles haven’t been redefined to fit the Chinese options screen, which, if you compare it to the French one, has text in slightly different locations. A quick fix for this is to throw it into an image editor, find the correct coordinates, and define a rectangle specific to the Chinese screen.

The code might look something like:

# use this for the French options screen
if lang == "_fr":
    imagemap:
        ground "gui/pref_idle.png"
        idle "gui/pref_idle.png"
        hover "gui/pref_hover.png"
        selected_idle "gui/pref_hover.png"

        hotspot (285,150,120,48) action Preference("skip", "seen") focus_mask None
        hotspot (467,150,131,48) action Preference("skip", "all") focus_mask None

        hotspot (283,284,126,22) action StylePreference("text", "glossary_on") focus_mask None
        hotspot (445,284,163,22) action StylePreference("text", "glossary_off") focus_mask None

        hotspot (279,374,173,29) action Preference("display", "fullscreen") focus_mask None
        hotspot (477,374,124,27) action Preference("display", "window"), SelectedIf(_preferences.fullscreen==False) focus_mask None
# use this for Chinese options screen
elif lang == "_cn":
    imagemap:
        ground "gui/pref_idle.png"
        idle "gui/pref_idle.png"
        hover "gui/pref_hover.png"
        selected_idle "gui/pref_hover.png"

        hotspot (260,150,120,48) action Preference("skip", "seen") focus_mask None
        hotspot (420,150,131,48) action Preference("skip", "all") focus_mask None

        hotspot (300,284,126,22) action StylePreference("text", "glossary_on") focus_mask None
        hotspot (445,284,163,22) action StylePreference("text", "glossary_off") focus_mask None

        hotspot (300,374,173,29) action Preference("display", "fullscreen") focus_mask None
        hotspot (477,374,124,27) action Preference("display", "window"), SelectedIf(_preferences.fullscreen==False) focus_mask None 
# default is English screen
else:
    imagemap:
        ground "gui/pref_idle.png"
        idle "gui/pref_idle.png"
        hover "gui/pref_hover.png"
        selected_idle "gui/pref_hover.png"

        hotspot (304,164,163,32) action Preference("skip", "seen") focus_mask None
        hotspot (481,164,153,32) action Preference("skip", "all") focus_mask None

        hotspot (323,284,98,32) action StylePreference("text", "glossary_on") focus_mask None
        hotspot (449,284,101,32) action StylePreference("text", "glossary_off") focus_mask None

        hotspot (272,376,188,37) action Preference("display", "fullscreen") focus_mask None
        hotspot (475,376, 158,37) action Preference("display", "window"), SelectedIf(_preferences.fullscreen==False) focus_mask None
The important part to notice in the above code block is how the purple numbers after hotspot change between languages.

We repeat this with all the GUI screens. At least for Ren’Py, the GUI localization process goes something like:

  1. Get text translation
  2. Make images with the translated text. May require fiddling with font, font size, and text placement. And various other font settings.
  3. Find the correct coordinates for interactivity
  4. See what’s broken or missing and fix.

That’s all for today. We hope you’ll look forward to playing Your Dry Delight in a language other than English!