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

ops/2024/12/12 20:30:55/

（一）

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

（二）

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

（三）

官方介绍链接扩展编辑器 | 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:写的比较乱，不懂得可以评论区问我，不对的地方请指正，感谢