I18n game multi-language support
Please download the multi-language support plug-in package [Download] (http://cocostudio.download.appget.cn/CocosCreator/packages/cocos-creator-i18n.zip). The plugin will add the following to your project:
-
i18n / i18n.js: Responsible for initializing localized text data and providing translation output at run time.
-
i18n / polyglot.js: The i18n localization codebase from airbnb, https://github.com/airbnb/polyglot.js for a complete documentation reference
-
i18n / data / zh.js: Chinese language data template, you should add your translation dictionary here
-
i18n / data / en.js: English language data template where you should add your translation dictionary
-
i18n / LabelLocalized.js: Replace the original Label with this component, and fill theText Key property of the component with the key value in the translation dictionary to display the correct translated text in the editor and at run time .
You can also download the [i18n Multilingual Support Sample Project] (https://github.com/cocos-creator/i18n-example) to practice with the actual project.
work process
Extracting the plug-in package into your project’s assets directory should result in the following directory structure:
Assets
| -i18n
| -data
| -en.js
| -zh.js
| -i18n.js
| -LabelLocalized.js
| -polyglot.js
| -Readme.md
Customize localized data
Next you should first customize the data source files in the assets / i18n / data directory according to the needs of the multilingual category. The format of each file is as follows:
// zh.js
Module.exports = {
"HELLO": "Hello"
"WORLD": "World"
}}
Where HELLO is the key, the value after the translation of the text. Here js format used to define the data in order to be normal engine reference.
The content of the data is a standard JavaScript Object, so you can use a nested structure:
Module.exports = {
'GREETINGS': {
'HELLO': 'Hello'
'WORLD': 'World'
}}
}}
And then through the GREETINGS.HELLO form to access the key.
You can create multiple copies of the data source files, the file name of each data source file is the language of the logo, such as fr.js language identity isfr, followed by how we will show through the language logo to switch display Language.
Set the default display language for the scene editor
The language displayed in the Scene Editor is in assets / i18n / i18n.js
Const language = require ('zh');
You can change the language displayed in the scene preview by replacing zh in the above code with en or another language identifier.
Runtime text translation
In the code, you can call at any time
Var i18n = require ('i18n'); // Normally this is called at the very beginning of the script
I18n.init ('zh'); // init parameter is the language identifier, such as 'zh', 'en', etc.
Var myLocalizedText = i18n.t ('TEXT_KEY');
To get the localized string through the key in the text data source dictionary.
Text fusion
You can use the following definition in the data source:
Module.exports = {
"Hello_name": "Hello,% {name}"
}}
To declare a parameter that can be fused into the final text, when in use:
Var greetingText = i18n.t ('hello_name', {name: 'nantas'}); // Hello, nantas
You can enter a text to add a parameter to the dynamic code to get the string and the default translation of the text fusion.
Rendering translated effects in scene editing
In the scene, we need to use the LabelLocalized component instead of the originalLabel, LabelLocalized component thanLabel add an attribute Text Key,
In the Property Inspector, we set Text Key to the key value in the dictionary, andLabelLocalized will display the translated text in the scene.
The LabelLocalized.string property is now read-only and can not be written to by this interface.
