i18n multi-language support

The game's multilingual support is implemented through the Cocos Creator editor extension, which implements the multilingual internationalization of the Label and Sprite components (i18n).

Note that the difference between internationalization and localization of multilingualism is that internationalization requires software to include text and image data in multiple languages and to switch in real time based on the default language or menu selection of the device used by the user. Localization is custom text and image content for a specific language when publishing software.

This plugin is a multilingual support plugin and therefore does not include the ability to remove part of the multilingual data when building the project.

Extension installation method

Install from extension store

Please refer to the Extended Editor: Installation and Sharing documentation.

Manual installation

Please download the multi-language support plug-in package download.

Example project

Download the i18n Sample Project and open it to make sure that the i18n plugin is already loaded and then you can test the multilingual functionality against the actual project.

Language configuration

First open the i18n panel from the main menu: Extension->i18n.

And then need to create a multi-language translation data containing JSON files (in order to facilitate the use of. Js format storage):

Enter the ID of the new language in the New Language ID input box in the Manage Languages section, such as zh (for Chinese), en (for English) and so on.
Enter the ID and click the Create button to add a language to the relevant language selection menu and create a translation data template for the corresponding language in the resources/i18n directory of the project, such as resources/i18n/en.js.

Next, in the drop-down menu of the Preview Language section of the i18n panel, you can select the language in the editor's preview.

Localize the Label text

Add the Localize component

The i18n plugin provides two components for use with Label and Sprite to display multilingual content.

We started with Label, and we can add the i18n/LocalizedLabel component to the node where any Label component is located in the scene or prefab. This component only need to enter the translation data index dataID can be based on the current language to update the Label string display.

Let's talk about how to configure dataID.

Translate data

The plugin creates the translation data template like this:

// zh.js

if (!window.i18n) window.i18n = {};
window.i18n.zh={
// write your key value pairs here
    "label_text": {
        "hello": "你好！",
        "bye": "再见！"
    }
};

The window.i18n.zh global variable is written so that we can access the data at any time in the script without having to load it asynchronously.

In the braces inside the content is the user needs to add the value of the translation key, we use the AirBnb company developed Polyglot library for international string search, Translation key to support object nesting, parameter transfer and dynamic modification of data and other functions, very powerful. For more usage, please read the documentation on the link above.

If we set up our translation data as in the example above, the following key-value pairs are generated:

"label_text.hello": "Hello!"
"label_text.bye": "goodbye!"

Preview

Then we just in the LocalizedLabel component dataID attribute write label_text.hello, where the node on the Label component will show Hello! text.

If you need to modify the text of the Label render at run time, please also assign localizedLabel.dataID instead of Label.string.

When you need to preview the display in other languages, open the i18n panel and switch the language in Preview Language. The Label display in the scene will be updated automatically.

Runtime setting language

The game can be run according to the user operating system language or menu selection to set the language, access to the need to use the language ID, you need to use the following code to initialize:

Const i18n = require ('LanguageData');
I18n.init ('zh'); // languageID should be equal to the one we input in New Language ID input field

You can also call i18n.init() when you want to switch languages later.

Note that the runtime must ensure that i18n.init(language) is executed before the scene containing the LocalizedLabel component is loaded, otherwise it will be errored because the data can not be loaded on the component.

Script to use the translation key value to get the string

In addition to working with LocalizedLabel to solve the multi-lingual problem of static tags in the scene, the LanguageData module can also be used separately in scripts to provide runtime translation:

const i18n = require ('LanguageData');
i18n.init ('en');
let myGreeting = i18n.t ('label_text.hello');
cc.log (myGreeting); // Hello!

Localize the Sprite image

Add the LocalizedSprite component

First add the i18n/LocalizedSprite component to the node where any Sprite component is in the scene or prefab. The component requires us to manually add a set of language id and SpriteFrame mapping, you can preview and run the editor to display the correct language of the picture.

Add language image mapping

Responsible for carrying the language to the map mapping property spriteFrameSet is an array, we can operate as other array attributes to add a new mapping

First set the size of the array, and language type to be equal
Fill in the corresponding language id for each of the language attributes, such as en or zh.
Drag the language corresponding map (or SpriteFrame) to the spriteFrame property.

After completing the setup, click the Refresh button below to see the effect in the scene.

Like LocalizedLabel, when we change the preview language in the i18n panel, all the LocalizedSprite in the current scene will be automatically refreshed to display the corresponding image for the current language.

i18n