cocos creator 扩展编辑器以及定制项目构建流程

时间:2024-05-22 11:51:43

起因:因为游戏用cocos creator 打包app后包体比较大,顾策划想弄成分包下载,将打包后的res中个别较大的文件通过热更新的方式下载到游戏中,减少母包的大小。资源热更是通过官方提供文档:http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html?h=%E8%B5%84%E6%BA%90%E7%83%AD%E6%9B%B4%E6%96%B0 实现,但此时热更需要通过 node 执行很长一段命令才能把热更包打出来,顾查看creator 发现可以将这些功能集成到编辑器当中,实现自动化操作,一下文章记录一下 扩展编辑器和定制项目构建流程。

 

一:扩展编辑器

扩展编辑器需求如下: 

1:是否打包热更新包。

2:如果确定打包热更新包,勾选需要打包的文件夹(因为资源都是以文件夹的形式分类号,所以直接选择文件夹名来确定打包文件)。

这里本想直接修改creator 原来的构建发布面板,在原始面板中直接加入上述选项,但找了半天文档和代码没发现在哪里修改,所以自己按照文档中 http://docs.cocos.com/creator/manual/zh/extension/your-first-extension.html 规则自己生成了一个点击构建发布前的面板,一下为自定义面板的样子。

cocos creator 扩展编辑器以及定制项目构建流程

在官方文档中很全面的介绍了如何构建自定义的面板,这里我也就不啰嗦了,大家有需求的话多读读文档。这里只说一下我遇到的问题,和自己的总结。

 

自定义扩展包目录结构如下,需在packages下创建一个属于自己扩展包的单独文件,我的更新配置扩展包名为build

在build文件下有两个文件main.js package.json 和一个文件夹panel。

cocos creator 扩展编辑器以及定制项目构建流程

其中 package.json文件为此扩展包的配置文件

name // 扩展包的名字 (这里的名字和下放message 中 :前面的 build: 有关)

version // 扩展包的版本

main // 扩展包入口函数

main-menu (可选) // 在creator 中显示的按钮,这里的message 是点击按钮触发的消息

这里 build: open 消息会向主程序发送一条open的消息,我们在主窗口函数(main.js 中进行注册就可以接收到这个消息了)

 

panel (可选)// 扩展包对应的面板 (也就是我们 build: open  message打开的面板)

panel中的main为 面板的入口函数

type:为窗口类型

cocos creator 扩展编辑器以及定制项目构建流程

其中 main.js文件为扩展包主程序入口文件,主程序被扩展包正确载入后和扩展包卸载进行到最后阶段

分别会触发 load和unload方法, 除此之外,还包含一个messages方法,在messages中会监听发送给主程序的消息

如下:

cocos creator 扩展编辑器以及定制项目构建流程

注:我自己的load 和unload方法是用来监听cocos creator 构建发布后的回调,在回调的方法onBeforebuildFinish中通过执行node的方法实现自动打包逻辑,因为项目各异,这里就不发相应代码了,如果各位需要定制发布模板 可以参照文档:http://docs.cocos.com/creator/manual/zh/publish/custom-project-build-template.html?h=before-change-files%27

接着上面的:这里messages 为注册主程序消息 还记得我们在package.json 中有一个main-menu字段,这里定义的按钮会在

creator的上方按钮区域显示,点击打开后会触发  build: open (build为扩展包名,open为消息名)消息。这时主程序中 messages - open 函数会被回调 在这里我们通过编辑器方法打开build的面板

cocos creator 扩展编辑器以及定制项目构建流程

注:这个被打开的面板就是我们文章一开始提到的面板了,因为目前http://docs.cocos.com/creator/manual/zh/extension/using-ui-kit.html 文档大部分还在编辑中,creator 应该是对css 进行了二次封装,我本人也是通过他之前提供的例子自己瞎弄了一下,如果有需求,大家可以根据 http://docs.cocos.com/creator/manual/zh/extension/extends-panel.html 这个例子文档修改一下自己的面板。

面板被打开的时候会调用panel的入口函数 panel/index.js,我看官方提供的creator-luacpp-support工具是将css和html都分开了,我是直接都写到了一起,这里的逻辑也不难,点击文件夹名点击确定后,会通过 Editor.Ipc.sendToMain('build:updateList', updateArray); 方法把 需要打包的文件夹名发送给主程序(触发主程序messages-updateList方法),然后主程序做记录,这样主程序触发构建发布后回调方法onBeforebuildFinish的时候讲之前存储的打包列表通过命令行的形式传送给打包脚本 进行自动打包生成热更文件。

 

以上便是最近研究的cocos creator 扩展编辑器以及定制项目构建流程的分享,哪里有说的不对或表达的不明白的地方,还请大家多多指出,多泄。~