CocosCreator多语言包的处理

快来打我* 2023-03-01 09:50 7阅读 0赞

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

## 单个包 ##

### 优点： ###

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一样。