Cocos Creator｜定制H5游戏首页loading界面

感谢『论坛 ID：明道若昧』友情提供

Cocos Creator从1.0版本发布到现在也有一年多了，按理说一些常见的问题网上都有解决方案，例如"如何自定义首页加载进度条界面"这种普遍需求，应该所有人都会遇到的，因此也有相对完善的解决方案。我在网上搜了一些文章，虽然也有讨论的帖子，但是方案都不尽人意。因此只能再次自己动手丰衣足食了，在此我总结一下我的思路和策略，分享给大家，希望后来的人少走弯路，另外这里的方案只针对H5游戏发布，其他平台可以借鉴思路自己实现。

首页加载的loading界面，官网文档尚未提及，我是通过构建发布后的代码进行分析。我的另一篇文章也曾讲过Cocos Creator加载策略，如果有兴趣下回会在官微放出参考。其实Cocos的加载策略很简单，main.js作为加载逻辑和style-mobile.css实现加载UI，但是比较坑的是这两个文件并没有通过工程文件暴露出来，你只能在Cocos Creator的安装目录里面扒出源码，网上有些解决方案是直接修改这两个源文件，可以达到目的，但有两个弊端：

1. 不利于Cocos Creator更新，每次升级新版本，都需要重新修改一次

2. 不利于团队协作，团队每个人都需要修改一遍Cocos Creator安装文件

这个方案一看就不靠谱，其实要彻底解决这个问题很简单，把这两个文件暴露到工程里面就行了，但由于还没想好这个文件如何兼容不同版本的Creator，所以引擎组还在寻求最佳解决方案。

我的方案就是做开发组还没完成的事情，把这两个文件暴露到工程上。虽然不尽完美，但能避免上面两个问题。这个方案能实现以下功能：

1. 可以在项目工程下面完美自定义loading界面

2. 能动态把自定义的loading界面代码注入到构建发布后的最终线上代码

3. 能在不修改源码的条件下，通过覆盖代码的方式实现自己的首页加载界面

这个方案好处在于即使Cocos Creator升级，也不影响工程的正常工作和发布。不完美的是，如果Cocos Creator开发组把加载逻辑全改了，还是需要重新调整代码。不过概率非常小，可以忽略不计。就算出现了，调整起来也相对便捷。

具体方案实现如下：

1. 在工程目录还原最终首页加载代码。在工程根目录新建html文件夹，手动把build/web-mobile/源文件里面的style-mobile.css，main.js，splash.png复制到html文件夹，新建loading.html文件，body标签的结构保持跟最终构建生成的index.html结构一致。

2. 定制自己的UI和加载逻辑。新建loading.css，新建loading.js，在loading.css实现新的加载界面UI，在loading.js上实现新增的加载逻辑，如果不需要，loading.js可以忽略不加。

3. 通过gulp等构建工具，动态把loading.css合并到build/web-mobile/style-mobile.css，把loading.js合并到build/web-mobile/main.js。

步骤1是为了方便开发的UI能正常覆盖原有的loading界面。如果Cocos Creator升级，并对相关的加载逻辑做了大幅度更新，影响最终的覆盖，可以手动同步一下style-mobile.css，main.js的代码到最新。

gulp安装请访问：https://gulpjs.com/
nodejs安装请访问：http://nodejs.org/
安装gulp相关插件：gulp-concat

gulpfile文件代码：

由于我没有对main.js修改的需求，所以这里只做了css的实现，有兴趣的同学可以自己实现JS的自定义逻辑。思路简单，但实用。

完整代码还可以戳「阅读原文」访问GitHub。示例包含Cocos Creator图片压缩优化、减少首次文件请求、html压缩、动态更新定制loading图等功能哦。