Translating Skins

Learn how to translate the skin in the Skin Editor.

Translating the Skin

1. Download and install Poedit. This is the tool we use to
   create the translations.

2. Open the skin to translate in the Skin Editor.

3. Click on the Generate Translations Template button in the Toolbar.

4. This will automatically create the translation file and add it to a subfolder
   in the same location as the skin skin_filename/translations. The
   translation file is a POT file that is compatible with Poedit.

5. Open the template file and then click Create new translation.

6. Start translating!

7. Use a button in the skin to change language:

   • Source = Mouse Click
   • Action = Player Settings
   • Type = Set Language

   You could also use a logic block to detect the browser language. The browser
   language will be automatically detected and if that language is in the
   translation, it will use that translation.

Button to Change Language

You can create language buttons in many ways. Here’s one way to get you started
that changes between two languages.

1. Add a container, a graphic/button for each language, and a text box.

2. Make all elements children of the container.

3. For the text box, add default text. For example, “Deutsch”.

4. Add a logic block for Text with the condition:

   Trigger	Comparison	Value	Operation
   Player > Language	start with	de (language that triggers the logic block)
   				Text = English

   If the player detects the german language in the browser, then the text box
   will display, English.

5. For one of the buttons/graphics, add an action to set the language:

   • Source = Mouse Click
   • Action = Player Settings
   • Type = Change Language
   • Language = Project Language or one of translated languages.

   Repeat for the rest the buttons.

In the project above, the language buttons are set to show or hide depending on
the current language. Do this by setting a Logic Block for the Visible
parameter. Use the same condition as in step 4. Just change the language
accordingly.

Create a Language Menu

Below are the basic instructions to build a menu using the Cloner Element in the
skin. This will create a menu out of the translations added to the Translations
table in the Project Settings.

1. In the Skin Editor, add a Cloner. Select Cloner from Toolbar, then click in
   the canvas to add it.

2. Add a text box. Select Text Box from the Toolbar, then click in the Canvas to
   add it.

3. In the Tree, make the text box a child element of the Cloner.

4. In the Text Box’s Position properties, double-click on the position
   indicators to set the X and Y values to 0 (this lines up the textbox to the
   cloner).

5. Select the Cloner and find the Cloner properties. There, select
   Translations as the Source.

6. Select the Text Box and change its text to $(ctitle). This placeholder is
   also found in the placeholder list: Cloner > Cloner Title.

7. Give the Text Box an action to switch the language:

   • Source = Mouse Click

   • Action = Player Settings

   • Type = Set Language

   Language = From Cloner (this is found at the top of the languages list)

8. Add a button to open and hide the menu by adding an element (like another
   Text Box) and giving the action:

   • Source = Mouse Click

   • Action = Visibility

   • Type = Toggle Visibility

   • Target = Cloner 1

Now, you can go back and make the menu nicer by adjusting its size, or giving it
button states (like changing the background color of the text box when the mouse
hovers over it), or give the cloner a hand cursor.

For inspiration, check out the Material Dart
skin.

See also…

• Skin Editor
• Poedit