--- metadata: - name: generator content: Diplodoc Platform v5.66.0 alternate: - https://yandex.com/dev/games/doc/en/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/hi/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/ko/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/ru/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/tr/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/vi/sdk/cocos/localization.md - https://yandex.com/dev/games/doc/zh/sdk/cocos/localization.md - href: https://yandex.com/dev/games/doc/en/sdk/cocos/localization.md type: text/markdown title: Markdown version - href: https://yandex.com/dev/games/doc/en/llms.txt?revision=r21993288 rel: describedby --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/games/doc/en/llms.txt?revision=r21993288 # Localization ## Localization Editor {#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.](../../_images/cocos/localization/create-loc.webp) 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.](../../_images/cocos/localization/create-json.webp) For example, select _English (en)_ and enter the following into the editor: ```json showLineNumbers { "title": "best game in the world 2" } ``` 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.](../../_images/cocos/localization/save-loc.webp) ### Applying Your Localization {#localization-use} There are two ways to apply localization: using the `l10n.t()` method or through the smart localization component. #### The l10n.t method {#l10nt-method} Let's first try using the `l10n.t()` method. Create a new component and insert the following: ```tsx showLineNumbers import { _decorator, Component, Label } from 'cc'; import { l10n } from 'db://yandex-games-sdk/ysdk'; const { ccclass, requireComponent } = _decorator; @ccclass('ButtonLocalizationTest') // Component name. @requireComponent(Label) // Dependency on the Label component. export class ButtonLocalizationTest extends Component { onLoad() { const label = this.getComponent(Label); // Retrieve the Label component. label.string = l10n.t('title'); // Set the text of the Label based on a previously specified key. } } ``` 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.](../../_images/cocos/localization/label.gif) #### The Ready-made Component L10nLabel {#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.](../../_images/cocos/localization/l10n-label.gif) 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".](../../_images/cocos/localization/enter-key.gif) --- Repository