Pano2VR 7.1 Docs / Translating Skins

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.

★ Tip  Image elements and button elements are not translated. However, the URL of the External Image Loader is translated. So, if you’re looking to swap out images for different translations, use the External Image Loader.

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…

Last modified: Aug 11, 2023