Cocos Creator学习笔记1——LabelLocalized优化

概述Creator有个本地化的示例项目i18n-example，LabelLocazlized组件可以根据当前语言读取相应的文字。可是使用过程中发现一个很不方便的地方是：用到的文字往往在我们做界面的时候才定下来，根本没写到对应语言文件（如zh.js）中。意味着我们要来回切换代码编辑器、Creator编辑器才能新加、修改文字。很不爽，得优化下。 需求 我们希望是直接在Creator编辑器中新加字段、修改

Creator有个本地化的示例项目i18n-example，LabelLocazlized组件可以根据当前语言读取相应的文字。可是使用过程中发现一个很不方便的地方是：用到的文字往往在我们做界面的时候才定下来，根本没写到对应语言文件（如zh.Js）中。意味着我们要来回切换代码编辑器、Creator编辑器才能新加、修改文字。很不爽，得优化下。

需求

我们希望是直接在Creator编辑器中新加字段、修改文本，然后直接写到对应的语言文件（zh.Js）中。

解决方案 文件结构 i18n/LabelLocalized.Js本地化的组件，主要是修改string字段的get方法，从语言文件中读取相应字段(textKey)的文本。 i18n/polyglot.Js一个工具类，将语言文件内容暂存，并提供一些格式化文本的方法。 i18n/i18n.Js前面两个的中间层，只是传递了一下数据 写入文件

主要的问题是如何在编辑器中写入到本地文件。Creator是使用浏览器内核，同时支持nodeJs。那没啥了，直接百度大法：nodeJs如何写入文件。找出一个fs的库，在i18n.Js中加入const Fs = require('fs')。保存，好的编译成功，说明是有这个库的。是时候表现一下复制粘帖的功力了。

//i18n.Jsconst polyglot = require('polyglot');//language修改为var方便设值var language = require('zh'); const Fs = require("fs");let polyglot = new polyglot({phrases: language});module.exports = {    init (language) {        let data = require(language);        polyglot.replace(data);    },t (key,opt) {        return polyglot.t(key,opt);    },save (key,value) {        //修改require缓存的值        language[key] = value;        polyglot.replace(language);        //写入文件        let text = "module.exports = " + JsON.stringify(language,null,"\t");        Fs.writefile("YOUR_PROJECT_PATH/assets/i18n/data/zh.Js",text);    }};

现在是路径是写死的，协作开发显然是不行的。继续百度NodeJs 文件路径，得到以下几种写法：

cc.log("__dir@R_404_6889@:",__dir@R_404_6889@);cc.log("__file@R_404_6889@:",__file@R_404_6889@);cc.log("process.cwd():",process.cwd());

加进去一输出，顿时心凉了，说好的绝对路径呢。

赶紧喝口水冷静一下，我只是要拿到编辑器打开的项目路径，这东西理论上它编辑器自己的插件应该也会经常用到，肯定有某个地方保存着。翻翻插件开发教程，好多方法都是在Editor中，啧啧，看这名字就有希望。我马上机智的想起了直播视频中有个小哥用编辑器>开发者工具查看方法名的画面。果断照着试试，打开开发者工具，输入Editor。点开一路找，好的，抓到一只importPath libraryPath。感觉不对，怎么也得有个ProjectPath吧。点开继续找找，没错，就是你了：Editor.projectInfo.path。修改一下

Fs.writefile("YOUR_PROJECT_PATH/assets/i18n/data/zh.Js",text); —>

let path = Editor.projectInfo.path + "/assets/i18n/data/" + cc.sys.language + ".Js";Fs.writefile(path,text);

修改组件

保存写入文件有了，是时候修改组件了。先想一下编辑器上怎么 *** 作更方便。个人觉得是以下 *** 作流程更方便：

创建组件，直接修改文本，修改完成填写TextKey时保存到文件 有TextKey时修改文本后保存到文件 为了防止拼写错误将错误的字段写入文件，应该有个删除字段的方法。可以判断文本是空的时候视为删除字段

参考组件相关教程，修改代码：

//LabelLocalized.Jsconst i18n = require('i18n');cc.Class({    extends: cc.Label,propertIEs: {        textKey: {            default: '',notify: function () {                //设置string                let text = i18n.t(this.textKey);                //相同说明没找到字段                if (text !== this.textKey) {                    this.string = text;                }                //写入文件                if (this.textKey !== "") {                    if (this.string !== "") {                        i18n.save(this.textKey,this.string);                    } else {                        //string为空视为删除字段                        i18n.save(this.textKey,null);                    }                }            }        },string: {            overrIDe: true,default: '',notify: function () {                //textKey有值,修改string后写入文件                if (this.textKey !== "") {                    if (this.string !== "") {                        i18n.save(this.textKey,null);                    }                }                //From engine/cocos/core/components/cclabel.Js                if (this._sgNode) {                    if (CC_EDITOR) {                        if(this.overflow === cc.Label.Overflow.SHRINK) {                            this.FontSize = this._userdefinedFontSize;                        }                        this._debouncedUpdateSgNodeString();                    } else {                        this._updateSgNodeString();                    }                }            }        },}});

保存、编译。添加组件，修改文本，修改textKey，再打开zh.Js检查。诶呦我去，这是每输入TextKey一个字符都保存了一下啊。
仔细想了一下，考虑用定时器，组件的schedule编辑器里不会运行，只好用setTimeOut了，修改后：

//LabelLocalized.Jsconst i18n = require('i18n');var saveTimer = null;cc.Class({    extends: cc.Label,notify: function () {                //设置string                let text = i18n.t(this.textKey);                //相同说明没找到字段                if (text !== this.textKey) {                    this.string = text;                }                if (saveTimer) {                    clearTimeout(saveTimer);                }                //延时写入，时间可以自己实验调整，太小的话会保存没输完时候的值                saveTimer = setTimeout(function () {                    saveTimer = null;                    //写入文件                    if (this.textKey !== "") {                        if (this.string !== "") {                            i18n.save(this.textKey,this.string);                        } else {                            //string为空视为删除字段                            i18n.save(this.textKey,null);                        }                    }                }.bind(this),5000);            }        },string: {            overrIDe: true,notify: function () {                if (saveTimer) {                    clearTimeout(saveTimer);                }                //延时写入，防止文件读写太过频繁                saveTimer = setTimeout(function () {                    saveTimer = null;                    //textKey有值时修改string写入文件                    if (this.textKey !== "") {                        if (this.string !== "") {                            i18n.save(this.textKey,1000);                //From engine/cocos/core/components/cclabel.Js                if (this._sgNode) {                    if (CC_EDITOR) {                        if(this.overflow === cc.Label.Overflow.SHRINK) {                            this.FontSize = this._userdefinedFontSize;                        }                        this._debouncedUpdateSgNodeString();                    } else {                        this._updateSgNodeString();                    }                }            }        },}});

基本功能已经实现，但是因为string的get方法没重写，切换语言的话文本还是用的之前设置的，加个__preload：

__preload: function () {        this._super();        //设置string        let text = i18n.t(this.textKey);        //相同说明没找到字段        if (text !== this.textKey) {            this.string = text;        }    }

最后再加上CC_EDITOR判断，完整版本附件： Cocos Creator LabelLocalized优化

总结

以上是内存溢出为你收集整理的Cocos Creator学习笔记1——LabelLocalized优化全部内容，希望文章能够帮你解决Cocos Creator学习笔记1——LabelLocalized优化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。