需求
游戏初始进入时，由于需要先加载场景和部分资源，会有等待时间，默认的是cocos creator自带的插屏，该插屏自定义功能较差，只能替换logo或关闭插屏（设置插屏显示时间为0），好的用户体验应该是等待出现加载条减少用户不耐烦感。
实现
在2.x的版本中，cocos creator 的启动页默认就是进度条加载的样式，以前要做这类功能的时候只需要在文件夹下创建build-template 创建对应的html模板，修改样式即可在打包后调整包的部分内容即可实现。 在3.x 中， 打包后 默认的进度条加载相关功能被去除，如果需要自定义启动页的话，需要参考2.x的实现逻辑，在3.x的build和build-temolate做对应修改，下面直接讲3.6.x的实现，其他版本差不多。
1、首先在编译器中创建对应打包文件模板，也可手动创建,下面我们先配置几个文件。
文件路径：项目/build-template/web-mobile/index.ejs（参考html）
文件路径：项目/build-template/web-mobile/customize/index.js（参考js）
文件路径：项目/build-template/web-mobile/splash.css（参考css）
基于上面代码，我们在引擎加载前分别预置了我们自己的css和js，js分别预置了3个全局变量。 一个等待被初始化接收进度变化的onProgress变量 一个等待被调用的初始化场景方法onGameStarted 一个等待被调用的进度变化修改进度条样式方法setLoadingDisplay
找到application.js ,如果配置了MD5就是 application.81eae.js 类似文件，接下来在该文件替换两个地方。 在cc.game.init 的then() 回调 中，删除默认代码，该为调用我们自己 onGameStarted方法，实例： （原）
value: function start() {
return cc.game.init({
debugMode: false ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
settingsPath: this.settingsPath,
overrideSettings: {
// assets: {
// preloadBundles: [{ bundle: 'main', version: 'xxx' }],
// }
profiling: {
showFPS: this.showFPS
}
}
}).then(function () {
// return cc.game.run(); 注释这段默认代码
//由我们控制加载场景
cc.game.onStart = onGameStarted.bind(null, cc);//我们自己的
onGameStarted(cc)//我们自己的
});
}
复制代码在应用初始化的时候我们在插入 setLoadingDisplay方法调用
_createClass(Application, [{
key: "init",
value: function init(engine) {
cc = engine;
setLoadingDisplay() //在默认代码插入我们这行代码
cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this));
cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this));
}
}
复制代码完事，其实也就是说我们打包后只改了两行代码就可以正常展示我们的自定义启动页，如果不用在意浏览器缓存把MD5文件后缀去掉的话，可以直接把application.js定义在/build-template/web-mobile 中，这样下次我们就不用每次打包后都去改application.js。
更多参考：