Laya编辑器二次开发（一）找到需要操作的文件

写在前面：

本系列教程非系统性的介绍Laya编辑器的结构及组织方式，只是通过分享一些二次开发功能的实现过程，抛砖引玉，给大家

提供编辑器二次开发的思路。

 

准备内容：

1、LayaAir IDE

项目中实际使用的编辑器版本为LayaAir IDE 2.0.0，

教程中使用的编辑器版本为LayaAir IDE 2.11.0beta1，

比较大的版本跨度验证了之后的开发方法没有版本问题需要注意。

2、sublime、vscode等可以全局快速查找内容的编辑器

打开Laya编辑器目录如下：

 

从0开始进行编辑器二次开发，首先分析一下我们需要的内容：

1、知道在哪个文件进行开发

2、知道目标功能在代码的哪一部分进行修改

 

首先解决第一个问题，找到我们需要修改的文件。

 

在laya菜单帮助中，有一个开发人员工具，点击后会展开一个类似浏览器中的开发者工具

 

 

切到控制台选项卡，可以看到laya编辑器输出的日志及输出日志的代码位置。我们清空掉日志，在编辑器中随便进行一些操作，查看输出。

 

 

最多的日志内容为“changeFrameRate: slow”，点击editor.max.js文件，定位到具体行，打断点。切回到编辑器

随便进行点击操作，触发断点，我们查看这时候的堆栈内容。

 

 

简单的浏览堆栈内容，可以发现laya.js负责事件的捕获和派发，界面相关内容主要在layabuilder.max.js文件进行处理。

到此可以猜测，编辑器界面相关内容的处理主要位于layabuilder.max.js文件中。

简单验证一下猜测。打开layabuilder.max.js文件，全局查找“时间轴”关键字，会找到一处TimeLinePanelUI.uiView的内容。

 

 

使用过Laya编辑器的看到这个肯定不陌生，laya的界面描述文件。我们修改“时间轴”描述为“时间轴Test”，然后刷新编辑器查看

效果。刷新编辑器可以使用菜单中 文件->刷新编辑器 快捷入口。

 

 

随便打开一个场景文件，可以看到修改生效了。

 

 

至此，我们找到了二次开发的主要操作文件layabuilder.max.js，可以基于需求开始进行下一步操作了。