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 sub folder in the same location as the skin. The name of that sub folder will be ‘«name of the skin file»_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 langauge accordingly.

Create a Langauge 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.

See also…

• Skin Editor
• Poedit