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

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-plugin-excel-to-json

简介

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

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

zh 代表中文
en 代表英语

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

…/resources/language 配置json、spine、texture等不同文件目录，设置不同语言的具体信息
excel/Language.xlsx 配置多语言的文本内容

在CocosCreator中使用多语言只需要在属性检查器 中增加对应的多语言组件即可。
oops-framework框架之多语言设置文本、精灵和骨骼动画-LMLPHP

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

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

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

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

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，它对外提供的主要参数或接口：

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

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针对于多语言已经在oops-framework框架中做了有效的处理。在项目中我们可能需要做的事情就是：

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

针对于第一个问题，需要打开: 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");
    }
  })
}

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

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

FlyingBird~