Cocos Creator i18n多语言 (含demo下载)


版本:2.4.4

参考:

cocos文档-i18n 游戏多语言支持

github-cocos多语言支持

 demo:

下载地址

i18n是什么

i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。

游戏中可能需要多种语言,例如一个cc.Label文本选择中文时显示"开始",选择英文时显示"Start"。

 还有字不是cc.Label,而是在一张图上的,需要图片做成中文和英文两份。

cocos的i18n

去论坛搜索多语言解决方案,cocos有现成的方案:https://github.com/cocos-creator-packages/i18n

大致是每种语言一个配置文件

例如英文配置enConfig

{
    "hello":"hello",
    ...
}

 中文配置zhConfig

{
    "hello":你好,
   ...
}

 然后根据语言选择对应的配置

let config;
if(language == "zh"){
    config = zhConfig;
}else if(language == "en"){
   config = enConfig;
} 

文本赋值

this.label.string = config["hello"];

不过年代久远,而且现在已经不维护更新了,建议开发者自行去实现多语言切换。

去cocos论坛搜索了下,水友表示demo会出问题,然后就没打算使用了。

cocos i18n demo

虽然不能使用,但是可以看下实现原理。下载这个demo,看了下源码,大致原理就是自定义了一个文本组件LocalizedLabel,这个组件在运行时根据选择的语言从配置里读取字符串进行文本切换。

cocos把中文和英文字符串定义在两个配置文件中

英文字符串配置 en.js:

 中文字符串配置 zh.js:

多语言文本组件LocalizedLabel

LocalizedLabel根据dataID去配置里找相应的字符串赋值给label。

    updateLabel () {
        if (!this.label) {
            cc.error('Failed to update localized label, label component is invalid!');
            return;
        }
        let localizedString = i18n.t(this.dataID);
        if (localizedString) {
            this.label.string = i18n.t(this.dataID);
        }
    }

大致如下图:

多语言图片组件LocalizedSprite

图片组件LocalizedSprite,原理大致差不多,根据选择的语言去找到对应图片赋值给spriteFrame:

    updateSprite (language) {
        if (!this.sprite) {
            cc.error('Failed to update localized sprite, sprite component is invalid!');
            return;
        }

        let spriteFrame = this.getSpriteFrameByLang(language);

        if (!spriteFrame && this.spriteFrameSet[0]) {
            spriteFrame = this.spriteFrameSet[0].spriteFrame;
        }

        this.sprite.spriteFrame = spriteFrame;
    }

 自写多语言i18n组件

参考论坛水友github-cocos多语言支持的代码,因为水友已经不做cocos了,所以参考扩展了下。Demo下载。

大部分基本都是参考水友的,有些微改动。

1. 增加了richText的支持。

2. 动态传入参数不使用"#"号,因为richText的文本可能是,导致会误判是个传参。

3.增加了语言选择的枚举变量,后面项目使用GM工具来切换语言进行测试比较方便。