Localization

Localization Editor

Translations are stored in JSON format inside the project, and we recommend using it for editing them.

After installing the plugin, in the Yandex Games SDK section, click the Localization Editor option.

To create a localization, click the Create button in the top-left corner.

Cocos Creator screenshot, the Localization Editor window: the pointer is hovered over the + New button in the top-left corner. To the right in this window is the code editor, with "{" printed on the first line and "}" on the second.

A modal window will appear where you can select a language. When finished, click Create JSON file.

Cocos Creator screenshot, a pop-up window over the Localization Editor window. In the center of the window is the text Create new localization, below it the Language heading with the language Afar (aa) selected in the drop-down list, and below that the Create JSON file! button.

For example, select English (en) and enter the following into the editor:

1{
2    "title": "best game in the world 2"
3}

Click the Save button to save the localization and test it in the game.

Cocos Creator screenshot, the Localization Editor window (the window title is written in blue font). In the top-left corner there are three buttons: + New, a floppy disk icon with the text Save (the pointer is hovered over this button), and a folder icon with the text Open. Below is a table of contents with a single EN file. To the right in this window is the code editor, with "{" printed on the first line, ""title": "best game in the world 2"" on the second, and "}" on the third.

Applying Your Localization

There are two ways to apply localization: using the l10n.t() method or through the smart localization component.

The l10n.t method

Let's first try using the l10n.t() method. Create a new component and insert the following:

 1import { _decorator, Component, Label } from 'cc';
 2import { l10n } from 'db://yandex-games-sdk/ysdk';
 3const { ccclass, requireComponent } = _decorator;
 4
 5@ccclass('ButtonLocalizationTest') // Component name.
 6@requireComponent(Label) // Dependency on the Label component.
 7export class ButtonLocalizationTest extends Component {
 8    onLoad() {
 9        const label = this.getComponent(Label); // Retrieve the Label component.
10        label.string = l10n.t('title'); // Set the text of the Label based on a previously specified key.
11    }
12}

After you create a node with the Label component on the scene, you can localize it by dragging the component into the node.

Cocos Creator setup video: in the Hierarchy window, the structure with the root element scene-2D is expanded. It contains a Canvas element, which contains a Camera element. The user right-clicks, selects Create → 2D objects → Label. A Label object appears, and the user selects it so that its properties are displayed in the Inspector window. In the Assets window, next to the scene-2D element, there is a LabelLocalization Test element. The user drags this element into the cc.Label section. The user then clicks the Play button on the Preview panel (located at the top of the screen, in the middle). A pop-up window appears with an interactive game, and after loading, the localized text best game in the world 2 appears on the screen.

The Ready-made Component L10nLabel

The plugin includes a ready-made component that displays the key directly in the editor. You do not need to compile the project to see changes, as it automatically updates when changes are made in the translation editor.

Click the Add Component button for the node you are interested in, scroll to the YandexGamesSDK group, and select L10nLabel.

Cocos Creator setup video: the user clicks the Add component button at the end of the component list. In the drop-down list, the user selects YandexGamesSDK → L10nLabel.

To have localization changes immediately reflected in the project without recompiling it, enter your key in the Key field.

Cocos Creator setup video: in the Localization Editor window (the window title is written in blue font), the user edits the text. He changes the text ""title": "best game in 3asd a asd a"" to ""title": "best game in the world 3"". He then clicks the button with the floppy disk icon and the text Save in the top-left corner of the Localization Editor window. Immediately after that, the text in the "Scene" window changes from "best game in 3asd a asd a" to "best game in the world 3".

Repository
Previous
Yandex Games SDK API
Next
Testing