CocosCreator多语言包的处理

如果项目需要国际化的处理，也就是需要切换语言的功能时，一般有两种方案：

单个包

优点：

1.可以动态切换语言（当然要代码上实现）

2.只有一个版本，容易维护

缺点：

1.安装包大

多个包

优点：

1.安装包小

2.可以对不同语言做深入的本地化（比如功能不同）

缺点：

1.需要发多次审核

2.多个版本维护

 

下面，我们只讨论单个包的情况

 

因为CocosCreator的i18已经不灵了，所以我们自己动手搞一个。

要完成这个需求，大概需要四个文件：

1.LanguageMgr.ts

2.LanguageSprite.ts

3.LanguageLabel.ts

4.language.json

 

LanguageMgr.ts:

/*
多语言管理类，主要功能是加载多语言的图片和文字
*/

import { EventMgr } from "./EventMgr";
import { GlobalEvent } from "../model/EventType";
import { config } from "./config";
import { CallNative } from "./CallNative";
import { LanguageEnum } from "./Enum";

export class LanguageMgr {
    static languageJson = null;
    static kind = "EN";

    /**
     * 加载多语言json
     */
    static initLanguageJson() {
        this.languageJson = config.getOneConfig("language");
    };

    static init() {
        this.initLanguageJson();

        let kind = "EN";
        if (cc.sys.localStorage.getItem("lanAndCountry")) {
            kind = cc.sys.localStorage.getItem("lanAndCountry");
        } else {
            let lanAndCountry = CallNative.getLanguage();
            if (lanAndCountry.substr(0, 2) == "zh") {
                kind = LanguageEnum.tc;
            } else {
                kind = LanguageEnum.en;
            }
        }
        this.setKind(kind);
    }

    /**
     * 设置语言类型
     * @param kind 
     */
    static setKind(kind: string) {
        this.kind = kind;
    }

    /**
     * 获取当前语言类型
     * @param kind
     */
    static getKind() {
        return this.kind;
    }


    /**
     * 修改语言
     * @param kind 
     */
    static changeLanguage = function (kind: string) {
        if (this.kind != kind) {
            this.setKind(kind);
            cc.sys.localStorage.setItem("lanAndCountry", kind);
            EventMgr.sendNormalEvent(GlobalEvent.CHANGE_LANGUAGE);
        }
    }

    /**
     * 获取语言包的key
     * @param text 
     * @param param 
     */
    static getText = function (text: string, param?: { "$param1": string | number }) {
        if (this.languageJson && this.languageJson[text]) {
            let str: string = this.languageJson[text][this.kind] || "";
            if (param) {
                if (param["$param1"] !== undefined) str = str.replace("$param1", param["$param1"].toString());
            }
            return str;
        } else if (text == "") {
            return "";
        } else {
            console.log("文本 " + text + " 没有多语言");
            return text;
        }

    }
}

 

LanguageSprite.ts:

import { LanguageMgr } from "../common/LanguageMgr";
import { GlobalEvent } from "../model/EventType";

const { ccclass, property, menu, requireComponent, disallowMultiple } = cc._decorator;

/**
 * 多语言的图片初始化
 */
@ccclass
@menu("多语言/sprite")
@requireComponent(cc.Sprite)
@disallowMultiple
export default class LanguageSprite extends cc.Component {

    @property(cc.SpriteFrame)
    en: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    sc: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    tc: cc.SpriteFrame = null;

    start() {
        cc.director.on(GlobalEvent.CHANGE_LANGUAGE, this.changeLanguage, this);
        this.changeLanguage();
    }

    /**
     * 监听切换语言事件
     */
    changeLanguage() {
        if (LanguageMgr.getKind() == "EN") {
            this.getComponent(cc.Sprite).spriteFrame = this.en;
        } else if (LanguageMgr.getKind() == "TC") {
            this.getComponent(cc.Sprite).spriteFrame = this.tc;
        } else {
            if (this.sc) {
                this.getComponent(cc.Sprite).spriteFrame = this.sc;
            } else {
                this.getComponent(cc.Sprite).spriteFrame = this.tc;
            }
        }
    }
}

 

LanguageLabel.ts:

import { GlobalEvent } from "../model/EventType";
import { LanguageMgr } from "../common/LanguageMgr";

const { ccclass, property, menu, requireComponent, disallowMultiple } = cc._decorator;

@ccclass
@menu("多语言/label")
@requireComponent(cc.Label)
@disallowMultiple
export default class LanguageLabel extends cc.Component {


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}
    @property
    prefix: string = "";
    @property
    suffix: string = "";
    @property
    text: string = "";

    start() {
        cc.director.on(GlobalEvent.CHANGE_LANGUAGE, this.changeLanguage, this);
        this.changeLanguage();
    }

    /**
     * 监听切换语言事件
     */
    changeLanguage() {
        var label = this.getComponent(cc.Label);
        if (label) {
            label.string = this.prefix + LanguageMgr.getText(this.text) + this.suffix;
        } else {
            console.log(this.node.name + " 挂载的节点没有label组件！");
        }
    }

    // update (dt) {}
}

 

language.json:

{
	"TEST_VERSION": {
		"EN": "Test Version",
		"TC": "測試版本",
		"SC": "测试版本"
	},
	"SERVER_IS_DISCONNTECTED_LOGIN_IN_AGAIN": {
		"EN": "The Server is Disconnected, Please Log In Again!",
		"TC": "服務器已斷開鏈接，請重新登錄!",
		"SC": "服务器已断开连接，请重新登录!"
	},
	"DAILY_TASK": {
		"EN": "Daily Quest",
		"TC": "每日任務!",
		"SC": "每日任务!"
	},
	"OCCUPIED": {
		"EN": "Occupied",
		"TC": "使用中",
		"SC": "使用中"
	}
}

 

各个脚本的主要用法:

例如，LanguageMgr.getText("TEST_VERSION");

当文本是动态变换的时候，需要用LanugaeMgr.getText。

如果是静态的文本显示：

则将LanguageLabel挂载到相应节点。

LanguageSprite的使用方式和LanguageLabel一样。