CocosCreator多语言包的处理

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

单个包 优点：

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

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

缺点：

1.安装包大

多个包 优点：

1.安装包小

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

缺点：

1.需要发多次审核

2.多个版本维护

 

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

 

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

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

1.LanguageMgr.ts

2.LanguageSprite.ts

3.LanguageLabel.ts

4.language.json

 

LanguageMgr.ts:

1. /*

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

3. */

4.  

5. import { EventMgr } from "./EventMgr";

6. import { GlobalEvent } from "../model/EventType";

7. import { config } from "./config";

8. import { CallNative } from "./CallNative";

9. import { LanguageEnum } from "./Enum";

10.  

11. export class LanguageMgr {

12. static languageJson = null;

13. static kind = "EN";

14.  

15. /**

16. * 加载多语言json

17. */

18. static initLanguageJson() {

19. this.languageJson = config.getOneConfig("language");

20. };

21.  

22. static init() {

23. this.initLanguageJson();

24.  

25. let kind = "EN";

26. if (cc.sys.localStorage.getItem("lanAndCountry")) {

27. kind = cc.sys.localStorage.getItem("lanAndCountry");

28. } else {

29. let lanAndCountry = CallNative.getLanguage();

30. if (lanAndCountry.substr(0, 2) == "zh") {

31. kind = LanguageEnum.tc;

32. } else {

33. kind = LanguageEnum.en;

34. }

35. }

36. this.setKind(kind);

37. }

38.  

39. /**

40. * 设置语言类型

41. * @param kind

42. */

43. static setKind(kind: string) {

44. this.kind = kind;

45. }

46.  

47. /**

48. * 获取当前语言类型

49. * @param kind

50. */

51. static getKind() {

52. return this.kind;

53. }

54.  
55.  

56. /**

57. * 修改语言

58. * @param kind

59. */

60. static changeLanguage = function (kind: string) {

61. if (this.kind != kind) {

62. this.setKind(kind);

63. cc.sys.localStorage.setItem("lanAndCountry", kind);

64. EventMgr.sendNormalEvent(GlobalEvent.CHANGE_LANGUAGE);

65. }

66. }

67.  

68. /**

69. * 获取语言包的key

70. * @param text

71. * @param param

72. */

73. static getText = function (text: string, param?: { "$param1": string | number }) {

74. if (this.languageJson && this.languageJson[text]) {

75. let str: string = this.languageJson[text][this.kind] || "";

76. if (param) {

77. if (param["$param1"] !== undefined) str = str.replace("$param1", param["$param1"].toString());

78. }

79. return str;

80. } else if (text == "") {

81. return "";

82. } else {

83. console.log("文本 " + text + " 没有多语言");

84. return text;

85. }

86.  

87. }

88. }

 

LanguageSprite.ts:

1. import { LanguageMgr } from "../common/LanguageMgr";

2. import { GlobalEvent } from "../model/EventType";

3.  

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

5.  

6. /**

7. * 多语言的图片初始化

8. */

9. @ccclass

10. @menu("多语言/sprite")

11. @requireComponent(cc.Sprite)

12. @disallowMultiple

13. export default class LanguageSprite extends cc.Component {

14.  

15. @property(cc.SpriteFrame)

16. en: cc.SpriteFrame = null;

17. @property(cc.SpriteFrame)

18. sc: cc.SpriteFrame = null;

19. @property(cc.SpriteFrame)

20. tc: cc.SpriteFrame = null;

21.  

22. start() {

23. cc.director.on(GlobalEvent.CHANGE_LANGUAGE, this.changeLanguage, this);

24. this.changeLanguage();

25. }

26.  

27. /**

28. * 监听切换语言事件

29. */

30. changeLanguage() {

31. if (LanguageMgr.getKind() == "EN") {

32. this.getComponent(cc.Sprite).spriteFrame = this.en;

33. } else if (LanguageMgr.getKind() == "TC") {

34. this.getComponent(cc.Sprite).spriteFrame = this.tc;

35. } else {

36. if (this.sc) {

37. this.getComponent(cc.Sprite).spriteFrame = this.sc;

38. } else {

39. this.getComponent(cc.Sprite).spriteFrame = this.tc;

40. }

41. }

42. }

43. }

 

LanguageLabel.ts:

1. import { GlobalEvent } from "../model/EventType";

2. import { LanguageMgr } from "../common/LanguageMgr";

3.  

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

5.  

6. @ccclass

7. @menu("多语言/label")

8. @requireComponent(cc.Label)

9. @disallowMultiple

10. export default class LanguageLabel extends cc.Component {

11.  
12.  

13. // LIFE-CYCLE CALLBACKS:

14.  

15. // onLoad () {}

16. @property

17. prefix: string = "";

18. @property

19. suffix: string = "";

20. @property

21. text: string = "";

22.  

23. start() {

24. cc.director.on(GlobalEvent.CHANGE_LANGUAGE, this.changeLanguage, this);

25. this.changeLanguage();

26. }

27.  

28. /**

29. * 监听切换语言事件

30. */

31. changeLanguage() {

32. var label = this.getComponent(cc.Label);

33. if (label) {

34. label.string = this.prefix + LanguageMgr.getText(this.text) + this.suffix;

35. } else {

36. console.log(this.node.name + " 挂载的节点没有label组件！");

37. }

38. }

39.  

40. // update (dt) {}

41. }

 

language.json:

1. {

2. "TEST_VERSION": {

3. "EN": "Test Version",

4. "TC": "測試版本",

5. "SC": "测试版本"

6. },

7. "SERVER_IS_DISCONNTECTED_LOGIN_IN_AGAIN": {

8. "EN": "The Server is Disconnected, Please Log In Again!",

9. "TC": "服務器已斷開鏈接，請重新登錄!",

10. "SC": "服务器已断开连接，请重新登录!"

11. },

12. "DAILY_TASK": {

13. "EN": "Daily Quest",

14. "TC": "每日任務!",

15. "SC": "每日任务!"

16. },

17. "OCCUPIED": {

18. "EN": "Occupied",

19. "TC": "使用中",

20. "SC": "使用中"

21. }

22. }

 

各个脚本的主要用法:

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

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

如果是静态的文本显示：

则将LanguageLabel挂载到相应节点。

LanguageSprite的使用方式和LanguageLabel一样。