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

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

首页加载的loading界面，官网的文档并无说起，我是经过构建发布后的代码分析的。个人另外一篇文章《Cocos Creator—优化首页打开速度》也讲过Cocos Creator加载的策略，有兴趣能够参考。其实Cocos的加载策略很简单，main.js做为加载逻辑和style-mobile.css实现加载ui，可是比较坑的是这两个文件并无经过工程文件暴露出来，你只能在Cocos Creator的安装目录里面扒出源码，网上有些解决方案是直接修改这两个源文件，是能够达到目的，但有两个弊端：

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

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

这个方案一看就不靠谱，其实要完全解决这个问题很简单，让Cocos 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文件代码：

gulp.task('concat-css', function(cb) {
  gulp.src(['./build/web-mobile/style-mobile.css', './html/loading.css'])
  .pipe(concat('style-mobile.css'))
  .pipe(gulp.dest('./build/web-mobile/')
  .on('end', cb));
});

因为我没有对main.js修改的需求，因此我这里只作了css的实现，有兴趣的同窗能够本身实现js的自定义逻辑。其实思路很简单，但挺实用的。

完整代码能够访问：https://github.com/babyzone20...，这个示例包含了Cocos Creator图片压缩优化，减小首次文件请求，html压缩，动态更新定制loading图等功能哦。

ps：

咱们团队正在招聘优秀的H5游戏开发工程师，若是你符合如下条件：

1. 白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验

2. 热爱游戏，但愿快速成长，不甘平庸

请联系我吧：babyzone2004@qq.com

更多信息请戳：https://www.lagou.com/jobs/30...