【cocos creator】【TS】多语言插件,支持文字和图片,可在编辑器和代码里动态切换语言,含demo

本文介绍了一个Cocos2d-x 2.4.4版本的多语言插件,支持在编辑器和代码中动态切换文本,包括中文和英文。它包含一个demo,需挂载Label或图片节点,并提供了下载链接和使用方法,如设置语言、文本和图片资源。

cocos版本:2.4.4
多语言插件,支持文字和图片,可在编辑器和代码里动态切换语言,含demo
挂载节点需要有label或图片
在这里插入图片描述

在这里插入图片描述

demo下载:

v1.0.0需要图集:
https://download.csdn.net/download/K86338236/16714329
v2.0.0支持代码获取多语言文本,富文本,传参数,支持散图(图片只能运行切换:
https://download.csdn.net/download/K86338236/87546071

/**
 * 多语言插件
 */


const { ccclass, property, menu, executeInEditMode } = cc._decorator;
window["global"] = {
    globalLangId: 0,
};
/**语言类型 */
var LANG = {
    /**中文 */
    ZH: "ZH",

    /**英文 */
    EN: "EN",
}

var LANG_ID = cc.Enum({
    [LANG.ZH]: 0,
    [LANG.EN]: 1,
})

let LangType = LANG_ID;
@ccclass
@menu("扩展/多语言")
@executeInEditMode
export default class Multilingual extends cc.Component {

    @property()
    private _LangKey: any = "";

    @property({
        type: cc.String,
        tooltip: "语言key,例:COMMON.START",
    })
    get LangKey() {
        return this._LangKey;
    }
    set LangKey(value) {
        if (!cc.isValid(value)) {
            return;
        }
        this._LangKey = value;
        this.langChange();
    }

    @property()
    private _langId: any = LANG_ID.ZH;

    @property({
        type: LANG_ID,
    })
    get LangId() {
        return this._langId;
    }
    set LangId(value) {
        if (!cc.isValid(value)) {
            return;
        }
        this._langId = value;
        this.langChange();
    }



    label: cc.Label = null;


    sprite: cc.Sprite = null;
    private _sfName: string;

    params: any = [];

    onLoad() {
        this.label = this.node.getComponent(cc.Label);
        this.sprite = this.node.getComponent(cc.Sprite);

        if (this.sprite && this.sprite.spriteFrame) {
            this._sfName = this.sprite.spriteFrame.name;
        }
        this.langChange();
        this.node.on("LANG_CHANGE", this.onLangChange, this);
    }

    onLangChange() {
        this.LangId = window["global"].globalLangId;
        this.langChange();
    }

    langChange() {
        let changeText = (json) => {
            if (!this.label) {
                return;
            }
            if (this._LangKey.indexOf(".") > 0) {
                let keys = this._LangKey.split(".");
                while (keys.length) {
                    json = json[keys.shift()];
                    if (json == undefined) {
                        break;
                    }
                }
                let params = JSON.parse(JSON.stringify(this.params));
                if (CC_EDITOR) {
                    for (let i = 0; i < params.length; i++) {
                        if (!params[i]) {
                            params[i] = "{" + (i + 1) + "}";
                        }
                    }
                }
                if (cc.isValid(json)) {
                    params.unshift(json)
                } else {
                    params.unshift(this._LangKey);
                }

                if (this.label) {
                    this.label.string = "" + params || "";
                    // @ts-ignore
                    if (this.label.string == "" && this.label._forceUpdateRenderData) {
                        // @ts-ignore
                        this.label._forceUpdateRenderData(true);
                    }
                }
            }
        }

        let setSprite = (type) => {
            if (!this._sfName) {
                return;
            }
            //Tool.Instance.setEditImg(this.node, this._sfName, "img_" + type);
            this.setEditImg(this.node, this._sfName, "img_" + type);
        }

        // @ts-ignore
        setSprite(LangType[this._langId]);

        // LoadTool.Instance.loadJson("lang/L" + LangType[this._langId] + ".json", (res) => {
        //     changeText(res);
        // });
        this.loadJson("lang/L" + LangType[this._langId] + ".json", (res) => {
            changeText(res);
        });

        /*
        json格式:
        LEN.json:
        {
            "COMMON": {
                "START": "START"
            }
        }
        LZH.json:
        {
            "COMMON": {
                "START": "开始"
            }
        }
        */
    }

    resetLangKey(value) {
        this._LangKey = value;
        this.langChange();
    }

    /*************************工具类**************** */

    /** 
     * 在编辑器设置图片
     */
    setEditImg(node, name, atlasName) {
        //打印加载的纹理图集 
        if (!cc.isValid(node)) {
            console.error("SpriteAtlas: setSpriteFrame error, node is invalid");
            return;
        }
        if (CC_EDITOR) {
            this.loadEditorRes("resources/language/" + atlasName + ".plist/" + name + ".png", (res) => {
                this._setSpriteFrame(node, res, name, atlasName);
            });
        }
        else {
            this.loadRes("language/" + atlasName + ".plist", cc.SpriteAtlas, (res: cc.SpriteAtlas) => {
                this._setSpriteFrame(node, res.getSpriteFrame(name), name, atlasName);
            });
        }
    }

    //设置图片
    _setSpriteFrame(node, res, name?, atlasName?) {
        var frame = res;
        if (!cc.isValid(res)) {
            console.error(atlasName + ":" + name + "  纹理不存在");
            return;
        }
        if (!cc.isValid(node)) {
            return;
        }
        var sprite = node.getComponent(cc.Sprite);
        if (!sprite) node.addComponent(cc.Sprite);
        if (!sprite || sprite.spriteFrame == frame || !cc.isValid(frame)) {
            return;
        }
        sprite.spriteFrame = frame;
    }

    /** 
     * 加载资源
     * @param {*} url 路径,编辑器assets下的目录结构,带后缀名
     * @param {*} callback 回调
     * LoadTool.Instance.loadEditorRes("resources/language/img_EN.png")
     */
    loadEditorRes(url, callback) {
        if (!CC_EDITOR) return;
        var uuid = Editor.assetdb.remote.urlToUuid("db://assets/" + url);
        if (uuid) {
            cc.assetManager.loadAny(uuid, function (err, asset) {
                if (!err) {
                    if (callback) callback(asset);
                }
            });
        } else {
            console.error(url + " not found");
            Editor.error(url + " not found");
        }
    }

    loadJson(url, success?, failure?) {
        this.loadRes("json/" + url, cc.JsonAsset, (res) => {
            if (success) success(res.json)
        }, failure);
    }
    //加载resources下文件
    loadRes(url, type, completeCallback?, progressCallback?) {
        var extname = cc.path.extname(url);
        if (extname) {
            url = url.slice(0, - extname.length);
        }
        cc.resources.load(url, type, progressCallback, (err, asset: cc.Asset) => {
            if (err) {
                console.error("加载失败", url, "\n", err);
                return;
            }
            completeCallback(asset);
        });
    }

    onDestroy() {
        this.node.off("LANG_CHANGE", this.onLangChange, this);
    }
}


评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烧仙草奶茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值