oops-framework框架 之 多语言设置文本、精灵和骨骼动画

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-plugin-excel-to-json

注： 作者dgflash的oops-framework框架QQ群： 628575875

简介

---

作者dgflash在oops-framework的框架中提供了多语言，主要用于对文本、图片、骨骼动画的支持。

不同国家内容的展示，会进行分门别类的标记，比如：

• zh 代表中文
• en 代表英语

框架提供了两种方式用于配置多语言内容：

• …/resources/language 配置json、spine、texture等不同文件目录，设置不同语言的具体信息
  

• excel/Language.xlsx 配置多语言的文本内容
  

注： 针对于excel的使用可参考博客： oops-framework框架 之 Excel转Json

在CocosCreator中使用多语言只需要在属性检查器 中增加对应的多语言组件即可。

文本设置如下：

精灵设置如下：

骨骼动画的设置如下：

注： 设置文本、精灵、骨骼动画的关键字段均为Data ID

在添加对应的多语言组件后，如果语种变换，框架会自动下载对应的语言包内容，并进行页面更新。

Language

---

作者dgflash提供的oops-framework框架中， 多语言的主要入口是：

// ../oops-plugin-framework/assets/core/Oops.ts
export class oops {/** 多语言模块 */static language: LanguageManager;
}

多语言的初始化主要在项目启动加载必备资源中执行的，主要代码如下：

// ../initialize/bll/InitRes.ts
entityEnter(e: Initialize): void {var queue: AsyncQueue = new AsyncQueue();// 加载自定义资源this.loadCustom(queue);// 加载多语言包this.loadLanguage(queue);// ...queue.play();
}// 主要用于加载多语言对应的字体文件，比如ttf等
private loadCustom(queue: AsyncQueue) {queue.push(async (next: NextFunction, params: any, args: any) => {oops.res.load("language/font/" + oops.language.current, next);});
}// 主要用于下载对应语种资源
private loadLanguage(queue: AsyncQueue) {queue.push((next: NextFunction, params: any, args: any) => {// 从本地存储中获取语言，如果为空则默认中文let lan = oops.storage.get("language");if (lan == null || lan == "") {lan = "zh";oops.storage.set("language", lan);}// 设置语言包路径oops.language.pack.json = oops.config.game.languagePathJson;oops.language.pack.texture = oops.config.game.languagePathTexture;// 加载语言包资源oops.language.setLanguage(lan, next);});
}

框架很好的为我们提供了多语言的初始化及资源的下载相关。

oops.language的主要实现是LanguageManager，它对外提供的主要参数或接口：

参数或接口	说明
languages	设置或获取支持的语言列表，比如: [“zh”, “en”]等
default	设置默认语言
current	获取当前语言
pack	获取当前语言包，主要包括Json、texture、spine等资源目录相关
isExist()	检测指定语种是否存在
setLanguage()	设置当前语言，语言包下载结束后，会有回调，true表示成功; false表示失败
getNextLang()	获取下一个语言
getLangByID()	获取langId获取语言的内容，用于文本
loadLanguageAssets()	下载指定语言的资源，包括Json、texture、spine等
releaseLanguageAssets()	释放不需要的语言包资源

该管理类，主要管理的文件有：

• LanguageData 用于根据languageId 获取文本对应语种的内容
• LanguagePack 用于下载或释放对应语种的纹理、动画、Json、Excel表内容
• LanguageLabel/LanguageSpine/LanguageSprite 多语言文本、骨骼动画、精灵组件，既然能在属性检查器中加载，他们都继承于Component

LanguageData主要用于根据文本设置的多语言字段获取内容，主要实现代码如下：

export class LanguageData {/** 当前语言 */static current: string = "";/** 语言JSON配置数据 */static json: any = {}/** 语言EXCEL中的配置数据 */static excel: any = null!;/*通过多语言关键字获取语言文本,注意：1、先获取language/json中的配置数据，如果没有则获取config/game/Language配置表中的多语言数据2、config/game/Language配置表可选使用，不用时不创建同名配置表即可3、config/game/Language配置表使用oops-plugin-excel-to-json插件生成*/public static getLangByID(labId: string): string {var text = this.json[labId];if (text) {return text;}if (this.excel) {var record = this.excel[labId];if (record) {return record[this.current];}}return labId;}
}

注：可爱的作者dgflash已经告知获取内容的方式，因此看个人习惯，配置Excel表或Json格式都支持

使用示例

---

作者dgflash针对于多语言已经在oops-framework框架中做了有效的处理。在项目中我们可能需要做的事情就是：

1. 通过配置，设置项目支持的语言列表
2. 切换语言，并移除不需要的语言

针对于第一个问题，需要打开: resources/config.json, 新增数据：

{"config": {"version": "1.0.5","package": "com.oops.game","localDataKey": "oops","localDataIv": "framework","httpServer": "http://192.168.0.150/main/","httpTimeout": 10000,"frameRate": 60},"languageList": ["zh", "en", "tw"],   //   "language": {"type": ["zh","en"],"path": {"json": "language/json","texture": "language/texture"}}
}

主要代码如下：

// 通过config.json自定义配置语言列表
let languageList = oops.config.game.data.languageList;
if (languageList && languageList.length > 0) {oops.language.languages = languageList;
}// 改变语种
let curLanguage = oops.language.current;
if (curLanguage !== "zh") {oops.language.setLanguage("zh", (sucess) => {if (sucess) {oops.language.releaseLanguageAssets("en");}})
}

注：如果想学习i18n的多语言，可参考博客： cocosCreator 之 i18n多语言插件的使用

再次感谢作者dgflash的分享，作者CSDN博客： dgflash CSDN

最后，祝大家学习和生活愉快!