i18n 游戏多语言支持

Cocos Creator 从 3.1 版本起,提供了 i18n 游戏多语言扩展插件,目前支持 Label 和 Sprite 组件,可在 Cocos Store 中下载使用。

什么是 i18n

i18n国际化 的简称,来源是英文单词 internationalization 的首末字符 in,18 为单词中间的字符数。在资讯领域,国际化(i18n)可以让产品无需做大的改变,就能够满足不同语言和地区的需要。对程序来说,在不修改内部代码的情况下,就能根据不同语言及地区切换相应的语言界面。如今全球化的时代,国际化尤为重要,因为产品的潜在用户可能来自世界的各个角落。

通常与 i18n 相关的还有 L10n(“本地化”的简称),多语言国际化和本地化的区别在于:

  • 国际化 需要软件里包括多种语言的文本和图片数据,并根据用户所用设备的默认语言或菜单选择进行实时切换。
  • 本地化 是在发布软件时针对某一特定语言的版本定制文本和图片内容。

注意:i18n 游戏多语言扩展插件不提供构建项目时的多语言资源管理,若面向不同地区发布项目,需要移除一部分多语言资源时,请手动处理。

安装

  1. 点击 Creator 顶部菜单栏中的 扩展 -> 商城 进入 Cocos Store,查找 i18n 多语言化扩展插件 或者直接在上方搜索框中搜索:

    i18n-search

  2. 单击进入详情页,可以看到 i18n 的基本信息、资源介绍和历史版本记录。然后点击 下载 按钮:

    i18n-store

  3. 下载完成后会显示在右侧自动打开的下载历史栏中,继续点击下图中的安装按钮,然后选择扩展插件安装位置(全局/项目)即可。

    注意:若是首次安装 i18n 多语言化扩展插件,安装完成后需要重启 Creator。

    i18n-install

  4. 安装完成后刷新 资源管理器 可以看到新增了 i18n 文件夹及几个脚本,用于后续使用扩展插件。

    i18n-script

使用

多语言配置

i18n 扩展插件安装完成后,会在 Creator 顶部菜单栏的 扩展 中生成 I18n Settings 菜单,点击即可打开 本地化控制面板,进行多语言配置。

i18n-menu

点击面板左上角的 + 按钮,在下方新增的输入框中输入需要新增的语言 ID。语言 ID 可自定义,但不支持使用符号,例如 zh-CN 请写为 zhCN

i18n-langu

首个新增语言的左侧默认会有一个 i18n-display 按钮,表示作为预览项目时显示的语言;之后新增的语言则默认为 i18n-undisplay,表示不作为在预览项目时显示的语言,点击按钮即可切换语言显示状态。 当鼠标悬浮在任意语言上时,对应语言右侧会出现一个删除按钮,用于删除当前选中的语言。

语言新增完成后,在项目的 assets\resources\i18n 目录下会生成相应的语言配置模板,用于配置需要多语言化的 Label,详情请参考下文介绍。

i18n-langu-file

本地化 Label

打开语言配置模板,例如项目目录下的 assets\resources\i18n\zh.ts,添加 “test” 字段,并在其中定义 “main” 和 “hello”,用于后续在编辑器中调用当前语言下要显示的文本内容的 key:

  1. const win = window as any;
  2. export const languages = {
  3. "test": {
  4. "main": "测试",
  5. "hello": "你好",
  6. }
  7. };
  8. if (!win.languages) {
  9. win.languages = {};
  10. }
  11. win.languages.zh = languages;

然后回到 Creator,在 层级管理器 选中 Label 节点,然后点击 属性检查器 下方的 添加组件 按钮,选择 自定义脚本 -> LocalizedLabel,将脚本挂载到节点上。

或者也可以直接将 LocalizedLabel.ts资源管理器 拖拽到 属性检查器

i18n-localizedlable

然后在 LocalizedLabel 脚本组件的 Key 属性框中输入刚刚在 zh.ts 中配置的 test.main 或者 test.hello

i18n-label

之后可参照 zh.ts 的配置对 assets\resources\i18n\en.ts 进行配置,配置完成后即可在 本地化控制 面板切换语言显示,如下所示:

i18n-label-change

注意:若需要修改 Label 渲染的文字,请直接修改刚才配置的语言脚本的 key 值,不要直接在 Label 组件中修改 string 属性。

本地化 Sprite 图片

在 Creator 的 层级管理器 选中 Sprite 节点,然后点击 属性检查器 下方的 添加组件 按钮,选择 自定义脚本 -> LocalizedSprite,即可在 Sprite 节点上挂载 LocalizedSprite 脚本组件:

i18n-sprite1

然后在 SpriteList 属性框中设置语言数量,填写对应的 语言 ID 并拖入对应的 图片资源。例如下图设置为中/英文两种语言:

i18n-sprite2

配置完成后即可在 本地化控制 面板中切换语言显示。

i18n-sprite3

动态切换语言

在游戏运行时,若需要动态切换语言,可以调用 i18n.init(language) 方法。若语言切换后,需要马上更新当前场景,则需要再调用 i18n.updateSceneRenderer() 方法。

  1. changeLang() {
  2. if (i18n._language === 'en') {
  3. i18n.init('zh');
  4. } else {
  5. i18n.init('en');
  6. }
  7. i18n.updateSceneRenderers();
  8. }

注意:请确保运行时 i18n.init(language) 的执行是在包含有 LocalizedLabel 组件的场景加载完成之后。

我们以在场景中添加一个按钮来控制中/英文的切换为例,需新建一个脚本挂载在 Button 节点上。然后在脚本中将 changeLang 方法绑定在按钮点击事件中,例如:

  1. import { _decorator, Component, Node, Button } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. // import * as i18n from '../extensions/i18n/assets/LanguageData'
  4. import * as i18n from 'db://i18n/LanguageData';
  5. @ccclass('Button')
  6. export class Button extends Component {
  7. start() {
  8. this.node.on(Button.EventType.CLICK, this.changeLang, this);
  9. }
  10. changeLang() {
  11. if (i18n._language === 'en') {
  12. i18n.init('zh');
  13. } else {
  14. i18n.init('en');
  15. }
  16. i18n.updateSceneRenderers();
  17. }
  18. }

代码编写完成后回到 Creator,点击预览即可看到效果如下图:

i18n-changelang