Cocos创建编辑器扩展的简单介绍

（一）

创建一个扩展的入口，点击之后会弹出面板，我目前只尝试了第一个模板（空白），在里面写下扩展名（扩展名不能有大写字母），作者等等信息之后      点击创建扩展

（二）

创建之后在项目的根目录下自动给你创建一个文件夹，里面的  文件夹名是你上面创建扩展名的文件夹  就保存着扩展的文件。

（三）

官方介绍链接扩展编辑器 | Cocos Creator

使用VSCode打开此文件夹，以下是文件夹结构

主要的文件是

main.js 里面写执行的方法

i18n 文件夹主要是多语言相关，里面是英文和中文的json文件

package.json

{
    "$schema": "./@types/schema/package/index.json",
    "package_version": 2,
    "name": "ablanktemplate",      //扩展名称
    "version": "1.0.0",
    "author": "f",                 //作者名
    "editor": ">=3.8.3",
    "scripts": {
        "preinstall": "node ./scripts/preinstall.js",
        "build": "tsc",
        "watch": "tsc -w"
    },
    "description": "i18n:ablanktemplate.description",   //描述 i18n:是多语言标识
    "main": "./dist/main.js",           //主函数，对应main.js
    "devDependencies": {
        "@cocos/creator-types": "^3.8.3",
        "@types/node": "^18.17.1",
        "typescript": "^4.3.4"
    },
    "contributions": {
        "menu": [   //按钮
            {
                "path": "i18n:ablanktemplate",  //按钮层级
                "label": "i18n:ablanktemplate.show_log",  //按钮显示文字
                "message": "show-log"  //按钮绑定方法，下面
            }
        ],
        "messages": {   
            "show-log": {    //main.js里绑定方法
                "methods": [
                    "showLog"
                ]
            }
        }
    }
}

（四） 

创建好后在打开扩展，点击扩展管理器，在弹出面板里点击“已安装扩展”

如果没显示就点击一下上面的刷新扩展按钮 

 

打开按钮如上图就加载了该扩展。加载之后 效果如下图

（五） 修改方法

打开main.js文件

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.unload = exports.load = exports.methods = void 0;
/**
 * @en Registration method for the main process of Extension
 * @zh 为扩展的主进程的注册方法
 */
exports.methods = {
    /**
     * @en A method that can be triggered by message
     * @zh 通过 message 触发的方法
     */
    showLog() {
        console.log('Hello World');
    },
};
/**
 * @en Method Triggered on Extension Startup
 * @zh 扩展启动时触发的方法
 */
function load() { }
exports.load = load;
/**
 * @en Method Triggered on Extension Uninstallation
 * @zh 卸载扩展时触发的方法
 */
function unload() { }
exports.unload = unload;

 load和unload方法会在加载和卸载时候调用

 showLog() {

        console.log('Hello World');

    },

就是在package.json里面按钮绑定的方法，点击那个按钮时候就会调用这个方法

（六）增加按钮

打开package.json 在contributions增加，根据自己命名即可

"contributions": {
        "menu": [
            {
                "path": "i18n:ablanktemplate",
                "label": "i18n:ablanktemplate.show_log",
                "message": "show-log"
            },
            {
                "path": "i18n:ablanktemplate",
                "label": "000",
                "message": "show-log1"
            }
        ],
        "messages": {
            "show-log": {
                "methods": [
                    "showLog"
                ]
            },
            "show-log1": {
                "methods": [
                    "showLog1"
                ]
            }
        }

绑定方法之后打开main.js，添加方法即可

exports.methods = {
    /**
     * @en A method that can be triggered by message
     * @zh 通过 message 触发的方法
     */
    showLog() {
        console.log('Hello World');
    },
    showLog1()
    {
        
    }
};

回到Cocos中，可以重新卸载加载一次扩展（在扩展管理器）就可以应用上刚才的修改了（不要重名，不然会不显示）

ps:写的比较乱，不懂得可以评论区问我，不对的地方请指正，感谢 

原文地址：https://blog.csdn.net/weixin_51565051/article/details/144406783

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！