最近开始学习使用Cocos Creator，在研究的过程中发现，Cocos的插件开发有几个比较难入门的地方，因此在完成自己的学习后对学习的经历进行了整理，现在分享给大家。

本文为Cocos Creator编辑器插件的入门级教学，有经验的同学可以直接划走。

本教程基于的Cocos Creato版本为：3.3.2

2.x如果项目允许建议升级3.x 3D是真的香^_^

插件制作

在开发过程中，会遇到编辑器功能不够用的请， 此时需要对引擎进行扩展，这里有两种扩展方式

1. 使用引擎开发runtime的插件，实现方式可以参考store内的(Shader Editor) ，适合没有编辑器开发经验的同学。
   此方法的缺点是必须运行项目在浏览器内进行，不太适合配合引擎工作流的方式工作。
2. 使用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. 查看插件：

1. 在菜单上的【扩展->扩展管理器】内找到对应的插件，按照下面的图示打开文件夹，之后使用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

图示演示了场景保存过程中，编辑器所派发的事件列表。