从零开始的Cocos Creator编辑器插件开发
最近开始学习使用Cocos Creator，在研究的过程中发现，Cocos的插件开发有几个比较难入门的地方，因此在完成自己的学习后对学习的经历进行了整理，现在分享给大家。
本文为Cocos Creator编辑器插件的入门级教学，有经验的同学可以直接划走。
本教程基于的Cocos Creato版本为：3.3.2
2.x如果项目允许建议升级3.x 3D是真的香^_^
插件制作
在开发过程中，会遇到编辑器功能不够用的请， 此时需要对引擎进行扩展，这里有两种扩展方式
- 使用引擎开发runtime的插件，实现方式可以参考store内的(Shader Editor) ，适合没有编辑器开发经验的同学。
此方法的缺点是必须运行项目在浏览器内进行，不太适合配合引擎工作流的方式工作。 - 使用Vue + TypeScript进行开发，适合对网页编程比较熟悉的同学。
另外这种方式的优势是在编辑期也能看到效果，比较适合和美术同学配合时使用。
本文主要介绍下第二种方式。
安装
1. 装备工作：
需要安装Node.JS
在命令行内输入npm -v 可以查看Node.JS的版本。如果没有可以去官网下载
Node.JS官方地址： http://nodejs.cn/
image
2. 打开编辑器，在编辑器的菜单上选择 扩展->创建扩展
image
之后会弹出如下的面板：
image
我这边选择的是Vue3.x Panel 的方式创建。（不太清楚2.x和3.x的区别，所以选择了最新的）
输入自己插件名字后点击创建即可。
3. 查看插件：
-
在菜单上的【扩展->扩展管理器】内找到对应的插件，按照下面的图示打开文件夹，之后使用VS Code打开
插件查看
4. 工程结构
工程结构
图为插件的工程目录
可以看到，工程由声明文件和源代码部分组成，开发编辑器的主要工作集中在template和src这2个目录。
在最下方有一个package.json文件，如果学过js就知道package.json是js的项目定义文件，定义项目需要的模块以及项目的配置信息。
Package.json
图示内定义了插件的菜单和需要监听的编辑器的消息
Vue
图示为Vue的Html和源代码
编译插件
Cocos Creator的插件是Typescript了，编辑器不能直接使用，我们需要将插件编译为js，下面的过程演示了如何编辑js
注意需要安装tsc （即TypeScript）。
如果没有，在命令行内输入 npm install -g tsc 即可安装。
1. 在package.json内找到scripts这个字段
scripts
这两个脚本定义了插件是如何进行编译的。
在命令行内输入 npm run build 来进行编译
2.下载必要的模块
在VScode内打开命令行工具，输入 npm run build 之后可以看到有一些报错：
image
查看这些报错：
image
这些报错是因为缺少对应的module，我们使用 npm install 命令则可以把这些模块进行下载。
image
依次输入：
npm intall fs-extra
npm intall path
npm intall vue
都安装成功后再输入： npm run build
如果安装失败，则需要检查网络是否正常，Node.JS的安装情况.
image
图：输入npm install
编译成功后再编辑器内刷新插件即可被加载：
image
图：刷新插件
之后编辑器将不会报错：
image
消息监听
Cocos Creator 是多进程架构，因此渲染进程和主进程是分开的，如果要去渲染进行中获取某些信息，或者监听编辑器的行为，都需要使用事件系统。
Cocos Creator 采用的是进程间通信 inter-process communication（IPC）的方式进行的。
image
图示： Cocos Creator的多进程架构
我们来看一个场景加载完毕（ready）的例子：
1. 打开package.json
image
在message段内添加如下的代码：
image
"scene:ready": {
"methods": [
"initData"
]
}
之后打开main.ts:
image
在methods内添加如下的代码：
image
之后输入命令： npm run build
image
注意我们在修改了ts以后，并不会自动编译成js，因此我们对代码的修改都需要输入上述的命令
之后我们在编辑器内点击刷新插件的按钮
image
2.测试事件:
我们随便打开一个和当前场景不同的场景：
image
在场景完全打开之后命令行则会显示我们打印的语句：
image
证实插件已经加载成功，并正确的监听了场景加载完毕的事件。
数据查询
在插件内，我们经常需要获取某些组件，预制体或者资源的详情，这些没有办法直接从渲染进程获取的东西，我们可使用IPC的方式去进行查询。
1. 数据查询
这里来看一个查询场景信息的例子：
image
query-node-tree 事件可以后去到场景所有的节点的信息。
这里截图了部分信息：
image
如果你不清楚编辑器开放了那些事件，可以打开开发者->消息列表来进行消息录制：
image
image
图示展示了Cocos Creator目前开放的消息列表。
另外如果不清楚编辑器的消息广播流程，也可以使用 开发者->消息调试工具 菜单来进行录制：
2. 消息调试
image
图示为消息调试面板
打开该面板以后，点击录制按钮，之后对编辑器进行操作，则可以记录下编辑过程中编辑器派发的事件信息。
image
图示演示了场景保存过程中，编辑器所派发的事件列表。
