EN
类别: 首页> Creator插件
i18n多语言化插件

i18n多语言化插件 v0.0.3

类别:Creator插件

作者:官方

要求:适用于Creator v1.3.3.0

分享到:
免费 下载
简介
# i18n for Cocos Creator
Cocos Creator 编辑器扩展:实现 Label 和 Sprite 组件的多语言国际化(i18n)。
注意,多语言国际化和本地化的区别是,国际化需要软件里包括多种语言的文本和图片数据,并根据用户所用设备的默认语言或菜单选择来进行实时切换。而本地化是在发布软件时针对某一特定语言的版本定制文本和图片内容。
本插件是多语言支持插件,因此不包括构建项目时去除一部分多语言数据的功能。
## 使用说明
完整使用说明请查看 https://github.com/cocos-creator-packages/i18n#i18n-for-cocos-creator
## 语言配置
首先从主菜单打开 i18n 面板: `插件->i18n`。
然后需要创建包含多语言翻译数据的 JSON 文件(为了方便使用采用 .js 格式存储):
- 在 `Manage Languages` 部分的 `New Language ID` 输入框里输入新增语言的 ID,如 `zh`(代表中文),`en`(代表英文)等。
- 输入 ID 后点击 `Create` 按钮,会在相关的语言选择菜单里增加一种语言,并且会在项目的 `resources/i18n` 目录下创建对应语言的翻译数据模板,如 `resources/i18n/zh.js`
接下来在 i18n 面板的 `Preview Language` 部分的下拉菜单里就可以选择编辑器里预览时的语言了。
## 本地化 Label 文本
### 添加 Localize 组件
i18n 插件提供了两种组件分别用于配合 [Label](http://www.cocos.com/docs/creator/components/label.html) 和 [Sprite](http://www.cocos.com/docs/creator/components/sprite.html) 来显示多语言内容。
我们从 Label 开始,我们可以在场景或 prefab 中任何 Label 组件所在的节点上添加 `i18n/LocalizedLabel` 组件。这个组件只需要输入翻译数据索引的 dataID 就可以根据当前语言来更新 Label 的字符串显示。
下面我们来介绍如何配置 dataID。
### 翻译数据
插件创建的翻译数据模板是这样的:
```js
// zh.js
if (!window.i18n) window.i18n = {};
window.i18n.zh={
// write your key value pairs here
"label_text": {
"hello": "你好!",
"bye": "再见!"
}
};
```
其中 `window.i18n.zh` 全局变量的写法让我们可以在脚本中随时访问到这些数据,而不需要进行异步的加载。
在大括号里面的内容是用户需要添加的翻译键值对,我们使用了 AirBnb 公司开发的 [Polyglot](http://airbnb.io/polyglot.js/) 库来进行国际化的字符串查找,翻译键值对支持对象嵌套、参数传递和动态修改数据等功能,非常强大。更多用法请阅读上面链接里的文档。
如果像上面例子里一样设置我们的翻译数据,那么就会生成如下的键值对:
- "label_text.hello" : "你好!"
- "label_text.bye" : "再见!"
### 查看效果
接下来我们只要在 LocalizedLabel 组件的 `dataID` 属性里写入 `label_text.hello`,其所在节点上的 Label 组件就会显示 `你好!` 文字。
运行时如果需要修改 Label 渲染的文字,也请对 `LocalizedLabel.dataID` 进行赋值,而不要直接更新 `Label.string`。
当需要预览其他语言的显示效果时,打开 i18n 面板,并切换 `Preview Language` 里的语言,场景中的 Label 显示就会自动更新。
截图
用户评分
平均评分
共有2个用户评分
  • 2
  • 0
  • 0
  • 0
  • 0
评论
点击评分: